.lens {--lens-pad: max(var(--fi-pad, 24px), calc((100vw - var(--fi-wide, 1440px)) / 2 + var(--fi-pad, 24px)));--lens-top: 96px; --lens-bottom: 64px; --lens-vpad: 24px;--lens-ink: #4E0F16; --lens-muted: rgba(78, 15, 22, .6); --lens-bg: #FFFFFF; --lens-tile: #F5F5F5;position: relative; overflow: hidden; background: var(--lens-bg); color: var(--lens-ink);height: 100svh; min-height: 520px;-webkit-tap-highlight-color: transparent;}.lens[data-lens="page"], .lens.is-expanded { --lens-pad: 24px; }.lens *, .lens *::before, .lens *::after { box-sizing: border-box; }.lens .lens-ui { font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; line-height: 1; margin: 0; }.lens button { all: unset; cursor: pointer; }.fi .lens a, .lens a { color: var(--lens-ink); border: 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }.lens button:focus-visible, .lens a:focus-visible { outline: 1px solid var(--lens-ink); outline-offset: 4px; }.lens .lens-btn { color: var(--lens-muted); transition: color 150ms ease; text-decoration: none; }.lens .lens-btn[aria-pressed="true"] { color: var(--lens-ink); }@media (hover: hover) and (pointer: fine) { .lens .lens-btn:hover { color: var(--lens-ink); } }.lens-bar {position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: var(--lens-top);display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--lens-pad);transition: opacity 240ms ease;}.lens-brand { display: block; } .lens-brand img { width: 120px; height: auto; display: block; }.fi .lens a.lens-brand, .lens a.lens-brand { text-decoration: none; }.lens-tools { display: flex; align-items: center; gap: 32px; margin-left: auto; }.lens-group { display: flex; align-items: center; gap: 14px; }.lens-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }.lens-canvas.is-dragging { cursor: grabbing; }.lens[data-view="grid"] .lens-canvas, .lens[data-view="row"] .lens-canvas { display: none; }.lens-grid {display: none; position: absolute; top: var(--lens-top); bottom: var(--lens-bottom); left: 0; right: 0;grid-template-columns: repeat(var(--cols, 6), 1fr); gap: 20px; align-items: start; align-content: start;padding: 0 var(--lens-pad); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;touch-action: pan-x pan-y;}.lens-grid::-webkit-scrollbar { display: none; }.lens[data-view="grid"] .lens-grid, .lens[data-view="row"] .lens-grid { display: grid; }.lens-grid.is-row {grid-template-columns: none; grid-auto-flow: column; grid-template-rows: 1fr var(--row-h) 1fr;grid-auto-columns: var(--row-w); align-items: stretch; align-content: stretch; overflow: auto;left: var(--lens-pad); right: var(--lens-pad); padding: 0;}.lens-grid.is-row .lens-tile { grid-row: 2; height: 100%; }.lens-tile { display: block; width: 100%; aspect-ratio: var(--cell-ratio, .75); margin: 0; background: var(--lens-tile); }.lens-tile img { width: 100%; height: 100%; display: block; object-fit: contain; color: transparent; font-size: 0; }.lens p.lens-hint, .lens p.lens-notice, .lens p.lens-credit {position: absolute; left: 50%; transform: translateX(-50%); z-index: 3; margin: 0;white-space: nowrap; text-align: center; color: var(--lens-muted); transition: opacity 240ms ease;}.lens p.lens-hint { top: var(--lens-vpad); pointer-events: none; }.lens p.lens-notice, .lens p.lens-credit { bottom: var(--lens-vpad); }.lens p.lens-credit { display: flex; gap: 14px; justify-content: center; }.lens p.lens-credit:empty { display: none; }.lens.has-credit p.lens-notice { visibility: hidden; }.lens.is-wrap p.lens-notice, .lens.is-wrap p.lens-credit { left: var(--lens-pad); right: var(--lens-pad); transform: none; white-space: normal; line-height: 1.7; flex-wrap: wrap; }.lens[data-lens="home"]:not(.is-expanded) .lens-bar { opacity: 0; pointer-events: none; visibility: hidden; }.lens.is-expanded p.lens-hint { opacity: 0; }.lens[data-lens="home"]:not(.is-expanded) .lens-canvas { touch-action: pan-y; }.lens.is-takeover { position: fixed !important; inset: 0; z-index: 95; height: auto; min-height: 0; }html.lens-open, html.lens-open body { overflow: hidden; }html.lens-in .fs-header, html.lens-open .fs-header { transform: translateY(-100%) !important; }html.lens-in .fs-cursor, html.lens-open .fs-cursor { opacity: 0 !important; }.fs-lens-home > .lens { position: sticky; top: 0; }.fs-lens-home::after { content: ""; display: block; height: 45svh; }@media (max-width: 760px) {.lens { --lens-top: 78px; --lens-vpad: 16px; }.lens[data-lens="page"], .lens.is-expanded { --lens-pad: 16px; }.lens-tools { gap: 20px; }.lens-group { gap: 12px; }.lens-grid { gap: 12px; }}@media (max-width: 767px), (orientation: portrait) and (max-width: 1099px) {.lens, .lens * { touch-action: pan-y; }.lens .lens-grid, .lens .lens-grid * { touch-action: pan-x pan-y; }.lens .lens-canvas { touch-action: pan-y; cursor: default; }.lens p.lens-hint, .lens p.lens-notice { pointer-events: none; }.lens p.lens-notice a { pointer-events: auto; }.lens-group[aria-label="Zoom"] { display: none; }.lens { --lens-gutter: 28px; }.lens-grid, .lens-grid.is-row { left: var(--lens-gutter); right: var(--lens-gutter); padding: 0; overscroll-behavior: auto; }}.lens-gutter { display: none; }@media (max-width: 767px), (orientation: portrait) and (max-width: 1099px) {.lens.is-expanded .lens-canvas, .lens[data-lens="page"] .lens-canvas { touch-action: none; }.lens.is-expanded[data-view="horse"] .lens-gutter {display: block; position: absolute; top: var(--lens-top); bottom: 0; width: var(--lens-gutter); z-index: 2;touch-action: pan-y;}.lens-gutter-l { left: 0; } .lens-gutter-r { right: 0; }.lens[data-lens="page"] .lens-gutter { display: none !important; }}