/* ==========================================================================
   shared/frames/frames.css — the customer's frames, v2 (Docs/EDITOR_ARCH.md)
   Ported verbatim from the design of record: Combined v2 50-frames.css
   (base + FAQ + the rule/lit surface styles). Frames are styled ONLY by the
   --f-* family tokens that shared/frames/families.js sets on .fr.
   RULE (the reason Edit ≡ Try holds): nothing here may depend on [data-mode]
   except outlines, box-shadows, cursors, placeholders and pseudo-elements that
   are absolutely positioned.
   Add a builder by porting its section from 50-frames.css, unchanged.
   ========================================================================== */
/* the few Websonance values the design's CSS borrows; a frame's own document has none */
.fr{--d-1:120ms;--d-4:420ms;--ease:cubic-bezier(.2,.8,.25,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --font-u:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--font-d:Inter,ui-sans-serif,system-ui,sans-serif}
@property --f-bg{syntax:"<color>";inherits:true;initial-value:#0A0A0E}
@property --f-surface{syntax:"<color>";inherits:true;initial-value:#131318}
@property --f-raised{syntax:"<color>";inherits:true;initial-value:#1B1B23}
@property --f-text{syntax:"<color>";inherits:true;initial-value:#F2F1F7}
@property --f-muted{syntax:"<color>";inherits:true;initial-value:#9B98A8}
@property --f-accent{syntax:"<color>";inherits:true;initial-value:#8B5CF6}
@property --f-accent-light{syntax:"<color>";inherits:true;initial-value:#B794F6}

.fr{
  --edit-ring:#A597F2; --edit-hover:rgba(165,151,242,.5); --edit-sel:rgba(165,151,242,.2); --edit-caret:#B4A8F5;
  /* round controls (symbol, avatars, arrows) become squares when the family's large radius is 0 */
  --f-round:clamp(0px,calc(var(--f-r-lg,12px) * 100),50%);
  --f-pill:clamp(0px,calc(var(--f-r-lg,12px) * 100),999px);
  container-type:inline-size;position:relative;display:block;text-align:left;
  font-family:var(--f-font,var(--font-u));font-weight:var(--f-wt,400);color:var(--f-text);
  background-color:var(--f-bg);background-image:var(--f-texture,none);
  border-radius:var(--f-r-lg,var(--f-radius));
  -webkit-font-smoothing:antialiased;box-shadow:inset 0 0 0 var(--f-line-w,1px) var(--f-line);
  transition:--f-bg var(--d-4) var(--ease),--f-surface var(--d-4) var(--ease),--f-raised var(--d-4) var(--ease),--f-text var(--d-4) var(--ease),--f-muted var(--d-4) var(--ease),--f-accent var(--d-4) var(--ease),--f-accent-light var(--d-4) var(--ease),border-radius var(--d-4) var(--ease);
}
.fr[data-light]{--edit-ring:#6A5BD0;--edit-hover:rgba(106,91,208,.45);--edit-sel:rgba(106,91,208,.16);--edit-caret:#6A5BD0}
.fr[data-surface=tone],.fr[data-surface=soft]{box-shadow:none}
.fr[data-surface=line]{box-shadow:inset 0 1px 0 var(--f-line),inset 0 -1px 0 var(--f-line)}
.fr *{box-sizing:border-box}
.fr button,.fr input{font-family:inherit}
.fr svg{fill:none;stroke:currentColor;stroke-width:var(--f-icon-w,1.9);stroke-linecap:var(--f-icon-cap,round);stroke-linejoin:round}
.fr .fr-in{padding:calc(40px * var(--f-gap,1)) calc(44px * var(--f-gap,1)) calc(44px * var(--f-gap,1))}
.fr:focus-visible,.fr :focus-visible{outline:2px solid var(--f-accent-light);outline-offset:2px}
.fr[data-light] :focus-visible{outline-color:var(--f-accent)}

/* ---- editable text: identical box in every mode ---- */
.fr [data-k]{white-space:pre-wrap;overflow-wrap:break-word;-webkit-line-break:after-white-space;line-break:auto;min-height:1lh;border-radius:3px;outline:1.5px solid transparent;outline-offset:4px;transition:outline-color var(--d-1) var(--ease)}
/* an empty field keeps one line in every mode: an empty contenteditable gets a line for its caret, so the same
   field in Try gets one too (a zero-width space), or a padded field would be a line shorter there (parity-test) */
.fr [data-k]:empty::after{content:"\200B"}
.fr[data-mode=edit] [data-k][contenteditable]{cursor:text;caret-color:var(--edit-caret)}
.fr[data-mode=edit] [data-k][contenteditable]:hover{outline-color:var(--edit-hover)}
.fr[data-mode=edit] [data-k][contenteditable]:focus{outline:1.5px solid var(--edit-ring);outline-offset:4px}
.fr[data-mode=edit] [data-k][contenteditable]:empty::before{content:attr(data-ph);color:var(--f-muted);opacity:.85;pointer-events:none}
.fr[data-mode=edit] ::selection{background:var(--edit-sel);background:color-mix(in srgb,var(--edit-ring) 34%,transparent)}
.fr[data-mode=edit] .fr-item.is-sel [data-k]:focus{outline-color:transparent}
.fr[data-mode=edit] .fr-item.is-sel [data-k]:hover:not(:focus){outline-color:var(--edit-hover)}
/* selection ring = box-shadow over the item's own inset line (never a border) */
.fr[data-mode=edit] .fq-item.is-sel,.fr[data-mode=edit] .cg-card.is-sel{box-shadow:inset 0 0 0 1px var(--f-line),0 0 0 2px var(--edit-ring),0 0 0 6px color-mix(in srgb,var(--edit-ring) 18%,transparent)}
/* round 6: the other builders' items and single parts take the same 2px violet ring as an OUTLINE (their own
   box-shadows stay theirs). Outlines never move a box, so Edit ≡ Try holds. */
.fr[data-mode=edit] :is(.ct,.fm-f,.nv-it,[data-part]).is-sel{outline:2px solid var(--edit-ring);outline-offset:4px}
.fr[data-mode=edit] .nv-it.is-sel{outline-offset:2px}
.fr[data-mode=edit] .cr-slide.is-sel{outline:3px solid var(--edit-ring);outline-offset:-3px}
.fr[data-mode=edit] :is(.ct,.fm-f,.nv-it,[data-part]):not(.is-sel):hover{outline:1.5px solid var(--edit-hover);outline-offset:4px}
.fr[data-mode=edit] .nv-it:not(.is-sel):hover{outline-offset:2px}
.fr[data-mode=edit] :is(.ct,.fm-f,.nv-it,[data-part]).is-sel [data-k]:focus{outline-color:transparent}
.fr[data-mode=edit] a{-webkit-user-drag:none}
.fr[data-mode=edit] :is(.cr-arr,.cr-dot,.nv-tog){cursor:pointer}
.fr[data-mode=edit] .fm-in{pointer-events:none}
.fr[data-mode=edit] a,.fr[data-mode=edit] .fq-sym{cursor:default}
.fr[data-mode=edit] .fq-sym{cursor:pointer}
.fr[data-mode=static] *{transition:none!important;animation:none!important}

/* ---- shared type roles (every builder uses these five) ---- */
.fr .f-display{font-family:var(--f-font-d,var(--font-d));font-weight:var(--f-wd,700);font-stretch:var(--f-stretch-d,100%);line-height:var(--f-lh-d,1.12);letter-spacing:var(--f-trk-d,-.03em);color:var(--f-text)}
.fr .f-label{font-family:var(--f-font,var(--font-u));font-weight:var(--f-wl,500);letter-spacing:var(--f-trk-l,0);text-transform:var(--f-case-l,none)}

/* ================================================================== FAQ */
.fq-head{display:grid;gap:calc(10px * var(--f-gap,1));margin-bottom:calc(26px * var(--f-gap,1))}
.fq-title{font:var(--f-wd,700) calc(32px * var(--f-scale,1))/var(--f-lh-d,1.12) var(--f-font-d,var(--font-d));font-stretch:var(--f-stretch-d,100%);letter-spacing:var(--f-trk-d,-.03em);color:var(--f-text)}
.fq-sub{font:var(--f-wt,400) calc(16px * var(--f-scale,1))/var(--f-lh-t,1.55) var(--f-font,var(--font-u));font-style:var(--f-sub-style,normal);color:var(--f-muted);max-width:56ch}
.fq-list{display:grid;gap:calc(8px * var(--f-gap,1))}
.fq-item{position:relative;border-radius:var(--f-r-md,8px);background:var(--f-surface);box-shadow:inset 0 0 0 var(--f-line-w,1px) var(--f-line),var(--f-shadow,none);transition:background-color var(--f-d-open,260ms) var(--f-ease,var(--ease)),box-shadow var(--f-d-hover,120ms) var(--ease)}
.fq-item.open{background:var(--f-raised)}
.fq-h{position:relative;display:flex;align-items:flex-start;gap:14px;padding:calc(17px * var(--f-gap,1)) 16px calc(17px * var(--f-gap,1)) calc(20px * var(--f-gap,1))}
.fq-q{flex:1;min-width:0;padding:1px 0;font:var(--f-wl,600) calc(16.5px * var(--f-scale,1))/1.42 var(--f-font-d,var(--font-d));letter-spacing:calc(var(--f-trk-d,-.01em) * .5);color:var(--f-text)}
.fq-sym{position:static;flex:none;width:28px;height:28px;margin:-2px 0;padding:0;border:0;border-radius:var(--f-round);display:grid;place-items:center;background:transparent;color:var(--f-muted);transition:background-color var(--f-d-hover,120ms),color var(--f-d-hover,120ms)}
.fq-sym svg{width:18px;height:18px;transition:transform var(--f-d-open,260ms) var(--f-ease,var(--ease-out))}
.fq-sym svg .v{transform-origin:12px 12px;transition:transform var(--f-d-open,260ms) var(--f-ease,var(--ease-out))}
.fq-sym:hover{background:color-mix(in srgb,var(--f-text) 8%,transparent);color:var(--f-text)}
.fq-item.open .fq-sym{color:var(--f-accent-light)}
.fr[data-light] .fq-item.open .fq-sym{color:var(--f-accent)}
.sym-arrow .fq-item.open .fq-sym svg{transform:rotate(180deg)}
.sym-plus .fq-item.open .fq-sym svg .v{transform:scaleY(0)}
/* Try it: the whole question row is the button (stretched, absolutely positioned — no layout) */
.fr[data-mode=try] .fq-sym::after{content:"";position:absolute;inset:0;border-radius:var(--f-r-md,8px)}
.fr[data-mode=try] .fq-h{cursor:pointer}
.fr[data-mode=try] .fq-sym:focus-visible{outline:none}
.fr[data-mode=try] .fq-sym:focus-visible::after{box-shadow:0 0 0 2px var(--f-accent-light)}
.fr[data-mode=try] .fq-item:hover:not(.open){background:color-mix(in srgb,var(--f-raised) 60%,var(--f-surface))}
.fq-awrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--f-d-open,260ms) var(--f-ease,var(--ease-out))}
.fq-item.open .fq-awrap{grid-template-rows:1fr}
.fq-ain{min-height:0;overflow:clip}
.fq-item.open .fq-ain{overflow-clip-margin:8px}
.fq-a{padding:0 60px calc(20px * var(--f-gap,1)) calc(20px * var(--f-gap,1));font:var(--f-wt,400) calc(15px * var(--f-scale,1))/var(--f-lh-t,1.62) var(--f-font,var(--font-u));color:var(--f-muted);opacity:0;transform:translateY(calc(var(--f-dist,3px) * -1));transition:opacity calc(var(--f-d-open,260ms) * .75) var(--ease),transform var(--f-d-open,260ms) var(--f-ease,var(--ease-out))}
.fq-item.open .fq-a{opacity:1;transform:none}
/* surface styles */
.fr[data-surface=tone] .fq-item{box-shadow:none}
.fr[data-surface=soft] .fq-item{box-shadow:var(--f-shadow,none)}
.fr[data-surface=line] .fq-list{gap:0}
.fr[data-surface=line] .fq-item{border-radius:0;background:transparent;box-shadow:inset 0 -1px 0 var(--f-line)}
.fr[data-surface=line] .fq-item:first-child{box-shadow:inset 0 1px 0 var(--f-line),inset 0 -1px 0 var(--f-line)}
.fr[data-surface=line] .fq-item.open{background:transparent}
.fr[data-surface=line] .fq-h{padding-left:0;padding-right:4px}
.fr[data-surface=line] .fq-a{padding-left:0;padding-right:48px}
.fr[data-surface=line][data-mode=try] .fq-item:hover:not(.open){background:transparent}
.fr[data-surface=line][data-mode=try] .fq-item:hover:not(.open) .fq-q{color:var(--f-accent)}
.fr[data-surface=line]:not([data-light])[data-mode=try] .fq-item:hover:not(.open) .fq-q{color:var(--f-accent-light)}
.fr[data-surface=rule] .fq-list{gap:0;box-shadow:inset 0 0 0 1px var(--f-line)}
.fr[data-surface=rule] .fq-item{border-radius:0;box-shadow:inset 0 -1px 0 var(--f-line)}
.fr[data-surface=rule] .fq-item:last-child{box-shadow:none}
@container (max-width:520px){
  .fr-faq .fr-in{padding:calc(26px * var(--f-gap,1)) 18px 22px}
  .fq-title{font-size:calc(24px * var(--f-scale,1))}
  .fq-sub{font-size:calc(14.5px * var(--f-scale,1))}
  .fq-head{margin-bottom:18px;gap:7px}
  .fq-h{padding:14px 12px 14px 16px;gap:10px}
  .fq-q{font-size:calc(15px * var(--f-scale,1))}
  .fq-a{padding:0 16px 16px;font-size:calc(14px * var(--f-scale,1))}
  .fr[data-surface=line] .fq-h{padding-left:0}
  .fr[data-surface=line] .fq-a{padding-left:0}
}
@container (max-width:340px){
  .fr-faq .fr-in{padding:20px 14px 18px}
  .fq-title{font-size:calc(21px * var(--f-scale,1))}
  .fq-q{font-size:calc(14px * var(--f-scale,1))}
  .fq-list{gap:6px}
  .fr[data-surface=line] .fq-list,.fr[data-surface=rule] .fq-list{gap:0}
}

/* ---- rule: the things you touch are cut, the grid stays square ---------- */
.fr[data-surface=rule] .fk-chip{border-radius:var(--f-r-sm,8px)}
.fr[data-surface=rule] .fm-in{border-radius:var(--f-r-sm,8px)}
.fr[data-surface=rule] .fq-sym,.fr[data-surface=rule] .pp-x,
.fr[data-surface=rule] .ct-av{border-radius:var(--f-r-sm,8px)}
.fr[data-surface=rule] .cr-arr{border-radius:var(--f-r-md,10px)}
.fr[data-surface=rule] .cr[data-cap=plain] .cr-cap{border-radius:var(--f-r-sm,8px)}
.fr[data-surface=rule] .cr-dots i{border-radius:1px}
.fr[data-surface=rule] .cg-back{border-radius:var(--f-r-sm,8px)}

/* ---- lit: light is the material ---------------------------------------- */
.fr[data-surface=lit]{
  background-image:radial-gradient(118% 76% at 50% -14%,color-mix(in srgb,var(--f-accent) 8%,transparent),transparent 62%);
  box-shadow:inset 0 0 0 1px var(--f-line),inset 0 1px 0 color-mix(in srgb,var(--f-text) 9%,transparent),0 40px 92px -54px color-mix(in srgb,var(--f-accent) 62%,transparent);
}
.fr[data-light][data-surface=lit]{
  /* light falls from above: the top of the sheet is brighter, so dark text only gains contrast */
  background-image:radial-gradient(120% 70% at 50% -16%,color-mix(in srgb,var(--f-accent) 7%,transparent),transparent 62%),linear-gradient(180deg,rgba(255,255,255,.9),transparent 46%);
  box-shadow:inset 0 0 0 1px var(--f-line),inset 0 1px 0 rgba(255,255,255,.7),0 2px 4px rgba(16,20,24,.04),0 34px 64px -42px rgba(16,20,24,.45);
}
.fr[data-surface=lit] .fq-item,.fr[data-surface=lit] .cg-card,.fr[data-surface=lit] .ct,.fr[data-surface=lit] .fk-chip{
  box-shadow:inset 0 0 0 1px var(--f-line),inset 0 1px 0 color-mix(in srgb,var(--f-text) 8%,transparent);
}
.fr[data-light][data-surface=lit] .fq-item,.fr[data-light][data-surface=lit] .cg-card,
.fr[data-light][data-surface=lit] .ct,.fr[data-light][data-surface=lit] .fk-chip{
  box-shadow:inset 0 0 0 1px var(--f-line),inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(16,20,24,.05);
}
/* the fall-off: darker toward the bottom on dark, so text contrast only improves */
.fr[data-surface=lit]:not([data-light]) .fq-item,.fr[data-surface=lit]:not([data-light]) .cg-card,
.fr[data-surface=lit]:not([data-light]) .ct,.fr[data-surface=lit]:not([data-light]) .pp{
  background-image:linear-gradient(180deg,transparent 28%,color-mix(in srgb,var(--f-bg) 52%,transparent));
}
.fr[data-surface=lit][data-mode=try] .fq-item:hover:not(.open),
.fr[data-surface=lit][data-mode=try] .cg-card:hover,.fr[data-surface=lit] .cg-card.is-hover{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--f-accent) 36%,var(--f-line)),inset 0 1px 0 color-mix(in srgb,var(--f-text) 17%,transparent);
}
.fr[data-surface=lit][data-mode=try] .cg-card:hover,.fr[data-surface=lit] .cg-card.is-hover{transform:translateY(-1px)}
.fr[data-surface=lit] .bt{
  background-image:linear-gradient(180deg,var(--f-accent),color-mix(in srgb,var(--f-accent) 86%,#000));
  box-shadow:inset 0 1px 0 color-mix(in srgb,#FFF 32%,transparent),0 14px 34px -16px color-mix(in srgb,var(--f-accent) 85%,transparent);
}
.fr[data-surface=lit][data-mode=try] .bt:hover,.fr[data-surface=lit] .bt.is-hover{
  transform:translateY(-1px);filter:none;
  box-shadow:inset 0 1px 0 color-mix(in srgb,#FFF 45%,transparent),0 18px 44px -16px color-mix(in srgb,var(--f-accent) 95%,transparent);
}
.fr[data-surface=lit] .fk-chip.is-on{background-image:linear-gradient(180deg,var(--f-accent),color-mix(in srgb,var(--f-accent) 88%,#000));box-shadow:none}
.fr[data-surface=lit] .pp{
  box-shadow:inset 0 0 0 1px var(--f-line),inset 0 1px 0 color-mix(in srgb,var(--f-text) 11%,transparent),0 44px 84px -34px rgba(0,0,0,.62),0 0 100px -34px color-mix(in srgb,var(--f-accent) 48%,transparent);
}
.fr[data-light][data-surface=lit] .pp{box-shadow:inset 0 0 0 1px var(--f-line),inset 0 1px 0 rgba(255,255,255,.9),0 2px 6px rgba(16,20,24,.06),0 40px 72px -32px rgba(16,20,24,.4)}
.fr[data-surface=lit] .nv{box-shadow:inset 0 0 0 1px var(--f-line),inset 0 1px 0 color-mix(in srgb,var(--f-text) 10%,transparent),0 22px 46px -28px rgba(0,0,0,.7)}
.fr[data-light][data-surface=lit] .nv{box-shadow:inset 0 0 0 1px var(--f-line),inset 0 1px 0 rgba(255,255,255,.9),0 18px 40px -26px rgba(16,20,24,.4)}
.fr[data-surface=lit]:not([data-light]) .fm-in{background:var(--f-bg);box-shadow:inset 0 0 0 1px var(--f-line),inset 0 2px 5px rgba(0,0,0,.34)}
.fr[data-light][data-surface=lit] .fm-in{background:var(--f-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--f-text) 17%,transparent)}
.fr[data-surface=lit] .fm-in:focus{box-shadow:inset 0 0 0 1.5px var(--f-accent),0 0 0 4px color-mix(in srgb,var(--f-accent) 22%,transparent)}
.fr[data-surface=lit] .cr-view{box-shadow:inset 0 0 0 1px var(--f-line)}

@media (prefers-reduced-motion:reduce){.fr,.fr *{transition:none!important;animation:none!important}}

/* ===================================================================================
   BUTTON + FORM — ported verbatim from 50-frames.css (the form's Send is a .bt) */
/* ================================================================== BUTTON (round 6: the builder's fields)
   The frame is transparent — the customer's page shows through; the editor draws the frame's bounds outside .fr. */
.fr.fr-button,.fr.fr-button[data-surface]{background:transparent!important;background-image:none!important;box-shadow:none!important}
.bt-wrap{display:flex;align-items:center;justify-content:center;min-height:var(--bt-fr-h,70px);padding:8px}
.bt-wrap[data-align=left]{justify-content:flex-start}
.bt-wrap[data-align=right]{justify-content:flex-end}
.bt{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;max-width:100%;padding:0 24px 0 26px;border-radius:min(var(--f-r-md,8px),26px);background:var(--f-accent);color:var(--f-on-accent);font:var(--f-wd,650) calc(16px * var(--f-scale,1))/1 var(--f-font-d,var(--font-d));letter-spacing:var(--f-trk-l,-.005em);text-transform:var(--f-case-l,none);text-decoration:none;border:0;white-space:nowrap;-webkit-user-drag:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 26px -12px var(--f-accent);transition:transform var(--f-d-hover,120ms) var(--f-ease,var(--ease-out)),filter var(--f-d-hover,120ms),background-color var(--f-d-hover,120ms),color var(--f-d-hover,120ms),box-shadow var(--f-d-hover,120ms)}
.bt svg{width:18px;height:18px;stroke-width:calc(var(--f-icon-w,1.9) + .1);transition:transform var(--f-d-hover,120ms) var(--f-ease,var(--ease-out))}
.bt-wrap .bt{min-width:var(--bt-w,auto);height:var(--bt-h,52px);padding:0 calc(var(--bt-h,52px) * .44);font-size:calc(var(--bt-fs,16px) * var(--f-scale,1))}
.bt-wrap .bt svg{width:calc(var(--bt-fs,16px) * 1.1);height:calc(var(--bt-fs,16px) * 1.1)}
.bt-ic{display:grid;place-items:center;flex:none}
/* Zach's pick (09-23): a button can fill its column. The embed is as wide as the column, so alignment and
   full width both happen inside the frame */
.bt-wrap[data-full] .bt{width:100%}
.bt-wrap[data-full] .bt-t{flex:0 1 auto}
.bt.is-caps{text-transform:uppercase;letter-spacing:.06em}
.bt-t{min-width:1ch}
.fr[data-mode=try] .bt:hover,.bt.is-hover{transform:translateY(-1px);filter:brightness(1.07)}
.fr[data-mode=try] .bt:hover svg,.bt.is-hover svg{transform:translateX(3px)}
/* attention: only glows that never move the button (the builder's pulse/bounce/shake/wobble ignore reduced motion — audit S7) */
@media (prefers-reduced-motion:no-preference){
  .fr[data-mode=try] .bt-wrap[data-anim=glow] .bt{animation:bt-glow 2.4s ease-in-out infinite}
  .fr[data-mode=try] .bt-wrap[data-anim=shimmer] .bt{background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);background-size:220% 100%;animation:bt-shim 3.2s ease-in-out infinite}
}
@keyframes bt-glow{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--f-accent) 22%,transparent),0 10px 26px -12px var(--f-accent)}}
@keyframes bt-shim{from{background-position:120% 0}to{background-position:-120% 0}}
/* surface styles: line = flat, tone = flat, soft = lifts, rule = inverts */
.fr[data-surface=line] .bt,.fr[data-surface=tone] .bt,.fr[data-surface=rule] .bt{box-shadow:none}
.fr[data-surface=line][data-mode=try] .bt:hover,.fr[data-surface=line] .bt.is-hover{transform:none;filter:brightness(.92)}
.fr[data-surface=tone][data-mode=try] .bt:hover,.fr[data-surface=tone] .bt.is-hover{transform:none;filter:brightness(1.1)}
.fr[data-surface=soft] .bt{box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 20px -10px var(--f-accent)}
.fr[data-surface=soft][data-mode=try] .bt:hover,.fr[data-surface=soft] .bt.is-hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(0,0,0,.06),0 14px 26px -10px var(--f-accent)}
.fr[data-surface=rule] .bt{box-shadow:inset 0 0 0 1px var(--f-accent)}
.fr[data-surface=rule][data-mode=try] .bt:hover,.fr[data-surface=rule] .bt.is-hover{transform:none;filter:none;background:transparent;color:var(--f-accent)}
.fr[data-surface=rule]:not([data-light])[data-mode=try] .bt:hover,.fr[data-surface=rule]:not([data-light]) .bt.is-hover{color:var(--f-accent)}
.fr[data-surface=rule][data-mode=try] .bt:hover svg,.fr[data-surface=rule] .bt.is-hover svg{transform:none}

/* ================================================================== FORM (round 6: the builder's six field types, required, placeholder, fine print, thank-you) */
.fr-form{background-color:var(--f-surface)}
.fm-t{margin-bottom:6px;font:var(--f-wd,700) calc(26px * var(--f-scale,1))/var(--f-lh-d,1.12) var(--f-font-d,var(--font-d));font-stretch:var(--f-stretch-d,100%);letter-spacing:var(--f-trk-d,-.026em)}
.fm-sub{font:var(--f-wt,400) calc(14.5px * var(--f-scale,1))/var(--f-lh-t,1.5) var(--f-font,var(--font-u));font-style:var(--f-sub-style,normal);color:var(--f-muted);max-width:52ch}
.fm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(16px * var(--f-gap,1)) calc(14px * var(--f-gap,1));margin-top:calc(22px * var(--f-gap,1))}
.fm-f{position:relative;display:grid;align-content:start;gap:7px;min-width:0;border-radius:var(--f-r-sm,6px)}
.fm-f.is-wide{grid-column:1 / -1}
.fm-l{display:flex;align-items:baseline;gap:8px;min-width:0;font:var(--f-wl,500) calc(13.5px * var(--f-scale,1))/1.3 var(--f-font,var(--font-u));letter-spacing:var(--f-trk-l,0);text-transform:var(--f-case-l,none);color:var(--f-text)}
.fm-lt{min-width:2ch}
.fm-opt{flex:none;font-weight:var(--f-wt,400);font-size:13px;color:var(--f-muted);text-transform:none;letter-spacing:0}
.fm-box{position:relative;display:block;min-width:0}
.fm-in{display:block;width:100%;height:44px;margin:0;padding:0 12px;border:0;border-radius:var(--f-r-sm,6px);background:var(--f-bg);color:var(--f-text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--f-text) 22%,transparent);font:var(--f-wt,400) 15px/1.3 var(--f-font,var(--font-u));transition:box-shadow var(--f-d-hover,120ms)}
.fm-in::placeholder{color:transparent}
.fm-in:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--f-accent)}
.fr:not([data-light]) .fm-in:focus{box-shadow:inset 0 0 0 1.5px var(--f-accent-light)}
.fm-ta{height:auto;min-height:94px;padding:11px 12px;resize:none;line-height:1.5}
.fm-sel{appearance:none;-webkit-appearance:none;padding-right:38px;color:transparent;cursor:pointer}
.fm-box.has-v .fm-sel{color:var(--f-text)}
.fm-sel option{color:#15181F;background:#fff}
.fm-ph{position:absolute;left:12px;right:12px;top:0;height:44px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--f-wt,400) 15px/44px var(--f-font,var(--font-u));color:var(--f-muted);pointer-events:none;border-radius:3px;outline-offset:1px!important}
.fm-box.is-ta .fm-ph{top:11px;height:auto;line-height:1.5;white-space:normal}
.fm-box.is-sel .fm-ph{right:38px}
.fm-box.has-v .fm-ph,.fm-in:is(input,textarea):not(:placeholder-shown)+.fm-ph{visibility:hidden}   /* the second: a script set .value; a <select> has no :placeholder-shown, so it must not match */   /* the second works when a script sets .value (the homepage demo) */
.fr[data-mode=edit] .fm-ph{pointer-events:auto;cursor:text}
.fr[data-mode=edit] .fm-ph:empty::before{opacity:.5}
/* placeholders on an accent fill (a button's words) read in the ink that sits on the accent */
.fr[data-mode=edit] :is(.bt,.nv-cta,.nh-cta) [data-k][contenteditable]:empty::before{color:var(--f-on-accent);opacity:.62}
.fm-box>svg{position:absolute;right:12px;top:14px;width:16px;height:16px;color:var(--f-muted);pointer-events:none}
.fm-f.is-check{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:10px}
.fm-f.is-check .fm-err{grid-column:1 / -1}
.fm-box.is-cb{width:22px;height:22px}
.fm-cb{appearance:none;-webkit-appearance:none;width:22px;height:22px;padding:0;cursor:pointer}
.fm-cb:checked{background:var(--f-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:none}
.fm-f.is-check .fm-l{font-weight:var(--f-wt,400);font-size:calc(14.5px * var(--f-scale,1))}
.fm-err{display:flex;align-items:center;gap:6px;margin:0;font:var(--f-wl,500) 13px/1.35 var(--f-font,var(--font-u));color:#F1A5AB}
.fm-err[hidden]{display:none}
.fm-err svg{flex:none;width:15px;height:15px}
.fr[data-light] .fm-err{color:#9C2E38}
.fm-in[aria-invalid=true]{box-shadow:inset 0 0 0 1.5px #E8959C}
.fr[data-light] .fm-in[aria-invalid=true]{box-shadow:inset 0 0 0 1.5px #A8404A}
.fm-note{margin-top:calc(16px * var(--f-gap,1));font:var(--f-wt,400) 13px/1.45 var(--f-font,var(--font-u));color:var(--f-muted);max-width:60ch}
.fm-submit{margin-top:calc(22px * var(--f-gap,1));height:46px;font-size:15px}
.fm-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fm-done{display:grid;justify-items:start;gap:10px;padding:10px 0 6px;max-width:48ch}
.fm-done-ic{display:grid;place-items:center;width:44px;height:44px;margin-bottom:4px;border-radius:var(--f-round);background:var(--f-accent);color:var(--f-on-accent)}
.fm-done-ic svg{width:22px;height:22px;stroke-width:2.4}
.fm-dt{font:var(--f-wd,700) calc(26px * var(--f-scale,1))/var(--f-lh-d,1.12) var(--f-font-d,var(--font-d));letter-spacing:var(--f-trk-d,-.026em)}
.fm-db{font:var(--f-wt,400) calc(15px * var(--f-scale,1))/var(--f-lh-t,1.55) var(--f-font,var(--font-u));color:var(--f-muted);white-space:pre-wrap}
.fr[data-surface=tone] .fm-in,.fr[data-surface=soft] .fm-in{background:var(--f-raised);box-shadow:none}
.fr[data-surface=tone] .fm-in:focus,.fr[data-surface=soft] .fm-in:focus{box-shadow:inset 0 0 0 1.5px var(--f-accent)}
.fr[data-surface=line] .fm-in{background:transparent;border-radius:0;padding:0 28px 0 0;box-shadow:inset 0 -1px 0 var(--f-line)}
.fr[data-surface=line] .fm-ph{left:0}
.fr[data-surface=line] .fm-in:focus{box-shadow:inset 0 -2px 0 var(--f-accent)}
.fr[data-surface=line] .fm-box>svg{right:2px}
.fr[data-surface=rule] .fm-in{background:var(--f-surface);box-shadow:inset 0 0 0 1px var(--f-line)}
.fr[data-surface=rule] .fm-in:focus{box-shadow:inset 0 0 0 1.5px var(--f-accent)}
@container (max-width:520px){.fm-grid{grid-template-columns:minmax(0,1fr)}.fr-form .fr-in{padding:24px 18px}.fm-t,.fm-dt{font-size:calc(22px * var(--f-scale,1))}}

/* the honeypot: present for bots, never seen or reached by people */
.fm-hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0}
.fm-fail{margin-top:12px;font:var(--f-wl,500) 14px/1.45 var(--f-font,var(--font-u));color:#F1A5AB}
.fr[data-light] .fm-fail{color:#9C2E38}
.fm-fail[hidden]{display:none}


/* ---- "Made in Websonance": opt-in per frame (config.madeWith), all builders ---- */
.fr-made{display:flex;justify-content:flex-end;margin-top:calc(14px * var(--f-gap,1))}
.fr-made a{display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 8px;border-radius:var(--f-pill);color:var(--f-muted);font:500 12px/1 var(--f-font,var(--font-u));text-decoration:none;box-shadow:inset 0 0 0 1px var(--f-line);background:color-mix(in srgb,var(--f-surface) 70%,transparent);transition:color var(--f-d-hover,120ms),box-shadow var(--f-d-hover,120ms)}
.fr[data-mode=try] .fr-made a:hover{color:var(--f-text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--f-accent) 45%,var(--f-line))}
.fr-made i{width:9px;height:9px;border-radius:50%;border:2px solid var(--f-accent-light);flex:none}
.fr[data-light] .fr-made i{border-color:var(--f-accent)}

/* ================================================================== POPUP — ported verbatim from 50-frames.css (round 6) */
/* ================================================================== POPUP (round 6: eyebrow · heading · body · button · "No thanks" · image · position · width · alignment) */
.pp-wrap{display:grid;place-items:center;min-height:300px;padding:36px}
.pp{position:relative;width:min(var(--pp-w,420px),100%);border-radius:var(--f-r-lg,12px);background:var(--f-surface);box-shadow:inset 0 0 0 var(--f-line-w,1px) var(--f-line),0 30px 60px -24px rgba(0,0,0,.5);transition:opacity var(--f-d-enter,260ms) var(--ease),transform var(--f-d-enter,260ms) var(--f-ease,var(--ease-out))}
@media (prefers-reduced-motion:no-preference){.fr[data-mode=try] .pp.is-enter{animation:pp-in var(--f-d-enter,420ms) var(--f-ease,var(--ease-out)) both}}
@keyframes pp-in{from{opacity:0;transform:translateY(calc(var(--f-dist,3px) + 6px)) scale(.975)}}
.pp.away{opacity:0;transform:translateY(10px) scale(.97);pointer-events:none!important}
.pp-body{display:flex;flex-direction:column;gap:16px;padding:calc(26px * var(--f-gap,1)) calc(26px * var(--f-gap,1)) calc(22px * var(--f-gap,1))}
.pp.has-side .pp-body{flex-direction:row;align-items:flex-start}
.pp-txt{flex:1;min-width:0;padding-right:22px}
.pp[data-align=center] .pp-txt{padding:0 22px;text-align:center}
.pp[data-align=center] .pp-body{align-items:center}
.pp[data-align=center] .pp-acts,.pp[data-align=center] .pp-dsa{justify-content:center}
.pp-img{flex:none;background-color:var(--f-raised)}
.pp-img.is-banner{aspect-ratio:16/7;border-radius:var(--f-r-lg,12px) var(--f-r-lg,12px) 0 0}
.pp-img.is-inset{width:100%;aspect-ratio:16/8;border-radius:var(--f-r-md,8px)}
.pp-img.is-square{width:84px;height:84px;border-radius:var(--f-r-md,8px)}
.pp-img.is-circle{width:84px;height:84px;border-radius:50%}
.pp-x{position:absolute;right:12px;top:12px;z-index:1;width:32px;height:32px;border:0;border-radius:var(--f-round);display:grid;place-items:center;background:transparent;color:var(--f-muted)}
.pp:has(> .pp-img.is-banner) .pp-x{background:color-mix(in srgb,var(--f-surface) 88%,transparent);color:var(--f-text)}
.pp-x:hover{background:color-mix(in srgb,var(--f-text) 8%,transparent);color:var(--f-text)}
.pp-x svg{width:16px;height:16px}
.pp-tag{margin-bottom:10px;font:var(--f-wl,600) 13px/1.2 var(--f-font,var(--font-u));letter-spacing:var(--f-trk-l,.01em);color:var(--f-accent-light)}
.fr[data-light] .pp-tag{color:var(--f-accent)}
.pp-h{margin-bottom:8px;font:var(--f-wd,700) calc(23px * var(--f-scale,1))/var(--f-lh-d,1.18) var(--f-font-d,var(--font-d));font-stretch:var(--f-stretch-d,100%);letter-spacing:var(--f-trk-d,-.024em)}
.pp-p{margin-bottom:20px;font:var(--f-wt,400) calc(14.5px * var(--f-scale,1))/var(--f-lh-t,1.55) var(--f-font,var(--font-u));color:var(--f-muted);white-space:pre-wrap}
.pp-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pp .bt{height:42px;padding:0 18px;font-size:calc(14.5px * var(--f-scale,1))}
.pp-later{display:inline-flex;align-items:center;height:42px;padding:0 12px;border-radius:var(--f-r-md,8px);color:var(--f-muted);font:var(--f-wl,500) 14px/1 var(--f-font,var(--font-u));letter-spacing:var(--f-trk-l,0);text-transform:var(--f-case-l,none);text-decoration:none;-webkit-user-drag:none}
.pp-later:hover{color:var(--f-text)}
.pp-dsa{display:flex;align-items:center;gap:8px;margin-top:14px;font:var(--f-wt,400) 13.5px/1.3 var(--f-font,var(--font-u));color:var(--f-muted)}
.pp-dsa-in{width:16px;height:16px;margin:0;accent-color:var(--f-accent)}
.fr[data-surface=tone] .pp{box-shadow:0 30px 60px -24px rgba(0,0,0,.45)}
.fr[data-surface=soft] .pp{box-shadow:0 2px 6px rgba(0,0,0,.05),0 34px 64px -24px rgba(0,0,0,.4)}
.fr[data-surface=line] .pp{box-shadow:inset 0 0 0 1px var(--f-line),inset 0 0 0 5px var(--f-surface),inset 0 0 0 6px var(--f-line)}
.fr[data-surface=rule] .pp{box-shadow:inset 0 0 0 1px var(--f-line),0 24px 50px -28px rgba(0,0,0,.4)}
/* the visitor's screen (the design drew it with the editor's page mock; a frame needs its own). The frame is transparent;
   a centred popup darkens the page with its scrim, the others sit in their corner and leave the page alone. On a real page
   parent.js shrinks the iframe to a corner card, so the same layout fills it exactly. */
.fr.fr-popup,.fr.fr-popup[data-surface]{background:transparent!important;background-image:none!important;box-shadow:none!important;border-radius:0}
.pp-screen{position:relative;display:flex;min-height:100vh;padding:20px}
.pp-scrim{position:absolute;inset:0;background:rgba(11,12,16,.55);transition:opacity var(--f-d-enter,260ms) var(--ease)}
.pp-screen[data-away] .pp-scrim{opacity:0;pointer-events:none}
.pp-screen .pp-wrap{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:0}
.pp-screen[data-pos=top] .pp-wrap{align-items:flex-start}
.pp-screen[data-pos=bottom] .pp-wrap{align-items:flex-end}
.pp-screen[data-pos=bottom-left] .pp-wrap{align-items:flex-end;justify-content:flex-start}
.pp-screen[data-pos=bottom-right] .pp-wrap{align-items:flex-end;justify-content:flex-end}
img.pp-img{display:block;object-fit:cover}
img.pp-img.is-banner{width:100%}
.pp-img[hidden]{display:none}
.pp-img.is-ph{display:grid;place-items:center;color:var(--f-muted)}
.pp-img.is-ph svg{width:28px;height:28px;opacity:.7}
.pp-img.is-banner.is-ph{width:100%}
@media (max-width:480px){.pp-screen{padding:12px}.pp.has-side .pp-body{flex-direction:column}}
/* the builder's four entrances (the design had one); none of them play for visitors who ask for less motion */
@media (prefers-reduced-motion:no-preference){
  .fr[data-mode=try] .pp.is-enter[data-anim=fade]{animation-name:pp-fade}
  .fr[data-mode=try] .pp.is-enter[data-anim=slide-up]{animation-name:pp-up}
  .fr[data-mode=try] .pp.is-enter[data-anim=slide-down]{animation-name:pp-down}
  .fr[data-mode=try] .pp.is-enter[data-anim=none]{animation:none}
}
@keyframes pp-fade{from{opacity:0}}
@keyframes pp-up{from{opacity:0;transform:translateY(28px)}}
@keyframes pp-down{from{opacity:0;transform:translateY(-28px)}}

/* ================================================================== CONTACT — ported verbatim from 50-frames.css (round 6); one person per frame (Zach 09-23) */
.ct-h{margin-bottom:calc(18px * var(--f-gap,1));font:var(--f-wd,700) calc(24px * var(--f-scale,1))/var(--f-lh-d,1.15) var(--f-font-d,var(--font-d));font-stretch:var(--f-stretch-d,100%);letter-spacing:var(--f-trk-d,-.024em)}
.ct-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(12px * var(--f-gap,1))}
.ct-grid[data-n="1"]{grid-template-columns:minmax(0,560px)}
.ct{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;min-width:0;padding:calc(18px * var(--f-gap,1));border-radius:var(--f-r-lg,12px);background:var(--f-surface);box-shadow:inset 0 0 0 var(--f-line-w,1px) var(--f-line),var(--f-shadow,none)}
.ct.no-av{grid-template-columns:minmax(0,1fr)}
[data-layout=vertical] .ct{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;padding-top:calc(24px * var(--f-gap,1))}
[data-layout=compact] .ct{gap:12px;padding:calc(12px * var(--f-gap,1)) calc(14px * var(--f-gap,1))}
.ct-av{flex:none;width:56px;height:56px;border-radius:var(--f-round);display:grid;place-items:center;font:var(--f-wd,700) 17px/1 var(--f-font-d,var(--font-d));letter-spacing:0;color:var(--f-text);background:color-mix(in srgb,var(--f-accent) 30%,var(--f-raised))}
[data-layout=vertical] .ct-av{width:72px;height:72px;font-size:21px}
[data-layout=compact] .ct-av{width:40px;height:40px;font-size:14px}
[data-shape=rounded] .ct-av{border-radius:var(--f-r-md,8px)}
[data-shape=square] .ct-av{border-radius:var(--f-r-sm,4px)}
.ct-av-1{background:color-mix(in srgb,var(--f-accent) 18%,var(--f-raised))}
.ct-av-2{background:color-mix(in srgb,var(--f-accent-light) 24%,var(--f-raised))}
.ct-av-3{background:color-mix(in srgb,var(--f-text) 13%,var(--f-raised))}
.ct-av.is-photo{box-shadow:inset 0 0 0 1px var(--f-line)}
.ct-txt{display:grid;gap:3px;min-width:0}
.ct-name{display:block;font:var(--f-wl,650) calc(17px * var(--f-scale,1))/1.25 var(--f-font-d,var(--font-d));letter-spacing:calc(var(--f-trk-d,-.01em) * .5);color:var(--f-text)}
.ct-role{display:block;font:var(--f-wt,400) calc(14px * var(--f-scale,1))/1.4 var(--f-font,var(--font-u));color:var(--f-muted)}
.ct-rows{display:grid;justify-items:start;gap:4px;margin-top:10px}
[data-layout=vertical] .ct-rows{justify-items:center}
[data-layout=compact] .ct-rows{margin-top:6px}
.ct-row{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:3px 0;color:var(--f-text);font:var(--f-wt,400) calc(14px * var(--f-scale,1))/1.3 var(--f-font,var(--font-u));text-decoration:none;-webkit-user-drag:none}
.ct-row svg{flex:none;width:15px;height:15px;color:var(--f-muted)}
.ct-row>span{min-width:0;overflow-wrap:anywhere}
.fr[data-mode=try] .ct-row:hover>span{text-decoration:underline;text-decoration-color:var(--f-accent-light);text-underline-offset:3px}
.fr[data-surface=tone] .ct{box-shadow:none}
.fr[data-surface=soft] .ct{box-shadow:var(--f-shadow,none)}
.fr[data-surface=line] .ct-grid{gap:0 calc(32px * var(--f-gap,1))}
.fr[data-surface=line] .ct{border-radius:0;background:transparent;box-shadow:inset 0 -1px 0 var(--f-line);padding-left:0;padding-right:0}
.fr[data-surface=rule] .ct-grid{gap:1px;background:var(--f-line-hex);box-shadow:0 0 0 1px var(--f-line-hex)}
.fr[data-surface=rule] .ct{border-radius:0;box-shadow:none}
@container (max-width:560px){.ct-grid{grid-template-columns:minmax(0,1fr)}.fr-contact .fr-in{padding:22px 16px}}
/* round 9: the rest of the real card — social links, the bio that opens, photo size, the row icon styles */
.ct-av{width:var(--ct-av,56px);height:var(--ct-av,56px)}
[data-layout=vertical] .ct-av{width:calc(var(--ct-av,56px) * 1.28);height:calc(var(--ct-av,56px) * 1.28);font-size:calc(var(--ct-av,56px) * .29)}
[data-layout=compact] .ct-av{width:calc(var(--ct-av,56px) * .72);height:calc(var(--ct-av,56px) * .72);font-size:calc(var(--ct-av,56px) * .25)}
.ct-av{font-size:calc(var(--ct-av,56px) * .3)}
.ct-row .ct-ico{display:grid;place-items:center;flex:none;width:15px;height:15px;border-radius:var(--f-r-sm,4px);color:var(--f-muted)}
.ct-rows.ic-soft .ct-ico{width:26px;height:26px;background:color-mix(in srgb,var(--f-accent) 14%,transparent);color:var(--f-accent-light)}
.fr[data-light] .ct-rows.ic-soft .ct-ico{color:var(--f-accent)}
.ct-rows.ic-solid .ct-ico{width:26px;height:26px;background:var(--f-accent);color:var(--f-on-accent)}
.ct-rows.ic-outline .ct-ico{width:26px;height:26px;box-shadow:inset 0 0 0 1px var(--f-line)}
.ct-rows.ic-circle .ct-ico{width:26px;height:26px;border-radius:var(--f-round);background:color-mix(in srgb,var(--f-text) 10%,transparent)}
.ct-rows:is(.ic-soft,.ic-solid,.ic-outline,.ic-circle) .ct-ico svg{width:14px;height:14px}
.ct-soc{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
[data-layout=vertical] .ct-soc{justify-content:center}
.ct-soc-a{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--f-r-sm,8px);background:color-mix(in srgb,var(--f-text) 8%,transparent);box-shadow:inset 0 0 0 var(--f-line-w,1px) var(--f-line);color:var(--f-muted);text-decoration:none;-webkit-user-drag:none}
.ct-soc-a svg{width:16px;height:16px}
.fr[data-mode=try] .ct-soc-a:hover{color:var(--f-text);background:color-mix(in srgb,var(--f-accent) 20%,transparent)}
.ct-more{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:7px 13px 7px 14px;border:0;border-radius:var(--f-pill);background:color-mix(in srgb,var(--f-accent) 16%,var(--f-raised));box-shadow:inset 0 0 0 var(--f-line-w,1px) var(--f-line);color:var(--f-text);font:var(--f-wl,550) calc(13px * var(--f-scale,1))/1 var(--f-font,var(--font-u));text-align:left;cursor:pointer}
.ct-more svg{width:14px;height:14px;transition:transform var(--f-d-open,240ms) var(--f-ease,ease)}
.ct.is-open .ct-more svg{transform:rotate(180deg)}
.ct-bio{display:block;margin-top:12px;font:var(--f-wt,400) calc(14px * var(--f-scale,1))/1.55 var(--f-font,var(--font-u));color:var(--f-muted)}
.ct-bio[hidden]{display:none}
[data-layout=vertical] .ct-bio{text-align:center}
.ct.is-tap{cursor:pointer}
.ct-hint{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:24px;height:24px;border:0;border-radius:var(--f-round);background:color-mix(in srgb,var(--f-accent) 20%,var(--f-raised));color:var(--f-text);cursor:pointer}
.ct-hint svg{width:13px;height:13px;transition:transform var(--f-d-open,240ms) var(--f-ease,ease)}
.ct.is-open .ct-hint svg{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.ct-more svg,.ct-hint svg{transition:none!important}}


/* a real photo (the design drew stand-ins): fills the avatar in its shape */
.ct-av.is-photo{overflow:hidden;padding:0;background:var(--f-raised)}
.ct-av.is-photo img{display:block;width:100%;height:100%;object-fit:cover}
.ct-av.is-photo img[hidden]{display:none}
.ct-avl{display:contents}
.ct-soc-t{display:none}
/* Plain (round 15, design D's contact): no card, no photo, no name; the email large in the display face, the phone and
   each social link a pill with its name. The frame is see-through: it sits on the page's own colour. */
.fr-contact:has(>.fr-in[data-layout=plain]){background:transparent;background-image:none;box-shadow:none;border-radius:0}
.fr .fr-in[data-layout=plain]{padding:2px 0 6px}
.fr [data-layout=plain] .ct-grid,.fr [data-layout=plain] .ct-grid[data-n="1"]{grid-template-columns:minmax(0,1fr);background:none;box-shadow:none;gap:0}
.fr [data-layout=plain] .ct{display:block;padding:0;background:none;box-shadow:none;border-radius:0}
[data-layout=plain] :is(.ct-av,.ct-avl,.ct-name,.ct-role,.ct-hint,.ct-more,.ct-bio){display:none!important}
[data-layout=plain] .ct-txt{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
[data-layout=plain] .ct-rows{display:contents}
[data-layout=plain] .ct-soc{display:flex;flex-wrap:wrap;gap:12px;margin:0}
[data-layout=plain] .ct-row[data-act=email]{margin-right:28px;padding:8px 0;min-height:44px;border-bottom:1px solid var(--f-text);font:var(--f-wd,400) clamp(26px,4.2cqw,58px)/1.15 var(--f-font-d,var(--font-d));letter-spacing:var(--f-trk-d,0)}
[data-layout=plain] .ct-row[data-act=email] .ct-ico{display:none}
[data-layout=plain] :is(.ct-row[data-act=phone],.ct-soc-a){display:inline-flex;align-items:center;justify-content:center;gap:10px;width:auto;height:auto;min-height:52px;padding:0 22px;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--f-line);background:color-mix(in srgb,var(--f-bg) 60%,transparent);color:var(--f-text);font:var(--f-wt,400) 16px/1.2 var(--f-font,var(--font-u))}
[data-layout=plain] :is(.ct-row[data-act=phone] .ct-ico,.ct-row[data-act=phone] svg,.ct-soc-a svg){width:20px;height:20px;color:currentColor}
[data-layout=plain] .ct-soc-t{display:inline}
.fr[data-mode=try] [data-layout=plain] :is(.ct-row[data-act=phone],.ct-soc-a):hover{box-shadow:inset 0 0 0 1px var(--f-text);background:color-mix(in srgb,var(--f-bg) 60%,transparent)}
.fr[data-mode=try] [data-layout=plain] .ct-row:hover>span{text-decoration:none}
@container (max-width:560px){
  [data-layout=plain] .ct-txt{flex-direction:column;align-items:stretch}
  [data-layout=plain] .ct-row[data-act=email]{align-self:flex-start;margin:0 0 16px}
  [data-layout=plain] .ct-soc{flex-direction:column}
}
/* round 9 contact overrides, verbatim: Compact grows both ways; the bio button sits at its start */
[data-layout=compact] .ct{max-width:340px;transition:max-width var(--f-d-open,460ms) var(--f-ease,cubic-bezier(.22,1,.36,1)),padding var(--f-d-open,460ms) var(--f-ease,ease)}
[data-layout=compact] .ct-rows{display:flex;flex-wrap:wrap;gap:6px 16px}
[data-layout=compact] .ct.is-exp .ct-soc{display:none}
[data-layout=compact] .ct.is-exp.is-open{max-width:460px;padding:calc(24px * var(--f-gap,1))}
[data-layout=compact] .ct.is-exp.is-open .ct-soc{display:flex}
[data-layout=compact] .ct.is-exp.is-open .ct-rows{display:grid;gap:5px}
[data-layout=compact] .ct.is-exp.is-open .ct-av{width:var(--ct-av,56px);height:var(--ct-av,56px);font-size:calc(var(--ct-av,56px) * .3)}
.ct-more{justify-self:start}
[data-layout=vertical] .ct-more{justify-self:center}
@media (prefers-reduced-motion:reduce){[data-layout=compact] .ct{transition:none!important}}

/* ================================================================== CAROUSEL — ported verbatim from 50-frames.css (round 6) */
.cr{position:relative;display:grid;gap:calc(12px * var(--f-gap,1))}
.fr-carousel .fr-in{padding:calc(16px * var(--f-gap,1))}
.cr-view{position:relative;border-radius:var(--f-r-lg,12px);overflow:hidden;background:var(--f-raised);isolation:isolate}
.cr-track{position:absolute;inset:0;display:flex;transition:transform calc(var(--f-d-enter,420ms) * 1.3) var(--f-ease,var(--ease-io))}
.cr-slide{position:relative;flex:0 0 100%;margin:0;overflow:hidden}
.cr[data-tr=fade] .cr-track{transform:none!important}
.cr[data-tr=fade] .cr-slide{position:absolute;inset:0;opacity:0;transition:opacity calc(var(--f-d-enter,420ms) * 1.2) var(--ease)}
.cr[data-tr=fade] .cr-slide:not([inert]){opacity:1}
.cr[data-tr=none] .cr-track{transition:none}
.cr-cap{position:absolute;left:0;right:0;bottom:0;display:grid;justify-items:start;gap:5px;padding:56px 22px 20px;background:linear-gradient(0deg,rgba(8,9,12,.78),rgba(8,9,12,.34) 55%,transparent);color:#FFFFFF}
.cr[data-dots=inside] .cr-cap{padding-bottom:44px}
.cr-eb{font:var(--f-wl,600) 13px/1.2 var(--f-font,var(--font-u));letter-spacing:.02em;color:rgba(255,255,255,.9)}
.cr-c{max-width:34ch;font:var(--f-wd,700) calc(22px * var(--f-scale,1))/1.2 var(--f-font-d,var(--font-d));letter-spacing:var(--f-trk-d,-.02em);color:#FFFFFF;text-wrap:pretty}
.cr[data-cap=plain] .cr-cap{left:16px;right:auto;bottom:16px;padding:9px 12px;border-radius:var(--f-r-sm,6px);background:rgba(250,250,248,.95);color:#141414}
.cr[data-cap=plain][data-dots=inside] .cr-cap{bottom:40px}
.cr[data-cap=plain] .cr-eb{color:#4A4E57}
.cr[data-cap=plain] .cr-c{font:var(--f-wl,600) 14.5px/1.25 var(--f-font,var(--font-u));letter-spacing:0;color:#141414}
.cr-arr{position:absolute;top:50%;z-index:2;width:40px;height:40px;margin-top:-20px;border:0;border-radius:var(--f-round);display:grid;place-items:center;background:rgba(250,250,248,.94);color:#141414;box-shadow:0 4px 14px rgba(0,0,0,.25);cursor:pointer;transition:opacity var(--f-d-hover,120ms)}
.cr-arr svg{width:16px;height:16px;stroke-width:calc(var(--f-icon-w,1.9) + .3)}
.cr-arr.l{left:12px}.cr-arr.r{right:12px}
.fr[data-mode=try] .cr[data-arrows=hover] .cr-arr{opacity:0}
.fr[data-mode=try] .cr[data-arrows=hover] .cr-view:hover .cr-arr,.fr[data-mode=try] .cr[data-arrows=hover] .cr-arr:focus-visible{opacity:1}
.cr-dots{display:flex;justify-content:center;align-items:center;gap:6px;min-height:14px}
.cr-view .cr-dots{position:absolute;left:0;right:0;bottom:14px;z-index:2}
.cr-dot{flex:none;width:8px;height:8px;padding:0;border:0;border-radius:var(--f-round);background:color-mix(in srgb,var(--f-text) 26%,transparent);cursor:pointer;transition:width var(--f-d-open,260ms) var(--f-ease,var(--ease-out)),background-color var(--f-d-open,260ms)}
.cr-dot.on{width:22px;background:var(--f-accent)}
.fr:not([data-light]) .cr-dot.on{background:var(--f-accent-light)}
.cr-view .cr-dot{background:rgba(255,255,255,.5)}
.cr-view .cr-dot.on{background:#FFFFFF}
.cr-dots[data-style=bars] .cr-dot{width:18px;height:4px;border-radius:2px}.cr-dots[data-style=bars] .cr-dot.on{width:30px}
.cr-dots[data-style=lines] .cr-dot{width:26px;height:2px;border-radius:1px}.cr-dots[data-style=lines] .cr-dot.on{width:26px}
.cr-dots[data-style=numbers] .cr-dot{width:24px;height:24px;border-radius:var(--f-round);font:600 13px/24px var(--f-font,var(--font-u));color:var(--f-text);background:color-mix(in srgb,var(--f-text) 10%,transparent)}
.cr-dots[data-style=numbers] .cr-dot.on{width:24px;color:var(--f-on-accent);background:var(--f-accent)}
.fr[data-surface=rule] .cr-view{box-shadow:inset 0 0 0 1px var(--f-line)}
.fr[data-surface=line] .cr-view{border-radius:var(--f-r-sm,2px)}
/* phones: smaller captions, and the arrows ride above them instead of across them */
@container (max-width:520px){
  .fr-carousel .fr-in{padding:10px}
  .cr-cap{padding:40px 14px 14px;gap:3px}
  .cr[data-dots=inside] .cr-cap{padding-bottom:34px}
  .cr-c{font-size:calc(17px * var(--f-scale,1))}
  .cr-eb{font-size:13px}
  .cr-arr{top:34%;width:34px;height:34px;margin-top:-17px}
  .cr-arr.l{left:8px}.cr-arr.r{right:8px}
  .cr-view .cr-dots{bottom:12px}
}

/* real photos (the design drew stand-ins), how they fit, and the editor's empty slide */
.cr-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none}
.cr[data-fit=contain] .cr-slide img{object-fit:contain}
.cr-slide img[hidden]{display:none}
.cr-ph{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:8px;color:var(--f-muted);font:500 14px/1.3 var(--f-font,var(--font-u))}
.cr-ph svg{width:30px;height:30px;opacity:.7}
.cr-slide.is-link{cursor:pointer}
/* the pause button autoplay owes visitors (WCAG 2.2.2), top right, only while autoplay can run */
.cr-pp{position:absolute;top:12px;right:12px;z-index:3;width:32px;height:32px;border:0;border-radius:var(--f-round);display:grid;place-items:center;background:rgba(250,250,248,.9);color:#141414;cursor:pointer}
.cr-pp svg{width:14px;height:14px}
.cr-pp[hidden]{display:none}
.cr-arr:disabled{opacity:.35;cursor:default}

/* ================================================================== CARD GRID (round 11, 2026-09-29)
   Two layouts the owner picks: Shelf (a card opens as a panel under its row, inside the frame) and
   Poster wall (photo-first mosaic; a card opens as a sheet over the page). Base from 50-frames.css. */
.fr-cards{--cg-gap:calc(16px * var(--f-gap,1))}
/* the query container is the inner box, not .fr: a container is a containing block for position:fixed,
   and the embedded Poster sheet must be fixed to the page (parent.js lifts the frame over it) */
.fr.fr-cards{container-type:normal}
.fr-cards .fr-in{container-type:inline-size}
.fr-cards .fr-in{padding:calc(28px * var(--f-gap,1))}
.cg-grid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:var(--cg-gap);list-style:none;margin:0;padding:0}
.cg-card{--cg-rad:var(--cg-r,var(--f-r-lg,12px));position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--cg-rad);background:var(--f-surface);box-shadow:inset 0 0 0 var(--f-line-w,1px) var(--f-line),var(--f-shadow,none);transition:background-color var(--f-d-hover,120ms) var(--ease),box-shadow var(--f-d-hover,120ms) var(--ease),transform calc(var(--f-d-hover,120ms) * 1.6) var(--f-ease,var(--ease-out))}
.cg-cover{position:relative;aspect-ratio:16/10;border-radius:var(--cg-rad) var(--cg-rad) 0 0;overflow:hidden;background:var(--f-raised)}
.cg-cover img{display:block;width:100%;height:100%;object-fit:cover}
.cg-cover::after{content:"";position:absolute;inset:0;box-shadow:inset 0 -1px 0 var(--f-line);pointer-events:none}
.cg-cover.is-empty{display:grid;place-items:center}
.cg-ph{display:inline-flex;align-items:center;gap:8px;font:500 13px/1 var(--f-font,var(--font-u));color:var(--f-muted)}
.cg-ph svg{width:18px;height:18px}
.cg-sym{display:grid;place-items:center;width:42px;height:42px;margin:calc(18px * var(--f-gap,1)) calc(18px * var(--f-gap,1)) -4px;border-radius:min(var(--f-r-md,8px),14px);background:color-mix(in srgb,var(--f-accent) 14%,transparent);color:var(--f-accent-light)}
.fr[data-light] .cg-sym{color:var(--f-accent)}
.cg-sym svg{width:21px;height:21px}
.cg-body{flex:1;display:grid;align-content:start;gap:6px;padding:calc(16px * var(--f-gap,1)) calc(18px * var(--f-gap,1)) 10px}
.cg-eb{margin:0;font:var(--f-wl,500) calc(12.5px * var(--f-scale,1))/1.35 var(--f-font,var(--font-u));letter-spacing:var(--f-trk-l,0);text-transform:var(--f-case-l,none);color:var(--f-accent-light)}
.fr[data-light] .cg-eb{color:var(--f-accent)}
.cg-title{margin:0;font:var(--f-wd,700) calc(18px * var(--f-scale,1))/1.25 var(--f-font-d,var(--font-d));font-stretch:var(--f-stretch-d,100%);letter-spacing:calc(var(--f-trk-d,-.018em) * .7);color:var(--f-text)}
.cg-line{margin:0;font:var(--f-wt,400) calc(14px * var(--f-scale,1))/var(--f-lh-t,1.55) var(--f-font,var(--font-u));color:var(--f-muted)}
.cg-tags{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0;padding:0;list-style:none}
.cg-chip{display:inline-flex;align-items:center;padding:3px 9px;border-radius:var(--f-pill);background:color-mix(in srgb,var(--f-accent) 13%,transparent);color:var(--f-accent-light);font:var(--f-wl,500) 12px/1.3 var(--f-font,var(--font-u));white-space:nowrap}
.fr[data-light] .cg-chip{color:var(--f-accent)}
.cg-more{position:static;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin:2px calc(18px * var(--f-gap,1)) calc(16px * var(--f-gap,1));padding:4px 0;border:0;background:none;color:var(--f-text);text-decoration:none;font:var(--f-wl,560) calc(13.5px * var(--f-scale,1))/1 var(--f-font,var(--font-u));letter-spacing:var(--f-trk-l,0);text-transform:var(--f-case-l,none);border-radius:4px;cursor:pointer}
.cg-more svg{width:15px;height:15px;transition:transform calc(var(--f-d-open,260ms) * 1.2) var(--f-ease,var(--ease-out))}
.cg-card.is-open .cg-more:not(.is-link) svg{transform:rotate(180deg)}
.fr[data-mode=try] .cg-more::after{content:"";position:absolute;inset:0;border-radius:var(--cg-rad)}
.fr[data-mode=try] .cg-more:focus-visible{outline:none}
.fr[data-mode=try] .cg-more:focus-visible::after{box-shadow:0 0 0 2px var(--f-accent-light)}
.fr[data-light][data-mode=try] .cg-more:focus-visible::after{box-shadow:0 0 0 2px var(--f-accent)}
.fr[data-mode=try] .cg-card:hover{background:var(--f-raised)}
.fr[data-mode=try] .cg-card:hover .cg-more.is-link svg{transform:translate(2px,-2px)}
.cg-card.is-open{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--f-accent) 70%,var(--f-line)),var(--f-shadow,none)}
.fr[data-mode=edit] .cg-more{pointer-events:none}
.cg-empty{margin:0;padding:14px 0;color:var(--f-muted);font:400 14px/1.5 var(--f-font,var(--font-u))}
/* surfaces */
.fr[data-surface=tone] .cg-card{box-shadow:none}
.fr[data-surface=tone] .cg-cover::after{display:none}
.fr[data-surface=soft] .cg-card{box-shadow:var(--f-shadow,none)}
.fr[data-surface=soft] .cg-cover::after{display:none}
.fr[data-surface=soft][data-mode=try] .cg-card:hover{background:var(--f-surface);transform:translateY(-2px);box-shadow:0 2px 4px rgba(0,0,0,.05),0 16px 32px -14px rgba(0,0,0,.3)}
.fr[data-surface=rule] .cg[data-layout=shelf] .cg-card{box-shadow:inset 0 0 0 1px var(--f-line-hex)}
/* phones and narrow columns (the owner picks 2, 3 or 4; phones always one) */
@container (max-width:700px){.cg-grid{grid-template-columns:repeat(min(var(--cols,3),2),minmax(0,1fr))}}
@media (max-width:760px){.fr-cards .fr-in{padding:calc(20px * var(--f-gap,1))}}
@media (max-width:460px){.fr-cards .fr-in{padding:14px}}
@container (max-width:420px){.cg-grid{--cg-gap:12px;grid-template-columns:1fr}.cg-body{padding:14px 16px 8px}.cg-more{margin:2px 16px 14px}.cg-sym{margin:16px 16px -4px}}

/* ---- the Shelf panel. It is laid out at its full size the moment it opens; cardgrid.js moves the cards below
   (transform) and reveals the panel from its top edge (clip-path) while its content fades up (round 12: no
   height animation, so neither the frame nor the page it sits in re-lays out every frame). ---- */
.cg-det:not(.is-sheet){grid-column:1/-1;display:grid;grid-template-rows:1fr}
.cg-det:not(.is-sheet) .cg-det-clip{min-height:0;overflow:hidden}
.cg-det:not(.is-sheet) .cg-det-in{position:relative;margin-top:10px;padding:calc(24px * var(--f-gap,1)) calc(26px * var(--f-gap,1)) calc(26px * var(--f-gap,1));border-radius:var(--cg-r,var(--f-r-lg,12px));background:var(--f-raised);contain:layout}
.cg-notch{position:absolute;top:-7px;width:16px;height:16px;transform:rotate(45deg);border-radius:3px 0 0 0;background:var(--f-raised)}
.cg-x{position:absolute;top:12px;right:12px;z-index:2;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:var(--f-round);background:color-mix(in srgb,var(--f-text) 8%,transparent);color:var(--f-text);cursor:pointer;transition:background-color var(--f-d-hover,120ms)}
.cg-x svg{width:16px;height:16px}
.fr[data-mode=try] .cg-x:hover{background:color-mix(in srgb,var(--f-text) 14%,transparent)}
.cg-det-body{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:18px calc(32px * var(--f-gap,1));align-items:start}
.cg-dh{display:grid;gap:8px;padding-right:8px}
.cg-dt{margin:0;font:var(--f-wd,700) calc(26px * var(--f-scale,1))/var(--f-lh-d,1.12) var(--f-font-d,var(--font-d));font-stretch:var(--f-stretch-d,100%);letter-spacing:var(--f-trk-d,-.03em);color:var(--f-text);text-wrap:balance}
.cg-blocks{display:grid;gap:calc(14px * var(--f-gap,1));padding-right:36px}
@container (max-width:620px){.cg-det-body{grid-template-columns:1fr}.cg-blocks{padding-right:0}.cg-dh{padding-right:40px}}

/* ---- blocks ---- */
.cg-b-text p{margin:0;font:var(--f-wt,400) calc(15px * var(--f-scale,1))/var(--f-lh-t,1.6) var(--f-font,var(--font-u));color:var(--f-muted);max-width:62ch}
.cg-b-h h4{margin:0;font:var(--f-wd,700) calc(18px * var(--f-scale,1))/1.25 var(--f-font-d,var(--font-d));letter-spacing:calc(var(--f-trk-d,-.02em) * .7);color:var(--f-text)}
.cg-facts dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin:0;border-top:1px solid var(--f-line)}
.cg-facts dl>div{padding:10px 12px 10px 0;border-bottom:1px solid var(--f-line)}
.cg-facts dt{font:var(--f-wl,500) 12px/1.35 var(--f-font,var(--font-u));color:var(--f-muted)}
.cg-facts dd{margin:3px 0 0;font:var(--f-wl,500) 14.5px/1.4 var(--f-font,var(--font-u));color:var(--f-text)}
.cg-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.cg-stat{display:grid;gap:3px;padding:12px 14px;border-radius:min(var(--f-r-md,8px),14px);background:var(--f-surface);box-shadow:inset 0 0 0 1px var(--f-line)}
.cg-stat b{font:var(--f-wd,700) calc(24px * var(--f-scale,1))/1.1 var(--f-font-d,var(--font-d));letter-spacing:var(--f-trk-d,-.03em);color:var(--f-text)}
.cg-stat span{font:var(--f-wt,400) 12.5px/1.35 var(--f-font,var(--font-u));color:var(--f-muted)}
.cg-btns{display:flex;flex-wrap:wrap;gap:8px}
.cg-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:min(var(--f-r-md,8px),12px);background:var(--f-accent);color:var(--f-on-accent);text-decoration:none;font:var(--f-wl,600) 14.5px/1 var(--f-font,var(--font-u));transition:filter var(--f-d-hover,120ms),transform var(--f-d-hover,120ms) var(--f-ease,var(--ease-out))}
.cg-btn svg{width:15px;height:15px}
.cg-btn.is-ghost{background:transparent;color:var(--f-text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--f-text) 26%,transparent)}
.fr[data-mode=try] .cg-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.fr[data-mode=try] .cg-btn.is-ghost:hover{filter:none;background:color-mix(in srgb,var(--f-text) 7%,transparent)}
.cg-img img{display:block;width:100%;height:auto;border-radius:min(var(--f-r-md,8px),14px)}
.cg-img.is-empty{display:grid;place-items:center;aspect-ratio:16/9;border-radius:min(var(--f-r-md,8px),14px);background:var(--f-surface);box-shadow:inset 0 0 0 1px var(--f-line)}
.cg-b-tags .cg-tags{margin:0}

/* ---- Poster wall: photo-first mosaic, the first card a feature ---- */
.cg[data-layout=poster] .cg-grid{grid-auto-rows:calc(172px * var(--f-scale,1));grid-auto-flow:dense}
.cg[data-layout=poster] .cg-card{overflow:hidden;background:#0B0D12;color:#FFFFFF;box-shadow:none;justify-content:flex-end;isolation:isolate}
.cg[data-layout=poster] .cg-card:first-child{grid-column:span 2;grid-row:span 2}
.cg[data-layout=poster] .cg-cover{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;z-index:-2;transition:transform calc(var(--f-d-open,260ms) * 2.4) cubic-bezier(.22,.9,.24,1)}
.cg[data-layout=poster] .cg-cover::after{box-shadow:none;background:linear-gradient(180deg,rgba(6,8,12,0) 34%,rgba(6,8,12,.78))}
.cg[data-layout=poster] .cg-cover.is-sym,.cg[data-layout=poster] .cg-cover.is-plain,.cg[data-layout=poster] .cg-cover.is-empty{background:radial-gradient(90% 90% at 85% 10%,color-mix(in srgb,var(--f-accent) 72%,#0B0D12),transparent 70%),linear-gradient(150deg,color-mix(in srgb,var(--f-accent) 52%,#0B0D12),#10131A)}
.cg[data-layout=poster] .cg-cover .cg-sym{position:absolute;top:14px;right:14px;margin:0;width:44px;height:44px;background:rgba(255,255,255,.14);color:#FFFFFF;backdrop-filter:blur(6px)}
.cg[data-layout=poster] .cg-cover .cg-ph{color:rgba(255,255,255,.8)}
.fr[data-mode=try] .cg[data-layout=poster] .cg-card:hover{background:#0B0D12}
.fr[data-mode=try] .cg[data-layout=poster] .cg-card:hover .cg-cover{transform:scale(1.035)}
.cg[data-layout=poster] .cg-body{flex:0;padding:calc(16px * var(--f-gap,1)) calc(18px * var(--f-gap,1)) 6px}
.cg[data-layout=poster] .cg-eb{color:rgba(255,255,255,.82)}
.cg[data-layout=poster] .cg-title{color:#FFFFFF}
.cg[data-layout=poster] .cg-card:first-child .cg-title{font-size:calc(28px * var(--f-scale,1));letter-spacing:var(--f-trk-d,-.03em)}
.cg[data-layout=poster] .cg-line{color:rgba(255,255,255,.8);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cg[data-layout=poster] .cg-chip{background:rgba(255,255,255,.16);color:#FFFFFF;backdrop-filter:blur(4px)}
.cg[data-layout=poster] .cg-more{color:#FFFFFF}
.cg[data-layout=poster] .cg-card.is-open{box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
@container (max-width:420px){.cg[data-layout=poster] .cg-grid{grid-auto-rows:200px}.cg[data-layout=poster] .cg-card:first-child{grid-column:auto;grid-row:span 1}.cg[data-layout=poster] .cg-card:first-child .cg-title{font-size:calc(20px * var(--f-scale,1))}}

/* ---- the Poster sheet: over the grid in the editor, over the whole page when embedded (parent.js lifts the frame) ---- */
.cg-scrim{position:absolute;inset:0;z-index:20;background:rgba(6,7,11,.56);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:inherit}
.cg-det.is-sheet{position:absolute;inset:0;z-index:21;display:grid;justify-items:center;align-items:start;padding:24px 16px;pointer-events:none}
.fr-cards.is-embed .cg-scrim,.fr-cards.is-embed .cg-det.is-sheet{position:fixed;border-radius:0}
.fr-cards.is-embed .cg-det.is-sheet{align-items:center}
.cg-det.is-sheet .cg-det-clip{pointer-events:auto;width:min(640px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;border-radius:calc(var(--cg-r,var(--f-r-lg,12px)) * 1.25);background:var(--f-surface);box-shadow:inset 0 0 0 1px var(--f-line),0 40px 90px -30px rgba(0,0,0,.6)}
.fr-cards.is-embed .cg-det.is-sheet .cg-det-clip{max-height:calc(100dvh - 48px)}
.cg-det.is-sheet .cg-det-in{position:relative}
.cg-det.is-sheet .cg-x{background:rgba(10,12,16,.5);color:#FFFFFF;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cg-hero{aspect-ratio:21/9;overflow:hidden;background:var(--f-raised)}
.cg-hero img{display:block;width:100%;height:100%;object-fit:cover}
.cg-det.is-sheet .cg-det-body{grid-template-columns:1fr;padding:calc(22px * var(--f-gap,1)) calc(24px * var(--f-gap,1)) calc(26px * var(--f-gap,1))}
.cg-det.is-sheet .cg-dh{padding-right:44px}
.cg-det.is-sheet .cg-blocks{padding-right:0}
.cg-det.is-sheet:has(.cg-hero) .cg-dh{padding-right:0}
@media (max-width:560px){.fr-cards.is-embed .cg-det.is-sheet{padding:0;align-items:stretch}.fr-cards.is-embed .cg-det.is-sheet .cg-det-clip{width:100%;max-height:100dvh;border-radius:0}}

/* ---- Salon (round 13, 2026-10-16): uncropped pictures at their true relative size, a full-screen viewer ----
   A work is its real width × --sl-k (px per unit). --sl-k comes from the wall's width (cqw of .fr-in) and the
   collection (cardgrid.js salonModel sets --sl-span, --sl-wmax, --sl-kcap): flex-wrap hangs the works in order on
   a centre line, so layout is the browser's, once, and nothing jumps. The box keeps the photo's proportions. */
.cg[data-layout=salon]{--sl-k:min(calc(100cqw / var(--sl-span)), calc(100cqw / var(--sl-wmax)), var(--sl-kcap))}
.cg[data-layout=salon] .cg-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:calc(44px * var(--f-gap,1)) calc(28px * var(--f-gap,1))}
.sl-work.cg-card{display:block;width:max(44px,calc(var(--wcm) * var(--sl-k)));min-width:0;border-radius:0;background:none;box-shadow:none;transition:none}
.fr[data-mode=try] .cg[data-layout=salon] .cg-card:hover,.cg[data-layout=salon] .cg-card.is-open{background:none;box-shadow:none}
.fr[data-mode=edit] .sl-work.cg-card.is-sel{box-shadow:none;outline:2px solid var(--edit-ring);outline-offset:6px}
.sl-fig{width:100%}
.sl-pic{position:relative;display:block;width:100%;aspect-ratio:var(--ar);padding:0;margin:0;border:0;border-radius:0;color:var(--f-muted);
  background:color-mix(in srgb,var(--f-text) 7%,var(--f-bg));cursor:zoom-in;
  box-shadow:0 1px 0 rgba(0,0,0,.12),0 10px 22px -10px rgba(0,0,0,.45),0 2px 4px rgba(0,0,0,.18);transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.sl-pic img{display:block;width:100%;height:100%;object-fit:contain}
.sl-pic img[hidden],.sl-slide img[hidden]{display:block;visibility:hidden}   /* a picture that didn't load: no broken-image mark, the box stays */
.sl-pic.is-empty{display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--f-line)}
.fr[data-mode=edit] .sl-pic{cursor:pointer}
@media (hover:hover){.fr[data-mode=try] .sl-pic:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(0,0,0,.12),0 18px 30px -12px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.18)}}
.fr[data-mode=try] .sl-pic:focus-visible{outline:2px solid var(--f-accent-light);outline-offset:6px}
.sl-cap{margin-top:9px;min-width:0}
.fr .sl-t{margin:0;font:var(--f-wl,500) calc(13px * var(--f-scale,1))/1.35 var(--f-font,var(--font-u));color:var(--f-text)}
.sl-m{margin:2px 0 0;font:400 calc(12px * var(--f-scale,1))/1.35 var(--f-font,var(--font-u));color:var(--f-muted);font-variant-numeric:tabular-nums}
.sl-m>span:not(:empty)~span:not(:empty)::before{content:"·";margin:0 .4em}
/* phones, "close" (the default): a rhythm of pairs and singles from cardgrid.js (data-hang). A pair keeps its two
   works at true scale to each other and fills the row; a single takes the width (a large work) or about three
   quarters (a small one), never taller than ~1.2× the width; each says its real size under it.
   "scale": one scale for the whole wall, the widest work filling the row; captions step aside (a map: tap to open) */
@container (max-width:599px){
  .cg[data-layout=salon] .cg-grid{gap:30px 12px;align-items:flex-start}
  .sl-wall[data-phone=close] .sl-work[data-hang=pair]{width:calc((100% - 12px) * var(--share) - .5px)}
  .sl-wall[data-phone=close] .sl-work:is([data-hang=single],[data-hang=small]){width:100%}
  .sl-wall[data-phone=close] .sl-work[data-hang=single] .sl-fig{width:min(100%,calc(118cqw * var(--ar)));margin:0 auto}
  .sl-wall[data-phone=close] .sl-work[data-hang=small] .sl-fig{width:min(74%,calc(118cqw * var(--ar)));margin:0 auto}
  .sl-wall[data-phone=close] .sl-t{font-size:14px}
  .sl-wall[data-phone=scale]{--sl-k:min(calc(100cqw / var(--sl-span-s)), var(--sl-kcap));gap:22px 12px;align-items:center}
  .sl-wall[data-phone=scale] .sl-cap{display:none}
}
/* the viewer: the whole picture on a dark ground. Phones: the picture on top, the words and Previous / Next under
   the thumb. Wide or landscape: the picture left, the words in a column right. Its own size container (slv). */
.cg-det.is-sheet.sl-view{display:block;padding:0}
.fr-cards:not(.is-embed) .cg-det.is-sheet.sl-view{background:rgba(10,11,14,.78)}   /* in the editor: the wall below the viewer is dimmed */
.cg-det.is-sheet.sl-view .cg-det-clip{container:slv/size;width:100%;height:620px;max-height:none;border-radius:0;background:none;box-shadow:none;overflow:hidden}
.fr-cards.is-embed .cg-det.is-sheet.sl-view .cg-det-clip{width:100%;height:100vh;height:100dvh;max-height:none;border-radius:0}
.sl-in{position:relative;height:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"bar" "stage" "info" "nav";color:#EFEDE8;overflow:hidden}
.sl-bg{position:absolute;inset:0;background:#0E0F12}
.sl-bar,.sl-stage,.sl-info,.sl-nav{position:relative}
.sl-bar{grid-area:bar;display:flex;align-items:center;gap:8px;padding:calc(8px + env(safe-area-inset-top,0px)) calc(10px + env(safe-area-inset-right,0px)) 6px calc(18px + env(safe-area-inset-left,0px))}
.sl-n{margin:0 auto 0 0;font:500 13px/1 var(--f-font,var(--font-u));letter-spacing:.06em;color:#B6B3AD;font-variant-numeric:tabular-nums}
.sl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:48px;min-height:48px;padding:0 16px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(14,15,18,.6);color:#EFEDE8;font:500 14px/1 var(--f-font,var(--font-u));text-decoration:none;cursor:pointer}
.sl-btn svg{width:20px;height:20px}
.sl-btn:disabled{opacity:.4;cursor:default}
.sl-view .sl-btn.cg-x{position:static;width:48px;height:48px;padding:0;border-radius:999px;background:rgba(14,15,18,.6);color:#EFEDE8}
.sl-view .sl-btn.cg-x svg{width:20px;height:20px}
@media (hover:hover){.fr[data-mode=try] .sl-btn:not(:disabled):hover{border-color:rgba(255,255,255,.55)}}
.sl-view :focus-visible{outline:2px solid #F4F2EE;outline-offset:3px}
.sl-stage{grid-area:stage;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.fr[data-mode=try] .sl-stage{cursor:grab}
.fr[data-mode=try] .sl-stage.is-zoomed{cursor:move}
.sl-track{position:absolute;inset:0}
.sl-slide{position:absolute;inset:0;display:grid;place-items:center;padding:8px 12px}
.sl-slide img{display:block;max-width:none;background:#1A1A1C;box-shadow:0 30px 60px -20px rgba(0,0,0,.7);transform-origin:50% 50%;-webkit-user-drag:none;user-select:none}
.sl-info{grid-area:info;max-height:34cqh;overflow:auto;overscroll-behavior:contain;padding:14px calc(20px + env(safe-area-inset-right,0px)) 4px calc(20px + env(safe-area-inset-left,0px))}
.fr .sl-title{margin:0 0 6px;font:var(--f-wd,700) calc(26px * var(--f-scale,1))/1.08 var(--f-font-d,var(--font-d));letter-spacing:var(--f-trk-d,-.02em);color:#F4F2EE;text-wrap:balance}
.sl-meta{margin:0 0 8px;font:400 14px/1.45 var(--f-font,var(--font-u));color:#B6B3AD}
.sl-meta>span:not(:empty)~span:not(:empty)::before{content:"·";margin:0 .45em}
.fr[data-mode=edit] .sl-meta [data-k]:empty::before{margin-right:.6em}
.fr .sl-line{margin:0;font:italic 400 calc(17px * var(--f-scale,1))/1.45 var(--f-font,var(--font-u));color:#E4E1DB;max-width:60ch}
.sl-alt{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sl-nav{grid-area:nav;display:flex;gap:10px;padding:12px calc(16px + env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px))}
.sl-nav .sl-btn{flex:1;min-height:52px;font-size:15px}
.sl-share{position:absolute;left:0;right:0;bottom:0;z-index:3;display:grid;gap:8px;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));background:#1A1A1C;border-top:1px solid rgba(255,255,255,.14);border-radius:18px 18px 0 0;box-shadow:0 -20px 50px -20px rgba(0,0,0,.6)}
.sl-share[hidden]{display:none}
.sl-share-t{margin:0 0 4px;font:600 15px/1.3 var(--f-font,var(--font-u));color:#F4F2EE}
.sl-share .sl-btn{justify-content:flex-start;min-height:52px;border-radius:14px;font-size:16px}
.sl-share .sl-btn.is-quiet{justify-content:center;border:0;background:none;color:#B6B3AD}
@container slv ((min-width:900px) and (min-height:501px)) or ((max-height:500px) and (min-width:560px)){
  .sl-in{grid-template-columns:minmax(0,1fr) minmax(300px,380px);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"stage bar" "stage info" "stage nav"}
  .sl-bar,.sl-info,.sl-nav{border-left:1px solid rgba(255,255,255,.12)}
  .sl-bar{padding:calc(16px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) 8px 24px}
  .sl-info{max-height:none;padding:clamp(12px,3cqh,40px) calc(28px + env(safe-area-inset-right,0px)) 12px 28px}
  .sl-nav{padding:16px calc(24px + env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) 24px}
  .sl-slide{padding:clamp(16px,4cqh,56px) clamp(16px,3cqw,56px)}
  .sl-share{left:auto;right:16px;bottom:16px;width:340px;border-radius:18px;border:1px solid rgba(255,255,255,.14)}
}
@container slv (max-height:500px){
  .fr .sl-title{font-size:22px}
  .fr .sl-line{font-size:15px}
  .sl-nav .sl-btn{min-height:48px}
}
@media (prefers-reduced-motion:reduce){.sl-pic{transition:none}}

/* ================================================================== NAV — the site header (round 11, 2026-09-29)
   Two layouts the owner picks: Bar and Island. Folds into one Menu button when the links stop fitting
   (measured in nav.js); the menu drops down under the header. The frame itself is transparent: the
   Island floats over the owner's page. */
.fr.fr-nav,.fr.fr-nav[data-surface]{background:transparent!important;background-image:none!important;box-shadow:none!important;border-radius:0}
.fr-nav{--nh-ink:var(--f-accent-light)}
.fr-nav[data-light]{--nh-ink:var(--f-accent)}
.nh{position:relative;font-family:var(--f-font,var(--font-u))}
.nh-bar{position:relative;z-index:2;display:flex;align-items:center;gap:calc(20px * var(--f-gap,1));min-width:0}
.nh-brand{flex:none;display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 4px;border-radius:var(--f-r-sm,6px);color:var(--f-text);text-decoration:none;font:var(--f-wd,700) calc(17px * var(--f-scale,1))/1.1 var(--f-font-d,var(--font-d));font-stretch:var(--f-stretch-d,100%);letter-spacing:calc(var(--f-trk-d,-.02em) * .7);white-space:nowrap}
.nh-logo{display:block;height:30px;width:auto;max-width:170px;object-fit:contain}
.nh-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:min(var(--f-r-md,8px),10px);background:var(--f-accent);color:var(--f-on-accent)}
.nh-mark svg{width:17px;height:17px}
.nh-body{display:flex;align-items:center;gap:calc(12px * var(--f-gap,1));min-width:0}
.nh-nav{min-width:0}
.nh-list{position:relative;display:flex;gap:2px;margin:0;padding:0;list-style:none}
.nh-it{position:relative;z-index:1;flex:none;border-radius:var(--f-r-sm,6px)}
.nh-a{display:inline-flex;align-items:center;height:40px;padding:0 12px;border-radius:var(--f-r-sm,6px);color:var(--f-muted);text-decoration:none;font:var(--f-wl,500) calc(14.5px * var(--f-scale,1))/1 var(--f-font,var(--font-u));letter-spacing:var(--f-trk-l,0);white-space:nowrap;transition:color var(--f-d-hover,120ms) var(--ease),background-color var(--f-d-hover,120ms) var(--ease),box-shadow var(--f-d-hover,120ms) var(--ease)}
.fr[data-mode=try] .nh-a:hover{color:var(--f-text)}
.nh-a[aria-current=page]{color:var(--f-text)}
.nh-cta{flex:none;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;border-radius:min(var(--f-r-md,8px),12px);background:var(--f-accent);color:var(--f-on-accent);text-decoration:none;font:var(--f-wl,600) calc(14.5px * var(--f-scale,1))/1 var(--f-font,var(--font-u));white-space:nowrap;transition:filter var(--f-d-hover,120ms)}
.fr[data-mode=try] .nh-cta:hover{filter:brightness(1.08)}
.nh-menu{display:none;flex:none;align-items:center;gap:8px;height:40px;margin-left:auto;padding:0 14px 0 12px;border:0;border-radius:min(var(--f-r-md,8px),12px);background:color-mix(in srgb,var(--f-text) 7%,transparent);color:var(--f-text);font:var(--f-wl,600) 14.5px/1 var(--f-font,var(--font-u));cursor:pointer}
.nh-mi{display:grid;place-items:center}
.nh-menu svg{width:18px;height:18px}
.nh-lit{display:none}
/* measuring: every part in one row at its natural width (nav.js, then removed in the same frame) */
.nh[data-measure] .nh-bar{width:max-content!important;max-width:none!important}
.nh[data-measure] .nh-menu{display:none!important}
.fr[data-mode=edit] .nh-it.is-sel{outline:2px solid var(--edit-ring);outline-offset:2px}
.fr[data-mode=edit] .nh-it:not(.is-sel):hover{outline:1.5px solid var(--edit-hover);outline-offset:2px}
.fr[data-mode=edit] .nh-it.is-sel [data-k]:focus{outline-color:transparent}
.fr[data-mode=edit] .nh-menu{cursor:pointer}

/* ---- Bar: brand left, links and the button right, a line under the page you're on ---- */
.nh[data-layout=bar] .nh-bar{height:calc(64px * var(--f-scale,1));padding:0 clamp(16px,3vw,32px);background:var(--f-surface);box-shadow:inset 0 -1px 0 var(--f-line)}
.nh[data-layout=bar] .nh-body{margin-left:auto}
.nh[data-layout=bar] .nh-a[aria-current=page]{border-radius:0;box-shadow:inset 0 -2px 0 var(--nh-ink)}
.fr[data-surface=lit] .nh[data-layout=bar] .nh-bar{background-image:linear-gradient(180deg,color-mix(in srgb,var(--f-accent) 6%,transparent),transparent)}

/* ---- Island: a floating pill; the lit block sits under the page you're on and follows the pointer ---- */
.nh[data-layout=island]{padding:10px clamp(10px,2vw,20px) 0}
.nh[data-layout=island] .nh-bar{width:100%;max-width:1080px;height:calc(56px * var(--f-scale,1));margin:0 auto;padding:0 8px 0 12px;gap:10px;border-radius:var(--f-pill);background:color-mix(in srgb,var(--f-surface) 96%,transparent);box-shadow:inset 0 0 0 1px var(--f-line),0 14px 34px -20px rgba(0,0,0,.5)}
.nh[data-layout=island] .nh-body{flex:1;justify-content:flex-end}
.nh[data-layout=island] .nh-nav{margin-right:auto;margin-left:auto}
.nh[data-layout=island] .nh-a{border-radius:var(--f-pill);padding:0 14px}
.nh[data-layout=island] .nh-it{border-radius:var(--f-pill)}
.nh[data-layout=island] .nh-it[data-lit] .nh-a{color:var(--f-on-accent)}
.nh[data-layout=island] .nh-lit{display:block;position:absolute;left:0;top:0;z-index:0;height:40px;width:0;border-radius:var(--f-pill);background:var(--f-accent);opacity:0;transition:transform calc(var(--f-d-open,260ms) * 1.35) var(--f-ease,var(--ease-out)),width calc(var(--f-d-open,260ms) * 1.35) var(--f-ease,var(--ease-out)),opacity var(--f-d-hover,120ms)}
.nh[data-layout=island] .nh-cta,.nh[data-layout=island] .nh-menu{border-radius:var(--f-pill)}
.nh[data-layout=island] .nh-mark{border-radius:var(--f-round)}

/* ---- folded: brand + Menu; the links and the button drop down under the header ---- */
.nh[data-fold] .nh-menu{display:inline-flex}
.nh[data-fold] .nh-body{position:absolute;z-index:1;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:6px clamp(16px,3vw,32px) 18px;background:var(--f-surface);box-shadow:inset 0 -1px 0 var(--f-line),0 22px 34px -22px rgba(0,0,0,.45);visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity var(--f-d-open,260ms) var(--ease),transform calc(var(--f-d-open,260ms) * 1.2) var(--f-ease,var(--ease-out)),visibility 0s linear var(--f-d-open,260ms)}
.nh[data-fold][data-open] .nh-body{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.nh[data-fold] .nh-nav{margin:0}
.nh[data-fold] .nh-list{flex-direction:column;gap:0}
.nh[data-fold] .nh-it{border-radius:0}
.nh[data-fold] .nh-a{display:flex;width:100%;height:auto;padding:15px 4px;border-radius:0;font-size:calc(17px * var(--f-scale,1));box-shadow:inset 0 -1px 0 var(--f-line)}
.nh[data-fold] .nh-a[aria-current=page]{color:var(--nh-ink);box-shadow:inset 0 -1px 0 var(--f-line)}
.nh[data-fold] .nh-cta{margin-top:16px;height:48px}
.nh[data-fold][data-layout=island] .nh-body{top:calc(100% + 8px);left:clamp(10px,2vw,20px);right:clamp(10px,2vw,20px);padding:8px;border-radius:calc(min(var(--f-r-lg,12px),20px) + 4px);box-shadow:inset 0 0 0 1px var(--f-line),0 24px 44px -22px rgba(0,0,0,.5)}
.nh[data-fold][data-layout=island] .nh-a{padding:14px 14px;border-radius:min(var(--f-r-md,8px),14px);box-shadow:none}
.nh[data-fold][data-layout=island] .nh-it{border-radius:min(var(--f-r-md,8px),14px)}
.nh[data-fold][data-layout=island] .nh-a[aria-current=page]{background:var(--f-accent);color:var(--f-on-accent)}
.nh[data-fold][data-layout=island] .nh-cta{margin-top:8px}

/* ---- the page's ES | EN switch, in the header (round 15, design D's pill): this page's language pressed ---- */
.nh-lang{flex:none;display:flex;align-items:center;padding:0;border:1px solid var(--f-line);border-radius:999px;font:600 13px/1 var(--f-font,var(--font-u));letter-spacing:.06em}
.nh-lang-a{display:grid;place-items:center;min-width:44px;height:44px;padding:0 10px;border-radius:999px;color:var(--f-muted);text-decoration:none;transition:color var(--f-d-hover,120ms),background-color var(--f-d-hover,120ms)}
.nh-lang-a[aria-current=page]{background:var(--f-text);color:var(--f-bg)}
.fr[data-mode=try] .nh-lang-a:not([aria-current=page]):hover{color:var(--f-text)}
.nh[data-fold] .nh-lang{margin-left:auto}
.nh[data-fold] .nh-lang+.nh-menu{margin-left:8px}
/* ---- a phone's bottom bar (cfg.phone "bottom", under 720 px): the links side by side under the thumb, no brand, no Menu ---- */
.nh[data-phone=bottom]{padding:0}
.nh[data-phone=bottom] .nh-bar{height:auto;max-width:none;margin:0;gap:4px;border-radius:0;padding:6px calc(10px + env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) calc(10px + env(safe-area-inset-left,0px));
  background:color-mix(in srgb,var(--f-bg) 94%,transparent);box-shadow:inset 0 1px 0 var(--f-line)}
.nh[data-phone=bottom] .nh-brand,.nh[data-phone=bottom] .nh-menu,.nh[data-phone=bottom] .nh-lit{display:none}
.nh[data-phone=bottom] .nh-body{flex:1;min-width:0;margin:0;gap:4px}
.nh[data-phone=bottom] .nh-nav{flex:1;min-width:0}
.nh[data-phone=bottom] .nh-list{gap:4px}
.nh[data-phone=bottom] .nh-it{flex:1 1 0;min-width:0}
.nh[data-phone=bottom] .nh-a{display:flex;width:100%;justify-content:center;height:44px;padding:0 4px;border-radius:12px;font-size:14px;box-shadow:none;overflow:hidden;text-overflow:ellipsis}
.nh[data-phone=bottom] .nh-a[aria-current=page],.nh[data-phone=bottom] .nh-it[data-lit] .nh-a{color:var(--f-text);background:color-mix(in srgb,var(--f-text) 8%,transparent);box-shadow:none}
.nh[data-phone=bottom] .nh-cta{height:44px;padding:0 12px}
.nh[data-phone=bottom] .nh-lang{margin-left:4px;background:var(--f-bg)}

/* ---- Atelier (design D's header): the name in the display serif, quiet links, the page you're on underlined in ink ---- */
.fr-nav[data-family=atelier] .nh[data-layout=bar]:not([data-phone]) .nh-bar{height:56px;padding:0 clamp(16px,4vw,56px);gap:24px;background:color-mix(in srgb,var(--f-bg) 92%,transparent);box-shadow:none}
.fr-nav[data-family=atelier] .nh-brand{min-height:44px;padding:0;font-size:26px;letter-spacing:.005em}
.fr-nav[data-family=atelier] .nh-list{gap:6px}
.fr-nav[data-family=atelier] .nh-a{height:44px;font-size:14px;font-weight:500;border-radius:999px}
.fr-nav[data-family=atelier] .nh[data-layout=bar]:not([data-phone]):not([data-fold]) .nh-a[aria-current=page]{border-radius:0;box-shadow:inset 0 -1px 0 var(--f-text)}
.fr-nav[data-family=atelier] .nh-cta,.fr-nav[data-family=atelier] .nh-menu{border-radius:999px}

/* ==========================================================================
   ROOMS GALLERY (round 14, 2026-10-21; Cristina Llano's design D, "The rooms"). shared/frames/gallery.js.
   The doors (one arched door per room) on the template's own colours, then each room in its own calm tone,
   its top edge fading in from the room before (a plain gradient: nothing moves). Only transform and opacity
   animate. The frame is a whole part of a page: no rounded box around it.
   ========================================================================== */
.fr.fr-gallery{container-type:normal;border-radius:0;box-shadow:none;--gl-pad:clamp(16px,4.2vw,56px)}
.fr-gallery .fr-in.gl{container-type:inline-size;padding:0}
.gl{--gl-pad:clamp(16px,4cqw,56px);--seam:clamp(120px,14cqw,200px)}
.gl img[hidden]{display:block;visibility:hidden}
.gl-ph{display:grid;place-items:center;width:100%;height:100%;color:var(--r-muted,var(--f-muted))}
.gl-ph svg{width:28px;height:28px;stroke-width:1.5}
.gl-empty{margin:18px 0 6px;font:400 15px/1.5 var(--f-font,var(--font-u));color:var(--r-muted,var(--f-muted))}
.gl-none{padding:40px var(--gl-pad)}

/* ---------- the heading and the doors ---------- */
.gl-doors-wrap{padding:clamp(8px,2cqw,24px) var(--gl-pad) clamp(48px,8cqw,104px)}
.gl-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px;margin:clamp(18px,3cqw,36px) 0 clamp(16px,2.4cqw,28px)}
.fr .gl-h{margin:0;font:var(--f-wd,500) clamp(34px,3.2cqw,44px)/1 var(--f-font-d,var(--font-d));letter-spacing:var(--f-trk-d,-.01em);color:var(--f-text)}
.fr .gl-line{margin:0;font:400 15px/1.6 var(--f-font,var(--font-u));color:var(--f-muted);max-width:60ch}
.gl-doors{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--doors,4),minmax(0,1fr));gap:clamp(12px,2.4cqw,32px);max-width:1080px}
.gl-doors[data-n="1"],.gl-doors[data-n="2"]{--doors:2}
.gl-doors[data-n="3"]{--doors:3}
.gl-door{display:block;text-decoration:none;color:var(--f-text);border-radius:999px 999px 6px 6px;-webkit-tap-highlight-color:transparent;--tone:var(--f-raised)}
.gl-arch{display:block;position:relative;aspect-ratio:4/5;padding:7px 7px 0;border-radius:999px 999px 4px 4px;overflow:hidden;background:var(--tone);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 18px 36px -22px rgba(0,0,0,.6);transition:transform .4s var(--ease)}
.gl-arch-in{display:block;width:100%;height:100%;border-radius:999px 999px 0 0;overflow:hidden;background:color-mix(in srgb,var(--tone) 70%,#808080)}
.gl-arch-in img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gl-arch-ph{display:grid;place-items:center;width:100%;height:100%;color:var(--f-muted)}
.gl-arch-ph svg{width:30px;height:30px;stroke-width:1.5}
.gl-dn{display:block;margin-top:12px;font:500 11.5px/1.3 var(--f-font,var(--font-u));letter-spacing:.16em;text-transform:uppercase;color:var(--f-muted)}
.gl-dt{display:block;margin-top:3px;font:var(--f-wd,500) clamp(21px,2.1cqw,28px)/1.1 var(--f-font-d,var(--font-d));color:var(--f-text)}
.gl-dc{display:block;margin-top:2px;font:400 13px/1.4 var(--f-font,var(--font-u));color:var(--f-muted)}
.fr[data-mode=try] .gl-door:active .gl-arch{transform:scale(.98)}
@media (hover:hover){.fr[data-mode=try] .gl-door:hover .gl-arch{transform:translateY(-4px)}.fr[data-mode=try] .gl-door:hover img{transform:scale(1.04)}}
.fr .gl-door:focus-visible{outline-offset:6px}
@container (max-width:719px){.gl-doors{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px}.gl-arch{aspect-ratio:3/4}.gl-dt{font-size:22px}}

/* ---------- a room ---------- */
.gl-room{--tone:var(--f-raised);--acc:var(--f-accent-light);--r-ink:#ECE8E2;--r-muted:#B6B0BC;--r-line:rgba(236,232,226,.16);--sh:clamp(200px,56cqw,280px);
  position:relative;color:var(--r-ink);padding:calc(var(--seam) + 8px) var(--gl-pad) clamp(32px,4cqw,56px);
  background:linear-gradient(in oklab,var(--from,var(--f-bg)) 0,var(--tone) var(--seam)) var(--tone)}
.gl-room.is-light{--r-ink:#1B1A18;--r-muted:#55514B;--r-line:rgba(27,26,24,.16)}
.gl-room.is-auto{--r-ink:var(--f-text);--r-muted:var(--f-muted);--r-line:var(--f-line)}
.fr[data-light] .gl-room.is-auto{--acc:var(--f-accent)}
.fr .gl-room :focus-visible{outline-color:currentColor}
.gl-room-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5cqw,88px);align-items:start}
.gl-room-head{position:sticky;top:96px;min-width:0}
.gl-rn{display:flex;align-items:center;gap:12px;margin:0 0 16px;font:400 12px/1.3 var(--f-font,var(--font-u));letter-spacing:.16em;text-transform:uppercase;color:var(--r-muted)}
.gl-rn::before{content:"";width:28px;height:1px;background:var(--acc);flex:none}
.gl-rn b{color:var(--acc);font-weight:600}
.fr .gl-rt{margin:0;font:var(--f-wd,500) clamp(42px,5.4cqw,76px)/1 var(--f-font-d,var(--font-d));letter-spacing:var(--f-trk-d,-.005em);color:var(--r-ink)}
.fr .gl-ri{margin:16px 0 0;max-width:42ch;font:400 16px/1.6 var(--f-font,var(--font-u));color:var(--r-muted)}
.gl-room.is-grid .gl-room-head{position:static;margin-bottom:clamp(24px,3cqw,40px)}

/* pictures: a fixed shape before they arrive (no jump), a quiet tone behind them */
.gl-fig{width:100%}
.gl-pic{display:block;position:relative;width:100%;padding:0;margin:0;border:0;border-radius:0;aspect-ratio:var(--ar);cursor:zoom-in;color:inherit;
  background:color-mix(in srgb,var(--r-ink) 9%,var(--tone));-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  box-shadow:0 1px 0 rgba(0,0,0,.14),0 14px 30px -14px rgba(0,0,0,.55),0 3px 6px rgba(0,0,0,.18);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.gl-pic img{display:block;width:100%;height:100%;object-fit:contain}
.gl-pic.is-empty{box-shadow:inset 0 0 0 1px var(--r-line)}
.fr[data-mode=edit] .gl-pic{cursor:pointer}
.fr[data-mode=try] .gl-pic:active{transform:scale(.985)}
@media (hover:hover){.fr[data-mode=try] .gl-pic:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(0,0,0,.14),0 22px 40px -16px rgba(0,0,0,.6),0 3px 6px rgba(0,0,0,.18)}}
.fr[data-mode=edit] .gl-work.is-sel .gl-pic{outline:2px solid var(--edit-ring);outline-offset:6px}
.fr[data-mode=edit] .gl-room.is-sel{outline:2px solid var(--edit-ring);outline-offset:-2px}
.fr[data-mode=edit] .gl-doors-wrap.is-sel{outline:2px solid var(--edit-ring);outline-offset:-2px}

/* the lead work */
.gl-lead{margin:0;min-width:0}
.gl-lead .gl-fig{width:min(100%,calc(640px * var(--ar)));min-width:min(100%,280px)}
.gl-label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;max-width:max(min(100%,calc(640px * var(--ar))),min(100%,280px))}
.gl-ln{display:flex;flex-direction:column;gap:2px;margin:0;min-width:0}
.gl-ln-t{font:var(--f-wd,500) 19px/1.25 var(--f-font-d,var(--font-d));color:var(--r-ink)}
.gl-ln-t:empty{display:none}
.gl-ln-m{font:400 12px/1.3 var(--f-font,var(--font-u));letter-spacing:.12em;color:var(--r-muted);font-variant-numeric:tabular-nums}
.gl-see{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:44px;padding:0 2px;border:0;background:none;color:inherit;cursor:pointer;
  font:500 14px/1 var(--f-font,var(--font-u));text-decoration:underline;text-decoration-color:var(--acc);text-underline-offset:6px;text-decoration-thickness:1.5px}
.gl-see svg{width:16px;height:16px;stroke-width:1.8}
.gl-lead .gl-cap{display:none}

/* the rest of the room: a strip you swipe (momentum and snapping are the phone's own scrolling) */
.gl-strip-wrap{margin-top:clamp(40px,6cqw,88px)}
.gl-strip-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.gl-sh{margin:0;font:500 12px/1.3 var(--f-font,var(--font-u));letter-spacing:.16em;text-transform:uppercase;color:var(--r-muted)}
.gl-swipe{text-transform:none;letter-spacing:0;margin-left:6px}
.gl-arrows{display:flex;gap:8px}
.gl-arrows[hidden]{display:none}
.gl-arrows button{display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:999px;border:1px solid var(--r-line);background:none;color:inherit;cursor:pointer}
.gl-arrows button:disabled{opacity:.3;cursor:default}
.gl-arrows svg{width:20px;height:20px;stroke-width:1.8}
@media (hover:hover){.fr[data-mode=try] .gl-arrows button:not(:disabled):hover{border-color:currentColor}}
.gl-strip{list-style:none;margin:0 calc(-1 * var(--gl-pad));padding:12px var(--gl-pad) 18px;display:flex;align-items:flex-end;gap:clamp(18px,3cqw,44px);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 var(--gl-pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gl-strip::-webkit-scrollbar{display:none}
.gl-work.is-strip{flex:none;scroll-snap-align:center;width:min(calc(var(--sh) * var(--ar)),calc(100cqw - 2 * var(--gl-pad) - 24px))}
.gl-cap{margin:12px 0 0;font:400 13px/1.35 var(--f-font,var(--font-u));color:var(--r-muted);font-variant-numeric:tabular-nums;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* an even grid: calm rows, each picture whole, standing in a box of the same shape */
.gl-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:clamp(22px,3cqw,40px) clamp(16px,2.4cqw,32px)}
.gl-work.is-cell{container-type:inline-size;min-width:0}
.gl-work.is-cell .gl-fig{display:flex;align-items:flex-end;justify-content:center;aspect-ratio:4/5}
.gl-work.is-cell .gl-pic{width:min(100cqw,calc(125cqw * var(--ar)))}
/* the way on */
.gl-next{display:flex;align-items:center;gap:16px;margin-top:clamp(40px,6cqw,80px);padding:16px 0;min-height:72px;border-top:1px solid var(--r-line);text-decoration:none;color:inherit}
.gl-next-w{display:block;min-width:0}
.gl-nt{display:block;font:400 12px/1.3 var(--f-font,var(--font-u));letter-spacing:.16em;text-transform:uppercase;color:var(--r-muted)}
.gl-nn{display:block;font:var(--f-wd,500) clamp(24px,2.6cqw,34px)/1.1 var(--f-font-d,var(--font-d))}
.gl-nth{margin-left:auto;flex:none;width:56px;height:72px;border-radius:999px 999px 3px 3px;overflow:hidden;background:var(--tone2,var(--f-raised));box-shadow:0 0 0 5px var(--tone2,var(--f-raised))}
.gl-nth img{display:block;width:100%;height:100%;object-fit:cover}
.gl-next>svg{width:22px;height:22px;stroke-width:1.6;flex:none;margin-left:auto}
@media (hover:hover){.fr[data-mode=try] .gl-next:hover .gl-nn{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}}
@container (min-width:720px){.gl-room{--sh:340px}}
@container (max-width:719px){
  .gl-room-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .gl-room-head{position:static}
  .fr .gl-rt{font-size:clamp(42px,13cqw,60px)}
  .gl-lead .gl-fig{width:min(100%,calc((100cqw - 2 * var(--gl-pad)) * 1.2 * var(--ar)));margin:0 auto}
  .gl-label{max-width:none}
  .gl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (hover:hover) and (pointer:fine){.gl-swipe{display:none}}

/* ---------- the viewer: the room's colour comes with the work ---------- */
.gl-view{position:absolute;z-index:30;left:0;right:0;top:0;height:620px;container:glv/size;color:#EFECE6;--v-ink:#EFECE6;--v-muted:#B4AFA6;--v-line:rgba(255,255,255,.15);--v-chip:rgba(20,19,23,.7)}
.gl-view.is-light{color:#1B1A18;--v-ink:#1B1A18;--v-muted:#55514B;--v-line:rgba(27,26,24,.16);--v-chip:rgba(233,229,222,.8)}
.fr-gallery.is-embed .gl-view{position:fixed;inset:0;height:100vh;height:100dvh}
.gl-vin{position:relative;height:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"bar" "stage" "info" "nav";overflow:hidden}
.gl-vbg{position:absolute;inset:0;background:color-mix(in srgb,var(--vtone,#141317) 72%,#000)}
.gl-view.is-light .gl-vbg{background:var(--vtone,#E9E5DE)}
.gl-vbar,.gl-stage,.gl-vinfo,.gl-vnav{position:relative}
.gl-vbar{grid-area:bar;display:flex;align-items:center;gap:8px;padding:calc(6px + env(safe-area-inset-top,0px)) calc(8px + env(safe-area-inset-right,0px)) 6px calc(16px + env(safe-area-inset-left,0px))}
.gl-vn{margin:0 auto 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 12px/1.3 var(--f-font,var(--font-u));letter-spacing:.12em;text-transform:uppercase;color:var(--v-muted);font-variant-numeric:tabular-nums}
.gl-vn b{color:var(--v-ink);font-weight:600}
.gl-vbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:48px;min-height:48px;padding:0 14px;border:1px solid var(--v-line);border-radius:999px;background:var(--v-chip);color:var(--v-ink);font:500 14px/1 var(--f-font,var(--font-u));cursor:pointer;white-space:nowrap}
.gl-vbtn svg{width:20px;height:20px;stroke-width:1.7}
.gl-vbtn:disabled{opacity:.4;cursor:default}
.gl-x{padding:0;width:48px}
@media (hover:hover){.fr[data-mode=try] .gl-vbtn:not(:disabled):hover{border-color:var(--v-ink)}}
.fr .gl-view :focus-visible{outline:2px solid var(--v-ink);outline-offset:3px}
.gl-stage{grid-area:stage;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.fr[data-mode=try] .gl-stage{cursor:grab}
.fr[data-mode=try] .gl-stage.is-zoomed{cursor:move}
.gl-track{position:absolute;inset:0}
.gl-slide{position:absolute;inset:0;display:grid;place-items:center;padding:8px 12px}
.gl-slide img{display:block;max-width:none;background:rgba(0,0,0,.2);box-shadow:0 30px 60px -20px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.3);transform-origin:50% 50%;-webkit-user-drag:none;user-select:none}
.gl-vinfo{grid-area:info;max-height:36cqh;overflow:auto;overscroll-behavior:contain;padding:12px calc(20px + env(safe-area-inset-right,0px)) 0 calc(20px + env(safe-area-inset-left,0px))}
.fr .gl-vt{margin:0;font:var(--f-wd,500) clamp(24px,3cqw,38px)/1.08 var(--f-font-d,var(--font-d));color:var(--v-ink)}
.gl-vnum{display:block;margin-bottom:4px;font:400 12px/1.3 var(--f-font,var(--font-u));letter-spacing:.12em;color:var(--v-muted);font-variant-numeric:tabular-nums}
.gl-vt:has(.gl-vtt:empty) .gl-vnum{display:inline;margin:0 .4em 0 0;font:inherit;letter-spacing:0;color:var(--v-ink)}
.gl-vmeta{margin:8px 0 0;font:400 14px/1.45 var(--f-font,var(--font-u));color:var(--v-muted)}
.gl-vmeta>span:not(:empty)~span:not(:empty)::before{content:"·";margin:0 .45em}
.fr[data-mode=edit] .gl-vmeta [data-k]:empty::before{margin-right:.6em}
.fr .gl-vnote{margin:8px 0 0;max-width:60ch;font:italic 400 16px/1.5 var(--f-font,var(--font-u));color:var(--v-ink)}
.gl-vhint{margin:8px 0 0;font:400 13px/1.4 var(--f-font,var(--font-u));color:var(--v-muted)}
.gl-valt{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (hover:none){.gl-vhint .k{display:none}}
@media (hover:hover) and (pointer:fine){.gl-vhint .t{display:none}}
.gl-vnav{grid-area:nav;display:flex;gap:10px;padding:10px calc(16px + env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px))}
.gl-vnav .gl-vbtn{flex:1;min-height:52px;font-size:15px}
@container glv (min-width:900px) and (min-height:501px){
  .gl-vin{grid-template-columns:minmax(0,1fr) minmax(280px,340px);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"stage bar" "stage info" "stage nav"}
  .gl-vbar,.gl-vinfo,.gl-vnav{border-left:1px solid var(--v-line)}
  .gl-vbar{padding:calc(16px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) 8px 24px}
  .gl-vinfo{max-height:none;padding:clamp(12px,3cqh,40px) calc(28px + env(safe-area-inset-right,0px)) 12px 28px}
  .gl-vnav{padding:16px calc(24px + env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) 24px}
  .gl-slide{padding:clamp(16px,4cqh,56px) clamp(16px,3cqw,56px)}
}
@container glv (max-height:500px) and (min-width:560px){
  .gl-vin{grid-template-columns:minmax(0,1fr) minmax(260px,320px);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"stage bar" "stage info" "stage nav"}
  .fr .gl-vt{font-size:24px}
}
.gl-end{height:calc(var(--seam) * .4);background:linear-gradient(in oklab,var(--from) 0,var(--f-bg) 100%)}
@media (prefers-reduced-motion:reduce){.fr-gallery *,.fr-gallery *::before,.fr-gallery *::after{transition:none!important;animation:none!important}}