/* main/variables.css */
/* variables.css — this theme's tokens. Every component reads them, so reskinning the site is editing this file. */
:root {
    /* palette */
    --page-bg:   #f9f9f9;   /* page surface: the old site's ground */
    --ink:       #222;      /* primary text + borders */
    --muted-share: 70%;     /* how much of the ink secondary text keeps, in every look (70% reads at WCAG AA) */
    --muted:     #626262;   /* secondary text: the ink faded toward the ground, so it stays readable (WCAG AA) on any ground */
    --accent:    #007b9a;   /* the Mahila Haat teal: the bar, the menu, the side boxes */
    --invert-bg: #0d0f14;   /* dark sections */
    --invert-fg: #f4f6fb;   /* text on dark sections */
    --brand-red: var(--accent);   /* the brand mark / ✺ next to the wordmark: the accent until it gets its own */
    /* mahilahaat.dk, as it was: the dashed rule beside the text, the indent line, the side boxes' and tabs' textures */
    --mh-rule:      #ddd;
    --mh-indent:    #eee;
    --mh-on-teal:   #fff;
    --mh-caption:   #5b6670;   /* captions and dates: quieter than the text, still readable (WCAG AA on the page) */
    --mh-backdrop:  url('/media/mahilahaat/baggrund.jpg');
    --mh-box-bg:    url('/media/mahilahaat/info-baggrund.jpg');
    --mh-tab-bg:    url('/media/mahilahaat/menu-baggrund.jpg');

    /* type (faces in fonts.css) */
    --font-display: 'Open Sans', Arial, Helvetica, sans-serif;   /* headings */
    --font-text:    'Open Sans', Arial, Helvetica, sans-serif;   /* body */
    --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;  /* labels / chrome */
    --font-gotham:  'GothamSSm',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif;         /* topbar / chrome wordmark */

    /* the type scale: seven steps and a floor (--text-min); every component reads a step */
    --text-min:  0.6875rem;  /* 11px — the absolute floor for anything a reader must read */
    --text-xs:   0.75rem;    /* 12px — the smallest a SENTENCE may be set */
    --text-sm:   0.875rem;   /* 14px */
    --text-base: 1rem;       /* 16px — body default */
    --text-md:   1.125rem;   /* 18px */
    --text-lg:   max(1.25rem, min(calc(1.6 * var(--pe-vw)), 1.5rem));
    --text-lg:   clamp(1.25rem, calc(1.6 * var(--pe-vw)), 1.5rem);
    --text-xl:   max(1.75rem, min(calc(3 * var(--pe-vw)), 2.5rem));
    --text-xl:   clamp(1.75rem, calc(3 * var(--pe-vw)), 2.5rem);
    --text-display: max(2.5rem, min(calc(7 * var(--pe-vw)), 6rem));
    --text-display: clamp(2.5rem, calc(7 * var(--pe-vw)), 6rem);
    /* micro-labels (eyebrows, spec keys, chrome): tracked caps at the floor, never below it */
    --text-label: var(--text-min);
    --track-label: 0.08em;
    /* line-height floor: prose under 1.25 reads as crammed (the audit flags it) */
    --leading-tight: 1.15;   /* display only */
    --leading-body:  1.55;
    --measure: 68ch;         /* prose column cap — 45–85 characters is the readable window */

    /* space & shape */
    --space:  max(2rem, min(calc(5 * var(--pe-vw)), 5rem));
    --space:  clamp(2rem, calc(5 * var(--pe-vw)), 5rem);   /* section padding */
    --gap:    calc(2 * var(--pe-vw));                       /* grid gap between nodes */
    --radius: 1vh;

    /* the kit contract tokens (docs/kit-theme-contract.md): every kit block reads them, derived from the palette */

    /* surfaces: the page ground, the lifted card/panel on it, and a faint tinted surface between */
    --surround-bg: var(--page-bg);                                  /* revealed when the stage insets */
    --paper:   #fafafa;        /* card / panel fill */
    --card:    var(--paper);
    --panel:   var(--paper);
    --surface: color-mix(in srgb, var(--ink) 4%, var(--paper));     /* faint tint: table heads, wells */

    /* ink: three weights below --ink, all derived so a palette change carries them */
    --body:  #494949;
    --faint: #9f9f9f;

    /* the one brand mark + legible ink ON it (kit components read --accent-ink / --on-accent): derived from the
       accent's own lightness, near-black on a light accent and near-white on a dark one, so any accent stays readable */
    --accent-ink: oklch(from var(--accent) clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h);   /* 0.6: where light and dark ink read alike */
    --on-accent:  var(--accent-ink);

    /* hairlines */
    --line:        rgba(5, 5, 5, 0.14);
    --rule:        var(--line);
    --rule-strong: rgba(12, 12, 12, 0.34);

    /* radii — kit blocks ask for a scale, not one value; all hang off --radius */
    --r-sm:   calc(var(--radius) * 0.5);
    --r:      var(--radius);
    --r-md:   var(--radius);
    --r-lg:   calc(var(--radius) * 1.6);
    --r-pill: 61.25rem;

    /* elevation — tinted with the theme's ink so a shadow never reads as a grey smudge on a warm page */
    --shadow-card:  0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent),
                    0 8px 24px -12px color-mix(in srgb, var(--ink) 18%, transparent);
    --shadow-card-hover: 0 2px 4px color-mix(in srgb, var(--ink) 8%, transparent),
                    0 18px 40px -16px color-mix(in srgb, var(--ink) 24%, transparent);
    --shadow-panel: 0 50px 100px -20px color-mix(in srgb, var(--ink) 22%, transparent),
                    0 30px 60px -30px color-mix(in srgb, var(--ink) 26%, transparent);

    /* motion — one easing every kit component defers to */
    --ease: cubic-bezier(.4, 0, .2, 1);

    /* the SVG effects' colours (effects/barChart, countRing, drawPath, timeline) on the palette */
    --bc-bar: var(--ink);  --bc-label: var(--muted);  --bc-value: var(--ink);
    --cr-arc: var(--accent);  --cr-track: rgba(3, 3, 3, 0.1);
    --cr-num: var(--ink);  --cr-label: var(--muted);
    --dp-stroke: var(--ink);
    --tlsvg-ink: var(--ink);

    /* the page-transition wipe (behaviors/pageWipe.js) — one line makes it wear the theme */
    --wipe-bg: var(--invert-bg);
}

/* main/fonts.css */
/* fonts.css — Open Sans (OFL), the face the old mahilahaat.dk asked Google for, self-hosted (latin covers æ ø å). */
@font-face { font-family: 'Open Sans'; src: url('/sites/mahilahaat/themes/main/fonts/open-sans-400-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Open Sans'; src: url('/sites/mahilahaat/themes/main/fonts/open-sans-400-italic-latin.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Open Sans'; src: url('/sites/mahilahaat/themes/main/fonts/open-sans-600-latin.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Open Sans'; src: url('/sites/mahilahaat/themes/main/fonts/open-sans-700-latin.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* main/base.css */
/* base.css — the theme's structure: reset, page surface, block grid, per-block chrome */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: #f9f9f9;
    background: var(--surround-bg, var(--page-bg));
    color: #222;
    color: var(--ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text);
}

/* the root is fluid: the kit is written in rem, so every rem scales with the viewport */
html { font-size: calc(1.111 * var(--pe-vw)); }
@media (max-width: 1024px) { html:not(.tier-desktop) { font-size: calc(1.6 * var(--pe-vw)); } }
@media (max-width: 768px)  { html:not(.tier-desktop) { font-size: calc(4 * var(--pe-vw)); } }

/* the stage: the fixed frame the site scrolls inside; animating its inset reframes the whole site. contain makes it
   the containing block for fixed descendants; container-type gives them cqi/cqh */
#intro_stage {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
    background: #f9f9f9;
    background: var(--page-bg);
    contain: layout paint;
    container-type: size;
}
/* bg-blur: the frost pane between the site-bg canvas (z 0) and the content (z 2); autoplay fades it in */
#smooth-wrapper { position: relative; z-index: 2; }
.bg-blur {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    background: rgba(255, 255, 255, 0);
    background: rgb(255 255 255 / 0);
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
}

/* topbar: site chrome from site.json, fixed above the stage */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: grid;   /* logo · tagline · nav */
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    grid-gap: calc(2 * var(--pe-vw));
    gap: calc(2 * var(--pe-vw));
    padding: 2vh calc(4 * var(--pe-vw));
    background: transparent;
    transition: background-color .3s, -webkit-backdrop-filter .3s;
    transition: background-color .3s, backdrop-filter .3s;
    transition: background-color .3s, backdrop-filter .3s, -webkit-backdrop-filter .3s;
}
/* the page scrolled under the bar (engine: data-lifted): it takes the page's ground, so its words never sit on the page's */
.topbar[data-lifted] {
    background: rgba(214, 214, 214, 0.86);
    background: color-mix(in oklab, #f9f9f9 86%, transparent);
    -webkit-backdrop-filter: blur(1.2em);
    backdrop-filter: blur(1.2em);
}

@supports (color: color-mix(in lch, red, blue)) {
.topbar[data-lifted] {
    background: color-mix(in oklab, var(--page-bg) 86%, transparent);
}
}
.topbar-logo { grid-column: 1; display: flex; align-items: baseline; gap: 1ch; }
.topbar-name { font-family: 'GothamSSm',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; font-family: var(--font-gotham); font-weight: 700; font-size: calc(1.35 * var(--pe-vw)); text-transform: uppercase; letter-spacing: .02em; }
.topbar-tagline { font-family: 'GothamSSm',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; font-family: var(--font-gotham); color: #626262; color: var(--muted); font-size: calc(.9 * var(--pe-vw)); text-transform: uppercase; letter-spacing: .04em; }

/* the brand mark after the wordmark, upright even inside an italic line */
.brand-dot {
    display: inline-block;
    margin-left: .14em;
    color: #007b9a;
    color: var(--brand-red);
    font-style: normal;
}
.brand-dot::before { content: "✺"; }
.topbar-nav {
    grid-column: 3;
    justify-self: end;
    display: flex;
    gap: calc(1.7 * var(--pe-vw));
    font-family: 'GothamSSm',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif;
    font-family: var(--font-gotham);
    font-weight: 500;
    font-size: calc(.9 * var(--pe-vw));
    text-transform: uppercase;
    letter-spacing: .06em;
}
.topbar-nav a { color: #222; color: var(--ink); -webkit-text-decoration: none; text-decoration: none; }
.topbar-nav a:hover { color: #007b9a; color: var(--accent); }

/* renderer fallback for a not-yet-built block */
.todo-block { padding: 6vh calc(4 * var(--pe-vw)); font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-family: var(--font-mono); color: #626262; color: var(--muted); }

/* a screen block: a free-form, full-height stage its nodes animate within (min-height comes from meta.height inline) */
.section {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2vh;
    padding: 0 calc(4 * var(--pe-vw));
}

/* the block grid: the renderer wraps each node in a .cell spanning its `width` columns */
.maingrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-gap: var(--gap);
    gap: var(--gap);
    padding: 0 calc(4 * var(--pe-vw)) 6vh;
}
.cell { grid-column: span 1; grid-column: span var(--cell-span, 1); min-width: 0; }
/* props.spanAnchor: end — pinned to the right edge */
.cell.cell--end { grid-column: span 1 / -1; grid-column: span var(--cell-span, 1) / -1; }

/* a free node's box (props.free): the inline style places it; the node fills it */
.free { box-sizing: border-box; transform-origin: center; }
/* inset stretches an absolute child, height: 100% a static one */
/* a free piece fills its free box; a shape key animates --free-height (inline beats this default, never the !important) */
.free > * { margin: 0 !important; max-width: none !important; max-height: none !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; --free-height: 100%; height: 100% !important; height: var(--free-height) !important; }

/* props.label: authors type the words, the marker is CSS */
.label::before { content: "◉ "; }

/* the header above each block (title + years) */
.content-block-head {
    display: flex;
    justify-content: space-between;
    padding: 4vh calc(4 * var(--pe-vw)) 1vh;
    font: 500 13px/1 'GothamSSm',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif;
    font: 500 13px/1 var(--font-gotham);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #626262;
    color: var(--muted);
}
.content-block-head .yr { opacity: .7; }

/* lightbox (behaviors/lightbox.js): touch-action none so a pinch zooms the media, not the page */
.lightbox {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(8, 9, 12, 0.92);
    background: rgb(8 9 12 / 0.92);
    touch-action: none;
}
.lightbox.is-open { display: flex; }
.lightbox-stage { display: flex; max-width: calc(95 * var(--pe-vw)); max-height: 92vh; }
.lightbox-media { max-width: calc(95 * var(--pe-vw)); max-height: 92vh; -o-object-fit: contain; object-fit: contain; border-radius: 1vh; border-radius: var(--radius); transform-origin: center; cursor: zoom-in; }
.lightbox-close {
    position: absolute;
    top: 2vh;
    right: calc(2 * var(--pe-vw));
    width: 2.4em;
    height: 2.4em;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    background: rgb(255 255 255 / 0.12);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.22); background: rgb(255 255 255 / 0.22); }
/* signal that case media opens the lightbox */
.content-block .imagesingle img,

/* the case em-root: case components size in em, so this one fluid size scales a whole case */
.maingrid { font-size: clamp(0.8rem, 0.5rem + calc(1 * var(--pe-vw)), 1rem); }

@media (max-width: 768px) {
    .maingrid { grid-template-columns: 1fr; gap: calc(5 * var(--pe-vw)); padding: 0 calc(5 * var(--pe-vw)) 6vh; }
    .cell { grid-column: 1 / -1; }
    .content-block { margin: 0 calc(1.5 * var(--pe-vw)); }
    .content-block-head { padding: 3vh calc(5 * var(--pe-vw)) 1vh; font-size: 11px; }

    .topbar { padding: 2vh calc(5 * var(--pe-vw)); }
    .topbar-tagline { display: none; }
    /* one line on a phone (the name wrapped to two and the bar grew over the page): with the tagline gone the menu takes
       all the room the name leaves, and a long menu wraps under itself rather than off the screen */
    .topbar { grid-template-columns: auto 1fr; }
    .topbar-name { font-size: calc(3.8 * var(--pe-vw)); white-space: nowrap; }
    .topbar-nav { grid-column: 2; flex-wrap: wrap; justify-content: end; gap: calc(1 * var(--pe-vw)) calc(3 * var(--pe-vw)); font-size: calc(2.6 * var(--pe-vw)); }
    /* the bar is fixed over the page and a full line tall here: the page's first section starts under it */
    #smooth-content > section:first-of-type { padding-top: calc(4vh + (5 * var(--pe-vw))); padding-top: calc(4vh + calc(5 * var(--pe-vw))); }
}

/* blocks/ab-panel.css */

.ab-panel {
    --ab-ink: var(--ink, #0a0a0a);
    --ab-muted: var(--muted, #6b6b6b);
    --ab-line: var(--line, #e3e3e3);
    --ab-paper: var(--paper, #fff);
    --ab-accent-c: var(--ab-accent, var(--accent, #635bff));
    --ab-up: var(--good, #1a9d5a);
    --ab-down: var(--bad, #cd3d64);
    --ab-surface: color-mix(in srgb, var(--ab-ink) 3.5%, var(--ab-paper));
    --ab-px: max(1rem, min(2.6cqi, 1.6rem));
    --ab-px: clamp(1rem, 2.6cqi, 1.6rem);
    --ab-py: max(.7rem, min(1.8cqi, 1rem));
    --ab-py: clamp(.7rem, 1.8cqi, 1rem);
    position: relative;
    width: 100%; margin: 0;
    color: #222;
    color: var(--ab-ink);
    border-radius: 1.2cqi;
    overflow: hidden;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.ab-panel.ab-dense-1 { --ab-px: max(.75rem, min(2cqi, 1.05rem)); --ab-px: clamp(.75rem, 2cqi, 1.05rem); --ab-py: max(.4rem, min(1.2cqi, .6rem)); --ab-py: clamp(.4rem, 1.2cqi, .6rem); }

.ab-panel.ab-tone-surface { background: var(--ab-paper); border: 1px solid var(--ab-line);
    box-shadow: 0 1.6cqi 4.5cqi -1cqi rgba(5, 5, 5, 0.14); }

@supports (color: color-mix(in lch, red, blue)) {
.ab-panel.ab-tone-surface {
    box-shadow: 0 1.6cqi 4.5cqi -1cqi color-mix(in srgb, var(--ab-ink) 14%, transparent); }
}
.ab-panel.ab-tone-outline { background: transparent; border: 1px solid var(--ab-line); }
.ab-panel.ab-tone-plain { background: transparent; }
.ab-panel.ab-tone-brand { background: color-mix(in srgb, var(--ab-accent-c) 4%, var(--ab-paper));
    border: 1px solid color-mix(in srgb, var(--ab-accent-c) 26%, var(--ab-line));
    box-shadow: 0 1.6cqi 4.5cqi -1cqi rgba(0, 25, 31, 0.2); }

@supports (color: color-mix(in lch, red, blue)) {
.ab-panel.ab-tone-brand {
    box-shadow: 0 1.6cqi 4.5cqi -1cqi color-mix(in srgb, var(--ab-accent-c) 20%, transparent); }
}

.ab-panel .ab-head {
    position: relative; margin: 0;
    padding: var(--ab-py) var(--ab-px) var(--ab-py) calc(var(--ab-px) + 1.35rem);
    background: var(--ab-surface); border-bottom: 1px solid var(--ab-line);
}
.ab-panel.ab-tone-plain .ab-head, .ab-panel.ab-tone-outline .ab-head, .ab-panel.ab-tone-brand .ab-head { background: transparent; }
.ab-panel:is(.ab-tone-plain, .ab-tone-outline, .ab-tone-brand) .ab-head { background: transparent; }
.ab-panel .ab-metric {
    margin: 0; color: var(--ab-ink); letter-spacing: -.012em;
    font: 600 max(.95rem, min(1.25cqi, 1.1rem))/1.35 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 max(.95rem, min(1.25cqi, 1.1rem))/1.35 var(--font-display, system-ui, sans-serif);
    font: 600 max(.95rem, min(1.25cqi, 1.1rem))/1.35 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 clamp(.95rem, 1.25cqi, 1.1rem)/1.35 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 clamp(.95rem, 1.25cqi, 1.1rem)/1.35 var(--font-display, system-ui, sans-serif);
}
.ab-panel .ab-live {
    position: absolute; left: var(--ab-px); top: 50%; translate: 0 -50%;
    width: .62rem; height: .62rem; border-radius: 50%;
    background: var(--ab-accent-c);
    box-shadow: 0 0 0 .16rem rgba(0, 27, 34, 0.22);
}

@supports (color: color-mix(in lch, red, blue)) {
.ab-panel .ab-live {
    box-shadow: 0 0 0 .16rem color-mix(in srgb, var(--ab-accent-c) 22%, transparent);
}
}
html:not(.respect-reduced-motion) .ab-panel .ab-live { animation: ab-live-pulse 2.6s ease-in-out infinite; }
@keyframes ab-live-pulse {
        0%, 100% { box-shadow: 0 0 0 .12rem rgba(0, 37, 46, 0.3); }

@supports (color: color-mix(in lch, red, blue)) {
0%, 100% { box-shadow: 0 0 0 .12rem color-mix(in srgb, var(--ab-accent-c) 30%, transparent); }
}
        50%      { box-shadow: 0 0 0 .34rem rgba(0, 6, 8, 0.05); }

@supports (color: color-mix(in lch, red, blue)) {
50%      { box-shadow: 0 0 0 .34rem color-mix(in srgb, var(--ab-accent-c) 5%, transparent); }
}
    }

.ab-panel .ab-variants { --row-item: 0; --row-gap: 0; }
.ab-panel .ab-var { position: relative; padding: var(--ab-px); margin: 0; }
.ab-panel .ab-var + .ab-var { border-left: 1px solid var(--ab-line); }
.ab-panel .ab-var-name { display: block; margin: 0 0 .32em;
    font: 650 max(.98rem, min(1.2cqi, 1.1rem))/1.25 'Open Sans', Arial, Helvetica, sans-serif;
    font: 650 max(.98rem, min(1.2cqi, 1.1rem))/1.25 var(--font-display, system-ui, sans-serif);
    font: 650 max(.98rem, min(1.2cqi, 1.1rem))/1.25 'Open Sans', Arial, Helvetica, sans-serif;
    font: 650 clamp(.98rem, 1.2cqi, 1.1rem)/1.25 'Open Sans', Arial, Helvetica, sans-serif;
    font: 650 clamp(.98rem, 1.2cqi, 1.1rem)/1.25 var(--font-display, system-ui, sans-serif);
    color: var(--ab-ink); letter-spacing: -.015em; }
.ab-panel .ab-var-note { display: block; color: var(--ab-muted);
    font: 400 max(.8rem, min(1cqi, .9rem))/1.45 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 max(.8rem, min(1cqi, .9rem))/1.45 var(--font-text, var(--font-display, system-ui, sans-serif));
    font: 400 max(.8rem, min(1cqi, .9rem))/1.45 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 clamp(.8rem, 1cqi, .9rem)/1.45 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 clamp(.8rem, 1cqi, .9rem)/1.45 var(--font-text, var(--font-display, system-ui, sans-serif)); }

.ab-panel .ab-flag {
    position: absolute; top: calc(var(--ab-px) - .1rem); right: calc(var(--ab-px) - .15rem);
    color: var(--ab-accent-c); font-size: max(.95rem, min(1.5cqi, 1.25rem)); font-size: clamp(.95rem, 1.5cqi, 1.25rem); line-height: 1;
    display: none;
}
.ab-panel .ab-var.ab-win-1 .ab-flag { display: block; }

.ab-panel .ab-var.ab-win-1 {
    background: rgba(0, 9, 11, 0.07);
    box-shadow: inset 0 0 0 1px rgba(0, 34, 43, 0.28);
}

@supports (color: color-mix(in lch, red, blue)) {
.ab-panel .ab-var.ab-win-1 {
    background: color-mix(in srgb, var(--ab-accent-c) 7%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ab-accent-c) 28%, transparent);
}
}
.ab-panel .ab-var.ab-win-1 .ab-var-name { color: var(--ab-accent-c); padding-right: 1.5rem; }

.ab-panel .ab-metrics { --row-flow: column nowrap; --row-item: auto; --row-gap: 0; }
.ab-panel .ab-row { --row-flow: row nowrap; --row-item: 0; --row-gap: max(.6rem, min(1.6cqi, 1.1rem)); --row-gap: clamp(.6rem, 1.6cqi, 1.1rem);
    align-items: center; padding: var(--ab-py) var(--ab-px);
    border-top: 1px solid var(--ab-line);
    font-size: max(.85rem, min(1.05cqi, .96rem));
    font-size: clamp(.85rem, 1.05cqi, .96rem); }
.ab-panel .ab-metrics .ab-row:first-child { border-top: 0; }
.ab-panel .ab-cell { min-width: 0; margin: 0; }
.ab-panel .ab-cell-k { flex: 1 1 auto; color: var(--ab-ink); font-weight: 500; }
.ab-panel .ab-cell-a { flex: 0 0 auto; min-width: 3.4rem; text-align: right; color: var(--ab-muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.ab-panel .ab-cell-b { flex: 0 0 auto; min-width: 3.4rem; text-align: right; color: var(--ab-ink); font-weight: 650; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.ab-panel .ab-cell-d {
    flex: 0 0 auto; min-width: 3.6rem; text-align: center;
    padding: .2em .58em; border-radius: 62.4375rem; font-weight: 600;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    color: var(--ab-muted);
    background: rgba(2, 2, 2, 0.06);
}

@supports (color: color-mix(in lch, red, blue)) {
.ab-panel .ab-cell-d {
    background: color-mix(in srgb, var(--ab-ink) 6%, transparent);
}
}
.ab-panel .ab-row.ab-dir-up .ab-cell-d {
    color: var(--ab-up); background: rgba(3, 20, 12, 0.13); }

@supports (color: color-mix(in lch, red, blue)) {
.ab-panel .ab-row.ab-dir-up .ab-cell-d { background: color-mix(in srgb, var(--ab-up) 13%, transparent); }
}
.ab-panel .ab-row.ab-dir-down .ab-cell-d {
    color: var(--ab-down); background: rgba(27, 8, 13, 0.13); }

@supports (color: color-mix(in lch, red, blue)) {
.ab-panel .ab-row.ab-dir-down .ab-cell-d { background: color-mix(in srgb, var(--ab-down) 13%, transparent); }
}

.ab-panel .ab-foot {
    position: relative; margin: 0;
    padding: var(--ab-py) var(--ab-px) var(--ab-py) calc(var(--ab-px) + 1.45rem);
    background: var(--ab-surface); border-top: 1px solid var(--ab-line);
}
.ab-panel.ab-tone-plain .ab-foot, .ab-panel.ab-tone-outline .ab-foot, .ab-panel.ab-tone-brand .ab-foot { background: transparent; }
.ab-panel:is(.ab-tone-plain, .ab-tone-outline, .ab-tone-brand) .ab-foot { background: transparent; }
.ab-panel .ab-foot-ic {
    position: absolute; left: var(--ab-px); top: calc(var(--ab-py) + .05rem);
    color: color-mix(in srgb, var(--ab-accent-c) 70%, var(--ab-muted));
    font-size: max(.85rem, min(1.1cqi, .98rem));
    font-size: clamp(.85rem, 1.1cqi, .98rem); line-height: 1.45;
}
.ab-panel .ab-foot-note { margin: 0; color: var(--ab-muted);
    font-size: max(.8rem, min(1cqi, .9rem));
    font-size: clamp(.8rem, 1cqi, .9rem); line-height: 1.45; }
.ab-panel:not(.ab-note-1) .ab-foot { display: none; }

.ab-panel.ab-align-center .ab-head { padding-left: var(--ab-px); }
.ab-panel.ab-align-center .ab-metric { text-align: center; }
.ab-panel.ab-align-center .ab-live { display: none; }

@container (max-width: 30rem) {
    .ab-panel .ab-variants { --row-item: auto; }
    .ab-panel .ab-var + .ab-var { border-left: 0; border-top: 1px solid var(--ab-line); }
}

/* blocks/accordion.css */

.accordion {
    --ac-ink:    var(--ink, #0a2540);
    --ac-body:   var(--muted, #425466);
    --ac-accent: var(--accent, #635bff);
    --ac-line:   var(--line, #e3e8ee);
    width: 100%; container-type: inline-size;
}
.accordion[data-scheme="dark"] {
    --ac-ink:    var(--ink-dark, #e9eaee);
    --ac-body:   var(--muted-dark, #aab2c0);
    --ac-line:   var(--line-dark, #2a2e38);
}

.accordion .accordion-eyebrow {
    margin: 0 0 max(1rem, min(2.4cqi, 1.8rem));
    margin: 0 0 clamp(1rem, 2.4cqi, 1.8rem);
    font: 600 .72rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 .72rem/1 var(--font-mono, var(--font-display, system-ui));
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--ac-accent);
}

.accordion .accordion-list { border-top: 1px solid var(--ac-line); max-width: 60rem; }
.accordion .accordion-item { border-bottom: 1px solid var(--ac-line); }

.accordion .accordion-q {
    list-style: none; cursor: pointer; position: relative;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    padding: max(1.1rem, min(2.6cqi, 1.8rem)) 0;
    padding: clamp(1.1rem, 2.6cqi, 1.8rem) 0;
    font: 600 max(1.05rem, min(2.4cqi, 1.55rem))/1.25 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 max(1.05rem, min(2.4cqi, 1.55rem))/1.25 var(--font-display, system-ui);
    font: 600 max(1.05rem, min(2.4cqi, 1.55rem))/1.25 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 clamp(1.05rem, 2.4cqi, 1.55rem)/1.25 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 clamp(1.05rem, 2.4cqi, 1.55rem)/1.25 var(--font-display, system-ui);
    letter-spacing: -.01em; color: var(--ac-ink);
    transition: color .2s ease;
}
.accordion .accordion-q::-webkit-details-marker { display: none; }
.accordion .accordion-q:hover { color: var(--ac-accent); }
.accordion .accordion-item[open] > .accordion-q { color: var(--ac-ink); }

.accordion .accordion-mark {
    position: relative; flex: 0 0 auto;
    width: 1.1em; height: 1.1em; margin-left: auto;
}
.accordion .accordion-mark::before,
.accordion .accordion-mark::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    background: var(--ac-accent);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}
.accordion .accordion-mark::before { width: 1.1em; height: .125rem; transform: translate(-50%, -50%); }
.accordion .accordion-mark::after  { width: .125rem; height: 1.1em; transform: translate(-50%, -50%); }
.accordion .accordion-item[open] > .accordion-q .accordion-mark::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }

.accordion .accordion-a {
    color: var(--ac-body);
    font: 400 max(1rem, min(1.6cqi, 1.15rem))/1.6 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 max(1rem, min(1.6cqi, 1.15rem))/1.6 var(--font-display, system-ui);
    font: 400 max(1rem, min(1.6cqi, 1.15rem))/1.6 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 clamp(1rem, 1.6cqi, 1.15rem)/1.6 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 clamp(1rem, 1.6cqi, 1.15rem)/1.6 var(--font-display, system-ui);
    max-width: 56ch;
    display: grid; grid-template-rows: 1fr;
    padding-bottom: max(1.1rem, min(2.6cqi, 1.8rem));
    padding-bottom: clamp(1.1rem, 2.6cqi, 1.8rem);
}
.accordion .accordion-a > * { min-height: 0; margin: 0 0 1em; }
.accordion .accordion-a > *:last-child { margin-bottom: 0; }
.accordion .accordion-a a { color: var(--ac-accent); }

@supports (grid-template-rows: 0fr) {
    .accordion .accordion-item:not([open]) .accordion-a { grid-template-rows: 0fr; }
}

/* blocks/account.css */
/* account — who is logged in, for a topbar (components/account.twig, behaviors/account.js). It takes the bar's font and
   colour; the initial's disc and a hovered link wear the accent, the drop-down is the theme's card.
   Knobs (props.style): --account-gap (room between the links) · --account-menu-width (the drop-down's width). */
.member-account {
    position: relative; display: inline-flex; align-items: center; gap: 1.4em; gap: var(--account-gap, 1.4em);
    font: inherit; color: inherit; white-space: nowrap;
}
.member-account[aria-busy="true"] { opacity: .5; }
.member-account :where(a, button, summary) {
    font: inherit; color: inherit; -webkit-text-decoration: none; text-decoration: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
}
.member-account :where(a, button):hover, .member-account .account-who:hover .account-name { color: #007b9a; color: var(--accent, currentColor); }

/* a guest: one quiet outlined pill */
.member-account .account-login {
    padding: .5em 1.15em; line-height: 1.1; font-weight: 500;
    border: 1px solid color-mix(in oklab, currentColor 35%, transparent); border-radius: 99em;
    transition: background-color .2s, border-color .2s, color .2s;
}
.member-account .account-login:hover { background: #007b9a; background: var(--accent, currentColor); border-color: #007b9a; border-color: var(--accent, currentColor); color: rgb(240, 251, 255); color: color(display-p3 0.94504 0.9821 1); color: oklch(from #007b9a clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h); color: var(--accent-ink, var(--on-accent, white)); }

/* the person: their initial on a disc of the accent, then their first name */
.member-account .account-who { display: inline-flex; align-items: center; gap: .55em; list-style: none; }
.member-account .account-who::-webkit-details-marker { display: none; }
.member-account .account-initial {
    display: inline-grid; align-items: center; justify-items: center; place-items: center; width: 2em; height: 2em; border-radius: 50%;
    background: #007b9a;
    background: var(--accent, currentColor); color: rgb(240, 251, 255); color: color(display-p3 0.94504 0.9821 1); color: oklch(from #007b9a clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h); color: var(--accent-ink, var(--on-accent, white));
    font-size: .85em; font-weight: 600; line-height: 1; text-transform: uppercase;
}
.member-account .account-name { font-weight: 500; transition: color .2s; }
.member-account--menu .account-name::after {
    content: ""; display: inline-block; width: .4em; height: .4em; margin: 0 0 .2em .5em;
    border: solid currentColor; border-width: 0 .1em .1em 0; transform: rotate(45deg); transition: transform .2s;
}
.member-account .account-menu[open] .account-name::after { transform: translate(0, .2em) rotate(-135deg); }

/* the drop-down: the theme's card under the name, right-aligned to it */
.member-account .account-menu { position: relative; }
.member-account .account-menu .account-links {
    position: absolute; top: calc(100% + .8em); right: 0; z-index: 60;
    display: grid; min-width: 13em; min-width: var(--account-menu-width, 13em); padding: .4em;
    background: #fafafa;
    background: var(--card, var(--panel, var(--page-bg, white))); color: #222; color: var(--ink, currentColor);
    border: 1px solid rgba(5, 5, 5, 0.14);
    border-radius: calc(1vh * 2);
    border-radius: calc(var(--radius, .4em) * 2);
    box-shadow: 0 1.2em 2.4em -1em rgba(12, 12, 12, 0.35);
    box-shadow: var(--shadow-lift, 0 1.2em 2.4em -1em rgba(12, 12, 12, 0.35));
    box-shadow: 0 1.2em 2.4em -1em color-mix(in oklab, #222 35%, transparent);
}

@supports (color: color-mix(in lch, red, blue)) {
.member-account .account-menu .account-links {
    border: 1px solid var(--line, color-mix(in oklab, currentColor 14%, transparent));
    box-shadow: var(--shadow-lift, 0 1.2em 2.4em -1em color-mix(in oklab, var(--ink, black) 35%, transparent));
}
}
html:not(.respect-reduced-motion) .member-account .account-menu .account-links { animation: account-drop .18s cubic-bezier(.4, 0, .2, 1); animation: account-drop .18s var(--ease, ease-out); }
.member-account .account-menu .account-link { padding: .65em .8em; border-radius: 1vh; border-radius: var(--radius, .4em); text-align: left; }
.member-account .account-menu .account-link:hover { background: rgba(0, 11, 14, 0.09); background: color-mix(in oklab, #007b9a 9%, transparent); }

@supports (color: color-mix(in lch, red, blue)) {
.member-account .account-menu .account-link:hover { background: color-mix(in oklab, var(--accent, currentColor) 9%, transparent); }
}
.member-account .account-menu .account-logout {
    margin-top: .3em; border-top: 1px solid rgba(5, 5, 5, 0.14); border-radius: 0;
    color: #626262;
    color: var(--muted, currentColor);
}

@supports (color: color-mix(in lch, red, blue)) {
.member-account .account-menu .account-logout { border-top: 1px solid var(--line, color-mix(in oklab, currentColor 14%, transparent));
}
}
/* who is logged in, at the top of the drop-down: quiet label, full name */
.member-account .account-signed-in {
    display: grid; grid-gap: .15em; gap: .15em; margin: 0 0 .3em; padding: .55em .8em .75em; white-space: normal;
    border-bottom: 1px solid rgba(5, 5, 5, 0.14);
}

@supports (color: color-mix(in lch, red, blue)) {
.member-account .account-signed-in {
    border-bottom: 1px solid var(--line, color-mix(in oklab, currentColor 14%, transparent));
}
}
.member-account .account-signed-in span { font-size: .8em; color: #626262; color: var(--muted, currentColor); }
.member-account .account-signed-in strong { font-weight: 600; color: #222; color: var(--ink, currentColor); }
@keyframes account-drop { from { opacity: 0; transform: translateY(-.4em); } }

/* the bar: every link in the row, "log out" quieter */
.member-account--bar .account-logout { color: #626262; color: var(--muted, currentColor); }

/* in a phone menu's sheet (blocks/phone-menu.css): the drop-down lies open, a list rather than a card */
[data-phone-menu]:popover-open .member-account { display: flex; flex-direction: column; align-items: stretch; gap: .6em; }
[data-phone-menu]:popover-open .member-account .account-menu .account-links {
    position: static; min-width: 0; margin-top: .4em; padding: 0; background: none; border: 0; border-radius: 0;
    box-shadow: none; animation: none;
}
[data-phone-menu]:popover-open .member-account .account-menu .account-link {
    padding: .7em 0; border-radius: 0; border-bottom: 1px solid rgba(5, 5, 5, 0.14);
}

@supports (color: color-mix(in lch, red, blue)) {
[data-phone-menu]:popover-open .member-account .account-menu .account-link { border-bottom: 1px solid var(--line, color-mix(in oklab, currentColor 14%, transparent));
}
}
[data-phone-menu]:popover-open .member-account .account-menu .account-logout { margin-top: 0; border-top: 0; }

/* blocks/annotated-shot.css */

.annotated-shot {
    --as-pin: var(--accent, #635bff);
    --as-pin-ink: var(--accent-ink, #fff);
    --as-r: var(--r-lg, var(--radius, 0.875rem));
    --as-pin-size: max(1.5rem, min(2.6cqw, 1.9rem));
    --as-pin-size: clamp(1.5rem, 2.6cqw, 1.9rem);
    --as-card-w: 16rem;
    --as-card-pad: .6rem .75rem;
    --as-card-bg: var(--ink, #0a2540);
    --as-card-ink: var(--paper, #fff);
    --as-gap: .55rem;
    width: min(51.25rem, 100%);
    width: var(--as-width, min(51.25rem, 100%));
    margin-left: auto;
    margin-right: auto;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, system-ui, sans-serif);
}
.annotated-shot[data-pin-size="sm"] { --as-pin-size: max(1.2rem, min(2cqw, 1.5rem)); --as-pin-size: clamp(1.2rem, 2cqw, 1.5rem); }
.annotated-shot[data-pin-size="lg"] { --as-pin-size: max(1.9rem, min(3.4cqw, 2.5rem)); --as-pin-size: clamp(1.9rem, 3.4cqw, 2.5rem); }
.annotated-shot[data-card-width="narrow"] { --as-card-w: 12rem; }
.annotated-shot[data-card-width="wide"]   { --as-card-w: 22rem; }
.annotated-shot[data-card-pad="sm"] { --as-card-pad: .4rem .55rem; }
.annotated-shot[data-card-pad="lg"] { --as-card-pad: .9rem 1.05rem; }
.annotated-shot[data-card-style="light"]  { --as-card-bg: var(--paper, #fff); --as-card-ink: var(--ink, #0a2540); }
.annotated-shot[data-card-style="accent"] { --as-card-bg: var(--as-pin); --as-card-ink: var(--as-pin-ink); }

.annotated-shot .as-eyebrow {
    font: 600 .72rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 .72rem/1 var(--font-mono, ui-monospace, monospace);
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--as-pin); margin: 0 0 .7rem;
}

.annotated-shot .as-frame {
    border-radius: var(--as-r); overflow: hidden;
    background: #fafafa;
    background: var(--paper, #fff);
    box-shadow: 0 1px 2px rgba(34, 34, 34, 0.08),
                    0 8px 24px -12px rgba(34, 34, 34, 0.18);
    box-shadow: 0 1px 2px color-mix(in srgb, #222 8%, transparent),
                    0 8px 24px -12px color-mix(in srgb, #222 18%, transparent);
    box-shadow: var(--shadow-card, 0 1.125rem 2.5rem -1.375rem rgba(20,30,60,.4), 0 .25rem .625rem -.375rem rgba(0,0,0,.25));
}
.annotated-shot.is-framed .as-frame { border: 1px solid rgba(5, 5, 5, 0.14); border: 1px solid var(--line, #e3e8ee); }
.annotated-shot .bf-bar { display: flex; align-items: center; gap: .7rem; padding: .55rem .85rem;
    border-bottom: 1px solid rgba(5, 5, 5, 0.14);
    border-bottom: 1px solid var(--line, rgba(4, 4, 4, 0.12));
    background: rgb(224, 224, 224);
    background: color-mix(in srgb, #fafafa 88%, #222); }

@supports (color: color-mix(in lch, red, blue)) {
.annotated-shot .bf-bar {
    border-bottom: 1px solid var(--line, color-mix(in srgb, var(--ink,#000) 12%, transparent));
    background: color-mix(in srgb, var(--paper,#fff) 88%, var(--ink,#000)); }
}
.annotated-shot .bf-dots { display: inline-flex; gap: .4rem; }
.annotated-shot .bf-dots i { width: .62rem; height: .62rem; border-radius: 50%;
    background: rgba(7, 7, 7, 0.2);
    background: color-mix(in srgb, #222 20%, transparent); display: inline-block; }

@supports (color: color-mix(in lch, red, blue)) {
.annotated-shot .bf-dots i {
    background: color-mix(in srgb, var(--ink,#000) 20%, transparent); }
}
.annotated-shot .bf-url { font: 400 .68rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 400 .68rem/1 var(--font-mono, ui-monospace, monospace);
    color: #626262;
    color: var(--muted, #888); letter-spacing: .03em; }

.annotated-shot .as-canvas { position: relative; line-height: 0; }
.annotated-shot .as-img { display: block; width: 100%; height: auto; }
.annotated-shot .as-pins { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.annotated-shot .as-pin {
    position: absolute; transform: translate(-50%, -50%);
    width: var(--as-pin-size); aspect-ratio: 1;
    display: grid; align-items: center; justify-items: center; place-items: center;
    padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--as-pin-ink); z-index: 1;
    -webkit-tap-highlight-color: transparent;
}
.annotated-shot .as-pin-num {
    position: relative; z-index: 2;
    width: 100%; height: 100%; display: grid; align-items: center; justify-items: center; place-items: center;
    border-radius: 50%;
    background: var(--as-pin);
    color: var(--as-pin-ink);
    font: 700 .82rem/1 'Open Sans', Arial, Helvetica, sans-serif;
    font: 700 .82rem/1 var(--font-display, system-ui, sans-serif);
    box-shadow: 0 .125rem .375rem -1px rgba(0,0,0,.4), 0 0 0 .125rem rgba(250, 250, 250, 0.7);
    box-shadow: 0 .125rem .375rem -1px rgba(0,0,0,.4), 0 0 0 .125rem color-mix(in srgb, #fafafa 70%, transparent);
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
}

@supports (color: color-mix(in lch, red, blue)) {
.annotated-shot .as-pin-num {
    box-shadow: 0 .125rem .375rem -1px rgba(0,0,0,.4), 0 0 0 .125rem color-mix(in srgb, var(--paper,#fff) 70%, transparent);
}
}
.annotated-shot .as-pin-ring {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; z-index: 1;
    background: rgba(0, 47, 59, 0.38);
    animation: as-pulse 2.4s ease-out infinite;
}

@supports (color: color-mix(in lch, red, blue)) {
.annotated-shot .as-pin-ring {
    background: color-mix(in srgb, var(--as-pin) 38%, transparent);
}
}
@keyframes as-pulse {
    0%   { transform: scale(.7); opacity: .7; }
    70%  { transform: scale(2.1); opacity: 0; }
    100% { transform: scale(2.1); opacity: 0; }
}
.annotated-shot.is-touched .as-pin-ring,
.annotated-shot[data-reveal="all"] .as-pin-ring { animation: none; opacity: 0; }

.annotated-shot .as-pin-card {
    position: absolute; left: 50%; bottom: calc(100% + var(--as-gap));
    transform: translateX(-50%);
    width: -moz-max-content;
    width: max-content; max-width: var(--as-card-w);
    display: grid; grid-gap: .2rem; gap: .2rem; text-align: left;
    padding: var(--as-card-pad); border-radius: .625rem;
    background: var(--as-card-bg); color: var(--as-card-ink);
    box-shadow: 0 .875rem 1.875rem -.625rem rgba(0,0,0,.55);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .22s ease;
    z-index: 3;
}
.annotated-shot .as-pin-card::after {
    content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: .375rem solid transparent; border-top-color: var(--as-card-bg);
}
.annotated-shot .as-pin-title { font: 600 .82rem/1.2 'Open Sans', Arial, Helvetica, sans-serif; font: 600 .82rem/1.2 var(--font-display, system-ui, sans-serif); letter-spacing: -.01em; }
.annotated-shot .as-pin-note { font-size: .74rem; line-height: 1.35; color: color-mix(in srgb, var(--as-card-ink) 78%, transparent); }

.annotated-shot[data-connector] .as-pin-card::before {
    content: ""; position: absolute; left: 50%; top: 100%; width: .125rem; height: var(--as-gap);
    transform: translateX(-50%); background: var(--as-card-bg);
}

.annotated-shot .as-pin[data-edge="left"]  .as-pin-card { left: 0; transform: none; }
.annotated-shot .as-pin[data-edge="left"]  .as-pin-card::after { left: 1.1rem; transform: none; }
.annotated-shot .as-pin[data-edge="left"][data-connector] .as-pin-card::before,
.annotated-shot[data-connector] .as-pin[data-edge="left"] .as-pin-card::before { left: 1.1rem; }
.annotated-shot .as-pin[data-edge="right"] .as-pin-card { left: auto; right: 0; transform: none; }
.annotated-shot .as-pin[data-edge="right"] .as-pin-card::after { left: auto; right: 1.1rem; transform: none; }
.annotated-shot[data-connector] .as-pin[data-edge="right"] .as-pin-card::before { left: auto; right: 1.1rem; transform: none; }
.annotated-shot .as-pin[data-vedge="bottom"] .as-pin-card { bottom: auto; top: calc(100% + var(--as-gap)); }
.annotated-shot .as-pin[data-vedge="bottom"] .as-pin-card::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--as-card-bg); }
.annotated-shot[data-connector] .as-pin[data-vedge="bottom"] .as-pin-card::before { top: auto; bottom: 100%; }

.annotated-shot[data-card-side="top"] .as-pin-card { top: auto; bottom: calc(100% + var(--as-gap)); }
.annotated-shot[data-card-side="bottom"] .as-pin-card { bottom: auto; top: calc(100% + var(--as-gap)); }
.annotated-shot[data-card-side="bottom"] .as-pin-card::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--as-card-bg); }
.annotated-shot[data-card-side="bottom"][data-connector] .as-pin-card::before { top: auto; bottom: 100%; }
.annotated-shot[data-card-side="left"] .as-pin-card,
.annotated-shot[data-card-side="right"] .as-pin-card { bottom: auto; top: 50%; transform: translateY(-50%); }
.annotated-shot[data-card-side="left"] .as-pin-card { left: auto; right: calc(100% + var(--as-gap)); }
.annotated-shot[data-card-side="right"] .as-pin-card { left: calc(100% + var(--as-gap)); right: auto; }
.annotated-shot[data-card-side="left"] .as-pin-card::after { top: 50%; left: 100%; right: auto; transform: translateY(-50%); border: .375rem solid transparent; border-left-color: var(--as-card-bg); }
.annotated-shot[data-card-side="right"] .as-pin-card::after { top: 50%; right: 100%; left: auto; transform: translateY(-50%); border: .375rem solid transparent; border-right-color: var(--as-card-bg); }
.annotated-shot[data-card-side="left"][data-connector] .as-pin-card::before,
.annotated-shot[data-card-side="right"][data-connector] .as-pin-card::before { display: none; }

.annotated-shot:not([data-reveal="click"]) .as-pin:hover .as-pin-num,
.annotated-shot:not([data-reveal="click"]) .as-pin:focus-visible .as-pin-num,
.annotated-shot .as-pin.is-active .as-pin-num { transform: scale(1.18); }
.annotated-shot:not([data-reveal="click"]) .as-pin:hover .as-pin-card,
.annotated-shot:not([data-reveal="click"]) .as-pin:focus-visible .as-pin-card,
.annotated-shot .as-pin.is-active .as-pin-card,
.annotated-shot[data-reveal="all"] .as-pin .as-pin-card { opacity: 1; visibility: visible; }
.annotated-shot .as-pin.is-dim { opacity: .35; }
.annotated-shot[data-reveal="all"] .as-pin.is-dim { opacity: 1; }
.annotated-shot .as-pin.is-dim .as-pin-card { opacity: 0 !important; visibility: hidden !important; }
.annotated-shot[data-reveal="all"] .as-pin.is-dim .as-pin-card { opacity: 1 !important; visibility: visible !important; }

/* in a narrow box the floating cards pile up and run off the shot: the numbered pins stay, the legend carries the notes */
@container (max-width: 30rem) { .annotated-shot .as-pin-card { display: none !important; } }
.annotated-shot .as-legend {
    list-style: none; margin: 1rem 0 0; padding: 0;
    display: grid; grid-gap: .35rem; gap: .35rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.annotated-shot .as-legend-item {
    display: flex; gap: .6rem; align-items: baseline;
    padding: .55rem .65rem; border-radius: .5625rem;
    border: 1px solid rgba(5, 5, 5, 0.14);
    border: 1px solid var(--line, #e3e8ee);
    background: rgb(245, 245, 245);
    background: color-mix(in srgb, #222 2.5%, #fafafa);
    cursor: pointer; transition: border-color .2s, background .2s, transform .2s;
    outline: none;
}

@supports (color: color-mix(in lch, red, blue)) {
.annotated-shot .as-legend-item {
    background: color-mix(in srgb, var(--ink,#0a2540) 2.5%, var(--paper,#fff));
}
}
.annotated-shot .as-legend-num {
    flex: none; width: 1.35rem; height: 1.35rem; display: grid; align-items: center; justify-items: center; place-items: center;
    border-radius: 50%; background: var(--as-pin); color: var(--as-pin-ink);
    font: 700 .72rem/1 'Open Sans', Arial, Helvetica, sans-serif;
    font: 700 .72rem/1 var(--font-display, system-ui, sans-serif);
}
.annotated-shot .as-legend-text { font-size: .82rem; color: #222; color: var(--ink, #0a2540); }
.annotated-shot .as-legend-text b { font-weight: 600; letter-spacing: -.01em; }
.annotated-shot .as-legend-text span { color: #626262; color: var(--muted, #425466); }
.annotated-shot .as-legend-item:hover,
.annotated-shot .as-legend-item:focus-visible,
.annotated-shot .as-legend-item.is-active {
    border-color: var(--as-pin);
    background: color-mix(in srgb, var(--as-pin) 8%, #fafafa);
    transform: translateY(-1px);
}

@supports (color: color-mix(in lch, red, blue)) {
.annotated-shot .as-legend-item:hover,
.annotated-shot .as-legend-item:focus-visible,
.annotated-shot .as-legend-item.is-active {
    background: color-mix(in srgb, var(--as-pin) 8%, var(--paper,#fff));
}
}

.annotated-shot .as-caption {
    margin: .8rem 0 0; font: 400 .8rem/1.5 ui-monospace, 'SF Mono', Menlo, monospace; font: 400 .8rem/1.5 var(--font-mono, ui-monospace, monospace);
    color: #626262;
    color: var(--muted, #888); letter-spacing: .02em;
}

@media (max-width: 768px) {
    .annotated-shot { --as-pin-size: 1.6rem; }
    .annotated-shot .as-pin-num { font-size: .74rem; }
}

/* blocks/announce-bar.css */

.announce-bar {
    --ab-bg: var(--accent, #bf3b25);
    --ab-fg: var(--on-accent, #fff8ee);
    width: 100%; margin: 0; padding: .78em 1.2em;
    background: #007b9a;
    background: var(--ab-bg); color: rgb(240, 251, 255); color: color(display-p3 0.94504 0.9821 1); color: oklch(from #007b9a clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h); color: var(--ab-fg);
    font: 600 0.6875rem/1.2 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 var(--text-label, .74em)/1.2 var(--font-text, "Helvetica Neue", Arial, sans-serif); letter-spacing: .1em; text-transform: uppercase;
}
.announce-bar.ab-tone-ink { --ab-bg: var(--ink, #1c1917); --ab-fg: var(--paper, #fffdf8); }
.announce-bar.ab-tone-paper { --ab-bg: var(--paper, #fffdf8); --ab-fg: var(--ink, #1c1917); border-bottom: 1px solid rgba(5, 5, 5, 0.14); border-bottom: 1px solid var(--line, #ddd3c4); }
.announce-bar .ab-items { --row-gap: 0; --row-item: auto; --row-flow-narrow: row nowrap; justify-content: center; list-style: none; margin: 0; padding: 0; }
.announce-bar.ab-align-left .ab-items { justify-content: flex-start; }
.announce-bar.ab-align-right .ab-items { justify-content: flex-end; }
.announce-bar .ab-item { flex: 0 1 auto; margin: 0; padding: 0 1.6em; white-space: nowrap; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.announce-bar .ab-item + .ab-item { border-left: 1px solid color-mix(in srgb, var(--ab-fg) 34%, transparent); }
@container (max-width: 44em) {
    .announce-bar .ab-item + .ab-item { display: none; }
    .announce-bar .ab-item { white-space: normal; text-align: center; }
}

/* blocks/article.css */

.article {
    --a-rule: var(--rule, var(--line, #d6d0c4));
    --a-measure: var(--measure, 64ch);
    --a-ink: var(--ink, #16140f);
    --a-muted: var(--muted, #6f6a5e);
    --a-accent: var(--accent, #ff4d18);
    width: 100%;
}
.article[data-scheme="dark"] {
    --a-rule: var(--rule-dark, var(--line-dark, #2e2a22));
    --a-ink: var(--ink-dark, #ece7dc);
    --a-muted: var(--muted-dark, #97907f);
}

.article .a-head { margin-bottom: max(2rem, min(5vh, 3.5rem)); margin-bottom: clamp(2rem, 5vh, 3.5rem); }
.article .a-kicker {
    margin: 0 0 1.1rem;
    font: 400 .72rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 400 var(--folio-size, .72rem)/1 var(--font-mono, var(--font-display, system-ui));
    letter-spacing: .2em;
    letter-spacing: var(--folio-track, .2em); text-transform: uppercase; color: var(--a-accent);
}
.article .a-title {
    margin: 0 0 1.2rem;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, serif); font-weight: 600;
    font-size: max(2.6rem, min(calc(7 * var(--pe-vw)), 6rem));
    font-size: clamp(2.6rem, calc(7 * var(--pe-vw)), 6rem); line-height: .96; letter-spacing: -.025em;
    color: var(--a-ink);
}
.article .a-title .accent { color: var(--a-accent); font-style: italic; }
.article .a-byline {
    margin: 0;
    font: 400 .72rem/1.4 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 400 var(--folio-size, .72rem)/1.4 var(--font-mono, var(--font-text, system-ui));
    letter-spacing: .08em; text-transform: uppercase; color: var(--a-muted);
}

.article .a-row {
    display: grid;
    grid-template-columns: minmax(0, 9fr) minmax(0, 3fr);
    grid-gap: max(1.6rem, min(calc(4 * var(--pe-vw)), 4rem));
    grid-gap: clamp(1.6rem, calc(4 * var(--pe-vw)), 4rem);
    gap: max(1.6rem, min(calc(4 * var(--pe-vw)), 4rem));
    gap: clamp(1.6rem, calc(4 * var(--pe-vw)), 4rem);
    align-items: start;
}
.article .a-sidenotes:empty,
.article .a-row:not(:has(.a-sidenotes)) { display: block; }
.article:not(:has(.a-sidenotes)) .a-row { grid-template-columns: 1fr; }

.article .a-body {
    -moz-column-gap: max(1.6rem, min(calc(3 * var(--pe-vw)), 3rem));
         column-gap: max(1.6rem, min(calc(3 * var(--pe-vw)), 3rem));
    -moz-column-gap: clamp(1.6rem, calc(3 * var(--pe-vw)), 3rem);
         column-gap: clamp(1.6rem, calc(3 * var(--pe-vw)), 3rem);
    -moz-column-rule: 1px solid var(--a-rule);
         column-rule: 1px solid var(--a-rule);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui); font-size: 1.02rem; line-height: 1.62;
    color: var(--a-ink);
}
.article.a-cols-1 .a-body { -moz-columns: 1; columns: 1; -moz-column-rule: none; column-rule: none; }
.article.a-cols-2 .a-body { -moz-columns: 2; columns: 2; }
.article.a-cols-3 .a-body { -moz-columns: 3; columns: 3; }
.article .a-body p { margin: 0 0 1.1em; text-wrap: pretty; }
.article .a-body code {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, ui-monospace); font-size: .86em;
    background: rgba(2, 2, 2, 0.07); padding: .05em .35em;
}

@supports (color: color-mix(in lch, red, blue)) {
.article .a-body code {
    background: color-mix(in oklab, var(--a-ink) 7%, transparent);
}
}

.article.a-dropcap .a-body > p:first-child { page-break-after: avoid; -moz-column-break-after: avoid; break-after: avoid; }
.article.a-dropcap .a-body > p:first-child::first-letter {
    float: left;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, serif); font-weight: 600;
    font-size: 3.6em; line-height: .72; padding: .06em .12em 0 0;
    color: var(--a-accent);
}

.article .a-sidenotes { display: flex; flex-direction: column; gap: 1.4rem; }
.article .a-sidenote {
    margin: 0; padding-top: .3rem; border-top: 1px solid var(--a-rule);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui); font-size: .86rem; line-height: 1.5; color: var(--a-muted);
}
.article .a-mark { color: var(--a-accent); font-weight: 700; margin-right: .4ch; }

.article .a-footnotes {
    list-style: none; margin: max(2rem, min(5vh, 3rem)) 0 0; margin: clamp(2rem, 5vh, 3rem) 0 0; padding: 1rem 0 0;
    border-top: 1px solid var(--a-rule); max-width: var(--a-measure);
}
.article .a-footnote {
    margin: 0 0 .7rem;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui); font-size: .86rem; line-height: 1.5; color: var(--a-muted);
}

@media (max-width: 768px) {
    .article .a-row { grid-template-columns: 1fr; gap: 2rem; }
    .article .a-body { -moz-columns: 1 !important; columns: 1 !important; -moz-column-rule: none; column-rule: none; }
}

/* blocks/bake-rail.css */

.bake-rail {
    --br-bg: var(--accent, #1f45d6);
    --br-fg: var(--on-accent, #fbf7ee);
    --br-soft: color-mix(in srgb, var(--br-fg) 78%, transparent);
    --br-hot: var(--spark, #ffd45e);
    --br-card: var(--paper, #fff);
    --br-card-ink: var(--ink, #2b1a12);
    --br-card-soft: var(--muted, #6e5b4e);
    --br-ratio: .8;
    --br-edge: var(--page-margin, 6cqi);
    position: relative; margin: 0; background: #007b9a; background: var(--br-bg); color: rgb(240, 251, 255); color: color(display-p3 0.94504 0.9821 1); color: oklch(from #007b9a clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h); color: var(--br-fg);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, "Helvetica Neue", Arial, sans-serif);
}
.bake-rail.br-tone-page { --br-bg: var(--page-bg, #fbf7ee); --br-fg: var(--ink, #2b1a12); --br-soft: var(--muted, #6e5b4e); --br-hot: var(--accent, #1f45d6); }
.bake-rail.br-tone-ink { --br-bg: var(--ink, #2b1a12); --br-fg: var(--page-bg, #fbf7ee); --br-soft: color-mix(in srgb, var(--page-bg, #fbf7ee) 72%, transparent); }
.bake-rail.br-card-square { --br-ratio: 1; }

.bake-rail.bake-rail[data-rail="pinned"] { height: calc(100svh - 0svh + 0svh); height: calc(100svh - var(--rail-top, 0svh) + var(--rail-distance, 0svh)); }
.bake-rail[data-rail="pinned"] .br-stage { position: sticky; top: 0svh; top: var(--rail-top, 0svh); height: calc(100svh - 0svh); height: calc(100svh - var(--rail-top, 0svh)); overflow: hidden; }
.bake-rail .br-stage { padding-block: max(1.4em, min(5svh, 4.5em)) max(1.4em, min(4svh, 3.5em)); padding-top: max(1.4em, min(5svh, 4.5em)); padding-block: max(1.4em, min(4svh, 3.5em)) max(1.4em, min(4svh, 3.5em)); padding-top: max(1.4em, min(4svh, 3.5em)); padding-top: max(1.4em, min(5svh, 4.5em)); padding-top: clamp(1.4em, 5svh, 4.5em); padding-bottom: max(1.4em, min(4svh, 3.5em)); padding-bottom: clamp(1.4em, 4svh, 3.5em); container-type: inline-size; }
.bake-rail:not([data-rail="pinned"]) .br-stage { overflow-x: auto; scrollbar-width: thin; }

.bake-rail .br-head { position: relative; margin: 0 var(--br-edge) max(1.2em, min(4svh, 3.2em)); margin: 0 var(--br-edge) clamp(1.2em, 4svh, 3.2em); padding-right: 34%; }
.bake-rail .br-head > *, .bake-rail .br-aside > * { margin: 0; }
.bake-rail .br-eyebrow { font: 500 0.6875rem/1.3 ui-monospace, 'SF Mono', Menlo, monospace; font: 500 var(--text-label, .8em)/1.3 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--br-hot); }
.bake-rail .br-title { margin-top: .2em; margin-left: -.04em; font: 400 max(2.4em, min(7.2cqi, 8em))/.9 'Open Sans', Arial, Helvetica, sans-serif; font: 400 max(2.4em, min(7.2cqi, 8em))/.9 var(--font-display, Georgia, serif); font: 400 max(2.4em, min(7.2cqi, 8em))/.9 'Open Sans', Arial, Helvetica, sans-serif; font: 400 clamp(2.4em, 7.2cqi, 8em)/.9 'Open Sans', Arial, Helvetica, sans-serif; font: 400 clamp(2.4em, 7.2cqi, 8em)/.9 var(--font-display, Georgia, serif); letter-spacing: -.02em; text-wrap: balance; }
.bake-rail .br-title em { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-text, sans-serif); font-weight: 300; font-style: italic; letter-spacing: -.04em; color: var(--br-hot); }
.bake-rail .br-aside { position: absolute; right: 0; bottom: 0; width: 30%; }
.bake-rail .br-lead { font-size: 1.125rem; font-size: var(--text-md, 1em); line-height: 1.5; color: var(--br-soft); text-wrap: pretty; }
.bake-rail .br-asof { margin-top: .9em; font: 400 0.6875rem/1.4 ui-monospace, 'SF Mono', Menlo, monospace; font: 400 var(--text-label, .8em)/1.4 var(--font-mono, monospace); color: var(--br-soft); }
.bake-rail .br-cta { display: inline-block; margin-top: 1.1em; padding: .8em 1.3em; border: 1px solid color-mix(in srgb, var(--br-fg) 45%, transparent); border-radius: 99em; color: var(--br-fg); font-weight: 600; -webkit-text-decoration: none; text-decoration: none; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.bake-rail .br-cta:hover { background: var(--br-fg); border-color: var(--br-fg); color: var(--br-bg); }
.bake-rail .br-cta:focus-visible { outline: .125rem solid var(--br-hot); outline-offset: .1875rem; }
.bake-rail .br-progress { position: relative; height: .18em; margin-top: max(1em, min(3svh, 2.2em)); margin-top: clamp(1em, 3svh, 2.2em); overflow: hidden; border-radius: 1em; background: color-mix(in srgb, currentColor 18%, transparent); }
.bake-rail .br-progress-bar { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--br-hot); transform: scaleX(0); transform: scaleX(var(--rail-progress, 0)); transform-origin: 0 50%; }
.bake-rail:not([data-rail="pinned"]) .br-progress { visibility: hidden; }

.bake-rail .br-track { --row-gap: max(.9em, min(1.8cqi, 2.2em)); --row-gap: clamp(.9em, 1.8cqi, 2.2em); --row-flow: row nowrap; --row-flow-narrow: row nowrap; width: -moz-max-content; width: max-content; list-style: none; margin: 0; padding: 0 var(--br-edge); will-change: transform; }
.bake-rail .br-bake {
    --br-h: calc(var(--br-card-h, 44) * 1svh);
    position: relative; flex: 0 0 auto; width: calc((44 * 1svh) * var(--br-ratio)); width: calc(calc(44 * 1svh) * var(--br-ratio)); width: calc(var(--br-h) * var(--br-ratio)); max-width: 78cqi; margin: 0;
    padding: .55em .55em 1.1em; border-radius: calc(1 * 1em); border-radius: calc(var(--br-radius, 1) * 1em); background: var(--br-card); color: var(--br-card-ink);
    box-shadow: 0 .2em .5em rgba(3, 3, 3, 0.1), 0 1.4em 2.6em -1em rgba(12, 12, 12, 0.34);
    box-shadow: 0 .2em .5em color-mix(in srgb, #222 10%, transparent), 0 1.4em 2.6em -1em color-mix(in srgb, #222 34%, transparent);
    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
    transition: transform .5s var(--ease-out, cubic-bezier(.16, 1, .3, 1));
}

@supports (color: color-mix(in lch, red, blue)) {
.bake-rail .br-bake {
    box-shadow: 0 .2em .5em color-mix(in srgb, var(--ink, #2b1a12) 10%, transparent), 0 1.4em 2.6em -1em color-mix(in srgb, var(--ink, #2b1a12) 34%, transparent);
}
}
.bake-rail .br-bake:nth-child(odd) { transform: rotate(-1.2deg); }
.bake-rail .br-bake:nth-child(even) { transform: rotate(1deg) translateY(.8em); }
.bake-rail .br-bake:hover { transform: rotate(0deg) translateY(-.5em); }
.bake-rail .br-plate { position: relative; height: var(--br-h); max-height: calc(78cqi / var(--br-ratio)); margin: 0; }
.bake-rail .br-photo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; overflow: hidden; border-radius: calc(1 * .65em); border-radius: calc(var(--br-radius, 1) * .65em); background: rgb(241, 241, 241); background: color-mix(in srgb, #222 4%, #fafafa); background: var(--surface, #f1eadb); }
.bake-rail .br-photo img, .bake-rail .br-photo picture { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 1.1s cubic-bezier(.16, 1, .3, 1), filter .4s ease; transition: transform 1.1s var(--ease-out, cubic-bezier(.16, 1, .3, 1)), filter .4s ease; }
.bake-rail .br-bake:hover .br-photo img { transform: scale(1.07); }
.bake-rail .br-tag {
    position: absolute; left: .7em; top: .7em; margin: 0; padding: .45em .7em .45em .6em; border-radius: 99em;
    background: #ffd45e;
    background: var(--spark, #ffd45e); color: #222; color: var(--ink, #2b1a12);
    font: 500 0.6875rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 var(--text-label, .8em)/1 var(--font-mono, monospace); letter-spacing: .02em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bake-rail .br-clock { margin-right: .35em; font-size: .95em; vertical-align: -.08em; }

.bake-rail .br-facts { position: relative; min-height: 5.6em; padding: .95em 3.6em 0 .45em; }
.bake-rail .br-facts > * { margin: 0; }
.bake-rail .br-name { font: 400 max(1.25em, min(1.9cqi, 2em))/1.02 'Open Sans', Arial, Helvetica, sans-serif; font: 400 max(1.25em, min(1.9cqi, 2em))/1.02 var(--font-display, Georgia, serif); font: 400 max(1.25em, min(1.9cqi, 2em))/1.02 'Open Sans', Arial, Helvetica, sans-serif; font: 400 clamp(1.25em, 1.9cqi, 2em)/1.02 'Open Sans', Arial, Helvetica, sans-serif; font: 400 clamp(1.25em, 1.9cqi, 2em)/1.02 var(--font-display, Georgia, serif); letter-spacing: -.01em; text-wrap: balance; }
.bake-rail .br-note { margin-top: .3em; color: var(--br-card-soft); font-style: italic; line-height: 1.3; }
.bake-rail .br-stock { display: inline-block; margin-top: .65em; font: 500 0.6875rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 500 var(--text-label, .8em)/1 var(--font-mono, monospace); letter-spacing: .04em; text-transform: uppercase; color: #007b9a; color: var(--accent, #1f45d6); }
.bake-rail .br-price { display: inline-block; margin: .65em 0 0 .9em; font: 500 0.6875rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 500 var(--text-label, .8em)/1 var(--font-mono, monospace); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--br-card-ink); }
.bake-rail .br-stock-few .br-stock { color: #a2531a; color: var(--crust, #a2531a); }
.bake-rail .br-stock-out .br-stock { color: var(--br-card-soft); }
.bake-rail .br-stock-out .br-photo img { filter: grayscale(1) contrast(.9); opacity: .6; }
.bake-rail .br-stock-out .br-name { color: var(--br-card-soft); }

.bake-rail .br-add {
    position: absolute; right: .1em; top: .9em; width: 2.8em; height: 2.8em; margin: 0; padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;
    border: 0; border-radius: 99em; background: #007b9a; background: var(--accent, #1f45d6); color: rgb(240, 251, 255); color: color(display-p3 0.94504 0.9821 1); color: oklch(from #007b9a clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h); color: var(--on-accent, #fbf7ee); font-size: 1em;
    transition: background-color .2s ease, color .2s ease, transform .25s cubic-bezier(.3, 1.5, .5, 1);
}
.bake-rail .br-add:hover { background: #ffd45e; background: var(--spark, #ffd45e); color: #222; color: var(--ink, #2b1a12); transform: scale(1.1) rotate(90deg); }
.bake-rail .br-add:active { transform: scale(.9); }
.bake-rail .br-add:focus-visible { outline: .125rem solid var(--br-card-ink); outline-offset: .1875rem; }
.bake-rail .br-plus, .bake-rail .br-tick { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font-size: 1.1em; line-height: 1; transition: opacity .2s ease, scale .25s ease; }
.bake-rail .br-tick { opacity: 0; scale: .4; }
.bake-rail .br-add.is-added { background: #222; background: var(--ink, #2b1a12); color: #ffd45e; color: var(--spark, #ffd45e); transform: none; }
.bake-rail .br-add.is-added .br-plus { opacity: 0; scale: .4; }
.bake-rail .br-add.is-added .br-tick { opacity: 1; scale: 1; }
.bake-rail .br-stock-out .br-add { cursor: not-allowed; background: rgba(3, 3, 3, 0.08); color: var(--br-card-soft); transform: none; }

@supports (color: color-mix(in lch, red, blue)) {
.bake-rail .br-stock-out .br-add { background: color-mix(in srgb, var(--br-card-ink) 8%, transparent); }
}
.bake-rail .br-add.is-refused { animation: br-no .4s ease; }
@keyframes br-no { 25% { translate: -.2em 0; } 50% { translate: .2em 0; } 75% { translate: -.1em 0; } }

@container (max-width: 44em) {
    .bake-rail .br-head { padding-right: 0; }
    .bake-rail .br-aside { position: static; width: auto; max-width: 40ch; margin-top: 1em; }
    .bake-rail .br-bake { --br-h: calc(var(--br-card-h, 44) * .9svh); }
}
html.respect-reduced-motion .bake-rail .br-bake, html.respect-reduced-motion .bake-rail .br-photo img, html.respect-reduced-motion .bake-rail .br-add { transition: none; }
html.respect-reduced-motion .bake-rail .br-bake:nth-child(n) { transform: none; }

/* blocks/band.css */

.band {
    --band-ink:     var(--ink, #15171c);
    --band-muted:   var(--muted, #6b7280);
    --band-accent:  var(--accent, #635bff);
    --band-accent-ink: var(--accent-ink, #fff);
    --band-surface: var(--surface, var(--paper, #fff));
    --band-line:    var(--line, #e3e8ee);
    --band-radius:  var(--radius, 0.875rem);
    --band-font-display: var(--font-display, system-ui, sans-serif);
    --band-font-mono:    var(--font-mono, ui-monospace, monospace);
    --band-flood:    var(--invert-bg, #0b0e16);
    --band-flood-fg: var(--invert-fg, #fff);
    width: 100%;
    color: #222;
    color: var(--band-ink);
}
.band[data-scheme="dark"] {
    --band-ink:     var(--ink-dark, #e9eaee);
    --band-muted:   var(--muted-dark, #9aa0ab);
    --band-surface: var(--surface-dark, var(--paper-dark, #14161c));
    --band-line:    var(--line-dark, #2a2e38);
    --band-flood:    var(--invert-bg, #06070b);
}

.band[data-variant="cta"] { text-align: center; }
.band-cta-body {
    width: 100%;
    padding: max(4rem, min(calc(11 * var(--pe-vw)), 9rem)) max(1.5rem, min(calc(6 * var(--pe-vw)), 7rem));
    padding: max(4rem, min(calc(11 * var(--pe-vw)), 9rem)) clamp(1.5rem, calc(6 * var(--pe-vw)), 7rem);
    padding: max(1.5rem, min(calc(6 * var(--pe-vw)), 7rem)) max(1.5rem, min(calc(6 * var(--pe-vw)), 7rem));
    padding: max(1.5rem, min(calc(6 * var(--pe-vw)), 7rem)) clamp(1.5rem, calc(6 * var(--pe-vw)), 7rem);
    padding: clamp(4rem, calc(11 * var(--pe-vw)), 9rem) clamp(1.5rem, calc(6 * var(--pe-vw)), 7rem);
    border-radius: var(--band-radius);
    background: var(--band-surface); color: var(--band-ink);
    border: 1px solid var(--band-line);
    display: flex; flex-direction: column; align-items: center; gap: 1.4rem;
}
.band-cta-body--invert {
    background: var(--band-flood); color: var(--band-flood-fg);
    border-color: transparent;
    box-shadow: 0 0 0 1px rgba(0, 37, 46, 0.3) inset;
}

@supports (color: color-mix(in lch, red, blue)) {
.band-cta-body--invert {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--band-accent) 30%, transparent) inset;
}
}

.band-kicker { margin: 0; font: 600 max(.75rem, min(calc(1.6 * var(--pe-vw)), .95rem))/1 var(--band-font-mono); font: 600 clamp(.75rem, calc(1.6 * var(--pe-vw)), .95rem)/1 var(--band-font-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--band-accent); }
.band-cta-body--invert .band-kicker { color: rgba(195, 197, 201, 0.8); }

@supports (color: color-mix(in lch, red, blue)) {
.band-cta-body--invert .band-kicker { color: color-mix(in srgb, var(--band-flood-fg) 80%, transparent); }
}
.band-headline { margin: 0; font: 800 max(2.6rem, min(calc(9 * var(--pe-vw)), 6.5rem))/.94 var(--band-font-display); font: 800 clamp(2.6rem, calc(9 * var(--pe-vw)), 6.5rem)/.94 var(--band-font-display); letter-spacing: -.035em; }

.band-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: max(2rem, min(calc(8 * var(--pe-vw)), 6rem)); gap: clamp(2rem, calc(8 * var(--pe-vw)), 6rem); margin: .6rem 0; }
.band-stat { display: flex; flex-direction: column; gap: .5rem; }
.band-stat-num { font: 800 max(2.4rem, min(calc(6 * var(--pe-vw)), 4.4rem))/1 var(--band-font-display); font: 800 clamp(2.4rem, calc(6 * var(--pe-vw)), 4.4rem)/1 var(--band-font-display); letter-spacing: -.03em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.band-stat-label { font: 600 max(.7rem, min(calc(1.4 * var(--pe-vw)), .85rem))/1 var(--band-font-mono); font: 600 clamp(.7rem, calc(1.4 * var(--pe-vw)), .85rem)/1 var(--band-font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--band-accent); }
.band-cta-body--invert .band-stat-label { color: rgba(159, 160, 163, 0.65); }

@supports (color: color-mix(in lch, red, blue)) {
.band-cta-body--invert .band-stat-label { color: color-mix(in srgb, var(--band-flood-fg) 65%, transparent); }
}

.band-pill {
    margin-top: .4rem; display: inline-flex; align-items: center; justify-content: center;
    font: 700 max(1rem, min(calc(2.2 * var(--pe-vw)), 1.4rem))/1 var(--band-font-display);
    font: 700 clamp(1rem, calc(2.2 * var(--pe-vw)), 1.4rem)/1 var(--band-font-display); letter-spacing: -.01em; -webkit-text-decoration: none; text-decoration: none;
    padding: .9em 1.8em; border-radius: 62.4375rem;
    background: var(--band-accent); color: var(--band-accent-ink);
    border: .125rem solid var(--band-accent);
    transition: transform .2s, background .2s, color .2s, box-shadow .2s;
}
.band-pill:hover { transform: translateY(-.125rem); box-shadow: 0 .75rem 2.125rem rgba(0, 49, 62, 0.4); }

@supports (color: color-mix(in lch, red, blue)) {
.band-pill:hover { box-shadow: 0 .75rem 2.125rem color-mix(in srgb, var(--band-accent) 40%, transparent); }
}
.band-cta-body--invert .band-pill { background: var(--band-flood-fg); color: var(--band-flood); border-color: var(--band-flood-fg); }
.band-cta-body--invert .band-pill:hover { background: transparent; color: var(--band-flood-fg); }

.band[data-variant="newsletter"] {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    grid-gap: max(2rem, min(calc(4 * var(--pe-vw)), 5rem));
    grid-gap: clamp(2rem, calc(4 * var(--pe-vw)), 5rem);
    gap: max(2rem, min(calc(4 * var(--pe-vw)), 5rem));
    gap: clamp(2rem, calc(4 * var(--pe-vw)), 5rem);
    align-items: center;
    padding: max(2rem, min(calc(5 * var(--pe-vw)), 4rem)) 0;
    padding: clamp(2rem, calc(5 * var(--pe-vw)), 4rem) 0;
    border-top: 1px solid var(--band-line);
    border-bottom: 1px solid var(--band-line);
}

.band-eyebrow {
    font: 600 clamp(.7rem, .6rem + calc(.3 * var(--pe-vw)), .82rem)/1 var(--band-font-mono);
    letter-spacing: .28em; text-transform: uppercase;
    color: var(--band-accent); margin: 0 0 1rem;
}
.band-title {
    font-family: var(--band-font-display); font-weight: 600;
    font-size: clamp(1.7rem, 1.2rem + calc(2.4 * var(--pe-vw)), 3.2rem);
    line-height: 1.02; letter-spacing: -.02em;
    color: var(--band-ink); margin: 0;
}

.band-input { display: flex; gap: .6rem; }
.band-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.band-input input {
    flex: 1; min-width: 0;
    background: var(--band-surface); color: var(--band-ink);
    border: 1px solid var(--band-line); border-radius: 6.25rem;
    padding: 1.05em 1.4em; font-family: inherit; font-size: 1rem; outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.band-input input::-moz-placeholder { color: var(--band-muted); opacity: .7; }
.band-input input::placeholder { color: var(--band-muted); opacity: .7; }
.band-input input:focus {
    border-color: var(--band-accent);
    box-shadow: 0 0 0 .1875rem rgba(0, 27, 34, 0.22);
}

@supports (color: color-mix(in lch, red, blue)) {
.band-input input:focus {
    box-shadow: 0 0 0 .1875rem color-mix(in srgb, var(--band-accent) 22%, transparent);
}
}

.band[data-variant="newsletter"] .band-cta {
    display: inline-flex; align-items: center; gap: .5ch; flex: none;
    font: 600 clamp(.8rem, .7rem + calc(.4 * var(--pe-vw)), .95rem)/1 var(--band-font-mono);
    letter-spacing: .06em; text-transform: uppercase;
    padding: 1.05em 1.6em; border: 1px solid transparent; border-radius: 6.25rem;
    background: var(--band-accent); color: var(--band-accent-ink);
    cursor: pointer; white-space: nowrap;
    transition: transform .25s ease, filter .25s ease;
}
.band[data-variant="newsletter"] .band-cta:hover { transform: translateY(-.125rem); filter: brightness(1.06); }
.band[data-variant="newsletter"] .band-cta:focus-visible { outline: .1875rem solid rgba(0, 55, 69, 0.45); outline-offset: .1875rem; }

@supports (color: color-mix(in lch, red, blue)) {
.band[data-variant="newsletter"] .band-cta:focus-visible { outline: .1875rem solid color-mix(in srgb, var(--band-accent) 45%, transparent); }
}
.band[data-variant="newsletter"] .band-cta:active { transform: translateY(0); }
.band-arrow { transition: transform .25s ease; }
.band[data-variant="newsletter"] .band-cta:hover .band-arrow { transform: translateX(.1875rem); }

.band-fine {
    font: 400 .74rem/1.4 var(--band-font-mono);
    color: var(--band-muted); letter-spacing: .04em; margin: 1rem 0 0;
}

@media (max-width: 768px) {
    .band[data-variant="newsletter"] { grid-template-columns: 1fr; }
    .band-input { flex-direction: column; }
    .band[data-variant="newsletter"] .band-cta { justify-content: center; }
}

/* blocks/bar-chart.css */

.bar-chart { width: 100%; }

.bar-chart .bc-eyebrow {
    color: #007b9a;
    color: var(--accent, #635bff);
    font: 600 .72rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 .72rem/1 var(--font-mono, var(--font-display, system-ui));
    letter-spacing: .2em; text-transform: uppercase;
    margin: 0 0 max(1rem, min(2.4cqi, 1.6rem));
    margin: 0 0 clamp(1rem, 2.4cqi, 1.6rem);
}

.bar-chart .bc-rows { display: flex; flex-direction: column; gap: max(.7rem, min(1.6cqi, 1rem)); gap: clamp(.7rem, 1.6cqi, 1rem); }
.bar-chart .bc-row {
    display: grid;
    grid-template-columns: minmax(5rem, 9rem) 1fr minmax(3.4ch, auto);
    align-items: center; grid-gap: max(.7rem, min(1.6cqi, 1.1rem)); grid-gap: clamp(.7rem, 1.6cqi, 1.1rem); gap: max(.7rem, min(1.6cqi, 1.1rem)); gap: clamp(.7rem, 1.6cqi, 1.1rem);
}

.bar-chart .bc-label {
    font: 600 max(.62rem, min(1.3cqi, .7rem))/1.2 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 max(.62rem, min(1.3cqi, .7rem))/1.2 var(--font-mono, var(--font-display, system-ui));
    font: 600 max(.62rem, min(1.3cqi, .7rem))/1.2 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 clamp(.62rem, 1.3cqi, .7rem)/1.2 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 clamp(.62rem, 1.3cqi, .7rem)/1.2 var(--font-mono, var(--font-display, system-ui));
    text-transform: uppercase; letter-spacing: .08em;
    color: #222;
    color: var(--ink, #0a2540);
}

.bar-chart .bc-track {
    position: relative; height: 1rem; overflow: hidden;
    border: 1px solid rgba(7, 7, 7, 0.22);
    border: 1px solid color-mix(in srgb, #222 22%, transparent);
    border-radius: calc(1vh * 0.5);
    border-radius: var(--r-sm, var(--radius, .25rem));
    background-color: rgb(241, 241, 241);
    background-color: color-mix(in srgb, #222 4%, #fafafa);
    background-image: repeating-linear-gradient(90deg,
        transparent 0, transparent calc(25% - 1px),
        rgba(4, 4, 4, 0.12) calc(25% - 1px),
        rgba(4, 4, 4, 0.12) 25%);
    background-image: repeating-linear-gradient(90deg,
        transparent 0, transparent calc(25% - 1px),
        color-mix(in srgb, #222 12%, transparent) calc(25% - 1px),
        color-mix(in srgb, #222 12%, transparent) 25%);
}

@supports (color: color-mix(in lch, red, blue)) {
.bar-chart .bc-track {
    border: 1px solid color-mix(in srgb, var(--ink, #0a2540) 22%, transparent);
    background-color: var(--surface, color-mix(in srgb, var(--ink, #0a2540) 3%, var(--paper, #fff)));
    background-image: repeating-linear-gradient(90deg,
        transparent 0, transparent calc(25% - 1px),
        color-mix(in srgb, var(--ink, #0a2540) 12%, transparent) calc(25% - 1px),
        color-mix(in srgb, var(--ink, #0a2540) 12%, transparent) 25%);
}
}
.bar-chart .bc-fill {
    position: absolute; top: 0; right: auto; bottom: 0; left: 0;
    width: 50%;
    width: var(--bc-v, 50%); max-width: 100%;
    background: #007b9a;
    background: var(--accent, #635bff);
    border-radius: inherit;
    box-shadow: 1px 0 0 rgba(13, 13, 13, 0.38);
    box-shadow: 1px 0 0 color-mix(in srgb, #222 38%, transparent);
}

@supports (color: color-mix(in lch, red, blue)) {
.bar-chart .bc-fill {
    box-shadow: 1px 0 0 color-mix(in srgb, var(--ink, #0a2540) 38%, transparent);
}
}

.bar-chart .bc-value {
    font: 700 max(.74rem, min(1.5cqi, .82rem))/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 700 max(.74rem, min(1.5cqi, .82rem))/1 var(--font-mono, var(--font-display, system-ui));
    font: 700 max(.74rem, min(1.5cqi, .82rem))/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 700 clamp(.74rem, 1.5cqi, .82rem)/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 700 clamp(.74rem, 1.5cqi, .82rem)/1 var(--font-mono, var(--font-display, system-ui));
    color: #007b9a;
    color: var(--accent, #635bff); font-feature-settings: tabular-nums lining-nums; font-variant-numeric: tabular-nums lining-nums;
    text-align: right;
}

.bar-chart[data-countin="1"] .bc-fill { transition: width 1.1s cubic-bezier(.22,.61,.36,1); }

/* blocks/bar-ink.css */
/* bar ink (behaviors/barInk.js): each piece of a bar is coloured by what is painted behind it (data-ink-on), fading as
   that changes. !important beats the bar's own inline text colours; a span inside a text with its own colour (a brand
   mark) keeps it. The behavior's darkInk / lightInk come in as --bar-ink-dark / --bar-ink-light, else the theme's. */
[data-ink-on] { transition: color .3s ease; }
[data-ink-on="dark"] { color: #222 !important; color: var(--bar-ink-dark, var(--ink, #000)) !important; }
[data-ink-on="light"] { color: #f4f6fb !important; color: var(--bar-ink-light, var(--invert-fg, #fff)) !important; }

/* blocks/bento-grid.css */

.bento-grid {
    --bg-rule: var(--rule, var(--line, #d6d0c4));
    --bg-paper: var(--paper, var(--surface, #f4f1ea));
    --bg-panel: var(--panel, var(--ink, #16140f));
    --bg-panel-fg: var(--panel-fg, var(--paper, #f4f1ea));
    --bg-ink: var(--ink, #16140f);
    --bg-muted: var(--muted, #6f6a5e);
    --bg-accent: var(--accent, #ff4d18);
    --bg-gap: var(--gap, max(.9rem, min(1.6cqi, 1.6rem)));
    --bg-gap: var(--gap, clamp(.9rem, 1.6cqi, 1.6rem));
    --bg-radius: var(--r-lg, var(--radius, 0));
    width: 100%;
}
.bento-grid[data-scheme="dark"] {
    --bg-rule: var(--rule-dark, var(--line-dark, #2e2a22));
    --bg-paper: var(--paper-dark, var(--surface-dark, #16140f));
    --bg-panel: var(--panel-dark, var(--ink-dark, #ece7dc));
    --bg-panel-fg: var(--panel-fg-dark, var(--paper-dark, #16140f));
    --bg-ink: var(--ink-dark, #ece7dc);
    --bg-muted: var(--muted-dark, #97907f);
}

.bento-grid .bg-eyebrow {
    margin: 0 0 max(1rem, min(2.4cqi, 1.8rem));
    margin: 0 0 clamp(1rem, 2.4cqi, 1.8rem);
    font: 600 .72rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 var(--folio-size, .72rem)/1 var(--font-mono, var(--font-display, system-ui));
    letter-spacing: .2em;
    letter-spacing: var(--folio-track, .2em); text-transform: uppercase;
    color: var(--bg-accent);
}

.bento-grid .bg-board {
    display: grid;
    grid-gap: var(--bg-gap);
    gap: var(--bg-gap);
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(8.5rem, auto);
    grid-template-areas:
        "mast mast mast panel"
        "mast mast mast panel"
        "statA statB media media"
        "statA statB media media";
}

.bento-grid .bg-tile {
    border: 1px solid var(--bg-rule);
    border-radius: var(--bg-radius);
    padding: max(1.4rem, min(2.4cqi, 2.4rem));
    padding: clamp(1.4rem, 2.4cqi, 2.4rem);
    background: var(--bg-paper);
    display: flex; flex-direction: column; justify-content: flex-end;
    min-width: 0;
}

.bento-grid .bg-tile--masthead { grid-area: mast; gap: 1.2rem; }
.bento-grid .bg-tile--panel {
    grid-area: panel;
    background: var(--bg-panel); color: var(--bg-panel-fg); border-color: var(--bg-panel);
    justify-content: space-between; gap: 1.2rem;
}
.bento-grid .bg-tile--stat { align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.bento-grid .bg-tile--stat1 { grid-area: statA; }
.bento-grid .bg-tile--stat2 { grid-area: statB; }
.bento-grid .bg-tile--media { grid-area: media; padding: 0; overflow: hidden; position: relative; }
.bento-grid .bg-tile--media img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

.bento-grid .bg-kicker {
    margin: 0;
    font: 400 .72rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 400 var(--folio-size, .72rem)/1 var(--font-mono, var(--font-display, system-ui));
    letter-spacing: .2em;
    letter-spacing: var(--folio-track, .2em); text-transform: uppercase;
    color: var(--bg-accent);
}
.bento-grid .bg-kicker--inv { color: var(--bg-accent); }
.bento-grid .bg-display {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, serif); font-weight: 600;
    font-size: max(2rem, min(4.4cqi, 3.6rem));
    font-size: clamp(2rem, 4.4cqi, 3.6rem); line-height: .98; letter-spacing: -.02em;
    color: var(--bg-ink);
}
.bento-grid .bg-display .accent { color: var(--bg-accent); font-style: italic; }
.bento-grid .bg-sub {
    margin: 0; max-width: 42ch; color: var(--bg-muted);
    font-size: .95rem; line-height: 1.5; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-text, system-ui);
}
.bento-grid .bg-quote {
    margin: 0; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif);
    font-size: max(1.3rem, min(2.4cqi, 2rem));
    font-size: clamp(1.3rem, 2.4cqi, 2rem); line-height: 1.18;
}
.bento-grid .bg-cite {
    margin: 0; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-family: var(--font-mono, ui-monospace);
    font-size: .72rem;
    font-size: var(--folio-size, .72rem); letter-spacing: .1em; text-transform: uppercase; opacity: .7;
}
.bento-grid .bg-stat-value {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, serif); font-weight: 600;
    font-size: max(2.6rem, min(5.4cqi, 4.2rem));
    font-size: clamp(2.6rem, 5.4cqi, 4.2rem); line-height: 1; color: var(--bg-ink);
    font-feature-settings: tabular-nums lining-nums;
    font-variant-numeric: tabular-nums lining-nums;
}
.bento-grid .bg-stat-label {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, ui-monospace);
    font-size: .72rem;
    font-size: var(--folio-size, .72rem); letter-spacing: .2em; letter-spacing: var(--folio-track, .2em);
    text-transform: uppercase; color: var(--bg-muted);
}
.bento-grid .bg-media-cap {
    position: absolute; left: .8rem; top: .8rem; z-index: 2; margin: 0;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, ui-monospace); font-size: .72rem; font-size: var(--folio-size, .72rem);
    letter-spacing: .12em; text-transform: uppercase; color: var(--bg-panel-fg);
    background: color-mix(in srgb, var(--bg-panel) 70%, transparent);
    padding: .25rem .5rem; border-radius: var(--bg-radius);
}

@media (max-width: 768px) {
    .bento-grid .bg-board {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "mast mast" "panel panel" "statA statB" "media media";
    }
    .bento-grid .bg-display { font-size: max(1.8rem, min(9cqi, 2.6rem)); font-size: clamp(1.8rem, 9cqi, 2.6rem); }
}

/* blocks/bio-panel.css */

.bio-panel {
    --bio-ink: var(--ink, #1c1b1a);
    --bio-muted: var(--muted, #6b655f);
    --bio-line: var(--line, #ddd6cc);
    --bio-accent: var(--accent, #7a2433);
    margin: 0; color: #222; color: var(--bio-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, 'Helvetica Neue', Arial, sans-serif); font-size: 1.125rem; font-size: var(--text-md, 1rem); line-height: 1.55;
}
.bio-panel.bio-tone-dark { --bio-ink: var(--invert-fg, #efebe4); --bio-muted: color-mix(in srgb, var(--invert-fg, #efebe4) 66%, transparent); --bio-line: color-mix(in srgb, var(--invert-fg, #efebe4) 20%, transparent); }
.bio-panel :where(h2, p, dl, dt, dd) { margin: 0; }

.bio-panel .bio-row { --row-gap: 5.5cqi; align-items: stretch; }
.bio-panel .bio-portrait { flex: 0 0 38%; margin: 0; min-height: 30cqi; max-height: 150cqi; overflow: hidden; border-radius: calc(.6 * 1cqi); border-radius: calc(var(--bio-radius, .6) * 1cqi); background: rgb(241, 241, 241); background: color-mix(in srgb, #222 4%, #fafafa); background: var(--surface, #e5dfd5); }
.bio-panel .bio-portrait :where(picture, img) { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.bio-panel.bio-side-right .bio-portrait { order: 2; }
.bio-panel.bio-size-compact .bio-portrait { flex-basis: 24%; align-self: flex-start; aspect-ratio: 3 / 4; min-height: 0; }
.bio-panel .bio-body { flex: 1 1 0; padding-top: .2em; }

.bio-panel :where(.bio-eyebrow, .bio-cred-key) { font-size: 0.75rem; font-size: var(--text-xs, .78rem); font-weight: 560; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; }
.bio-panel .bio-eyebrow { color: var(--bio-muted); }
.bio-panel .bio-name { margin-top: .5em; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 400; font-size: 2.8rem; font-size: var(--text-xl, 2.8rem); line-height: 1.02; letter-spacing: -.016em; }
.bio-panel.bio-size-compact .bio-name { font-size: 1.5rem; font-size: var(--text-lg, 1.5rem); line-height: 1.15; }
.bio-panel .bio-role { margin-top: .7em; color: var(--bio-muted); }
.bio-panel .bio-bio { margin-top: 2.2em; }
.bio-panel.bio-size-compact .bio-bio { margin-top: 1.2em; }
.bio-panel .bio-para { max-width: 60ch; text-wrap: pretty; }
.bio-panel .bio-para + .bio-para { margin-top: 1em; }

.bio-panel .bio-creds { margin-top: 2.4em; border-top: 1px solid var(--bio-ink); }
.bio-panel .bio-cred { --row-gap: 1.6em; --row-item: auto; --row-flow-narrow: row nowrap; align-items: baseline; padding: .8em 0; border-bottom: 1px solid var(--bio-line); }
.bio-panel .bio-cred-key { flex: 0 0 8.4em; color: var(--bio-muted); }
.bio-panel .bio-cred-text { flex: 1 1 0; }

.bio-panel .bio-sign { margin-top: 1.5em; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-style: italic; font-size: 1.4rem; font-size: var(--text-lg, 1.4rem); color: var(--bio-ink); }
.bio-panel .bio-links { --row-gap: .6em 1.6em; --row-item: auto; --row-flow-narrow: row wrap; margin-top: 1.4em; }
.bio-panel .bio-links > * { flex: 0 0 auto; }
.bio-panel .bio-link.btn { padding: .2em 0; border: 0; border-radius: 0; background: none; color: var(--bio-ink); font-size: 1em; font-weight: 560; letter-spacing: 0; text-transform: none; -webkit-text-decoration: none; text-decoration: none; box-shadow: inset 0 -1px 0 currentColor; }
.bio-panel .bio-link.btn:hover { transform: none; color: var(--bio-accent); }
.bio-panel .bio-link.btn:focus-visible { outline: .125rem solid var(--bio-accent); outline-offset: .25rem; }

@container (max-width: 40rem) {
    .bio-panel .bio-row { --row-flow: column nowrap; --row-gap: 7cqi; }
    .bio-panel .bio-portrait, .bio-panel.bio-side-right .bio-portrait { order: 0; flex-basis: auto; width: 100%; aspect-ratio: 3 / 4; }
    .bio-panel.bio-size-compact .bio-portrait { width: 44%; }
    .bio-panel .bio-name { font-size: min(2.4rem, 11cqi); font-size: min(var(--text-xl, 2.4rem), 11cqi); }
}

.bio-panel.bio-name-poster .bio-name {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-poster, var(--font-display, Georgia, serif)); font-stretch: 100%; font-stretch: var(--poster-stretch, 100%); font-weight: 800; font-weight: var(--poster-weight, 800);
    font-size: min(6rem, 16cqi);
    font-size: min(var(--text-display, 6rem), 16cqi); line-height: .82; letter-spacing: -.01em; text-transform: uppercase;
}
.bio-panel.bio-name-poster .bio-name em { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-stretch: 100%; font-style: italic; font-weight: 400; text-transform: none; color: var(--bio-accent); }
.bio-panel.bio-grade-mono .bio-portrait img { filter: grayscale(1) contrast(1.08); }
.bio-panel.bio-grade-duo .bio-portrait { background: var(--bio-accent); }
.bio-panel.bio-grade-duo .bio-portrait img { filter: grayscale(1) contrast(1.2); mix-blend-mode: screen; }
@container (max-width: 40rem) { .bio-panel.bio-name-poster .bio-name { font-size: 22cqi; } }

/* blocks/bleed.css */
/* A piece that reaches the screen's edges (its bleed setting): its cell runs out past its lattice's margin on both
   sides (both), or on the far side only (end: a row that runs off the page), by the margin of that tier, so a
   full-width piece meets the window's edges on the desktop, tablet and phone. */
/* --autofit-side: the gap AutoFit leaves beside a page's column on a window wider than 16:9 (render.php), 0 otherwise and
   inside a cell narrower than its lattice */
/* --lattice-margin: the margin the lattice really draws, where it is not the page's (a phone's lattice draws none: its
   pieces keep off the edges by their columns), so a bleed there reaches the window's edge, not past it */
/* --box-pad-left / -right: a box's own side padding (render.php boxPadSides), so a bleed inside a card reaches the card's
   edges; reset on every lattice so a nested box never inherits its parent's */
.plotgrid { --box-pad-left: 0px; --box-pad-right: 0px; }
.plotgrid > .plot.bleed {
    margin-left: calc(-1 * 0px - var(--box-pad-left) - 0px);
    margin-left: calc(-1 * var(--lattice-margin, var(--grid-margin, 0px)) - var(--box-pad-left) - var(--autofit-side, 0px));
    margin-right: calc(-1 * 0px - var(--box-pad-right) - 0px);
    margin-right: calc(-1 * var(--lattice-margin, var(--grid-margin, 0px)) - var(--box-pad-right) - var(--autofit-side, 0px));
}
.plotgrid > .plot.bleed-end { margin-right: calc(-1 * 0px - var(--box-pad-right) - 0px); margin-right: calc(-1 * var(--lattice-margin, var(--grid-margin, 0px)) - var(--box-pad-right) - var(--autofit-side, 0px)); }
/* a piece on one edge of its lattice (a corner mark) keeps its size and follows that edge out to the window's */
.plotgrid > .plot.bleed-shift-start { margin-left: calc(-1 * 0px); margin-left: calc(-1 * var(--autofit-side, 0px)); margin-right: 0px; margin-right: var(--autofit-side, 0px); }
.plotgrid > .plot.bleed-shift-end { margin-left: 0px; margin-left: var(--autofit-side, 0px); margin-right: calc(-1 * 0px); margin-right: calc(-1 * var(--autofit-side, 0px)); }

/* a freeform piece set to bleed (render.php freeBleeds) reaches past AutoFit's side gap to the window's edges: a
   layer spans the page's column; any other box (a card, a nested free piece) keeps its pieces in */
.layer { --free-bleed-side: var(--autofit-side, 0px); }
.plotgrid:not(.layer), .free .free { --free-bleed-side: 0px; }

/* blocks/booking-card.css */

:where(.booking-card) {
    --bk-ink: var(--ink, #0a0a0a);
    --bk-muted: var(--muted, #6b6b6b);
    --bk-line: var(--line, #e3e3e3);
    --bk-paper: var(--paper, #fff);
    --bk-surface: var(--surface, color-mix(in srgb, var(--ink, #0a0a0a) 5%, var(--paper, #fff)));
    --bk-accent: var(--accent, #635bff);
    --bk-on-accent: var(--on-accent, #fff);
    --bk-hot: var(--ember, var(--accent, #635bff));
    --bk-radius: 1;
    position: relative;
    width: 100%; margin: 0;
    padding: 2.4em 2.4em 2.2em;
    color: #222;
    color: var(--bk-ink);
    background: #fafafa;
    background: var(--bk-paper);
    border-radius: calc(1 * 1em);
    border-radius: calc(var(--bk-radius, 1) * 1em);
    box-shadow: 0 0 0 1px rgba(5, 5, 5, 0.14);
    box-shadow: 0 0 0 1px var(--bk-line);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif);
}
:where(.booking-card.bk-shadow-soft) {
    box-shadow: 0 0 0 1px var(--bk-line),
                0 1px .125rem rgba(2, 2, 2, 0.06),
                0 1.2em 2.6em -1em rgba(7, 7, 7, 0.22);
}

@supports (color: color-mix(in lch, red, blue)) {
:where(.booking-card.bk-shadow-soft) {
    box-shadow: 0 0 0 1px var(--bk-line),
                0 1px .125rem color-mix(in srgb, var(--bk-ink) 6%, transparent),
                0 1.2em 2.6em -1em color-mix(in srgb, var(--bk-ink) 22%, transparent);
}
}
:where(.booking-card.bk-shadow-deep) {
    box-shadow: 0 0 0 1px var(--bk-line),
                0 1px .125rem rgba(3, 3, 3, 0.08),
                0 2.4em 4.6em -1.4em rgba(12, 12, 12, 0.36);
}

@supports (color: color-mix(in lch, red, blue)) {
:where(.booking-card.bk-shadow-deep) {
    box-shadow: 0 0 0 1px var(--bk-line),
                0 1px .125rem color-mix(in srgb, var(--bk-ink) 8%, transparent),
                0 2.4em 4.6em -1.4em color-mix(in srgb, var(--bk-ink) 36%, transparent);
}
}

:where(.booking-card .bk-head) { margin-bottom: 1.8em; }
:where(.booking-card .bk-title) {
    margin: 0;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, serif); font-weight: 400;
    font-size: 2.1em; line-height: 1.02; letter-spacing: -.015em;
}
:where(.booking-card .bk-lead) { margin: .8em 0 0; color: var(--bk-muted); font-size: 1em; line-height: 1.45; max-width: 36em; }

:where(.booking-card .bk-hp) { position: absolute; left: calc(-200 * var(--pe-vw)); top: 0; width: .1em; height: .1em; overflow: hidden; }

.booking-card .bk-fields { --row-gap: 1.2em; --row-item: 11em; margin-bottom: 1.2em; }
:where(.booking-card .bk-field) { display: block; }
:where(.booking-card .bk-field-wide) { flex-basis: 100%; }
:where(.booking-card .bk-label) {
    display: block; margin-bottom: .55em;
    color: var(--bk-muted);
    font-size: .78em; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2;
}
:where(.booking-card .bk-input) {
    display: block; width: 100%;
    padding: .85em 1em;
    font: inherit; font-size: 1em; line-height: 1.3;
    color: var(--bk-ink);
    background: var(--bk-surface);
    border: 1px solid transparent;
    border-radius: calc(1 * .4em);
    border-radius: calc(var(--bk-radius, 1) * .4em);
    box-shadow: inset 0 1px 0 rgba(2, 2, 2, 0.05);
    outline: none;
    transition: border-color .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s cubic-bezier(.4, 0, .2, 1), background .2s cubic-bezier(.4, 0, .2, 1);
    transition: border-color .2s var(--ease, ease), box-shadow .2s var(--ease, ease), background .2s var(--ease, ease);
}

@supports (color: color-mix(in lch, red, blue)) {
:where(.booking-card .bk-input) {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bk-ink) 5%, transparent);
}
}
:where(.booking-card .bk-input:hover) { border-color: var(--bk-line); }
:where(.booking-card .bk-input:focus-visible) { border-color: var(--bk-accent); box-shadow: 0 0 0 .125rem rgba(0, 34, 43, 0.28); background: var(--bk-paper); }

@supports (color: color-mix(in lch, red, blue)) {
:where(.booking-card .bk-input:focus-visible) { box-shadow: 0 0 0 .125rem color-mix(in srgb, var(--bk-accent) 28%, transparent); }
}
:where(.booking-card .bk-textarea) { resize: vertical; min-height: 4.4em; }
:where(.booking-card .bk-select) { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; padding-right: 2.6em; }
:where(.booking-card .bk-field-select) { display: block; }
:where(.booking-card input[type="date"].bk-input) { min-height: 3.1em; }

:where(.booking-card .bk-choice) { margin: 0 0 1.2em; padding: 0; border: 0; min-width: 0; }
:where(.booking-card .bk-choice .bk-label) { padding: 0; float: none; }
.booking-card .bk-pills { --row-flow: row wrap; --row-gap: .5em; --row-item: 0; }
:where(.booking-card .bk-pill) {
    display: block; position: relative; cursor: pointer;
    min-width: 3.2em; padding: .8em 1.1em;
    text-align: center; line-height: 1.3;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--bk-line); border-radius: 99em;
    background: var(--bk-paper);
    transition: background .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1), border-color .2s cubic-bezier(.4, 0, .2, 1);
    transition: background .2s var(--ease, ease), color .2s var(--ease, ease), border-color .2s var(--ease, ease);
}
:where(.booking-card .bk-pill:hover) { border-color: var(--bk-ink); }
:where(.booking-card .bk-pill input) { position: absolute; opacity: 0; width: .1em; height: .1em; top: 0; right: auto; bottom: auto; left: 0; margin: 0; }
:where(.booking-card .bk-pill:has(input:checked)) { background: var(--bk-accent); border-color: var(--bk-accent); color: var(--bk-on-accent); }
:where(.booking-card .bk-pill:has(input:focus-visible)) { box-shadow: 0 0 0 .125rem var(--bk-paper), 0 0 0 .25rem var(--bk-accent); }

.booking-card .bk-foot { --row-gap: 1.4em; --row-item: 0; align-items: center; margin-top: 1.6em; }
:where(.booking-card .bk-submit) {
    flex: 0 0 auto; cursor: pointer;
    padding: 1em 1.8em;
    font: inherit; font-size: .9em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1;
    color: var(--bk-on-accent);
    background: var(--bk-accent);
    border: 1px solid var(--bk-accent); border-radius: 99em;
    transition: background .2s cubic-bezier(.4, 0, .2, 1), border-color .2s cubic-bezier(.4, 0, .2, 1), transform .2s cubic-bezier(.4, 0, .2, 1);
    transition: background .2s var(--ease, ease), border-color .2s var(--ease, ease), transform .2s var(--ease, ease);
}
:where(.booking-card .bk-submit:hover) { background: var(--bk-ink); border-color: var(--bk-ink); transform: none; }
:where(.booking-card .bk-submit:focus-visible) { outline: .125rem solid var(--bk-accent); outline-offset: .1875rem; }
:where(.booking-card.is-busy .bk-submit) { opacity: .6; pointer-events: none; }
:where(.booking-card .bk-footnote) { flex: 1 1 10em; margin: 0; color: var(--bk-muted); font-size: .9em; line-height: 1.45; }

:where(.booking-card .bk-error) { display: none; margin: 0 0 1em; color: var(--bk-hot); font-weight: 500; line-height: 1.45; }
:where(.booking-card.is-failed .bk-error) { display: block; }
:where(.booking-card .bk-success) { display: none; }
:where(.booking-card.is-sent .bk-body) { display: none; }
:where(.booking-card.is-sent .bk-head .bk-lead) { display: none; }
:where(.booking-card.is-sent .bk-success) { display: block; }
:where(.booking-card .bk-success-title) {
    margin: 0;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, serif); font-weight: 400;
    font-size: 1.6em; line-height: 1.1; letter-spacing: -.01em;
    color: var(--bk-accent);
}
:where(.booking-card .bk-success-line) { margin: .9em 0 0; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-size: 1.25em; line-height: 1.25; letter-spacing: -.01em; }
:where(.booking-card .bk-success-text) { margin: .8em 0 0; color: var(--bk-muted); line-height: 1.5; max-width: 40em; }

:where(.booking-card.bk-tone-tint) { --bk-paper: color-mix(in srgb, var(--accent, #635bff) 6%, var(--paper, #fff)); --bk-surface: var(--paper, #fff); }
:where(.booking-card.bk-tone-dark) {
    --bk-paper: var(--invert-bg, #0c0e10); --bk-ink: var(--invert-fg, #f3ede1);
    --bk-muted: color-mix(in srgb, var(--invert-fg, #f3ede1) 62%, transparent);
    --bk-line: color-mix(in srgb, var(--invert-fg, #f3ede1) 18%, transparent);
    --bk-surface: color-mix(in srgb, var(--invert-fg, #f3ede1) 8%, transparent);
}

:where(.booking-card.bk-align-center .bk-head) { text-align: center; }

@container (max-width: 30em) {
    :where(.booking-card) { padding: 1.6em 1.3em 1.5em; }
    :where(.booking-card .bk-fields), :where(.booking-card .bk-foot) { --row-item: auto; }
    :where(.booking-card .bk-title) { font-size: 1.7em; }
}

/* blocks/browser-showcase.css */

.browser-showcase {
    --bs-surface: var(--surface, var(--card-bg, #fff));
    --bs-paper:   var(--paper, var(--page-bg, #f6f7f9));
    --bs-ink:     var(--ink, #11141c);
    --bs-line:    var(--line, color-mix(in srgb, var(--ink, #11141c) 14%, transparent));
    --bs-muted:   var(--muted, #8b93a7);
    --bs-accent:  var(--accent, #3b6cff);
}
.browser-showcase[data-scheme="dark"] {
    --bs-surface: var(--surface-dark, var(--card-bg, #14171f));
    --bs-paper:   var(--paper-dark, var(--page-bg, #0a0c12));
    --bs-ink:     var(--ink-dark, #e8ecf4);
    --bs-line:    var(--line-dark, rgba(232, 236, 244, 0.14));
    --bs-muted:   var(--muted-dark, #8b93a7);
}

@supports (color: color-mix(in lch, red, blue)) {
.browser-showcase[data-scheme="dark"] {
    --bs-line:    var(--line-dark, color-mix(in srgb, #e8ecf4 14%, transparent));
}
}

.browser-showcase { margin: 0; display: flex; flex-direction: column; gap: 1rem; height: 100%; }
.bs-eyebrow { margin: 0; font: 600 .72rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 600 .72rem/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .18em;
    text-transform: uppercase; color: var(--bs-accent); }

.bs-frame {
    position: relative; border-radius: calc(1vh * 1.6); border-radius: var(--r-lg, var(--radius, 1rem)); overflow: hidden; flex: 1;
    border: 1px solid var(--bs-line);
    background: linear-gradient(180deg, var(--bs-surface),
        color-mix(in srgb, var(--bs-paper) 50%, var(--bs-surface)));
    box-shadow: 0 1px 2px rgba(34, 34, 34, 0.08),
                    0 8px 24px -12px rgba(34, 34, 34, 0.18);
    box-shadow: 0 1px 2px color-mix(in srgb, #222 8%, transparent),
                    0 8px 24px -12px color-mix(in srgb, #222 18%, transparent);
    box-shadow: var(--shadow-card, 0 2.5rem 6.875rem -2.5rem rgba(12, 12, 12, 0.35));
}

@supports (color: color-mix(in lch, red, blue)) {
.bs-frame {
    box-shadow: var(--shadow-card, 0 2.5rem 6.875rem -2.5rem color-mix(in srgb, var(--bs-ink) 35%, transparent));
}
}

.bs-chrome {
    display: flex; align-items: center; gap: .8ch; padding: .7rem 1rem;
    border-bottom: 1px solid var(--bs-line);
    background: color-mix(in srgb, var(--bs-surface) 86%, var(--bs-ink));
}
.bs-dots { display: inline-flex; gap: .42rem; }
.bs-dots i { width: .625rem; height: .625rem; border-radius: 50%; background: rgba(7, 7, 7, 0.22); }

@supports (color: color-mix(in lch, red, blue)) {
.bs-dots i { background: color-mix(in srgb, var(--bs-ink) 22%, transparent); }
}
.bs-url {
    flex: 1; max-width: 60%; margin: 0 auto; text-align: center; padding: .26rem .8rem; border-radius: 62.4375rem;
    background: rgba(2, 2, 2, 0.06);
    font: 500 .7rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 .7rem/1 var(--font-mono, ui-monospace, monospace); color: var(--bs-muted); letter-spacing: .02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@supports (color: color-mix(in lch, red, blue)) {
.bs-url {
    background: color-mix(in srgb, var(--bs-ink) 6%, transparent);
}
}

.bs-screen { position: relative; }
.bs-state { padding: max(1rem, min(3cqi, 2rem)); padding: clamp(1rem, 3cqi, 2rem); }
.bs-screen:has(.bs-state + .bs-state) .bs-state { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; transition: opacity .6s ease; }
.bs-screen:has(.bs-state + .bs-state) .bs-state.is-active { position: relative; opacity: 1; }

.bs-demo { display: grid; grid-template-columns: 7rem 1fr; grid-gap: 1rem; gap: 1rem; min-height: 12rem; }
.bs-demo-side { display: flex; flex-direction: column; gap: .55rem; padding-right: 1rem;
    border-right: 1px solid rgba(3, 3, 3, 0.1); }

@supports (color: color-mix(in lch, red, blue)) {
.bs-demo-side {
    border-right: 1px solid color-mix(in srgb, var(--bs-ink) 10%, transparent); }
}
.bs-demo-side b { height: .8rem; width: 70%; background: var(--bs-accent); border-radius: .25rem; }
.bs-demo-side i { height: .55rem; width: 90%; border-radius: .25rem; background: rgba(4, 4, 4, 0.12); }

@supports (color: color-mix(in lch, red, blue)) {
.bs-demo-side i { background: color-mix(in srgb, var(--bs-ink) 12%, transparent); }
}
.bs-demo-side i:nth-child(3) { width: 65%; } .bs-demo-side i:nth-child(4) { width: 80%; } .bs-demo-side i:nth-child(5) { width: 55%; }
.bs-demo-main { display: flex; flex-direction: column; gap: .55rem; }
.bs-demo-row { display: flex; align-items: center; gap: .7ch; padding: .6rem .7rem; border-radius: .5rem;
    background: rgba(1, 1, 1, 0.04); }

@supports (color: color-mix(in lch, red, blue)) {
.bs-demo-row {
    background: color-mix(in srgb, var(--bs-ink) 4%, transparent); }
}
.bs-demo-row span { flex: 1; height: .6rem; border-radius: .25rem; background: rgba(5, 5, 5, 0.16); }

@supports (color: color-mix(in lch, red, blue)) {
.bs-demo-row span { background: color-mix(in srgb, var(--bs-ink) 16%, transparent); }
}
.bs-demo-row .accent { font: 700 .56rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 700 .56rem/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase;
    color: var(--bs-muted); font-style: normal; }
.bs-demo-row.is-live { outline: 1px solid rgba(0, 55, 69, 0.45);
    background: rgba(0, 10, 12, 0.08); }

@supports (color: color-mix(in lch, red, blue)) {
.bs-demo-row.is-live { outline: 1px solid color-mix(in srgb, var(--bs-accent) 45%, transparent);
    background: color-mix(in srgb, var(--bs-accent) 8%, transparent); }
}
.bs-demo-row.is-live .accent { color: var(--bs-accent); }

.bs-caption { margin: 0; font: 400 .95rem/1.5 'Open Sans', Arial, Helvetica, sans-serif; font: 400 .95rem/1.5 var(--font-text, system-ui, sans-serif); color: var(--bs-muted); }

/* blocks/build-panel.css */

:where(.build-panel) {
    --bp-glow:  color-mix(in srgb, var(--accent, #f0a32e) 22%, transparent);
    --bp-bevel: rgba(255, 255, 255, 0.55);
    position: relative; container-type: inline-size;
    background: #fafafa;
    background: var(--panel, var(--page-bg, #fbf4e6)); color: #222; color: var(--ink, #2a2118);
    border: 1px solid rgba(5, 5, 5, 0.14);
    border: 1px solid var(--line, #e0d0b3); border-radius: calc(1vh * 1.6); border-radius: var(--r-lg, 1.4cqi);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -0.35cqi 0 rgba(5, 5, 5, 0.084),
                0 1px 2px rgba(34, 34, 34, 0.08),
                    0 8px 24px -12px rgba(34, 34, 34, 0.18), 0 0 4cqi rgba(0, 123, 154, 0.22);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent), inset 0 -0.35cqi 0 color-mix(in srgb, rgba(5, 5, 5, 0.14) 60%, transparent),
                0 1px 2px color-mix(in srgb, #222 8%, transparent),
                    0 8px 24px -12px color-mix(in srgb, #222 18%, transparent), 0 0 4cqi color-mix(in srgb, #007b9a 22%, transparent);
}

@supports (color: color-mix(in lch, red, blue)) {
:where(.build-panel) {
    --bp-bevel: color-mix(in srgb, #fff 55%, transparent);
    box-shadow: inset 0 1px 0 var(--bp-bevel), inset 0 -0.35cqi 0 color-mix(in srgb, var(--line, #e0d0b3) 60%, transparent),
                var(--shadow-card, 0 1.4cqi 3cqi -1.6cqi rgba(0, 0, 0, .3)), 0 0 4cqi var(--bp-glow);
}
}
:where(.build-panel .bp-head) {
    display: flex; align-items: center; justify-content: space-between; gap: 1cqi;
    padding: 1.1cqi 1.6cqi; border-bottom: 1px solid rgba(5, 5, 5, 0.14); border-bottom: 1px solid var(--line, #e0d0b3);
    background: linear-gradient(180deg, rgba(77, 77, 77, 0.3), transparent);
    background: linear-gradient(180deg, color-mix(in srgb, #fff 30%, transparent), transparent);
    border-radius: calc(1vh * 1.6) calc(1vh * 1.6) 0 0;
    border-radius: var(--r-lg, 1.4cqi) var(--r-lg, 1.4cqi) 0 0;
}
:where(.build-panel .bp-title) { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, inherit); font-weight: 700; font-size: 1.125rem; font-size: var(--text-md, 1.05em); letter-spacing: .005em; }
:where(.build-panel .bp-chip) {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, monospace); font-size: 0.6875rem; font-size: var(--text-label, .8em); letter-spacing: .06em; text-transform: uppercase;
    color: #626262;
    color: var(--muted, #6b5a45); border: 1px solid rgba(5, 5, 5, 0.14); border: 1px solid var(--line, #e0d0b3); border-radius: 99em; padding: .22em .7em;
    background: #f9f9f9;
    background: var(--page-bg, #f4ead5);
}
:where(.build-panel .bp-body) { padding: 1.6cqi; }

:where(.iso-grid) {
    position: relative; width: 100%; aspect-ratio: 16 / 10; aspect-ratio: var(--iso-ratio, 16 / 10); overflow: hidden;
    border-radius: 1vh;
    border-radius: var(--r-md, 1cqi); background: #d2e8ef; background: var(--gw-sky-day, #d2e8ef); isolation: isolate;
}
:where(.iso-grid [data-iso-still]) {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
    background:
        linear-gradient(180deg, #f8dcc0, #d2e8ef 55%, transparent 56%),
        repeating-linear-gradient(30deg, transparent 0,transparent 4.5cqi, rgba(33, 45, 22, 0.35) 4.5cqi calc(4.5cqi + 1px)),
        repeating-linear-gradient(-30deg, transparent 0,transparent 4.5cqi, rgba(33, 45, 22, 0.35) 4.5cqi calc(4.5cqi + 1px)),
        linear-gradient(180deg, #9bbe62, #86ab4f);
    background:
        linear-gradient(180deg, #f8dcc0, #d2e8ef 55%, transparent 56%),
        repeating-linear-gradient(30deg, transparent 0 4.5cqi, rgba(33, 45, 22, 0.35) 4.5cqi calc(4.5cqi + 1px)),
        repeating-linear-gradient(-30deg, transparent 0 4.5cqi, rgba(33, 45, 22, 0.35) 4.5cqi calc(4.5cqi + 1px)),
        linear-gradient(180deg, #9bbe62, #86ab4f);
    background:
        linear-gradient(180deg, #f8dcc0, #d2e8ef 55%, transparent 56%),
        repeating-linear-gradient(30deg, transparent 0 4.5cqi, color-mix(in srgb, #5e8140 35%, transparent) 4.5cqi calc(4.5cqi + 1px)),
        repeating-linear-gradient(-30deg, transparent 0 4.5cqi, color-mix(in srgb, #5e8140 35%, transparent) 4.5cqi calc(4.5cqi + 1px)),
        linear-gradient(180deg, #9bbe62, #86ab4f);
    background-blend-mode: normal, normal, normal, normal;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

@supports (background: repeating-linear-gradient(red 0%, red 0% 1%, red 2%)) {
:where(.iso-grid [data-iso-still]) {
    background:
        linear-gradient(180deg, var(--gw-sky-dawn, #f8dcc0), var(--gw-sky-day, #d2e8ef) 55%, transparent 56%),
        repeating-linear-gradient(30deg, transparent 0,transparent 4.5cqi, rgba(33, 45, 22, 0.35) 4.5cqi calc(4.5cqi + 1px)),
        repeating-linear-gradient(-30deg, transparent 0,transparent 4.5cqi, rgba(33, 45, 22, 0.35) 4.5cqi calc(4.5cqi + 1px)),
        linear-gradient(180deg, var(--gw-grass, #9bbe62), var(--gw-grass-2, #86ab4f));
    background-blend-mode: normal, normal, normal, normal;
    background:
        linear-gradient(180deg, var(--gw-sky-dawn, #f8dcc0), var(--gw-sky-day, #d2e8ef) 55%, transparent 56%),
        repeating-linear-gradient(30deg, transparent 0 4.5cqi, rgba(33, 45, 22, 0.35) 4.5cqi calc(4.5cqi + 1px)),
        repeating-linear-gradient(-30deg, transparent 0 4.5cqi, rgba(33, 45, 22, 0.35) 4.5cqi calc(4.5cqi + 1px)),
        linear-gradient(180deg, var(--gw-grass, #9bbe62), var(--gw-grass-2, #86ab4f));
    background-blend-mode: normal, normal, normal, normal;
}
}

@supports (background: repeating-linear-gradient(red 0%, red 0% 1%, red 2%)) and (color: color-mix(in lch, red, blue)) {
:where(.iso-grid [data-iso-still]) {
    background:
        linear-gradient(180deg, var(--gw-sky-dawn, #f8dcc0), var(--gw-sky-day, #d2e8ef) 55%, transparent 56%),
        repeating-linear-gradient(30deg, transparent 0 4.5cqi, color-mix(in srgb, var(--gw-moss, #5e8140) 35%, transparent) 4.5cqi calc(4.5cqi + 1px)),
        repeating-linear-gradient(-30deg, transparent 0 4.5cqi, color-mix(in srgb, var(--gw-moss, #5e8140) 35%, transparent) 4.5cqi calc(4.5cqi + 1px)),
        linear-gradient(180deg, var(--gw-grass, #9bbe62), var(--gw-grass-2, #86ab4f));
    background-blend-mode: normal, normal, normal, normal;
}
}
:where(.iso-grid[data-iso="on"] [data-iso-still]) { display: none; }

:where(.build-bar) { display: flex; flex-wrap: wrap; gap: .6cqi; align-items: center; }
:where(.build-bar [data-iso-tool]) {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: .5em;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, inherit); font-weight: 600; font-size: 0.875rem; font-size: var(--text-sm, .95em); line-height: 1;
    color: #222;
    color: var(--ink, #2a2118); background: #f9f9f9; background: var(--page-bg, #f4ead5);
    border: 1px solid rgba(5, 5, 5, 0.14);
    border: 1px solid var(--line, #e0d0b3); border-radius: 99em; padding: .6em 1em .62em;
    box-shadow: 0 .15cqi 0 0 rgba(5, 5, 5, 0.14);
    box-shadow: 0 .15cqi 0 0 var(--line, #e0d0b3);
    transition: transform .18s cubic-bezier(.4, 0, .2, 1), background .18s cubic-bezier(.4, 0, .2, 1), box-shadow .18s cubic-bezier(.4, 0, .2, 1);
    transition: transform .18s var(--ease, ease), background .18s var(--ease, ease), box-shadow .18s var(--ease, ease);
}
:where(.build-bar [data-iso-tool]:hover) { transform: translateY(-.1cqi); background: #fafafa; background: var(--panel, #fbf4e6); }
:where(.build-bar [data-iso-tool][data-active]) {
    background: #007b9a;
    background: var(--accent, #f0a32e); color: rgb(240, 251, 255); color: color(display-p3 0.94504 0.9821 1); color: oklch(from #007b9a clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h); color: var(--accent-ink, #2a2118); border-color: #0a6076; border-color: color-mix(in srgb, #007b9a 70%, #222);
    box-shadow: 0 .15cqi 0 0 #0e576a;
    box-shadow: 0 .15cqi 0 0 color-mix(in srgb, #007b9a 60%, #222);
}

@supports (color: color-mix(in lch, red, blue)) {
:where(.build-bar [data-iso-tool][data-active]) { border-color: color-mix(in srgb, var(--accent, #f0a32e) 70%, var(--ink, #000));
    box-shadow: 0 .15cqi 0 0 color-mix(in srgb, var(--accent, #f0a32e) 60%, var(--ink, #000));
}
}
:where(.build-bar [data-iso-tool]:active) { transform: translateY(.1cqi); box-shadow: none; }
:where(.build-bar .bb-key) {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, monospace); font-size: .78em; font-weight: 500; opacity: .7;
    border: 1px solid currentColor; border-radius: .3em; padding: .05em .35em; line-height: 1.1;
}

:where(.iso-cube) {
    --cube: var(--accent, #f0a32e);
    display: inline-block; width: 1.1em; height: 1.1em; flex: none; vertical-align: -.15em;
    background:
        linear-gradient(150deg, transparent 50%, #004c5f 50%),
        linear-gradient(30deg, #00627b 50%, transparent 50%),
        #1a88a4;
    background:
        linear-gradient(150deg, transparent 50%, color-mix(in srgb, #007b9a 62%, #000) 50%),
        linear-gradient(30deg, color-mix(in srgb, #007b9a 80%, #000) 50%, transparent 50%),
        color-mix(in srgb, #007b9a 90%, #fff);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

@supports (color: color-mix(in lch, red, blue)) {
:where(.iso-cube) {
    background:
        linear-gradient(150deg, transparent 50%, color-mix(in srgb, var(--cube) 62%, #000) 50%),
        linear-gradient(30deg, color-mix(in srgb, var(--cube) 80%, #000) 50%, transparent 50%),
        color-mix(in srgb, var(--cube) 90%, #fff);
}
}

/* blocks/bundle-cards.css */

.bundle-cards {
    --bc-ink: var(--ink, #1c1917);
    --bc-muted: var(--muted, #6b6158);
    --bc-line: var(--line, #ddd3c4);
    --bc-paper: var(--paper, #fffdf8);
    --bc-accent: var(--accent, #bf3b25);
    --bc-gap: 1.4em;
    width: 100%; margin: 0;
    color: #222;
    color: var(--bc-ink); font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-text, "Helvetica Neue", Arial, sans-serif);
}
.bundle-cards .bc-head { margin: 0 0 2em; }
.bundle-cards .bc-head > * { margin: 0; }
.bundle-cards .bc-eyebrow { color: var(--bc-muted); font-size: 0.6875rem; font-size: var(--text-label, .74em); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; }
.bundle-cards .bc-title { margin-top: .25em; margin-left: -.03em; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 400; font-size: 2.4em; font-size: var(--text-xl, 2.4em); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
.bundle-cards.bc-align-center .bc-head { text-align: center; }

.bundle-cards .bc-row { --row-gap: var(--bc-gap); list-style: none; margin: 0; padding: 0; }
.bundle-cards .bc-card {
    position: relative; flex: 1 1 18em;
    padding: 1.6em 1.7em 1.6em; border-radius: calc(1.2 * 1em); border-radius: calc(var(--bc-radius, 1.2) * 1em);
    background: var(--bc-paper); box-shadow: 0 0 0 1px rgba(2, 2, 2, 0.05);
    --row-flow: column nowrap; --row-gap: 0; --row-item: auto;
    --bc-size: max(24%, min(calc(54% - var(--count, 4) * 4%), 46%));
    --bc-size: clamp(24%, calc(54% - var(--count, 4) * 4%), 46%);
}

@supports (color: color-mix(in lch, red, blue)) {
.bundle-cards .bc-card { box-shadow: 0 0 0 1px color-mix(in srgb, var(--bc-ink) 5%, transparent);
}
}
.bundle-cards.bc-tone-paper .bc-card { background: #f9f9f9; background: var(--page-bg, #f4ecdf); }
.bundle-cards .bc-card > * { flex: 0 0 auto; margin: 0; }

.bundle-cards.bc-overlap-loose .bc-card { --bc-step: .96; }
.bundle-cards .bc-shots { position: relative; height: 0; padding-bottom: 46%; margin: 0 0 1.5em; }
.bundle-cards .bc-shot {
    position: absolute; top: 50%; translate: 0 -50%; margin: 0; width: var(--bc-size); aspect-ratio: 1 / 1;
    left: calc(min(var(--bc-size) * .72, (100% - var(--bc-size)) / max(1, 4 - 1)) * 0);
    left: calc(min(var(--bc-size) * var(--bc-step, .72), (100% - var(--bc-size)) / max(1, var(--count, 4) - 1)) * var(--i, 0));
    border-radius: 50%; background: var(--bc-paper);
    box-shadow: 0 0 0 .3em var(--bc-paper), 0 .8em 1.2em -.6em rgba(10, 10, 10, 0.3);
}

@supports (color: color-mix(in lch, red, blue)) {
.bundle-cards .bc-shot {
    box-shadow: 0 0 0 .3em var(--bc-paper), 0 .8em 1.2em -.6em color-mix(in srgb, var(--bc-ink) 30%, transparent);
}
}
.bundle-cards.bc-tone-paper .bc-shot { background: #f9f9f9; background: var(--page-bg, #f4ecdf); box-shadow: 0 0 0 .3em #f9f9f9, 0 .8em 1.2em -.6em rgba(10, 10, 10, 0.3); box-shadow: 0 0 0 .3em var(--page-bg, #f4ecdf), 0 .8em 1.2em -.6em rgba(10, 10, 10, 0.3); }

@supports (color: color-mix(in lch, red, blue)) {
.bundle-cards.bc-tone-paper .bc-shot { box-shadow: 0 0 0 .3em #f9f9f9, 0 .8em 1.2em -.6em color-mix(in srgb, var(--bc-ink) 30%, transparent); box-shadow: 0 0 0 .3em var(--page-bg, #f4ecdf), 0 .8em 1.2em -.6em color-mix(in srgb, var(--bc-ink) 30%, transparent); }
}
.bundle-cards .bc-shot img, .bundle-cards .bc-shot picture { display: block; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; border-radius: 50%; }
.bundle-cards .bc-shot:nth-child(2) { --i: 1; }
.bundle-cards .bc-shot:nth-child(3) { --i: 2; }
.bundle-cards .bc-shot:nth-child(4) { --i: 3; }
.bundle-cards .bc-shot:nth-child(5) { --i: 4; }
.bundle-cards .bc-shot:nth-child(6) { --i: 5; }
.bundle-cards .bc-shot:nth-child(7) { --i: 6; }
.bundle-cards .bc-shot:nth-child(8) { --i: 7; }

.bundle-cards .bc-badge {
    display: inline-block; align-self: flex-start; padding: .5em .8em .45em; border-radius: 99em;
    background: var(--bc-accent); color: rgb(240, 251, 255); color: color(display-p3 0.94504 0.9821 1); color: oklch(from #007b9a clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h); color: var(--on-accent, #fff8ee);
    font-size: 0.6875rem;
    font-size: var(--text-label, .74em); font-weight: 700; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
}
.bundle-cards .bc-name { margin-top: .6em; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 400; font-size: 1.5em; font-size: var(--text-lg, 1.5em); line-height: 1.1; letter-spacing: -.01em; }
.bundle-cards .bc-lead { margin-top: .5em; color: var(--bc-muted); line-height: 1.5; max-width: 40ch; }
.bundle-cards .bc-list { list-style: none; margin: 1.2em 0 0; padding: 0; border-top: 1px solid var(--bc-line); }
.bundle-cards .bc-item { padding: .55em 0; border-bottom: 1px solid var(--bc-line); line-height: 1.3; }
.bundle-cards .bc-foot { --row-gap: .7em; --row-item: auto; --row-flow: row wrap; --row-flow-narrow: row wrap; align-items: baseline; margin-top: auto; padding-top: 1.3em; }
.bundle-cards .bc-price { flex: 0 0 auto; margin: 0; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-size: 1.5em; font-size: var(--text-lg, 1.5em); line-height: 1; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.bundle-cards .bc-was { flex: 1 1 auto; margin: 0; color: var(--bc-muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; text-decoration-thickness: .06em; }
.bundle-cards .bc-add {
    flex: 0 0 auto; align-self: center; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; margin: 0; padding: .95em 1.4em; border: 0; border-radius: 99em;
    background: var(--bc-ink); color: var(--bc-paper); font: 700 0.875rem/1 'Open Sans', Arial, Helvetica, sans-serif; font: 700 var(--text-sm, 1em)/1 var(--font-text, "Helvetica Neue", Arial, sans-serif);
    transition: background-color .2s ease, transform .15s ease;
}
.bundle-cards .bc-add:hover { background: var(--bc-accent); }
.bundle-cards .bc-add:active { transform: scale(.97); }
.bundle-cards .bc-add:focus-visible { outline: .125rem solid var(--bc-accent); outline-offset: .1875rem; }
.bundle-cards .bc-add.is-added { background: var(--bc-accent); }

.bundle-cards.bc-featured-first .bc-card:first-child { background: var(--bc-accent); color: rgb(240, 251, 255); color: color(display-p3 0.94504 0.9821 1); color: oklch(from #007b9a clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h); color: var(--on-accent, #fff8ee); box-shadow: none; }
.bundle-cards.bc-featured-first .bc-card:first-child .bc-shot { background: var(--bc-accent); box-shadow: 0 0 0 .3em var(--bc-accent), 0 .8em 1.2em -.6em rgba(15, 15, 15, 0.45); }

@supports (color: color-mix(in lch, red, blue)) {
.bundle-cards.bc-featured-first .bc-card:first-child .bc-shot { box-shadow: 0 0 0 .3em var(--bc-accent), 0 .8em 1.2em -.6em color-mix(in srgb, var(--bc-ink) 45%, transparent); }
}
.bundle-cards.bc-featured-first .bc-card:first-child .bc-badge { background: rgb(240, 251, 255); background: color(display-p3 0.94504 0.9821 1); background: oklch(from #007b9a clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h); background: var(--on-accent, #fff8ee); color: var(--bc-accent); }
.bundle-cards.bc-featured-first .bc-card:first-child .bc-lead,
.bundle-cards.bc-featured-first .bc-card:first-child .bc-was { color: rgb(240, 251, 255); color: color(display-p3 0.94504 0.9821 1); color: oklch(from #007b9a clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h); color: var(--on-accent, #fff8ee); }
.bundle-cards.bc-featured-first .bc-card:first-child .bc-list,
.bundle-cards.bc-featured-first .bc-card:first-child .bc-item { border-color: rgba(240, 251, 255, 0.26); }

@media (color-gamut: p3) {
.bundle-cards.bc-featured-first .bc-card:first-child .bc-list,
.bundle-cards.bc-featured-first .bc-card:first-child .bc-item { border-color: color(display-p3 0.94504 0.9821 1 / 0.26); }
}

@media (color-gamut: rec2020) {
.bundle-cards.bc-featured-first .bc-card:first-child .bc-list,
.bundle-cards.bc-featured-first .bc-card:first-child .bc-item { border-color: color-mix(in srgb, oklch(from #007b9a clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h) 26%, transparent); }
}

@supports (color: color-mix(in lch, red, blue)) {
.bundle-cards.bc-featured-first .bc-card:first-child .bc-list,
.bundle-cards.bc-featured-first .bc-card:first-child .bc-item { border-color: color-mix(in srgb, var(--on-accent, #fff8ee) 26%, transparent); }
}
.bundle-cards.bc-featured-first .bc-card:first-child .bc-add { background: rgb(240, 251, 255); background: color(display-p3 0.94504 0.9821 1); background: oklch(from #007b9a clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h); background: var(--on-accent, #fff8ee); color: var(--bc-ink); }
.bundle-cards.bc-featured-first .bc-card:first-child .bc-add:hover { background: var(--bc-ink); color: rgb(240, 251, 255); color: color(display-p3 0.94504 0.9821 1); color: oklch(from #007b9a clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h); color: var(--on-accent, #fff8ee); }

/* blocks/button.css */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: .7em 1.4em;
    border: 1px solid #222;
    border: 1px solid var(--ink, #1a1a1a);
    border-radius: 1vh;
    border-radius: var(--radius, .5rem);
    background: transparent;
    color: #222;
    color: var(--ink, #1a1a1a);
    font: inherit;
    font-weight: 600;
    line-height: 1;
    -webkit-text-decoration: none;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-.125rem); }
.btn:disabled { opacity: .6; cursor: default; transform: none; }   /* busy or not open: no lift */
.plot > .btn { display: flex; }
.btn.is-solid {
    background: #007b9a;
    background: var(--accent, #1a1a1a);
    border-color: #007b9a;
    border-color: var(--accent, #1a1a1a);
    color: rgb(240, 251, 255);
    color: color(display-p3 0.94504 0.9821 1);
    color: oklch(from #007b9a clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h);
    color: var(--accent-ink, #fff);
}

/* blocks/buy-bar.css */

.buybar {
    --bb-bg:     var(--page-bg, var(--paper, #fff));
    --bb-ink:    var(--ink, #181818);
    --bb-btn-fg: var(--paper, var(--page-bg, #fff));
    --bb-accent: var(--accent, #4f46e5);
    --bb-line:   var(--line, rgba(128, 128, 128, 0.2));
    position: fixed; bottom: 2.2vh; z-index: 60;
    display: flex; align-items: center; gap: 1.4rem;
    padding: .65rem .65rem .65rem 1.6rem;
    background: rgba(214, 214, 214, 0.86);
    background: color-mix(in srgb, #f9f9f9 86%, transparent); -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem);
    border: 1px solid rgba(5, 5, 5, 0.14);
    border: 1px solid var(--bb-line);
    border-radius: 62.4375rem;
    box-shadow: 0 1px 2px rgba(34, 34, 34, 0.08),
                    0 8px 24px -12px rgba(34, 34, 34, 0.18);
    box-shadow: 0 1px 2px color-mix(in srgb, #222 8%, transparent),
                    0 8px 24px -12px color-mix(in srgb, #222 18%, transparent);
    box-shadow: var(--shadow-card, 0 1.25rem 3.125rem -1.75rem rgba(0, 0, 0, 0.45));
    box-shadow: 0 1px 2px color-mix(in srgb, #222 8%, transparent),
                    0 8px 24px -12px color-mix(in srgb, #222 18%, transparent);
    opacity: 0; visibility: hidden; transform: translateY(140%);
    transition: opacity .4s cubic-bezier(.4, 0, .2, 1), transform .5s cubic-bezier(.4, 0, .2, 1), visibility .4s;
    transition: opacity .4s var(--ease, cubic-bezier(.2,.7,.2,1)), transform .5s var(--ease, cubic-bezier(.2,.7,.2,1)), visibility .4s;
}

@supports (color: rgb(0 0 0 / 0)) {
.buybar {
    --bb-line:   var(--line, rgb(128 128 128 / .2));
}
}

@supports (color: color-mix(in lch, red, blue)) {
.buybar {
    background: color-mix(in srgb, var(--bb-bg) 86%, transparent);
}
}

@supports (color: rgb(0 0 0 / 0)) {
.buybar {
    box-shadow: var(--shadow-card, 0 1.25rem 3.125rem -1.75rem rgb(0 0 0 / .45));
}
}
.buybar[data-scheme="dark"] {
    --bb-bg:     var(--page-bg-dark, var(--paper-dark, #14161c));
    --bb-ink:    var(--ink-dark, #ececf2);
    --bb-btn-fg: var(--paper-dark, var(--page-bg-dark, #14161c));
    --bb-line:   var(--line-dark, rgba(255, 255, 255, 0.14));
}

@supports (color: rgb(0 0 0 / 0)) {
.buybar[data-scheme="dark"] {
    --bb-line:   var(--line-dark, rgb(255 255 255 / .14));
}
}
.buybar.bb-align-center { left: 50%; transform: translate(-50%, 140%); }
.buybar.bb-align-left   { left: calc(4 * var(--pe-vw)); }
.buybar.bb-align-right  { right: calc(4 * var(--pe-vw)); }

.buybar.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }
.buybar.bb-align-center.is-shown { transform: translate(-50%, 0); }

.buybar-obj { display: flex; align-items: baseline; gap: .8rem; }
.buybar-name {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, system-ui, sans-serif);
    font-size: .98rem; font-weight: 600; color: var(--bb-ink); white-space: nowrap;
}
.buybar-price {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, system-ui, sans-serif);
    font-size: .98rem; font-weight: 600; color: var(--bb-accent); white-space: nowrap;
}
.buybar-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .72em 1.5em;
    background: var(--bb-ink); color: var(--bb-btn-fg);
    border-radius: 62.4375rem;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, var(--font-display, system-ui, sans-serif));
    font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    -webkit-text-decoration: none;
    text-decoration: none; white-space: nowrap;
    transition: background .25s cubic-bezier(.4, 0, .2, 1), transform .25s cubic-bezier(.4, 0, .2, 1);
    transition: background .25s var(--ease, ease), transform .25s var(--ease, ease);
}
.buybar-btn:hover { background: var(--bb-accent); transform: translateY(-1px); }

@media (max-width: 640px) {
    .buybar, .buybar.bb-align-center, .buybar.bb-align-left, .buybar.bb-align-right {
        left: calc(3 * var(--pe-vw)); right: calc(3 * var(--pe-vw)); transform: translateY(140%); justify-content: space-between;
        padding-left: 1.3rem; gap: 1rem;
    }
    .buybar.is-shown,
    .buybar.bb-align-center.is-shown { transform: translateY(0); }
}

/* blocks/cafe-day.css */

.cafe-day {
    --dy-top: var(--rail-top, 0svh);
    --dy-peek: 1.1em;
    position: relative; margin: 0; color: #222; color: var(--ink, #2b1a12);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, "Helvetica Neue", Arial, sans-serif);
    container-type: inline-size;
}
.cafe-day .dy-head { position: relative; max-width: 58em; margin: 0 0 max(1.4em, min(4cqi, 4em)); margin: 0 0 clamp(1.4em, 4cqi, 4em); }
.cafe-day .dy-head > * { margin: 0; }
.cafe-day .dy-eyebrow { font: 500 0.6875rem/1.3 ui-monospace, 'SF Mono', Menlo, monospace; font: 500 var(--text-label, .8em)/1.3 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: #007b9a; color: var(--accent, #1f45d6); }
.cafe-day .dy-title { margin-top: .2em; margin-left: -.04em; font: 400 max(2.4em, min(7.4cqi, 8em))/.9 'Open Sans', Arial, Helvetica, sans-serif; font: 400 max(2.4em, min(7.4cqi, 8em))/.9 var(--font-display, Georgia, serif); font: 400 max(2.4em, min(7.4cqi, 8em))/.9 'Open Sans', Arial, Helvetica, sans-serif; font: 400 clamp(2.4em, 7.4cqi, 8em)/.9 'Open Sans', Arial, Helvetica, sans-serif; font: 400 clamp(2.4em, 7.4cqi, 8em)/.9 var(--font-display, Georgia, serif); letter-spacing: -.02em; text-wrap: balance; }
.cafe-day .dy-title em { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-text, sans-serif); font-weight: 300; font-style: italic; letter-spacing: -.04em; color: #007b9a; color: var(--accent, #1f45d6); }
.cafe-day .dy-lead { margin-top: .8em; max-width: 46ch; font-size: 1.2em; font-size: var(--text-lg, 1.2em); line-height: 1.42; text-wrap: pretty; }
.cafe-day.dy-align-center .dy-head { margin-left: auto; margin-right: auto; text-align: center; }

.cafe-day .dy-hours { list-style: none; margin: 0; padding: 0; }
.cafe-day .dy-hour { position: relative; margin: 0 0 max(1em, min(3cqi, 2.4em)); margin: 0 0 clamp(1em, 3cqi, 2.4em); }
.cafe-day.dy-stack-sticky .dy-hour { position: sticky; top: calc(var(--dy-top) + 1.2em + 0 * var(--dy-peek)); top: calc(var(--dy-top) + 1.2em + var(--dy-i, 0) * var(--dy-peek)); }
.cafe-day .dy-hour:nth-child(1) { --dy-i: 0; --dy-bg: var(--paper, #fff); --dy-fg: var(--ink, #2b1a12); --dy-hot: var(--accent, #1f45d6); }
.cafe-day .dy-hour:nth-child(2) { --dy-i: 1; --dy-bg: var(--accent, #1f45d6); --dy-fg: var(--on-accent, #fbf7ee); --dy-hot: var(--spark, #ffd45e); }
.cafe-day .dy-hour:nth-child(3) { --dy-i: 2; --dy-bg: var(--spark, #ffd45e); --dy-fg: var(--ink, #2b1a12); --dy-hot: var(--accent, #1f45d6); }
.cafe-day .dy-hour:nth-child(4) { --dy-i: 3; --dy-bg: var(--ink, #2b1a12); --dy-fg: var(--page-bg, #fbf7ee); --dy-hot: var(--spark, #ffd45e); }
.cafe-day .dy-hour:nth-child(5) { --dy-i: 4; --dy-bg: var(--paper, #fff); --dy-fg: var(--ink, #2b1a12); --dy-hot: var(--accent, #1f45d6); }
.cafe-day .dy-hour:nth-child(6) { --dy-i: 5; --dy-bg: var(--accent, #1f45d6); --dy-fg: var(--on-accent, #fbf7ee); --dy-hot: var(--spark, #ffd45e); }
.cafe-day .dy-hour:nth-child(7) { --dy-i: 6; --dy-bg: var(--spark, #ffd45e); --dy-fg: var(--ink, #2b1a12); --dy-hot: var(--accent, #1f45d6); }
.cafe-day .dy-hour:nth-child(8) { --dy-i: 7; --dy-bg: var(--ink, #2b1a12); --dy-fg: var(--page-bg, #fbf7ee); --dy-hot: var(--spark, #ffd45e); }
.cafe-day.dy-grounds-page .dy-hour { --dy-bg: var(--paper, #fff); --dy-fg: var(--ink, #2b1a12); --dy-hot: var(--accent, #1f45d6); }

.cafe-day .dy-card {
    position: relative; min-height: calc(62 * 1svh); min-height: calc(var(--dy-card-h, 62) * 1svh); margin: 0; overflow: hidden;
    padding: max(1.4em, min(3.4cqi, 3.4em)) 52% max(1.4em, min(3.4cqi, 3.4em)) max(1.4em, min(3.4cqi, 3.4em));
    padding: max(1.4em, min(3.4cqi, 3.4em)) 52% max(1.4em, min(3.4cqi, 3.4em)) clamp(1.4em, 3.4cqi, 3.4em);
    padding: max(1.4em, min(3.4cqi, 3.4em)) 52% max(1.4em, min(3.4cqi, 3.4em)) max(1.4em, min(3.4cqi, 3.4em));
    padding: max(1.4em, min(3.4cqi, 3.4em)) 52% max(1.4em, min(3.4cqi, 3.4em)) clamp(1.4em, 3.4cqi, 3.4em);
    padding: max(1.4em, min(3.4cqi, 3.4em)) 52% clamp(1.4em, 3.4cqi, 3.4em) clamp(1.4em, 3.4cqi, 3.4em);
    padding: max(1.4em, min(3.4cqi, 3.4em)) 52% max(1.4em, min(3.4cqi, 3.4em)) max(1.4em, min(3.4cqi, 3.4em));
    padding: max(1.4em, min(3.4cqi, 3.4em)) 52% max(1.4em, min(3.4cqi, 3.4em)) clamp(1.4em, 3.4cqi, 3.4em);
    padding: max(1.4em, min(3.4cqi, 3.4em)) 52% max(1.4em, min(3.4cqi, 3.4em)) max(1.4em, min(3.4cqi, 3.4em));
    padding: max(1.4em, min(3.4cqi, 3.4em)) 52% max(1.4em, min(3.4cqi, 3.4em)) clamp(1.4em, 3.4cqi, 3.4em);
    padding: max(1.4em, min(3.4cqi, 3.4em)) 52% clamp(1.4em, 3.4cqi, 3.4em) clamp(1.4em, 3.4cqi, 3.4em);
    padding: max(1.4em, min(3.4cqi, 3.4em)) 52% max(1.4em, min(3.4cqi, 3.4em)) max(1.4em, min(3.4cqi, 3.4em));
    padding: max(1.4em, min(3.4cqi, 3.4em)) 52% max(1.4em, min(3.4cqi, 3.4em)) clamp(1.4em, 3.4cqi, 3.4em);
    padding: max(1.4em, min(3.4cqi, 3.4em)) 52% max(1.4em, min(3.4cqi, 3.4em)) max(1.4em, min(3.4cqi, 3.4em));
    padding: max(1.4em, min(3.4cqi, 3.4em)) 52% max(1.4em, min(3.4cqi, 3.4em)) clamp(1.4em, 3.4cqi, 3.4em);
    padding: max(1.4em, min(3.4cqi, 3.4em)) 52% clamp(1.4em, 3.4cqi, 3.4em) clamp(1.4em, 3.4cqi, 3.4em);
    padding: clamp(1.4em, 3.4cqi, 3.4em) 52% clamp(1.4em, 3.4cqi, 3.4em) clamp(1.4em, 3.4cqi, 3.4em);
    border-radius: calc(1.4 * 1em);
    border-radius: calc(var(--dy-radius, 1.4) * 1em); background: var(--dy-bg); color: var(--dy-fg);
    box-shadow: 0 -.2em 1.4em -.4em rgba(7, 7, 7, 0.22);
    box-shadow: 0 -.2em 1.4em -.4em color-mix(in srgb, #222 22%, transparent);
}

@supports (color: color-mix(in lch, red, blue)) {
.cafe-day .dy-card {
    box-shadow: 0 -.2em 1.4em -.4em color-mix(in srgb, var(--ink, #2b1a12) 22%, transparent);
}
}
.cafe-day .dy-card > * { margin: 0; }
.cafe-day .dy-time { font: 400 max(3em, min(11cqi, 12em))/.82 'Open Sans', Arial, Helvetica, sans-serif; font: 400 max(3em, min(11cqi, 12em))/.82 var(--font-display, Georgia, serif); font: 400 max(3em, min(11cqi, 12em))/.82 'Open Sans', Arial, Helvetica, sans-serif; font: 400 clamp(3em, 11cqi, 12em)/.82 'Open Sans', Arial, Helvetica, sans-serif; font: 400 clamp(3em, 11cqi, 12em)/.82 var(--font-display, Georgia, serif); letter-spacing: -.03em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--dy-hot); }
.cafe-day .dy-copy { position: relative; margin-top: max(1em, min(3cqi, 2.6em)); margin-top: clamp(1em, 3cqi, 2.6em); max-width: 30em; }
.cafe-day .dy-copy > * { margin: 0; }
.cafe-day .dy-hour-title { font: 400 max(1.4em, min(2.6cqi, 2.8em))/1.05 'Open Sans', Arial, Helvetica, sans-serif; font: 400 max(1.4em, min(2.6cqi, 2.8em))/1.05 var(--font-display, Georgia, serif); font: 400 max(1.4em, min(2.6cqi, 2.8em))/1.05 'Open Sans', Arial, Helvetica, sans-serif; font: 400 clamp(1.4em, 2.6cqi, 2.8em)/1.05 'Open Sans', Arial, Helvetica, sans-serif; font: 400 clamp(1.4em, 2.6cqi, 2.8em)/1.05 var(--font-display, Georgia, serif); letter-spacing: -.01em; text-wrap: balance; }
.cafe-day .dy-text { margin-top: .6em; font-size: 1.125rem; font-size: var(--text-md, 1em); line-height: 1.5; opacity: .88; text-wrap: pretty; }
.cafe-day .dy-now {
    display: none; margin-bottom: .9em; padding: .45em .8em .45em 1.7em; position: relative; border-radius: 99em;
    background: var(--dy-hot); color: var(--dy-bg); font: 500 0.6875rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 500 var(--text-label, .8em)/1 var(--font-mono, monospace); letter-spacing: .06em; text-transform: uppercase;
}
.cafe-day .dy-hour.is-now .dy-now { display: inline-block; box-shadow: 0 0 0 .3em rgba(0, 37, 46, 0.3); }

@supports (color: color-mix(in lch, red, blue)) {
.cafe-day .dy-hour.is-now .dy-now { box-shadow: 0 0 0 .3em color-mix(in srgb, var(--dy-hot) 30%, transparent); }
}
.cafe-day .dy-photo { position: absolute; top: .7em; right: .7em; bottom: .7em; width: calc(50% - 1em); margin: 0; overflow: hidden; border-radius: calc(1.4 * .7em); border-radius: calc(var(--dy-radius, 1.4) * .7em); background: rgba(3, 3, 3, 0.1); }

@supports (color: color-mix(in lch, red, blue)) {
.cafe-day .dy-photo { background: color-mix(in srgb, var(--dy-fg) 10%, transparent); }
}
.cafe-day .dy-photo img, .cafe-day .dy-photo picture { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 1.4s cubic-bezier(.16, 1, .3, 1); transition: transform 1.4s var(--ease-out, cubic-bezier(.16, 1, .3, 1)); }
.cafe-day .dy-card:hover .dy-photo img { transform: scale(1.05); }
.cafe-day.dy-photo-left .dy-card { padding-left: 52%; padding-right: max(1.4em, min(3.4cqi, 3.4em)); padding-right: clamp(1.4em, 3.4cqi, 3.4em); }
.cafe-day.dy-photo-left .dy-photo { right: auto; left: .7em; }

@container (max-width: 40em) {
    .cafe-day .dy-card, .cafe-day.dy-photo-left .dy-card { min-height: 0; padding: 1.2em 1.2em 1.4em; }
    .cafe-day .dy-photo, .cafe-day.dy-photo-left .dy-photo { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: auto; aspect-ratio: 4 / 3; margin: 1.2em 0 0; }
    .cafe-day.dy-stack-sticky .dy-hour { top: calc(var(--dy-top) + .6em + 0 * .5em); top: calc(var(--dy-top) + .6em + var(--dy-i, 0) * .5em); }
}
html.respect-reduced-motion .cafe-day .dy-photo img { transition: none; }

/* blocks/calendar.css */
/* calendar — upcoming events (components/calendar.twig, behaviors/calendar.js): rows of a date block, the event and its
   sign-up. It takes the section's font and colour; the date block and the buttons wear the accent, headings the display
   face. A signed-up row fills its date block. Narrow, the sign-up moves under the event.
   Knobs (props.style): --calendar-date-width · --calendar-gap (room between the columns) · --calendar-row-pad. */
.event-calendar { container-type: inline-size; width: 100%; color: inherit; }
.event-calendar[data-state="loading"] { min-height: 12em; }
.event-calendar[data-state="loading"] .calendar-fallback { visibility: hidden; }
.event-calendar :where(.calendar-fallback, .calendar-empty) { margin: 0; color: #626262; color: var(--muted, currentColor); max-width: 68ch; max-width: var(--measure, 60ch); }

.event-calendar .calendar-list { border-top: 1px solid rgba(5, 5, 5, 0.14); }

@supports (color: color-mix(in lch, red, blue)) {
.event-calendar .calendar-list { border-top: 1px solid var(--line, color-mix(in oklab, currentColor 16%, transparent)); }
}
.event-calendar .calendar-event {
    display: grid; grid-template-columns: 5.4em minmax(0, 1fr) auto; grid-template-columns: var(--calendar-date-width, 5.4em) minmax(0, 1fr) auto; align-items: start;
    grid-gap: 2em;
    grid-gap: var(--calendar-gap, 2em);
    gap: 2em;
    gap: var(--calendar-gap, 2em); padding-top: 1.7em; padding-bottom: 1.7em; padding-top: var(--calendar-row-pad, 1.7em); padding-bottom: var(--calendar-row-pad, 1.7em);
    border-bottom: 1px solid rgba(5, 5, 5, 0.14);
}

@supports (color: color-mix(in lch, red, blue)) {
.event-calendar .calendar-event {
    border-bottom: 1px solid var(--line, color-mix(in oklab, currentColor 16%, transparent));
}
}

/* the date: weekday · day · month, stacked in a tinted tile */
.event-calendar .calendar-date {
    display: grid; justify-items: center; grid-gap: .3em; gap: .3em; padding: .85em .4em .75em;
    border-radius: calc(1vh * 2);
    border-radius: calc(var(--radius, .4em) * 2);
    background: rgba(0, 11, 14, 0.09);
    background: color-mix(in oklab, #007b9a 9%, transparent); color: #007b9a; color: var(--accent, currentColor);
    transition: background-color .3s, color .3s;
}

@supports (color: color-mix(in lch, red, blue)) {
.event-calendar .calendar-date {
    background: color-mix(in oklab, var(--accent, currentColor) 9%, transparent);
}
}
.event-calendar [data-signed-up] .calendar-date { background: #007b9a; background: var(--accent, currentColor); color: rgb(240, 251, 255); color: color(display-p3 0.94504 0.9821 1); color: oklch(from #007b9a clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h); color: var(--accent-ink, var(--on-accent, white)); }
.event-calendar :where(.calendar-weekday, .calendar-month) {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, var(--font-text, inherit)); font-size: 0.6875rem; font-size: var(--text-label, .72em);
    letter-spacing: 0.08em;
    letter-spacing: var(--track-label, .12em); text-transform: uppercase; line-height: 1;
}
.event-calendar .calendar-day {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, inherit); font-size: calc(1.4em * 1.75); font-size: calc(var(--text-lg, 1.4em) * 1.75); line-height: .9;
    font-feature-settings: lining-nums tabular-nums;
    font-variant-numeric: lining-nums tabular-nums;
}

.event-calendar .calendar-body { display: grid; grid-gap: .5em; gap: .5em; min-width: 0; }
.event-calendar .calendar-title {
    margin: 0; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, inherit); font-size: 1.4em; font-size: var(--text-lg, 1.4em); font-weight: 400;
    line-height: 1.15; letter-spacing: -.01em; color: #222; color: var(--ink, currentColor); text-wrap: balance;
}
/* time · place: the dot sits in the gap, so a part that wraps to a new line starts clean (its dot is clipped off) */
.event-calendar .calendar-meta { margin: 0; display: flex; flex-wrap: wrap; gap: .2em .9em; color: #626262; color: var(--muted, currentColor); overflow: hidden; }
.event-calendar .calendar-meta > span { position: relative; }
.event-calendar .calendar-meta > span + span::before { content: "·"; position: absolute; right: calc(100% + .35em); }
.event-calendar .calendar-description { margin: .2em 0 0; max-width: 68ch; max-width: var(--measure, 60ch); line-height: 1.55; line-height: var(--leading-body, 1.5); }

/* seats left: a short bar of seats taken, then the words */
.event-calendar .calendar-seats {
    margin: .3em 0 0; display: flex; align-items: center; gap: .7em;
    font-size: 0.6875rem;
    font-size: var(--text-label, .8em); letter-spacing: .04em; color: #626262; color: var(--muted, currentColor);
}
.event-calendar .calendar-seats-bar {
    flex: none; width: 5em; height: .32em; border-radius: 99em;
    background: linear-gradient(to right, #007b9a calc(0 * 100%),
        color-mix(in oklab, currentColor 14%, transparent) 0);
}

@supports (color: color-mix(in lch, red, blue)) {
.event-calendar .calendar-seats-bar {
    background: linear-gradient(to right, var(--accent, currentColor) calc(var(--calendar-taken, 0) * 100%),
        color-mix(in oklab, currentColor 14%, transparent) 0);
}
}

/* the sign-up: a button, "you are signed up", the log-in line or "members only", with the server's words under it */
.event-calendar .calendar-action { display: grid; justify-items: end; grid-gap: .6em; gap: .6em; min-width: 9em; }
.event-calendar .calendar-action .btn { white-space: nowrap; }
.event-calendar [data-event-state="busy"] .btn:disabled { opacity: .8; }
html:not(.respect-reduced-motion) .event-calendar [data-event-state="busy"] .btn:disabled { animation: calendar-busy 1s ease-in-out infinite alternate; }
.event-calendar .calendar-signed-up { max-width: 16em; font-weight: 500; color: #007b9a; color: var(--accent, currentColor); text-align: right; text-wrap: balance; outline: none; }
.event-calendar .calendar-signed-up::before { content: "✓"; margin-right: .45em; }
.event-calendar .calendar-login { white-space: normal; text-align: center; }
/* signed up: cancelling is a quiet underlined word, not a second button */
.event-calendar .calendar-cancel {
    font: inherit; font-size: .9em; color: #626262; color: var(--muted, currentColor); background: none; border: 0; padding: .2em 0; cursor: pointer;
    -webkit-text-decoration: underline;
    text-decoration: underline; text-underline-offset: .2em; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
}
.event-calendar .calendar-cancel:hover { color: #222; color: var(--ink, currentColor); }
.event-calendar .calendar-cancel:disabled { cursor: default; opacity: .6; -webkit-text-decoration: none; text-decoration: none; }
.event-calendar .calendar-note { margin: 0; font-size: .85em; color: #626262; color: var(--muted, currentColor); }
.event-calendar .calendar-message { margin: 0; max-width: 18em; text-align: right; font-size: .85em; color: #626262; color: var(--muted, currentColor); }
.event-calendar .calendar-message:empty { display: none; }
.event-calendar .calendar-message:focus { outline: none; }   /* focused only so the keyboard stays in the row */
.event-calendar .calendar-message[role="alert"] { color: #b42318; color: var(--danger, #b42318); }
@keyframes calendar-busy { to { opacity: .45; } }

/* a guest's name and email, in the row */
.event-calendar .calendar-guest-form {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; align-items: end; grid-gap: .9em; gap: .9em;
    margin-top: .8em; padding: 1.1em; border-radius: calc(1vh * 2); border-radius: calc(var(--radius, .4em) * 2);
    background: color-mix(in oklab, currentColor 4%, transparent);
}

@container (max-width: 40em) {
    .event-calendar .calendar-event { grid-template-columns: 4.6em minmax(0, 1fr); grid-template-columns: var(--calendar-date-width, 4.6em) minmax(0, 1fr); gap: 1.2em; }
    .event-calendar .calendar-action { grid-column: 2; justify-items: start; }
    .event-calendar :where(.calendar-message, .calendar-signed-up) { text-align: left; }
    .event-calendar .calendar-guest-form { grid-template-columns: minmax(0, 1fr); }
}

/* blocks/card-grid.css */

.card-grid {
    width: 100%;
    --cg-surface: var(--surface, var(--paper, var(--card-bg, #fff)));
    --cg-surface-2: var(--surface-2, color-mix(in srgb, var(--cg-ink) 5%, var(--cg-surface)));
    --cg-ink:     var(--ink, #0a2540);
    --cg-muted:   var(--muted, #6b7280);
    --cg-accent:  var(--accent, #635bff);
    --cg-on-accent: var(--on-accent, var(--accent-ink, #fff));
    --cg-line:    var(--line, color-mix(in srgb, var(--cg-ink) 12%, transparent));
    --cg-radius:  var(--r-lg, var(--radius, 0.875rem));
    --cg-shadow:  var(--shadow-card, 0 1px .125rem color-mix(in srgb, var(--cg-ink) 8%, transparent),
                  0 .5rem 1.5rem -.75rem color-mix(in srgb, var(--cg-ink) 18%, transparent));
    --cg-shadow-hover: var(--shadow-card-hover, 0 .125rem .25rem color-mix(in srgb, var(--cg-ink) 8%, transparent),
                  0 1.125rem 2.5rem -1rem color-mix(in srgb, var(--cg-ink) 24%, transparent));
    --cg-scrim:   var(--cg-scrim, rgba(8, 9, 11, 0.96));
    --cg-ease:    var(--ease, cubic-bezier(.2, .7, .2, 1));
    --cg-fd: var(--font-display, system-ui, sans-serif);
    --cg-ft: var(--font-text, var(--font-display, system-ui, sans-serif));
    --cg-fm: var(--font-mono, ui-monospace, monospace);
}

@supports (color: rgb(0 0 0 / 0)) {
.card-grid {
    --cg-scrim:   var(--cg-scrim, rgb(8 9 11 / .96));
}
}
.card-grid[data-scheme="dark"] {
    --cg-surface: var(--paper-dark, #14151a);
    --cg-surface-2: var(--surface-2-dark, #1c1d24);
    --cg-ink:     var(--ink-dark, #f4f5f7);
    --cg-muted:   var(--muted-dark, #c8ccd2);
    --cg-line:    var(--line-dark, rgba(255, 255, 255, 0.12));
    --cg-shadow:  0 1px .125rem rgba(0, 0, 0, 0.4), 0 .75rem 2rem -.875rem rgba(0, 0, 0, 0.6);
    --cg-shadow-hover: 0 .125rem .25rem rgba(0, 0, 0, 0.5), 0 1.375rem 3rem -1rem rgba(0, 0, 0, 0.7);
}

@supports (color: rgb(0 0 0 / 0)) {
.card-grid[data-scheme="dark"] {
    --cg-line:    var(--line-dark, rgb(255 255 255 / .12));
    --cg-shadow:  0 1px .125rem rgb(0 0 0 / .4), 0 .75rem 2rem -.875rem rgb(0 0 0 / .6);
    --cg-shadow-hover: 0 .125rem .25rem rgb(0 0 0 / .5), 0 1.375rem 3rem -1rem rgb(0 0 0 / .7);
}
}

.cg-head { max-width: 60ch; margin: 0 0 max(2rem, min(calc(5 * var(--pe-vw)), 4rem)); margin: 0 0 clamp(2rem, calc(5 * var(--pe-vw)), 4rem); }
.cg-align-center .cg-head { margin-left: auto; margin-right: auto; text-align: center; }
.cg-eyebrow { margin: 0 0 .6rem; font: 600 .72rem/1 var(--cg-fm); letter-spacing: .18em; text-transform: uppercase; color: var(--cg-accent); }
.cg-title { margin: 0; font: 600 max(1.8rem, min(calc(4.2 * var(--pe-vw)), 3rem))/1.08 var(--cg-fd); font: 600 clamp(1.8rem, calc(4.2 * var(--pe-vw)), 3rem)/1.08 var(--cg-fd); letter-spacing: -.025em; color: var(--cg-ink); }

.cg-grid { display: grid; grid-gap: max(1rem, min(calc(2 * var(--pe-vw)), 1.6rem)); grid-gap: clamp(1rem, calc(2 * var(--pe-vw)), 1.6rem); gap: max(1rem, min(calc(2 * var(--pe-vw)), 1.6rem)); gap: clamp(1rem, calc(2 * var(--pe-vw)), 1.6rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cg-cols-2 .cg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cg-cols-3 .cg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cg-cols-4 .cg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cg-card-title { margin: 0; font: 600 1.2rem/1.18 var(--cg-fd); letter-spacing: -.01em; color: var(--cg-ink); }

.card-grid[data-variant="feature"] .cg-card {
    position: relative; display: flex; flex-direction: column; gap: .55rem;
    padding: max(1.2rem, min(calc(2.4 * var(--pe-vw)), 2rem));
    padding: clamp(1.2rem, calc(2.4 * var(--pe-vw)), 2rem);
    background: var(--cg-surface); color: var(--cg-ink);
    border: 1px solid var(--cg-line); border-radius: var(--cg-radius);
    transition: transform .35s var(--cg-ease), border-color .35s, box-shadow .35s;
}
.card-grid[data-variant="feature"] .cg-card:hover {
    transform: translateY(-.375rem); border-color: var(--cg-accent);
    box-shadow: 0 .75rem 2.5rem rgba(4, 4, 4, 0.12);
}

@supports (color: color-mix(in lch, red, blue)) {
.card-grid[data-variant="feature"] .cg-card:hover {
    box-shadow: 0 .75rem 2.5rem color-mix(in srgb, var(--cg-ink) 12%, transparent);
}
}
.cg-feature .cg-icon { font-size: 1.6rem; line-height: 1; color: var(--cg-accent); display: flex; align-items: center; }
.cg-feature .cg-icon svg { width: 1.6rem; height: 1.6rem; }
.cg-feature .cg-card-title { margin: .2rem 0; font-size: 1.2rem; }
.cg-feature .cg-card-body { margin: 0; font: 400 .95rem/1.55 var(--cg-ft); color: var(--cg-muted); }
.cg-feature .cg-meta { margin-top: auto; padding-top: .7rem; font: 600 .6875rem/1 var(--cg-fm); letter-spacing: .12em; text-transform: uppercase; color: var(--cg-accent); }

.cg-mockup {
    display: flex; flex-direction: column; min-width: 0; overflow: hidden;
    background: var(--cg-surface);
    border: 1px solid var(--cg-line); border-radius: var(--cg-radius); box-shadow: var(--cg-shadow);
    transition: transform .25s var(--cg-ease), box-shadow .25s var(--cg-ease);
}
.cg-mockup:hover { transform: translateY(-.1875rem); box-shadow: var(--cg-shadow-hover); }
.cg-mk-head { display: flex; align-items: center; gap: .85rem; padding: max(1.1rem, min(calc(2.2 * var(--pe-vw)), 1.5rem)) max(1.1rem, min(calc(2.2 * var(--pe-vw)), 1.5rem)) .8rem; padding: max(1.1rem, min(calc(2.2 * var(--pe-vw)), 1.5rem)) clamp(1.1rem, calc(2.2 * var(--pe-vw)), 1.5rem) .8rem; padding: max(1.1rem, min(calc(2.2 * var(--pe-vw)), 1.5rem)) max(1.1rem, min(calc(2.2 * var(--pe-vw)), 1.5rem)) .8rem; padding: max(1.1rem, min(calc(2.2 * var(--pe-vw)), 1.5rem)) clamp(1.1rem, calc(2.2 * var(--pe-vw)), 1.5rem) .8rem; padding: clamp(1.1rem, calc(2.2 * var(--pe-vw)), 1.5rem) clamp(1.1rem, calc(2.2 * var(--pe-vw)), 1.5rem) .8rem; }
.cg-mk-chip {
    width: 2.5rem; height: 2.5rem; flex: 0 0 auto; display: grid; align-content: center; justify-content: center; place-content: center; border-radius: .625rem;
    background: rgba(0, 15, 18, 0.12); color: var(--cg-accent); font-size: 1.05rem;
}

@supports (color: color-mix(in lch, red, blue)) {
.cg-mk-chip {
    background: color-mix(in srgb, var(--cg-accent) 12%, transparent);
}
}
.cg-mockup .cg-card-title { font-size: 1.05rem; line-height: 1.2; }
.cg-mk-meta {
    margin-left: auto; align-self: flex-start; font: 600 .6rem/1 var(--cg-fm);
    letter-spacing: .06em; text-transform: uppercase; color: var(--cg-muted);
    padding: .28rem .5rem; border-radius: 62.4375rem; background: rgba(2, 2, 2, 0.05);
}

@supports (color: color-mix(in lch, red, blue)) {
.cg-mk-meta { background: color-mix(in srgb, var(--cg-ink) 5%, transparent);
}
}
.cg-mk-body { margin: 0; padding: 0 max(1.1rem, min(calc(2.2 * var(--pe-vw)), 1.5rem)) 1.1rem; padding: 0 clamp(1.1rem, calc(2.2 * var(--pe-vw)), 1.5rem) 1.1rem; font: 400 .92rem/1.55 var(--cg-ft); color: var(--cg-muted); max-width: 44ch; }
.cg-mock { margin-top: auto; padding: max(1rem, min(calc(2.2 * var(--pe-vw)), 1.3rem)); padding: clamp(1rem, calc(2.2 * var(--pe-vw)), 1.3rem);
    border-top: 1px solid var(--cg-line); background: var(--cg-surface-2); }
.cg-mock--rows { display: flex; flex-direction: column; gap: .45rem; }
.cg-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; grid-gap: .7rem; gap: .7rem;
    padding: .5rem .65rem; border-radius: .5rem; background: var(--cg-surface); border: 1px solid var(--cg-line); }
.cg-row-name { font: 500 .74rem/1.1 var(--cg-ft); color: var(--cg-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-row-stat { font: 500 .56rem/1 var(--cg-fm); letter-spacing: .06em; text-transform: uppercase; color: var(--cg-muted);
    padding: .2rem .42rem; border-radius: 62.4375rem; background: rgba(2, 2, 2, 0.06); }

@supports (color: color-mix(in lch, red, blue)) {
.cg-row-stat { background: color-mix(in srgb, var(--cg-ink) 6%, transparent); }
}
.cg-row-score { width: 1.5rem; height: 1.5rem; display: grid; align-content: center; justify-content: center; place-content: center; border-radius: .4375rem;
    font: 700 .74rem/1 var(--cg-fd); color: var(--cg-on-accent); background: var(--cg-accent); }
.cg-mock--calendar { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: .4rem; gap: .4rem; }
.cg-cd { aspect-ratio: 1; display: grid; align-content: center; justify-content: center; place-content: center; border-radius: .5rem;
    font: 600 .66rem/1 var(--cg-fm); color: var(--cg-muted); background: var(--cg-surface); border: 1px solid var(--cg-line); }
.cg-cd.is-today { background: var(--cg-accent); color: var(--cg-on-accent); border-color: var(--cg-accent); }
.cg-mock--dashboard { display: flex; flex-direction: column; gap: .7rem; }
.cg-bar-track { display: block; height: .55rem; border-radius: 62.4375rem; background: rgba(3, 3, 3, 0.08); overflow: hidden; }

@supports (color: color-mix(in lch, red, blue)) {
.cg-bar-track { background: color-mix(in srgb, var(--cg-ink) 8%, transparent); }
}
.cg-bar-track i { display: block; height: 100%; border-radius: 62.4375rem;
    background: linear-gradient(90deg, var(--cg-accent), rgba(0, 68, 85, 0.55)); }

@supports (color: color-mix(in lch, red, blue)) {
.cg-bar-track i {
    background: linear-gradient(90deg, var(--cg-accent), color-mix(in srgb, var(--cg-accent) 55%, transparent)); }
}
.cg-mock--tally { display: grid; grid-template-columns: repeat(10, 1fr); grid-gap: .3rem; gap: .3rem; }
.cg-dot { aspect-ratio: 1; border-radius: .1875rem; background: rgba(3, 3, 3, 0.09); }

@supports (color: color-mix(in lch, red, blue)) {
.cg-dot { background: color-mix(in srgb, var(--cg-ink) 9%, transparent); }
}
.cg-dot.on { background: var(--cg-accent); }

.cg-reveal {
    position: relative; display: block; isolation: isolate;
    aspect-ratio: 3 / 4; overflow: hidden; cursor: pointer; -webkit-text-decoration: none; text-decoration: none; color: inherit;
    background: var(--cg-surface); border: 1px solid var(--cg-line); border-radius: var(--cg-radius);
    transition: border-color .5s var(--cg-ease);
}
.cg-reveal:focus-visible { outline: .125rem solid var(--cg-accent); outline-offset: .1875rem; }
.cg-rv-media { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: var(--cg-surface); }
.cg-rv-media img {
    width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block;
    transform: scale(1.02); filter: saturate(.92) brightness(.92);
    transition: transform .7s var(--cg-ease), filter .7s var(--cg-ease);
}
.cg-reveal.cg-noimg .cg-rv-media { background: linear-gradient(135deg, var(--cg-surface-2), var(--cg-accent)); }
.cg-rv-cap {
    position: absolute; z-index: 3; left: max(1rem, min(calc(2 * var(--pe-vw)), 1.4rem)); left: clamp(1rem,calc(2 * var(--pe-vw)),1.4rem); bottom: max(1rem, min(calc(2 * var(--pe-vw)), 1.4rem)); bottom: clamp(1rem,calc(2 * var(--pe-vw)),1.4rem);
    font: 700 1.5rem/1 var(--cg-fd); letter-spacing: -.02em; color: #fff; color: var(--cg-on-scrim, #fff); text-shadow: 0 .125rem 1.125rem rgba(0, 0, 0, 0.6); text-shadow: 0 .125rem 1.125rem rgb(0 0 0 / .6);
    transition: opacity .35s var(--cg-ease), transform .5s var(--cg-ease);
}
.cg-rv-panel {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem;
    padding: max(1.1rem, min(calc(2.4 * var(--pe-vw)), 1.7rem));
    padding: clamp(1.1rem, calc(2.4 * var(--pe-vw)), 1.7rem); color: #fff; color: var(--cg-on-scrim, #fff);
    background: linear-gradient(to top, var(--cg-scrim) 0%,
        color-mix(in srgb, var(--cg-scrim) 82%, transparent) 45%, transparent 100%);
    transform: translateY(38%); opacity: 0;
    transition: transform .6s var(--cg-ease), opacity .5s var(--cg-ease);
}
.cg-rv-k { font: 400 .72rem/1.2 var(--cg-fm); text-transform: uppercase; letter-spacing: .22em; color: #4da3b8; }

@supports (color: color-mix(in lch, red, blue)) {
.cg-rv-k { color: color-mix(in srgb, var(--cg-accent) 70%, #fff); color: color-mix(in srgb, var(--cg-accent) 70%, var(--cg-on-scrim, #fff)); }
}
.cg-rv-t { font: 700 1.7rem/1.05 var(--cg-fd); letter-spacing: -.02em; color: #fff; color: var(--cg-on-scrim, #fff); }
.cg-rv-b { font: 400 .95rem/1.5 var(--cg-ft); color: rgba(255, 255, 255, 0.82); color: rgb(255 255 255 / .82); }
.cg-rv-cta { margin-top: .3rem; font: 400 .82rem/1.2 var(--cg-fm); letter-spacing: .04em; color: #4da3b8; }

@supports (color: color-mix(in lch, red, blue)) {
.cg-rv-cta { color: color-mix(in srgb, var(--cg-accent) 70%, #fff); color: color-mix(in srgb, var(--cg-accent) 70%, var(--cg-on-scrim, #fff)); }
}
.cg-reveal:hover, .cg-reveal:focus-within { border-color: var(--cg-accent); }
.cg-reveal:hover .cg-rv-media img, .cg-reveal:focus-within .cg-rv-media img,
.cg-reveal.cg-revealed .cg-rv-media img { transform: scale(1.12); filter: saturate(1.05) brightness(.7); }
.cg-reveal:hover .cg-rv-cap, .cg-reveal:focus-within .cg-rv-cap,
.cg-reveal.cg-revealed .cg-rv-cap { opacity: 0; transform: translateY(.5rem); }
.cg-reveal:hover .cg-rv-panel, .cg-reveal:focus-within .cg-rv-panel,
.cg-reveal.cg-revealed .cg-rv-panel { transform: translateY(0); opacity: 1; }

.cg-flip { perspective: 87.5rem; aspect-ratio: 3 / 4; }
.cg-flip:focus-visible { outline: .125rem solid var(--cg-accent); outline-offset: .1875rem; border-radius: var(--cg-radius); }
.cg-fl-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s var(--cg-ease); }
.cg-flip:hover .cg-fl-inner, .cg-flip:focus-within .cg-fl-inner { transform: rotateY(180deg); }
.cg-fl-face {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden;
    background: var(--cg-surface); border: 1px solid var(--cg-line); border-radius: var(--cg-radius);
}
.cg-fl-front { display: flex; flex-direction: column; }
.cg-fl-portrait { position: relative; flex: 1; min-height: 0; background: var(--cg-surface-2); }
.cg-fl-portrait img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; filter: grayscale(.4) contrast(1.05); transition: filter .5s var(--cg-ease); }
.cg-fl-portrait.cg-noimg { background: linear-gradient(135deg, var(--cg-surface-2), var(--cg-accent)); }
.cg-flip:hover .cg-fl-portrait img { filter: grayscale(0) contrast(1.05); }
.cg-fl-name { margin: 0; padding: 1rem max(1rem, min(calc(2 * var(--pe-vw)), 1.4rem)) 0; padding: 1rem clamp(1rem,calc(2 * var(--pe-vw)),1.4rem) 0; font: 700 1.2rem/1.2 var(--cg-fd); letter-spacing: -.01em; color: var(--cg-ink); }
.cg-fl-role { margin: .15rem 0 1.1rem; padding: 0 max(1rem, min(calc(2 * var(--pe-vw)), 1.4rem)); padding: 0 clamp(1rem,calc(2 * var(--pe-vw)),1.4rem); font: 400 .72rem/1.2 var(--cg-fm); text-transform: uppercase; letter-spacing: .18em; color: var(--cg-accent); }
.cg-fl-back {
    transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center; gap: 1.1rem;
    padding: max(1.1rem, min(calc(2.4 * var(--pe-vw)), 1.7rem));
    padding: clamp(1.1rem, calc(2.4 * var(--pe-vw)), 1.7rem); background: var(--cg-accent); border-color: var(--cg-accent);
}
.cg-fl-bio { margin: 0; font: 600 1.1rem/1.4 var(--cg-fd); color: var(--cg-on-accent); }
.cg-fl-link { align-self: flex-start; font: 400 .8rem/1.2 var(--cg-fm); letter-spacing: .04em; -webkit-text-decoration: none; text-decoration: none; color: var(--cg-on-accent); border-bottom: 1px solid currentColor; }

@media (max-width: 900px) { .card-grid[data-variant="mockup"].cg-cols-3 .cg-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
    .card-grid[data-variant="feature"] .cg-grid,
    .card-grid[data-variant="mockup"] .cg-grid { grid-template-columns: 1fr; }
    .cg-cols-3 .cg-grid, .cg-cols-4 .cg-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .cg-cols-2 .cg-grid, .cg-cols-3 .cg-grid, .cg-cols-4 .cg-grid { grid-template-columns: 1fr; }
}


/* blocks/cards.css */

.card-grid { display: grid; grid-gap: var(--gap, calc(2 * var(--pe-vw))); gap: var(--gap, calc(2 * var(--pe-vw))); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) { .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: 1fr; } }

.card {
    position: relative; display: flex; flex-direction: column; gap: .55rem;
    padding: max(1.2rem, min(calc(2.4 * var(--pe-vw)), 2rem));
    padding: clamp(1.2rem, calc(2.4 * var(--pe-vw)), 2rem);
    background: #f9f9f9;
    background: var(--card-bg, var(--page-bg));
    color: #222;
    color: var(--ink);
    border: 1px solid rgba(5, 5, 5, 0.14);
    border: 1px solid var(--line, rgba(5, 5, 5, 0.14));
    border-radius: 1vh;
    border-radius: var(--radius, 1vh);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .35s, box-shadow .35s;
}

@supports (color: color-mix(in lch, red, blue)) {
.card {
    border: 1px solid var(--line, color-mix(in srgb, var(--ink) 14%, transparent));
}
}
.card:hover { transform: translateY(-.375rem); border-color: #007b9a; border-color: var(--accent); box-shadow: 0 .75rem 2.5rem rgba(4, 4, 4, 0.12); box-shadow: 0 .75rem 2.5rem color-mix(in srgb, #222 12%, transparent); }

@supports (color: color-mix(in lch, red, blue)) {
.card:hover { box-shadow: 0 .75rem 2.5rem color-mix(in srgb, var(--ink) 12%, transparent); }
}
.card-mark { font-size: 1.4rem; line-height: 1; color: #007b9a; color: var(--accent); }
.card-idx { position: absolute; top: 1rem; right: 1.1rem; font: 600 .6875rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 600 .6875rem/1 var(--font-mono); letter-spacing: .12em; color: #626262; color: var(--muted); }
.card-title { font: 600 1.25rem/1.15 'Open Sans', Arial, Helvetica, sans-serif; font: 600 1.25rem/1.15 var(--font-display); letter-spacing: -.01em; margin: .2rem 0; }
.card-body { font: 400 .95rem/1.55 'Open Sans', Arial, Helvetica, sans-serif; font: 400 .95rem/1.55 var(--font-text); color: #626262; color: var(--muted); }
.card-meta { margin-top: auto; padding-top: .7rem; font: 600 .6875rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 600 .6875rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: #007b9a; color: var(--accent); }

.plan { display: flex; flex-direction: column; gap: .9rem; padding: max(1.4rem, min(calc(2.6 * var(--pe-vw)), 2.2rem)); padding: clamp(1.4rem, calc(2.6 * var(--pe-vw)), 2.2rem);
    background: #f9f9f9;
    background: var(--card-bg, var(--page-bg)); color: #222; color: var(--ink);
    border: 1px solid rgba(5, 5, 5, 0.14);
    border: 1px solid var(--line, rgba(5, 5, 5, 0.14)); border-radius: 1vh; border-radius: var(--radius, 1vh);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1); }

@supports (color: color-mix(in lch, red, blue)) {
.plan {
    border: 1px solid var(--line, color-mix(in srgb, var(--ink) 14%, transparent)); }
}
.plan:hover { transform: translateY(-.375rem); }
.plan--featured { border-color: #007b9a; border-color: var(--accent); box-shadow: 0 0 0 1px #007b9a inset, 0 1.125rem 3.125rem rgba(0, 27, 34, 0.22); box-shadow: 0 0 0 1px var(--accent) inset, 0 1.125rem 3.125rem rgba(0, 27, 34, 0.22); box-shadow: 0 0 0 1px #007b9a inset, 0 1.125rem 3.125rem color-mix(in srgb, #007b9a 22%, transparent); transform: scale(1.03); }

@supports (color: color-mix(in lch, red, blue)) {
.plan--featured { box-shadow: 0 0 0 1px var(--accent) inset, 0 1.125rem 3.125rem color-mix(in srgb, var(--accent) 22%, transparent); }
}
.plan--featured:hover { transform: scale(1.03) translateY(-.375rem); }
.plan-badge { align-self: flex-start; font: 600 .625rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 600 .625rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #007b9a; color: var(--accent); border: 1px solid #007b9a; border: 1px solid var(--accent); border-radius: 62.4375rem; padding: .25rem .5625rem; }
.plan-name { font: 600 1.1rem/1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 1.1rem/1 var(--font-display); }
.plan-price { font: 600 2.6rem/1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 2.6rem/1 var(--font-display); letter-spacing: -.02em; }
.plan-price small { font: 400 .85rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 400 .85rem/1 var(--font-mono); color: #626262; color: var(--muted); }
.plan-blurb { color: #626262; color: var(--muted); font: 400 .9rem/1.5 'Open Sans', Arial, Helvetica, sans-serif; font: 400 .9rem/1.5 var(--font-text); }
.plan-feats { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.plan-feats li { display: flex; gap: .6rem; font: 400 .9rem/1.4 'Open Sans', Arial, Helvetica, sans-serif; font: 400 .9rem/1.4 var(--font-text); }
.plan-feats li::before { content: "✓"; color: #007b9a; color: var(--accent); font-weight: 700; }
.plan-cta { margin-top: auto; }

.card--reveal { position: relative; overflow: hidden; min-height: 22.5rem; padding: 0; }
.card--reveal .imagesingle { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; }
.card--reveal .imagesingle img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform .5s, filter .5s; }
.card-reveal-cap { position: absolute; left: 0; bottom: 0; padding: 1.2rem; z-index: 2; font: 600 1.1rem/1.2 'Open Sans', Arial, Helvetica, sans-serif; font: 600 1.1rem/1.2 var(--font-display); color: #f4f6fb; color: var(--invert-fg, #fff); text-shadow: 0 .125rem .75rem rgba(0,0,0,0.53333); text-shadow: var(--card-cap-shadow, 0 .125rem .75rem rgba(0,0,0,0.53333)); text-shadow: 0 .125rem .75rem #0008; text-shadow: var(--card-cap-shadow, 0 .125rem .75rem #0008); transition: opacity .3s; }
.card-reveal-panel { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem; padding: 1.4rem;
    background: linear-gradient(to top, rgba(12, 14, 18, 0.92), transparent);
    background: linear-gradient(to top, color-mix(in srgb, #0d0f14 92%, transparent), transparent);
    color: #f4f6fb;
    color: var(--invert-fg, #fff); transform: translateY(38%); opacity: 0; transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .35s; }

@supports (color: color-mix(in lch, red, blue)) {
.card-reveal-panel {
    background: linear-gradient(to top, color-mix(in srgb, var(--invert-bg) 92%, transparent), transparent); }
}
.panel-k { font: 600 .6875rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 600 .6875rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #007b9a; color: var(--accent); }
.panel-t { font: 600 1.3rem/1.1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 1.3rem/1.1 var(--font-display); }
.panel-b { font: 400 .95rem/1.5 'Open Sans', Arial, Helvetica, sans-serif; font: 400 .95rem/1.5 var(--font-text); color: rgba(190, 192, 196, 0.78); color: color-mix(in srgb, #f4f6fb 78%, transparent); }

@supports (color: color-mix(in lch, red, blue)) {
.panel-b { color: color-mix(in srgb, var(--invert-fg) 78%, transparent); }
}
.panel-cta { margin-top: .4rem; font: 600 .75rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 600 .75rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #007b9a; color: var(--accent); }
.card--reveal:hover .imagesingle img, .card--reveal:focus-within .imagesingle img { transform: scale(1.12); filter: brightness(.6); }
.card--reveal:hover .card-reveal-cap, .card--reveal:focus-within .card-reveal-cap { opacity: 0; }
.card--reveal:hover .card-reveal-panel, .card--reveal:focus-within .card-reveal-panel { transform: translateY(0); opacity: 1; }

.deck { position: relative; width: 17.5rem; height: 20rem; margin: 2.5rem auto; }
.deck .card--quote { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; gap: .8rem; padding: 1.4rem;
    background: #f9f9f9;
    background: var(--card-bg, var(--page-bg)); border: 1px solid rgba(5, 5, 5, 0.14); border: 1px solid var(--line, rgba(5, 5, 5, 0.14)); border-radius: 1vh; border-radius: var(--radius, 1vh);
    box-shadow: 0 .75rem 2.125rem rgba(5, 5, 5, 0.16);
    box-shadow: 0 .75rem 2.125rem color-mix(in srgb, #222 16%, transparent); transform-origin: bottom center; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }

@supports (color: color-mix(in lch, red, blue)) {
.deck .card--quote { border: 1px solid var(--line, color-mix(in srgb, var(--ink) 14%, transparent));
    box-shadow: 0 .75rem 2.125rem color-mix(in srgb, var(--ink) 16%, transparent); }
}
.deck .card--quote:nth-child(1) { transform: rotate(-5deg) translateY(.5rem); z-index: 1; }
.deck .card--quote:nth-child(2) { transform: rotate(1deg) translateY(.25rem); z-index: 2; }
.deck .card--quote:nth-child(3) { transform: rotate(6deg); z-index: 3; }
.deck:hover .card--quote:nth-child(1) { transform: rotate(-10deg) translate(-58%, -.375rem); }
.deck:hover .card--quote:nth-child(2) { transform: rotate(0deg) translateY(-1.375rem); }
.deck:hover .card--quote:nth-child(3) { transform: rotate(10deg) translate(58%, -.375rem); }
.quote-mark { font: 600 3rem/.4 'Open Sans', Arial, Helvetica, sans-serif; font: 600 3rem/.4 var(--font-display); color: #007b9a; color: var(--accent); }
.quote-body { font: 600 1.25rem/1.3 'Open Sans', Arial, Helvetica, sans-serif; font: 600 1.25rem/1.3 var(--font-display); color: #222; color: var(--ink); letter-spacing: -.01em; }
.quote-cite { margin-top: auto; font: 600 .74rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 600 .74rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: #626262; color: var(--muted); }
.deck-hint { text-align: center; margin: 1rem 0 0; font: 600 .74rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 600 .74rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .2em; color: #007b9a; color: var(--accent); }

.card-flip { perspective: 87.5rem; aspect-ratio: 3 / 4; background: none; border: 0; padding: 0; }
.flip-inner { position: relative; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.2, .7, .2, 1); transform-style: preserve-3d; }
.card-flip:hover .flip-inner, .card-flip:focus-within .flip-inner { transform: rotateY(180deg); }
.flip-face { position: absolute; top: 0; right: 0; bottom: 0; left: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid rgba(5, 5, 5, 0.14); border: 1px solid var(--line, rgba(5, 5, 5, 0.14)); border-radius: 1vh; border-radius: var(--radius, 1vh); overflow: hidden; }

@supports (color: color-mix(in lch, red, blue)) {
.flip-face { border: 1px solid var(--line, color-mix(in srgb, var(--ink) 14%, transparent)); }
}
.flip-front { display: flex; flex-direction: column; background: #f9f9f9; background: var(--card-bg, var(--page-bg)); }
.flip-front .imagesingle { position: relative; flex: 1; margin: 0; min-height: 0; }
.flip-front .imagesingle img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; filter: grayscale(.4); }
.flip-name { padding: 1rem 1rem 0; font: 700 1.2rem/1 'Open Sans', Arial, Helvetica, sans-serif; font: 700 1.2rem/1 var(--font-display); color: #222; color: var(--ink); }
.flip-role { padding: 0 1rem 1rem; font: 600 .72rem/1.4 ui-monospace, 'SF Mono', Menlo, monospace; font: 600 .72rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .18em; color: #007b9a; color: var(--accent); }
.flip-back { transform: rotateY(180deg); background: #007b9a; background: var(--accent); color: #f4f6fb; color: var(--invert-fg, #fff); display: flex; flex-direction: column; justify-content: center; gap: .6rem; padding: 1.4rem; }
.flip-bio { font: 400 .95rem/1.5 'Open Sans', Arial, Helvetica, sans-serif; font: 400 .95rem/1.5 var(--font-text); }
.flip-link { margin-top: .4rem; font: 600 .75rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 600 .75rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #f4f6fb; color: var(--invert-fg, #fff); }

/* blocks/cart-drawer.css */

.cart-drawer {
    --cd-ink: var(--ink, #1c1917);
    --cd-muted: var(--muted, #6b6158);
    --cd-line: var(--line, #ddd3c4);
    --cd-paper: var(--paper, #fffdf8);
    --cd-well: var(--surface, #ece3d3);
    --cd-accent: var(--accent, #bf3b25);
    --cd-on-accent: var(--on-accent, #fff8ee);
    --cd-pad: 1.6em;
    position: relative; display: inline-block;
    color: #222;
    color: var(--cd-ink); font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-text, "Helvetica Neue", Arial, sans-serif);
}

.cart-drawer .cd-trigger {
    position: relative; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; margin: 0; padding: .55em .9em .55em .75em;
    border: 1px solid rgba(7, 7, 7, 0.22); border-radius: 99em;
    background: transparent; color: inherit; font: 600 0.875rem/1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 var(--text-sm, 1em)/1 var(--font-text, "Helvetica Neue", Arial, sans-serif);
    white-space: nowrap; transition: border-color .2s ease, background-color .2s ease;
}

@supports (color: color-mix(in lch, red, blue)) {
.cart-drawer .cd-trigger {
    border: 1px solid color-mix(in srgb, var(--cd-ink) 22%, transparent);
}
}
.cart-drawer .cd-trigger:hover { border-color: currentColor; }
.cart-drawer .cd-trigger:focus-visible { outline: .125rem solid var(--cd-accent); outline-offset: .1875rem; }
.cart-drawer .cd-trigger-icon { font-size: 1.15em; vertical-align: -.14em; }
.cart-drawer .cd-trigger-label { margin-left: .45em; }
.cart-drawer.cd-trigger-icon .cd-trigger-label { position: absolute; width: .1em; height: .1em; overflow: hidden; clip-path: inset(50%); }
.cart-drawer.cd-trigger-icon .cd-trigger { padding: .6em; }
.cart-drawer .cd-badge {
    display: inline-block; min-width: 1.6em; margin-left: .5em; padding: .3em .45em; border-radius: 99em;
    background: var(--cd-accent); color: var(--cd-on-accent);
    font-size: .8em; font-weight: 700; line-height: 1; text-align: center; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
    transition: opacity .25s ease, transform .25s ease;
}
.cart-drawer.cd-trigger-icon .cd-badge { position: absolute; top: -.35em; right: -.45em; margin: 0; }
.cart-drawer.is-empty .cd-badge { opacity: 0; transform: scale(.4); }
.cart-drawer.is-popped .cd-badge { animation: cd-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes cd-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

.cart-drawer .cd-scrim {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 900; opacity: 0; pointer-events: none;
    background: rgba(14, 14, 14, 0.4); transition: opacity .35s ease;
}

@supports (color: color-mix(in lch, red, blue)) {
.cart-drawer .cd-scrim {
    background: color-mix(in srgb, var(--cd-ink) 40%, transparent);
}
}
.cart-drawer.is-open .cd-scrim { opacity: 1; pointer-events: auto; }
.cart-drawer .cd-panel {
    --row-flow: column nowrap; --row-gap: 0; --row-item: auto;
    position: fixed; top: 0; bottom: 0; right: 0; z-index: 901;
    width: min(calc(30 * 1em), 100vw);
    width: min(calc(var(--cd-width, 30) * 1em), 100vw); max-width: 100vw;
    overflow: hidden; overscroll-behavior: contain;
    background: var(--cd-paper); color: var(--cd-ink);
    box-shadow: -1px 0 0 var(--cd-line), -2em 0 4em -1em rgba(7, 7, 7, 0.22);
    transform: translateX(104%); visibility: hidden;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .5s;
    text-align: left;
}

@supports (color: color-mix(in lch, red, blue)) {
.cart-drawer .cd-panel {
    box-shadow: -1px 0 0 var(--cd-line), -2em 0 4em -1em color-mix(in srgb, var(--cd-ink) 22%, transparent);
}
}
.cart-drawer.cd-side-left .cd-panel { right: auto; left: 0; transform: translateX(-104%); box-shadow: 1px 0 0 var(--cd-line), 2em 0 4em -1em rgba(7, 7, 7, 0.22); }

@supports (color: color-mix(in lch, red, blue)) {
.cart-drawer.cd-side-left .cd-panel { box-shadow: 1px 0 0 var(--cd-line), 2em 0 4em -1em color-mix(in srgb, var(--cd-ink) 22%, transparent); }
}
.cart-drawer.is-open .cd-panel { transform: translateX(0); visibility: visible; transition: transform .5s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.cart-drawer.cd-tone-ground .cd-panel { background: #f9f9f9; background: var(--page-bg, #f4ecdf); }
.cart-drawer .cd-panel > * { flex: 0 0 auto; }

.cart-drawer .cd-head { position: relative; padding: 1.5em calc(var(--cd-pad) + 2.4em) 1.1em var(--cd-pad); }
.cart-drawer .cd-title { display: inline; margin: 0; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 400; font-size: 1.5em; font-size: var(--text-lg, 1.5em); line-height: 1.1; letter-spacing: -.01em; }
.cart-drawer .cd-head-count { margin-left: .5em; color: var(--cd-muted); font-weight: 600; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.cart-drawer .cd-close {
    position: absolute; top: 1.05em; right: calc(var(--cd-pad) - .6em); -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;
    width: 2.6em; height: 2.6em; margin: 0; padding: 0; border: 0; border-radius: 99em; background: transparent; color: inherit; font-size: 1em;
}
.cart-drawer .cd-close:hover { background: var(--cd-well); }
.cart-drawer .cd-close:focus-visible { outline: .125rem solid var(--cd-accent); outline-offset: 1px; }
.cart-drawer .cd-progress { margin: 0 var(--cd-pad); padding: .95em 1.1em 1.05em; border-radius: calc(.8 * 1em); border-radius: calc(var(--cd-radius, .8) * 1em); background: var(--cd-well); }
.cart-drawer .cd-progress-text { margin: 0 0 .7em; font-size: 0.875rem; font-size: var(--text-sm, 1em); font-weight: 600; line-height: 1.3; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.cart-drawer .cd-track { height: .42em; overflow: hidden; border-radius: 99em; background: rgba(3, 3, 3, 0.1); }

@supports (color: color-mix(in lch, red, blue)) {
.cart-drawer .cd-track { background: color-mix(in srgb, var(--cd-ink) 10%, transparent); }
}
.cart-drawer .cd-fill { width: calc(0 * 100%); width: calc(var(--cart-progress, 0) * 100%); height: 100%; border-radius: inherit; background: var(--cd-accent); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.cart-drawer.is-free .cd-fill { background: var(--cd-ink); }

.cart-drawer .cd-panel > .cd-steps { flex: 1 1 auto; position: relative; min-height: 0; margin-top: .6em; overflow: hidden; }
.cart-drawer .cd-step { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s ease; }
.cart-drawer .cd-step-basket { --row-flow: column nowrap; --row-gap: 0; --row-item: auto; }
.cart-drawer .cd-step-basket > * { flex: 0 0 auto; }
.cart-drawer .cd-step-checkout { overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); opacity: 0; visibility: hidden; }
.cart-drawer.is-checkout .cd-step-basket { transform: translateX(-24%); opacity: 0; pointer-events: none; }
.cart-drawer.is-checkout .cd-step-checkout { transform: translateX(0); opacity: 1; visibility: visible; }

.cart-drawer .cd-step-basket > .cd-empty { flex: 1 1 auto; padding: 3.2em var(--cd-pad); text-align: center; }
.cart-drawer .cd-empty > * { margin: 0; }
.cart-drawer .cd-empty-icon { display: inline-block; width: 2.4em; height: 2.4em; line-height: 2.4em; border-radius: 99em; background: var(--cd-well); color: var(--cd-muted); font-size: 1.6em; }
.cart-drawer .cd-empty-title { margin-top: .8em; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-size: 1.5em; font-size: var(--text-lg, 1.5em); line-height: 1.15; }
.cart-drawer .cd-empty-text { margin: .5em auto 0; max-width: 26ch; color: var(--cd-muted); line-height: 1.45; }
.cart-drawer .cd-empty-cta { margin-top: 1.6em; }
.cart-drawer:not(.is-empty) .cd-empty, .cart-drawer.is-empty .cd-lines, .cart-drawer.is-empty .cd-foot { display: none; }

.cart-drawer .cd-step-basket > .cd-lines { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; margin: 0; padding: .2em var(--cd-pad); }
.cart-drawer .cd-line { position: relative; min-height: 4.6em; padding: 1.05em 0 1.05em 5.8em; border-bottom: 1px solid var(--cd-line); }
.cart-drawer .cd-line:last-child { border-bottom: 0; }
.cart-drawer .cd-line-thumb { position: absolute; left: 0; top: 1.05em; width: 4.6em; height: 4.6em; overflow: hidden; border-radius: 50%; background: var(--cd-well); }
.cart-drawer .cd-line-thumb img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.cart-drawer .cd-line-body { padding-right: 5.5em; }
.cart-drawer .cd-line-body > * { margin: 0; }
.cart-drawer .cd-line-name { display: block; color: var(--cd-ink); font-weight: 700; line-height: 1.25; -webkit-text-decoration: none; text-decoration: none; }
.cart-drawer .cd-line-name:hover { -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: .16em; }
.cart-drawer .cd-line-variant { margin-top: .15em; color: var(--cd-muted); font-size: 0.6875rem; font-size: var(--text-label, .78em); line-height: 1.35; }
.cart-drawer .cd-line-qty { display: inline-block; margin-top: .7em; border-radius: 99em; background: var(--cd-well); white-space: nowrap; vertical-align: middle; }
.cart-drawer .cd-line-step { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; width: 2.2em; height: 2.2em; margin: 0; padding: 0; border: 0; border-radius: 99em; background: transparent; color: var(--cd-ink); font: 500 1.05em/1 'Open Sans', Arial, Helvetica, sans-serif; font: 500 1.05em/1 var(--font-text, "Helvetica Neue", Arial, sans-serif); vertical-align: middle; }
.cart-drawer .cd-line-step:hover { background: rgba(3, 3, 3, 0.08); }

@supports (color: color-mix(in lch, red, blue)) {
.cart-drawer .cd-line-step:hover { background: color-mix(in srgb, var(--cd-ink) 8%, transparent); }
}
.cart-drawer .cd-line-step:focus-visible, .cart-drawer .cd-line-remove:focus-visible { outline: .125rem solid var(--cd-accent); outline-offset: 1px; }
.cart-drawer .cd-line-count { display: inline-block; min-width: 1.4em; font-weight: 700; text-align: center; vertical-align: middle; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.cart-drawer .cd-line-remove { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; margin: .7em 0 0 .9em; padding: .3em 0; border: 0; background: transparent; color: var(--cd-muted); font: 600 0.6875rem/1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 var(--text-label, .78em)/1 var(--font-text, "Helvetica Neue", Arial, sans-serif); -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: .2em; vertical-align: middle; }
.cart-drawer .cd-line-remove:hover { color: var(--cd-ink); }
.cart-drawer .cd-line-price { position: absolute; right: 0; top: 1.05em; margin: 0; font-weight: 700; line-height: 1.25; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

.cart-drawer .cd-foot { padding: 1.1em var(--cd-pad) 1.5em; border-top: 1px solid var(--cd-line); background: inherit; }
.cart-drawer .cd-totals { margin: 0 0 1.1em; }
.cart-drawer .cd-row { overflow: hidden; padding: .28em 0; line-height: 1.3; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.cart-drawer .cd-row dt { float: left; margin: 0; color: var(--cd-muted); }
.cart-drawer .cd-row dd { margin: 0; text-align: right; font-weight: 600; }
.cart-drawer .cd-row-total { margin-top: .35em; padding-top: .6em; border-top: 1px solid var(--cd-line); }
.cart-drawer .cd-row-total dt { color: var(--cd-ink); font-weight: 700; }
.cart-drawer .cd-row-total dd { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 400; font-size: 1.4em; font-size: var(--text-lg, 1.4em); line-height: 1; }
.cart-drawer.is-free [data-cart-out="shipping"] { color: var(--cd-accent); }
.cart-drawer .cd-checkout, .cart-drawer .cd-pay {
    display: block; width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; margin: 0; min-height: 3.4em; padding: 0 1.4em; border: 0; border-radius: 99em;
    background: var(--cd-accent); color: var(--cd-on-accent); font: 700 0.875rem/1 'Open Sans', Arial, Helvetica, sans-serif; font: 700 var(--text-sm, 1em)/1 var(--font-text, "Helvetica Neue", Arial, sans-serif);
    transition: background-color .2s ease, transform .15s ease;
}
.cart-drawer .cd-checkout:hover, .cart-drawer .cd-pay:hover { background: #066b84; }

@supports (color: color-mix(in lch, red, blue)) {
.cart-drawer .cd-checkout:hover, .cart-drawer .cd-pay:hover { background: color-mix(in srgb, var(--cd-accent) 82%, var(--cd-ink)); }
}
.cart-drawer .cd-checkout:active, .cart-drawer .cd-pay:active { transform: scale(.985); }
.cart-drawer .cd-checkout:focus-visible, .cart-drawer .cd-pay:focus-visible { outline: .125rem solid var(--cd-ink); outline-offset: .1875rem; }
.cart-drawer .cd-note, .cart-drawer .cd-pay-note { margin: .85em 0 0; color: var(--cd-muted); font-size: 0.6875rem; font-size: var(--text-label, .78em); line-height: 1.45; text-align: center; }

.cart-drawer .cd-form { margin: 0; padding: .4em var(--cd-pad) 2em; }
.cart-drawer .cd-back { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; margin: 0 0 0 -.1em; padding: .35em 0; border: 0; background: transparent; color: var(--cd-ink); font: 600 0.875rem/1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 var(--text-sm, 1em)/1 var(--font-text, "Helvetica Neue", Arial, sans-serif); }
.cart-drawer .cd-back:hover .cd-back-label { -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: .18em; }
.cart-drawer .cd-back:focus-visible { outline: .125rem solid var(--cd-accent); outline-offset: .125rem; }
.cart-drawer .cd-back-icon { margin-right: .45em; vertical-align: -.1em; }
.cart-drawer .cd-summary { margin: 1em 0 0; padding: .8em 1em; border-radius: calc(.8 * 1em); border-radius: calc(var(--cd-radius, .8) * 1em); background: var(--cd-well); font-weight: 600; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.cart-drawer .cd-form-title { margin: 1.3em 0 .9em; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 400; font-size: 1.5em; font-size: var(--text-lg, 1.5em); line-height: 1.1; }
.cart-drawer .cd-fields { --row-gap: .85em; --row-item: 9em; --row-flow-narrow: row wrap; }
.cart-drawer .cd-field { display: block; margin: 0; }
.cart-drawer .cd-field-wide { flex-basis: 100%; }
.cart-drawer .cd-label { display: block; margin: 0 0 .45em; color: var(--cd-muted); font-size: 0.6875rem; font-size: var(--text-label, .78em); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.cart-drawer .cd-input {
    display: block; width: 100%; margin: 0; padding: .85em .95em; border: 1px solid transparent; border-radius: calc(.8 * .75em); border-radius: calc(var(--cd-radius, .8) * .75em);
    background: var(--cd-well); color: var(--cd-ink); font: 400 0.875rem/1.3 'Open Sans', Arial, Helvetica, sans-serif; font: 400 var(--text-sm, 1em)/1.3 var(--font-text, "Helvetica Neue", Arial, sans-serif);
    transition: border-color .2s ease, background-color .2s ease;
}
.cart-drawer .cd-input:hover { border-color: rgba(7, 7, 7, 0.2); }

@supports (color: color-mix(in lch, red, blue)) {
.cart-drawer .cd-input:hover { border-color: color-mix(in srgb, var(--cd-ink) 20%, transparent); }
}
.cart-drawer .cd-input:focus { outline: none; border-color: var(--cd-ink); background: var(--cd-paper); }
.cart-drawer .cd-form.is-failed .cd-input:invalid { border-color: var(--cd-accent); }
.cart-drawer .cd-hidden { position: absolute; width: .1em; height: .1em; overflow: hidden; clip-path: inset(50%); }
.cart-drawer .cd-error { margin: 1em 0 0; color: var(--cd-accent); font-weight: 600; line-height: 1.4; }
.cart-drawer .cd-form:not(.is-failed) .cd-error { display: none; }
.cart-drawer .cd-pay { margin-top: 1.4em; }
.cart-drawer .cd-form.is-busy .cd-pay { opacity: .6; cursor: progress; }

.cart-drawer .cd-success { display: none; padding: 2.4em 0 1em; text-align: center; }
.cart-drawer .cd-form.is-sent > :not(.cd-success) { display: none; }
.cart-drawer .cd-form.is-sent .cd-success { display: block; }
.cart-drawer .cd-success > * { margin: 0; }
.cart-drawer .cd-success-mark { display: inline-block; width: 3.4em; height: 3.4em; line-height: 3.4em; border-radius: 99em; background: var(--cd-accent); color: var(--cd-on-accent); font-size: 1.3em; }
.cart-drawer .cd-success-title { margin-top: .9em; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-size: 1.6em; font-size: var(--text-lg, 1.6em); line-height: 1.1; }
.cart-drawer .cd-readback { margin: 1.1em auto 0; max-width: 30ch; padding: .9em 1em; border-radius: calc(.8 * 1em); border-radius: calc(var(--cd-radius, .8) * 1em); background: var(--cd-well); font-weight: 600; line-height: 1.45; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.cart-drawer .cd-success-text { margin: 1em auto 0; max-width: 32ch; color: var(--cd-muted); line-height: 1.5; }
.cart-drawer .cd-continue { margin-top: 1.6em; }

.cart-drawer .cd-trigger-ready, .cart-drawer .cd-progress-icon, .cart-drawer .cd-pickup-note { display: none; }
.cart-drawer.cd-fulfil-delivery [data-fulfil="pickup"], .cart-drawer:not(.cd-fulfil-pickup) [data-fulfil="pickup"], .cart-drawer.cd-fulfil-pickup [data-fulfil="delivery"] { display: none; }
.cart-drawer.cd-fulfil-pickup .cd-track, .cart-drawer.cd-fulfil-pickup .cd-totals > :not(.cd-row-total):not(:first-child) { display: none; }
.cart-drawer.cd-fulfil-pickup .cd-progress { position: relative; padding-left: 3em; }
.cart-drawer.cd-fulfil-pickup .cd-progress-icon { display: block; position: absolute; left: 1.05em; top: 50%; translate: 0 -50%; color: var(--cd-accent); font-size: 1.2em; line-height: 1; }
.cart-drawer.cd-fulfil-pickup .cd-progress-text { margin: 0; }
.cart-drawer.cd-fulfil-pickup .cd-trigger-ready:not(:empty) { display: inline; margin-left: .5em; padding-left: .55em; border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent); font-weight: 500; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.cart-drawer.cd-fulfil-pickup .cd-pickup-note { display: block; margin: .2em 0 0; color: var(--cd-muted); font-size: 0.6875rem; font-size: var(--text-label, .78em); line-height: 1.45; flex-basis: 100%; }
.cart-drawer .cd-pickup { min-width: 0; margin: .4em 0 0; padding: 0; border: 0; }
.cart-drawer .cd-pickup .cd-label { float: left; width: 100%; padding: 0; }
.cart-drawer .cd-pickup-day { margin-left: .4em; color: var(--cd-ink); letter-spacing: .04em; }
.cart-drawer .cd-slots { clear: both; display: block; }
.cart-drawer .cd-slot { position: relative; display: inline-block; margin: 0 .4em .45em 0; cursor: pointer; }
.cart-drawer .cd-slot-input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; opacity: 0; cursor: pointer; }
.cart-drawer .cd-slot-time {
    display: inline-block; min-width: 4.4em; padding: .62em .7em; border: 1px solid transparent; border-radius: 99em;
    background: var(--cd-well); color: var(--cd-ink); font: 600 0.875rem/1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 var(--text-sm, 1em)/1 var(--font-text, "Helvetica Neue", Arial, sans-serif);
    text-align: center; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.cart-drawer .cd-slot:hover .cd-slot-time { border-color: rgba(10, 10, 10, 0.3); }

@supports (color: color-mix(in lch, red, blue)) {
.cart-drawer .cd-slot:hover .cd-slot-time { border-color: color-mix(in srgb, var(--cd-ink) 30%, transparent); }
}
.cart-drawer .cd-slot-input:checked + .cd-slot-time { background: var(--cd-ink); color: var(--cd-paper); transform: translateY(-.08em); }
.cart-drawer .cd-slot-input:focus-visible + .cd-slot-time { outline: .125rem solid var(--cd-accent); outline-offset: .125rem; }

@container (max-width: 30rem) { .cart-drawer { --cd-pad: 1.2em; } }
html.respect-reduced-motion .cart-drawer .cd-panel, html.respect-reduced-motion .cart-drawer .cd-step, html.respect-reduced-motion .cart-drawer .cd-fill { transition-duration: .01s; }
html.respect-reduced-motion .cart-drawer.is-popped .cd-badge { animation: none; }

/* blocks/case-nav.css */

.case-nav {
    display: grid;
    grid-gap: max(.5rem, min(calc(2 * var(--pe-vw)), 1.5rem));
    grid-gap: clamp(.5rem, calc(2 * var(--pe-vw)), 1.5rem);
    gap: max(.5rem, min(calc(2 * var(--pe-vw)), 1.5rem));
    gap: clamp(.5rem, calc(2 * var(--pe-vw)), 1.5rem);
    padding: max(2rem, min(calc(7 * var(--pe-vw)), 6rem)) max(1.25rem, min(calc(6 * var(--pe-vw)), 5rem)) max(2.5rem, min(calc(8 * var(--pe-vw)), 7rem));
    padding: max(2rem, min(calc(7 * var(--pe-vw)), 6rem)) max(1.25rem, min(calc(6 * var(--pe-vw)), 5rem)) clamp(2.5rem, calc(8 * var(--pe-vw)), 7rem);
    padding: max(2rem, min(calc(7 * var(--pe-vw)), 6rem)) max(2.5rem, min(calc(8 * var(--pe-vw)), 7rem)) max(2.5rem, min(calc(8 * var(--pe-vw)), 7rem));
    padding: max(2rem, min(calc(7 * var(--pe-vw)), 6rem)) max(2.5rem, min(calc(8 * var(--pe-vw)), 7rem)) clamp(2.5rem, calc(8 * var(--pe-vw)), 7rem);
    padding: max(2rem, min(calc(7 * var(--pe-vw)), 6rem)) clamp(1.25rem, calc(6 * var(--pe-vw)), 5rem) clamp(2.5rem, calc(8 * var(--pe-vw)), 7rem);
    padding: max(1.25rem, min(calc(6 * var(--pe-vw)), 5rem)) max(1.25rem, min(calc(6 * var(--pe-vw)), 5rem)) max(2.5rem, min(calc(8 * var(--pe-vw)), 7rem));
    padding: max(1.25rem, min(calc(6 * var(--pe-vw)), 5rem)) max(1.25rem, min(calc(6 * var(--pe-vw)), 5rem)) clamp(2.5rem, calc(8 * var(--pe-vw)), 7rem);
    padding: max(1.25rem, min(calc(6 * var(--pe-vw)), 5rem)) max(2.5rem, min(calc(8 * var(--pe-vw)), 7rem)) max(2.5rem, min(calc(8 * var(--pe-vw)), 7rem));
    padding: max(1.25rem, min(calc(6 * var(--pe-vw)), 5rem)) max(2.5rem, min(calc(8 * var(--pe-vw)), 7rem)) clamp(2.5rem, calc(8 * var(--pe-vw)), 7rem);
    padding: max(1.25rem, min(calc(6 * var(--pe-vw)), 5rem)) clamp(1.25rem, calc(6 * var(--pe-vw)), 5rem) clamp(2.5rem, calc(8 * var(--pe-vw)), 7rem);
    padding: max(2.5rem, min(calc(8 * var(--pe-vw)), 7rem)) max(1.25rem, min(calc(6 * var(--pe-vw)), 5rem)) max(2.5rem, min(calc(8 * var(--pe-vw)), 7rem));
    padding: max(2.5rem, min(calc(8 * var(--pe-vw)), 7rem)) max(1.25rem, min(calc(6 * var(--pe-vw)), 5rem)) clamp(2.5rem, calc(8 * var(--pe-vw)), 7rem);
    padding: max(2.5rem, min(calc(8 * var(--pe-vw)), 7rem)) max(2.5rem, min(calc(8 * var(--pe-vw)), 7rem)) max(2.5rem, min(calc(8 * var(--pe-vw)), 7rem));
    padding: max(2.5rem, min(calc(8 * var(--pe-vw)), 7rem)) max(2.5rem, min(calc(8 * var(--pe-vw)), 7rem)) clamp(2.5rem, calc(8 * var(--pe-vw)), 7rem);
    padding: max(2.5rem, min(calc(8 * var(--pe-vw)), 7rem)) clamp(1.25rem, calc(6 * var(--pe-vw)), 5rem) clamp(2.5rem, calc(8 * var(--pe-vw)), 7rem);
    padding: clamp(2rem, calc(7 * var(--pe-vw)), 6rem) clamp(1.25rem, calc(6 * var(--pe-vw)), 5rem) clamp(2.5rem, calc(8 * var(--pe-vw)), 7rem);
    background: #fafafa;
    background: var(--paper, #fff);
    color: #222;
    color: var(--ink, #0a2540);
    border-top: 1px solid rgba(5, 5, 5, 0.14);
    border-top: 1px solid var(--line, #e3e8ee);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, system-ui, sans-serif);
    container-type: inline-size;
}
.case-nav .cn-label {
    font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
    color: #626262;
    color: var(--muted, #425466);
}

.case-nav .cn-link {
    position: relative;
    display: grid; grid-gap: max(.4rem, min(calc(1 * var(--pe-vw)), .9rem)); grid-gap: clamp(.4rem, calc(1 * var(--pe-vw)), .9rem); gap: max(.4rem, min(calc(1 * var(--pe-vw)), .9rem)); gap: clamp(.4rem, calc(1 * var(--pe-vw)), .9rem);
    -webkit-text-decoration: none;
    text-decoration: none; color: inherit;
    padding: max(.6rem, min(calc(1.5 * var(--pe-vw)), 1.1rem)) 0;
    padding: clamp(.6rem, calc(1.5 * var(--pe-vw)), 1.1rem) 0;
    isolation: isolate;
}
.case-nav .cn-eyebrow {
    display: inline-flex; align-items: center; gap: .55rem; width: -moz-max-content; width: max-content;
    font-size: max(.72rem, min(calc(1.4 * var(--pe-vw)), .85rem));
    font-size: clamp(.72rem, calc(1.4 * var(--pe-vw)), .85rem); font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: #626262;
    color: var(--muted, #425466);
    transition: color .35s ease;
}
.case-nav .cn-title {
    /* the floor gives way on a narrow nav, so a long name (MEDLEMSPORTAL) stays one word */
    font-size: max(min(1.9rem, 9cqi), min(7cqi, 4.5rem));
    font-size: clamp(min(1.9rem, 9cqi), 7cqi, 4.5rem); line-height: 1; font-weight: 700;
    letter-spacing: -.02em;
    color: #222;
    color: var(--cn-rest, var(--ink, #0a2540));
    background: linear-gradient(#007b9a, #007b9a) no-repeat;
    background: linear-gradient(var(--accent, #635bff), var(--accent, #635bff)) no-repeat;
    background-size: 0% 100%;
    -webkit-background-clip: text; background-clip: text;
    transition: background-size .45s cubic-bezier(.16,1,.3,1), opacity .35s ease, transform .45s cubic-bezier(.16,1,.3,1);
    transform-origin: left;
    /* a case's name is never hyphenated (Safari split NORD-GREN with room for it on the next line); a word longer than
       the whole line still breaks rather than spill */
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
}
.case-nav .cn-prev { --cn-rest: var(--muted, #425466); }
.case-nav .cn-prev .cn-title { font-size: max(1.05rem, min(2.6cqi, 1.7rem)); font-size: clamp(1.05rem, 2.6cqi, 1.7rem); font-weight: 600; opacity: .85; }

.case-nav .cn-link:hover .cn-title,
.case-nav .cn-link:focus-visible .cn-title { background-size: 100% 100%; -webkit-text-fill-color: transparent; opacity: 1; }
.case-nav .cn-link:hover .cn-eyebrow,
.case-nav .cn-link:focus-visible .cn-eyebrow { color: #007b9a; color: var(--accent, #635bff); }
.case-nav .cn-link:focus-visible { outline: .125rem solid #007b9a; outline: .125rem solid var(--accent, #635bff); outline-offset: .375rem; border-radius: 1vh; border-radius: var(--radius, .375rem); }

.case-nav .cn-arrow {
    width: 1.4em; height: 1.4em; display: inline-block; flex: none;
    background: currentColor;
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
                    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
            -webkit-mask: var(--cn-arrow-mask) center / contain no-repeat;
                    mask: var(--cn-arrow-mask) center / contain no-repeat;
    --cn-arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.case-nav .cn-arrow-prev { transform: scaleX(-1); }
.case-nav .cn-next:hover .cn-arrow-next,
.case-nav .cn-next:focus-visible .cn-arrow-next { transform: translateX(.35em); }
.case-nav .cn-prev:hover .cn-arrow-prev,
.case-nav .cn-prev:focus-visible .cn-arrow-prev { transform: scaleX(-1) translateX(.35em); }

.case-nav .cn-preview {
    position: absolute; z-index: 2; pointer-events: none;
    top: 50%; right: max(0px, min(calc(4 * var(--pe-vw)), 4rem)); right: clamp(0px, calc(4 * var(--pe-vw)), 4rem);
    width: max(8rem, min(calc(22 * var(--pe-vw)), 16rem));
    width: clamp(8rem, calc(22 * var(--pe-vw)), 16rem); aspect-ratio: 4 / 3;
    border-radius: 1vh;
    border-radius: var(--radius, .625rem); overflow: hidden;
    box-shadow: 0 1px 2px rgba(34, 34, 34, 0.08),
                    0 8px 24px -12px rgba(34, 34, 34, 0.18);
    box-shadow: 0 1px 2px color-mix(in srgb, #222 8%, transparent),
                    0 8px 24px -12px color-mix(in srgb, #222 18%, transparent);
    box-shadow: var(--shadow-card, 0 1.875rem 3.75rem -1.5625rem rgba(10,20,40,.45));
    opacity: 0; transform: translateY(calc(-50% + 1.5rem)) scale(.96) rotate(-2deg);
    transition: opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.case-nav .cn-prev .cn-preview { left: max(0px, min(calc(4 * var(--pe-vw)), 4rem)); left: clamp(0px, calc(4 * var(--pe-vw)), 4rem); right: auto; transform: translateY(calc(-50% + 1.5rem)) scale(.96) rotate(2deg); }
.case-nav .cn-link:hover .cn-preview,
.case-nav .cn-link:focus-visible .cn-preview { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); }
.case-nav .cn-preview img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }

@media (hover: none) {
    .case-nav .cn-title { -webkit-text-fill-color: currentColor; }
    .case-nav .cn-preview { display: none; }
}

/* blocks/casestudy-rail.css */

.casestudy-rail {
    --csr-ink: var(--ink, #111);
    --csr-muted: var(--muted, #5f5f5f);
    --csr-line: var(--line, #d9d9d9);
    --csr-accent: var(--accent, #2a2ad9);
    --csr-mark: var(--mark, var(--accent-2, #d9f24a));
    --csr-w: calc(var(--csr-card, 60) * 1cqi);
    --csr-intro: 30cqi;
    --csr-gap: 3cqi;
    --csr-n: 1;
    --csr-drop: calc(50svh - 19cqi);
    --csr-travel: calc(var(--csr-intro) + var(--csr-n) * (var(--csr-w) + var(--csr-gap)) - 100cqi);
    position: relative; margin: 0; color: #222; color: var(--csr-ink); container-type: inline-size; view-timeline: --csr-rail block;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, 'Helvetica Neue', Arial, sans-serif); font-size: 1.125rem; font-size: var(--text-md, 1rem); line-height: 1.5;
}
.casestudy-rail :where(h2, h3, p, figure, figcaption, blockquote) { margin: 0; }
.casestudy-rail:has(.csr-case:nth-child(2)) { --csr-n: 2; }
.casestudy-rail:has(.csr-case:nth-child(3)) { --csr-n: 3; }
.casestudy-rail:has(.csr-case:nth-child(4)) { --csr-n: 4; }
.casestudy-rail:has(.csr-case:nth-child(5)) { --csr-n: 5; }
.casestudy-rail:has(.csr-case:nth-child(6)) { --csr-n: 6; }
.casestudy-rail:has(.csr-case:nth-child(7)) { --csr-n: 7; }
.casestudy-rail:has(.csr-case:nth-child(8)) { --csr-n: 8; }
.casestudy-rail .csr-case:nth-child(1) { --csr-i: 1; } .casestudy-rail .csr-case:nth-child(2) { --csr-i: 2; }
.casestudy-rail .csr-case:nth-child(3) { --csr-i: 3; } .casestudy-rail .csr-case:nth-child(4) { --csr-i: 4; }
.casestudy-rail .csr-case:nth-child(5) { --csr-i: 5; } .casestudy-rail .csr-case:nth-child(6) { --csr-i: 6; }
.casestudy-rail .csr-case:nth-child(7) { --csr-i: 7; } .casestudy-rail .csr-case:nth-child(8) { --csr-i: 8; }

.casestudy-rail .csr-pin { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 2cqi; }
.casestudy-rail .csr-track { --row-gap: var(--csr-gap); --row-flow: row nowrap; --row-flow-narrow: row nowrap; width: -moz-max-content; width: max-content; align-items: stretch; }
.casestudy-rail .csr-cases { --row-gap: var(--csr-gap); --row-flow: row nowrap; --row-flow-narrow: row nowrap; flex: 0 0 auto; }
.casestudy-rail .csr-intro { flex: 0 0 calc(var(--csr-intro) - var(--csr-gap)); padding-right: 2cqi; scroll-snap-align: start; }
.casestudy-rail .csr-case { --row-gap: 2.4cqi; --row-flow: row nowrap; --row-flow-narrow: row nowrap; flex: 0 0 var(--csr-w); align-items: flex-start; scroll-snap-align: start; }

.casestudy-rail .csr-eyebrow { color: var(--csr-muted); font-size: 0.75rem; font-size: var(--text-xs, .8rem); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.casestudy-rail .csr-title {
    margin-top: 1.2cqi; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-poster, var(--font-display, sans-serif)); font-stretch: 100%; font-stretch: var(--poster-stretch, 100%); font-weight: 800; font-weight: var(--poster-weight, 800);
    font-size: 7.4cqi; line-height: .84; letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance;
}
.casestudy-rail .csr-title em { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-stretch: 100%; font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.035em; color: var(--csr-accent); }
.casestudy-rail .csr-lead { max-width: 30ch; margin-top: 1.6cqi; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-size: 1.3rem; font-size: var(--text-lg, 1.3rem); line-height: 1.3; text-wrap: pretty; }
.casestudy-rail .csr-hint { margin-top: 2.4cqi; color: var(--csr-accent); font-size: 0.75rem; font-size: var(--text-xs, .8rem); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

.casestudy-rail .csr-media { position: relative; flex: 0 0 52%; }
.casestudy-rail .csr-photo { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 1vh; border-radius: var(--radius, 0); background: rgb(241, 241, 241); background: color-mix(in srgb, #222 4%, #fafafa); background: var(--surface, #e6e2d8); }
.casestudy-rail .csr-photo :where(picture, img) { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: filter .6s ease, scale 1s cubic-bezier(.4, 0, .2, 1); transition: filter .6s ease, scale 1s var(--ease, ease); }
.casestudy-rail.csr-grade-mono .csr-photo img { filter: grayscale(1) contrast(1.08); }
.casestudy-rail.csr-grade-duo .csr-photo { background: var(--csr-accent); }
.casestudy-rail.csr-grade-duo .csr-photo img { filter: grayscale(1) contrast(1.2); mix-blend-mode: screen; }
.casestudy-rail .csr-case:hover .csr-photo img { filter: none; mix-blend-mode: normal; scale: 1.05; }
.casestudy-rail .csr-market {
    position: absolute; top: 1.2cqi; left: 1.2cqi; padding: .45em .7em .4em; background: var(--csr-mark); color: #222; color: var(--ink, #111);
    font-size: 0.75rem;
    font-size: var(--text-xs, .8rem); font-weight: 700; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase;
}
.casestudy-rail .csr-body { flex: 1 1 0; padding-top: 1cqi; border-top: 1px solid var(--csr-ink); }
.casestudy-rail .csr-client { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-poster, var(--font-display, sans-serif)); font-stretch: 100%; font-stretch: var(--poster-stretch, 100%); font-weight: 800; font-weight: var(--poster-weight, 800); font-size: 4.6cqi; line-height: .9; text-transform: uppercase; }
.casestudy-rail .csr-what { margin-top: .5em; color: var(--csr-muted); line-height: 1.35; text-wrap: pretty; }
.casestudy-rail .csr-price { margin-top: 1.6cqi; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-poster, var(--font-display, sans-serif)); font-stretch: 100%; font-stretch: var(--poster-stretch, 100%); font-weight: 800; font-weight: var(--poster-weight, 800); font-size: 5cqi; line-height: 1; white-space: nowrap; font-feature-settings: "lnum"; font-variant-numeric: lining-nums; }
.casestudy-rail :where(.csr-was, .csr-now) { display: inline-block; -webkit-text-decoration: none; text-decoration: none; }
.casestudy-rail .csr-was {
    margin-right: .22em; color: var(--csr-muted);
    background: linear-gradient(to top right, transparent calc(50% - .05em), var(--csr-accent) calc(50% - .05em), var(--csr-accent) calc(50% + .05em), transparent calc(50% + .05em)) no-repeat 0 55% / 100% 100%;
    background: linear-gradient(to top right, transparent calc(50% - .05em), var(--csr-accent) calc(50% - .05em), var(--csr-accent) calc(50% + .05em), transparent calc(50% + .05em)) no-repeat 0 55% / var(--csr-strike, 100%) 100%;
}
.casestudy-rail .csr-now { padding-left: .08em; padding-right: .08em; background: linear-gradient(var(--csr-mark), var(--csr-mark)) no-repeat 0 64% / 100% 58%; background: linear-gradient(var(--csr-mark), var(--csr-mark)) no-repeat 0 64% / var(--csr-hl, 100%) 58%; }
.casestudy-rail .csr-unit { display: block; margin-top: .5em; color: var(--csr-muted); font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-text, sans-serif); font-stretch: 100%; font-weight: 600; font-size: 0.75rem; font-size: var(--text-xs, .8rem); letter-spacing: .1em; text-transform: uppercase; }
.casestudy-rail .csr-result { display: inline-block; margin-top: 1.2cqi; padding: .35em .65em; border: 1px solid var(--csr-ink); font-size: 0.75rem; font-size: var(--text-xs, .8rem); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.casestudy-rail .csr-quote { margin-top: 1.4cqi; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-style: italic; font-size: 1.2rem; font-size: var(--text-lg, 1.2rem); line-height: 1.28; text-wrap: pretty; }
.casestudy-rail .csr-who { margin-top: .8em; color: var(--csr-muted); font-size: 0.875rem; font-size: var(--text-sm, .9rem); line-height: 1.35; }

html:not(.respect-reduced-motion) .casestudy-rail { min-height: calc(100svh + var(--csr-travel)); }
html:not(.respect-reduced-motion) .casestudy-rail .csr-pin { position: sticky; top: 0; height: 100svh; overflow: clip; scroll-snap-type: none; padding-top: max(calc(var(--topbar-h, calc(0 * var(--pe-vw))) + 3svh), var(--csr-drop)); padding-bottom: 0; }
html:not(.respect-reduced-motion) .casestudy-rail .csr-track { animation: csr-slide linear both; animation-timeline: --csr-rail; animation-range: contain 0% contain 100%; }
html:not(.respect-reduced-motion) .casestudy-rail .csr-was { animation: csr-strike linear both; animation-timeline: --csr-rail; animation-range: contain calc((1 - 1.4) / var(--csr-n) * 100%) contain calc((1 - 1.1) / var(--csr-n) * 100%); animation-range: contain calc((var(--csr-i, 1) - 1.4) / var(--csr-n) * 100%) contain calc((var(--csr-i, 1) - 1.1) / var(--csr-n) * 100%); }
html:not(.respect-reduced-motion) .casestudy-rail .csr-now { animation: csr-mark linear both; animation-timeline: --csr-rail; animation-range: contain calc((1 - 1.1) / var(--csr-n) * 100%) contain calc((1 - .8) / var(--csr-n) * 100%); animation-range: contain calc((var(--csr-i, 1) - 1.1) / var(--csr-n) * 100%) contain calc((var(--csr-i, 1) - .8) / var(--csr-n) * 100%); }
@keyframes csr-slide { to { translate: calc(-1 * var(--csr-travel)) 0; } }
@keyframes csr-strike { from { --csr-strike: 0%; } to { --csr-strike: 100%; } }
@keyframes csr-mark { from { --csr-hl: 0%; } to { --csr-hl: 100%; } }
@property --csr-strike { syntax: '<percentage>'; inherits: true; initial-value: 100%; }
@property --csr-hl { syntax: '<percentage>'; inherits: true; initial-value: 100%; }

@container (max-width: 40rem) {
    .casestudy-rail { --csr-intro: 90cqi; --csr-gap: 5cqi; --csr-w: 84cqi; --csr-drop: 0svh; }
    .casestudy-rail .csr-case { --row-flow: column nowrap; --row-gap: 4cqi; }
    .casestudy-rail .csr-media { flex: 0 0 auto; width: 100%; }
    .casestudy-rail .csr-photo { aspect-ratio: 5 / 4; }
    .casestudy-rail .csr-body { flex: 0 0 auto; width: 100%; padding-top: 3cqi; }
    .casestudy-rail .csr-title { font-size: 17cqi; }
    .casestudy-rail .csr-client { font-size: 12cqi; }
    .casestudy-rail .csr-price { margin-top: 3cqi; font-size: 13cqi; }
    .casestudy-rail :where(.csr-result, .csr-quote) { margin-top: 3cqi; }
    .casestudy-rail .csr-market { top: 3cqi; left: 3cqi; }
}

/* blocks/client-list.css */

.client-list {
    --cli-ink: var(--ink, #151513);
    --cli-muted: var(--muted, #65625b);
    --cli-line: var(--line, #d8d5cd);
    --cli-name: 1.35em;
    width: 100%; margin: 0;
    color: #222;
    color: var(--cli-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, 'Helvetica Neue', Arial, sans-serif);
}
.client-list.cli-size-body { --cli-name: 1em; }
.client-list.cli-size-large { --cli-name: 1.85em; }
.client-list.cli-rule-none { --cli-line: transparent; }

.client-list .cli-head { margin: 0 0 2.6em; }
.client-list .cli-eyebrow {
    margin: 0;
    color: var(--cli-muted);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, 'SFMono-Regular', Menlo, monospace); font-size: .82em; line-height: 1.4; letter-spacing: .01em;
}
.client-list .cli-intro { margin: .9em 0 0; max-width: 36em; font-size: 1.3em; line-height: 1.4; letter-spacing: -.005em; text-wrap: pretty; }
.client-list.cli-align-center .cli-head { text-align: center; }
.client-list.cli-align-center .cli-intro { margin-left: auto; margin-right: auto; }

.client-list .cli-groups { --row-gap: 2.6em 4cqi; align-items: flex-start; margin: 0; }
.client-list .cli-group { --row-item: 14em; margin: 0; }

.client-list .cli-label {
    margin: 0 0 .9em; padding-bottom: .9em;
    border-bottom: 1px solid var(--cli-ink);
    color: var(--cli-ink);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, 'SFMono-Regular', Menlo, monospace); font-size: .82em; line-height: 1.3; letter-spacing: .01em;
}
.client-list .cli-count { margin-left: .9em; color: var(--cli-muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.client-list.cli-counts- .cli-count, .client-list.cli-counts-false .cli-count { display: none; }

.client-list .cli-names { list-style: none; margin: 0; padding: 0; }
.client-list .cli-client { margin: 0; padding: .55em 0; border-top: 1px solid var(--cli-line); }
.client-list .cli-client:first-child { border-top: 0; padding-top: 0; }
.client-list .cli-name {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, 'Helvetica Neue', Arial, sans-serif); font-weight: 400;
    font-size: var(--cli-name); line-height: 1.25; letter-spacing: -.012em;
}
.client-list .cli-note {
    margin-left: .8em;
    color: var(--cli-muted);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, 'SFMono-Regular', Menlo, monospace); font-size: .82em; line-height: 1.3; letter-spacing: .01em;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

@container (max-width: 30rem) {
    .client-list .cli-group { --row-item: auto; }
}

/* blocks/color-palette.css */

.color-palette {
    --cp-ink: var(--ink, #0a0a0a);
    --cp-muted: var(--muted, #6b6b6b);
    --cp-line: var(--line, #e3e3e3);
    --cp-paper: var(--paper, #fff);
    --cp-accent: var(--accent, #635bff);
    --cp-chip: 9rem;
    --cp-swatch: var(--cp-line);
    width: 100%; margin: 0;
    color: #222;
    color: var(--cp-ink);
}

.color-palette .cp-desc {
    margin: 0 0 max(1rem, min(calc(2.6 * var(--pe-vw)), 1.8rem));
    margin: 0 0 clamp(1rem, calc(2.6 * var(--pe-vw)), 1.8rem);
    color: var(--cp-muted);
    font: 600 .74rem/1.3 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 .74rem/1.3 var(--font-mono, var(--font-display, ui-monospace, monospace));
    letter-spacing: .14em; text-transform: uppercase;
}
.color-palette.cp-align-center .cp-desc { text-align: center; }
.color-palette.cp-align-right .cp-desc { text-align: right; }

.color-palette .cp-swatch { position: relative; margin: 0; min-width: 0; color: inherit; }

.color-palette .cp-chip {
    position: relative; display: block; background: var(--cp-swatch);
    border-radius: calc(.8 * 1rem);
    border-radius: calc(var(--cp-radius, .8) * 1rem);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--cp-swatch) 80%, var(--cp-ink) 20%),
        inset 0 1px 0 color-mix(in srgb, var(--cp-paper) 32%, transparent);
    transition: transform .22s ease, box-shadow .22s ease;
}

.color-palette .cp-meta { display: block; min-width: 0; color: inherit; }
.color-palette .cp-name {
    display: block;
    font: 600 .95rem/1.2 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 .95rem/1.2 var(--font-display, system-ui, sans-serif);
    letter-spacing: -.012em; color: var(--cp-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.color-palette .cp-hex {
    display: block; margin-top: .12rem;
    font: 500 .72rem/1.35 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 .72rem/1.35 var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
    letter-spacing: .09em; color: var(--cp-muted); text-transform: uppercase;
}

.color-palette .cp-copy-ic {
    position: absolute; top: .6rem; right: .6rem; z-index: 2;
    display: inline-block; width: 1.7rem; height: 1.7rem;
    font-size: .82rem; line-height: 1.7rem; text-align: center;
    color: var(--cp-ink);
    background: color-mix(in srgb, var(--cp-paper) 60%, transparent);
    -webkit-backdrop-filter: blur(.4rem);
            backdrop-filter: blur(.4rem);
    border-radius: 50%;
    box-shadow: 0 1px .1875rem rgba(7, 7, 7, 0.22),
                inset 0 0 0 1px rgba(3, 3, 3, 0.08);
    opacity: 0; transform: translateY(-.12rem);
    transition: opacity .2s ease, transform .2s ease, background .2s ease, color .2s ease;
    cursor: pointer;
}

@supports (color: color-mix(in lch, red, blue)) {
.color-palette .cp-copy-ic {
    box-shadow: 0 1px .1875rem color-mix(in srgb, var(--cp-ink) 22%, transparent),
                inset 0 0 0 1px color-mix(in srgb, var(--cp-ink) 8%, transparent);
}
}
.color-palette .cp-copy-ic:hover { color: var(--cp-accent); background: color-mix(in srgb, var(--cp-paper) 82%, transparent); }

.color-palette:not(.cp-names-1) .cp-name { display: none; }
.color-palette:not(.cp-hex-1) .cp-hex { display: none; }
.color-palette:not(.cp-copy-1) .cp-copy-ic { display: none; }
.color-palette.cp-copy-1 .cp-swatch:hover .cp-copy-ic { opacity: 1; transform: translateY(0); }

.color-palette.cp-size-small { --cp-chip: 7rem; }
.color-palette.cp-size-medium { --cp-chip: 9rem; }
.color-palette.cp-size-large { --cp-chip: 12rem; }

.color-palette.cp-layout-blocks .cp-set { --row-flow: row wrap; --row-item: var(--cp-chip); --row-gap: calc(var(--cp-gap, .9) * 1rem); }
.color-palette.cp-layout-blocks .cp-swatch {
    --row-flow: column nowrap; --row-gap: 0;
    flex: 1 1 var(--cp-chip); max-width: calc(var(--cp-chip) * 1.7);
    background: var(--cp-paper);
    border: 1px solid var(--cp-line);
    border-radius: calc(.8 * 1rem + .38rem);
    border-radius: calc(var(--cp-radius, .8) * 1rem + .38rem);
    padding: .55rem;
    box-shadow: 0 1px .125rem rgba(2, 2, 2, 0.05);
    transition: transform .22s ease, box-shadow .22s ease;
}

@supports (color: color-mix(in lch, red, blue)) {
.color-palette.cp-layout-blocks .cp-swatch {
    box-shadow: 0 1px .125rem color-mix(in srgb, var(--cp-ink) 5%, transparent);
}
}
.color-palette.cp-layout-blocks .cp-chip { flex: none; width: 100%; aspect-ratio: 5 / 4; }
.color-palette.cp-layout-blocks .cp-meta { flex: none; padding: .55rem .3rem .1rem; }
.color-palette.cp-layout-blocks .cp-copy-ic { top: 1rem; right: 1rem; }
.color-palette.cp-layout-blocks .cp-swatch:hover {
    transform: translateY(-.28rem);
    box-shadow: 0 .8rem 1.8rem rgba(4, 4, 4, 0.13);
}

@supports (color: color-mix(in lch, red, blue)) {
.color-palette.cp-layout-blocks .cp-swatch:hover {
    box-shadow: 0 .8rem 1.8rem color-mix(in srgb, var(--cp-ink) 13%, transparent);
}
}
.color-palette.cp-align-center.cp-layout-blocks .cp-meta { text-align: center; }
.color-palette.cp-align-right.cp-layout-blocks .cp-meta { text-align: right; }

.color-palette.cp-layout-row .cp-set { --row-flow: column nowrap; --row-gap: 0; }
.color-palette.cp-layout-row .cp-swatch {
    --row-flow: row nowrap; --row-gap: calc(var(--cp-gap, .9) * 1rem); --row-item: auto;
    align-items: center;
    padding: .62rem .3rem;
    border-bottom: 1px solid var(--cp-line);
    transition: background .18s ease;
}
.color-palette.cp-layout-row .cp-swatch:last-child { border-bottom: 0; }
.color-palette.cp-layout-row .cp-swatch:hover { background: rgba(1, 1, 1, 0.03); }

@supports (color: color-mix(in lch, red, blue)) {
.color-palette.cp-layout-row .cp-swatch:hover { background: color-mix(in srgb, var(--cp-ink) 3%, transparent); }
}
.color-palette.cp-layout-row .cp-chip { flex: none; width: calc(var(--cp-chip) * .4); aspect-ratio: 1 / 1; }
.color-palette.cp-layout-row .cp-meta { flex: 1 1 auto; }
.color-palette.cp-layout-row .cp-copy-ic {
    position: static; flex: none; margin-left: auto;
    width: 1.6rem; height: 1.6rem; line-height: 1.6rem;
    background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
    color: var(--cp-muted); opacity: 1; transform: none;
}
.color-palette.cp-layout-row .cp-copy-ic:hover { color: var(--cp-accent); background: transparent; }

.color-palette.cp-layout-bar .cp-set {
    --row-flow: row nowrap; --row-item: 0; --row-gap: 0;
    border-radius: calc(.8 * 1rem);
    border-radius: calc(var(--cp-radius, .8) * 1rem); overflow: hidden;
    box-shadow: 0 1px .1875rem rgba(3, 3, 3, 0.09),
                inset 0 0 0 1px rgba(2, 2, 2, 0.07);
}

@supports (color: color-mix(in lch, red, blue)) {
.color-palette.cp-layout-bar .cp-set {
    box-shadow: 0 1px .1875rem color-mix(in srgb, var(--cp-ink) 9%, transparent),
                inset 0 0 0 1px color-mix(in srgb, var(--cp-ink) 7%, transparent);
}
}
.color-palette.cp-layout-bar .cp-swatch { --row-flow: column nowrap; --row-gap: 0; background: transparent; min-height: 8.5rem; }
.color-palette.cp-layout-bar .cp-chip {
    flex: 1 1 auto; width: 100%; height: 100%;
    border-radius: 0;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cp-paper) 22%, transparent);
}
.color-palette.cp-layout-bar .cp-meta {
    position: absolute; left: .5rem; right: .5rem; bottom: .5rem;
    padding: .42rem .6rem;
    background: color-mix(in srgb, var(--cp-paper) 76%, transparent);
    -webkit-backdrop-filter: blur(.5rem);
            backdrop-filter: blur(.5rem);
    border-radius: calc(.8 * .55rem);
    border-radius: calc(var(--cp-radius, .8) * .55rem);
    box-shadow: inset 0 0 0 1px rgba(3, 3, 3, 0.09);
}

@supports (color: color-mix(in lch, red, blue)) {
.color-palette.cp-layout-bar .cp-meta {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cp-ink) 9%, transparent);
}
}
.color-palette.cp-layout-bar .cp-name, .color-palette.cp-layout-bar .cp-hex { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.color-palette.cp-layout-bar .cp-copy-ic { top: .55rem; right: .55rem; }

/* a narrow box keeps three swatches to a row: the chip's rem size grows with a phone's large root type, which left one
   swatch to a row and a five-colour palette two screens tall */
@container (max-width: 26rem) {
    .color-palette.cp-layout-blocks .cp-set { --row-flow: row wrap; }
    .color-palette.cp-layout-blocks .cp-swatch { flex: 0 1 min(calc(var(--cp-chip) * .62), 28%); }   /* never grows: a lone last swatch was twice the others */
    /* three to a row leaves a name a third of a phone: it wraps, never "Don't Fe…" */
    .color-palette.cp-layout-blocks .cp-name { white-space: normal; -webkit-hyphens: auto; hyphens: auto; word-wrap: break-word; overflow-wrap: break-word; }
    .color-palette.cp-layout-blocks .cp-hex { letter-spacing: 0; }
}

/* blocks/connected-diagram.css */

@font-face { font-family: 'bootstrap-icons'; src: url('/media/fonts/bootstrap-icons.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: block; }
.conn-diagram [class*="bi-"]::before { font-family: 'bootstrap-icons'; font-style: normal; font-weight: normal; line-height: 1; vertical-align: -.125em; -webkit-font-smoothing: antialiased; display: inline-block; }
.conn-diagram .bi-shield-lock::before { content: "\f538"; }
.conn-diagram .bi-shield-check::before { content: "\f52f"; }
.conn-diagram .bi-mortarboard::before { content: "\f6fe"; }
.conn-diagram .bi-clipboard-check::before { content: "\f28b"; }
.conn-diagram .bi-person-badge::before { content: "\f4d3"; }
.conn-diagram .bi-hdd-network::before { content: "\f40d"; }
.conn-diagram .bi-cloud-check::before { content: "\f299"; }
.conn-diagram .bi-layout-text-window::before { content: "\f464"; }
.conn-diagram .bi-globe::before { content: "\f3ee"; }

.conn-diagram {
    --cd-line: var(--line, #e3e8ee);
    --cd-surface: var(--surface, color-mix(in srgb, var(--ink, #0a2540) 3%, var(--paper, #fff)));
    --cd-radius: var(--r-md, var(--radius, 0.75rem));
    --cd-wire: var(--cd-wire-color, color-mix(in srgb, var(--ink, #0a2540) 40%, transparent));
    --cd-gap: max(.8rem, min(calc(2 * var(--pe-vw)), 1.4rem));
    --cd-gap: clamp(.8rem, calc(2 * var(--pe-vw)), 1.4rem);
    --cd-label: .96rem;
    --cd-chip-base: 2.2rem; --cd-chip-step: 1.18; --cd-chip: var(--cd-chip-base);
    margin: 0; color: #222; color: var(--ink, #0a2540); width: 100%;
}
.conn-diagram .cd-eyebrow {
    color: #007b9a;
    color: var(--accent, #635bff);
    font: 600 .72rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 .72rem/1 var(--font-mono, var(--font-display, system-ui));
    letter-spacing: .14em; text-transform: uppercase; margin-bottom: max(1rem, min(2.4cqi, 1.8rem)); margin-bottom: clamp(1rem, 2.4cqi, 1.8rem);
}

.conn-diagram .cd-stage { --row-gap: 0; align-items: stretch; }

.conn-diagram .cd-root,
.conn-diagram .cd-branch {
    background: #fafafa;
    background: var(--paper, #fff); border: .0625em solid var(--cd-line); border-radius: var(--cd-radius);
    box-shadow: 0 1px 2px rgba(34, 34, 34, 0.08),
                    0 8px 24px -12px rgba(34, 34, 34, 0.18);
    box-shadow: 0 1px 2px color-mix(in srgb, #222 8%, transparent),
                    0 8px 24px -12px color-mix(in srgb, #222 18%, transparent);
    box-shadow: var(--shadow-card, 0 .0625em .125rem rgba(10,37,64,.06), 0 .25rem .75rem -.375rem rgba(10,37,64,.12));
}

.conn-diagram .cd-root {
    --row-gap: .7rem; --row-item: auto; align-items: center; padding: .9rem 1.2rem;
    border-color: color-mix(in srgb, #007b9a 35%, var(--cd-line));
}

@supports (color: color-mix(in lch, red, blue)) {
.conn-diagram .cd-root {
    border-color: color-mix(in srgb, var(--accent, #635bff) 35%, var(--cd-line));
}
}
.conn-diagram .cd-root .cd-chip { flex: 0 0 auto; }
.conn-diagram .cd-root-text { flex: 0 1 auto; min-width: 0; }
.conn-diagram .cd-label { display: block; font: 600 var(--cd-label)/1.2 'Open Sans', Arial, Helvetica, sans-serif; font: 600 var(--cd-label)/1.2 var(--font-display, system-ui); letter-spacing: -.01em; }
.conn-diagram .cd-label-lg { --cd-label: 1.02rem; line-height: 1.15; }
.conn-diagram .cd-sub { display: block; margin-top: .2rem; font: 500 .71rem/1.32 ui-monospace, 'SF Mono', Menlo, monospace; font: 500 .71rem/1.32 var(--font-mono, ui-monospace, monospace);
    letter-spacing: .02em; color: #626262; color: var(--muted, #425466); }

.conn-diagram .cd-chip {
    display: block; text-align: center; border-radius: calc(var(--cd-radius) - .25rem);
    color: #007b9a;
    color: var(--accent, #635bff); background: rgba(0, 14, 17, 0.11); background: color-mix(in srgb, #007b9a 11%, transparent);
    width: var(--cd-chip); height: var(--cd-chip); line-height: var(--cd-chip); font-size: calc(var(--cd-chip) * .48);
    margin-bottom: .55rem;
}

@supports (color: color-mix(in lch, red, blue)) {
.conn-diagram .cd-chip { background: color-mix(in srgb, var(--accent, #635bff) 11%, transparent);
}
}
.conn-diagram .cd-chip-lg { --cd-chip: calc(var(--cd-chip-base) * var(--cd-chip-step)); margin-bottom: 0; }
.conn-diagram.cd-ic-small { --cd-chip-base: 1.7rem; }
.conn-diagram.cd-ic-large { --cd-chip-base: 3.1rem; }

.conn-diagram .cd-branch {
    padding: 1rem 1.1rem 1.05rem; text-align: left;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.conn-diagram .cd-branch:hover { border-color: color-mix(in srgb, #007b9a 55%, var(--cd-line));
    transform: translateY(-.125rem); box-shadow: 0 .5rem 1.5rem -.625rem rgba(0, 55, 69, 0.45); box-shadow: 0 .5rem 1.5rem -.625rem color-mix(in srgb, #007b9a 45%, transparent); }

@supports (color: color-mix(in lch, red, blue)) {
.conn-diagram .cd-branch:hover { border-color: color-mix(in srgb, var(--accent, #635bff) 55%, var(--cd-line)); box-shadow: 0 .5rem 1.5rem -.625rem color-mix(in srgb, var(--accent, #635bff) 45%, transparent); }
}

.conn-diagram .cd-items { list-style-type: disc; margin: .6rem 0 0; padding: .6rem 0 0 .95rem; width: 100%; border-top: .0625em solid var(--cd-line); }
.conn-diagram .cd-item { font: 500 .73rem/1.3 ui-monospace, 'SF Mono', Menlo, monospace; font: 500 .73rem/1.3 var(--font-mono, ui-monospace, monospace);
    letter-spacing: .02em; color: rgba(27, 27, 27, 0.78); color: color-mix(in srgb, #222 78%, transparent); }

@supports (color: color-mix(in lch, red, blue)) {
.conn-diagram .cd-item { color: color-mix(in srgb, var(--ink, #0a2540) 78%, transparent); }
}
.conn-diagram .cd-item::marker { color: #007b9a; color: var(--marker-color, var(--accent, #635bff)); }
.conn-diagram .cd-item + .cd-item { margin-top: .35rem; }
.conn-diagram.cd-dt-compact .cd-items { display: none; }

.conn-diagram.cd-al-center .cd-branch { text-align: center; }
.conn-diagram.cd-al-center .cd-chip { margin-left: auto; margin-right: auto; }
.conn-diagram.cd-al-center .cd-eyebrow { text-align: center; }
.conn-diagram.cd-al-center .cd-items { width: -moz-fit-content; width: fit-content; min-width: 60%; margin-left: auto; margin-right: auto; }
.conn-diagram.cd-al-center .cd-item { text-align: left; }

.conn-diagram .cd-wires { --wires-color: var(--cd-wire); }

.conn-diagram.cd-down .cd-stage { --row-flow: column nowrap; }
.conn-diagram.cd-down .cd-stage > * { flex: 0 0 auto; }
.conn-diagram.cd-down .cd-root { align-self: center; }
.conn-diagram.cd-down .cd-wires { height: max(2.2rem, min(calc(5 * var(--pe-vw)), 3.4rem)); height: clamp(2.2rem, calc(5 * var(--pe-vw)), 3.4rem); }
.conn-diagram.cd-down .cd-branches { --row-gap: var(--cd-gap); --row-item: 9rem; align-items: stretch; }

.conn-diagram.cd-right .cd-stage { align-items: center; }
.conn-diagram.cd-right .cd-root { flex: 0 0 auto; align-self: center; }
.conn-diagram.cd-right .cd-wires { flex: 0 0 max(2.6rem, min(calc(6 * var(--pe-vw)), 4rem)); flex: 0 0 clamp(2.6rem, calc(6 * var(--pe-vw)), 4rem); align-self: stretch; min-height: max(9rem, min(calc(30 * var(--pe-vw)), 16rem)); min-height: clamp(9rem, calc(30 * var(--pe-vw)), 16rem); }
.conn-diagram.cd-right .cd-branches { flex: 1 1 auto; --row-flow: column nowrap; --row-gap: max(.7rem, min(calc(1.8 * var(--pe-vw)), 1.1rem)); --row-gap: clamp(.7rem, calc(1.8 * var(--pe-vw)), 1.1rem); }
.conn-diagram.cd-right .cd-branches > * { flex: 0 0 auto; }

@container (max-width: 30rem) {
    .conn-diagram .cd-wires { display: none; }
}

/* blocks/contact-form.css */

.contact-form {
    --cf-ink:     var(--ink, #15171c);
    --cf-muted:   var(--muted, #6b7280);
    --cf-accent:  var(--accent, #635bff);
    --cf-acc-ink: var(--accent-ink, #fff);
    --cf-surface: var(--surface, var(--paper, #fff));
    --cf-paper:   var(--paper, #fff);
    --cf-line:    var(--line, #e3e8ee);
    --cf-shadow:  var(--shadow-card, 0 1.375rem 3.75rem -2.125rem rgba(20, 23, 28, 0.35));
    width: 100%;
    max-width: 84rem;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: max(2rem, min(calc(5 * var(--pe-vw)), 6rem));
    grid-gap: clamp(2rem, calc(5 * var(--pe-vw)), 6rem);
    gap: max(2rem, min(calc(5 * var(--pe-vw)), 6rem));
    gap: clamp(2rem, calc(5 * var(--pe-vw)), 6rem);
    align-items: start;
    color: #222;
    color: var(--cf-ink);
}

@supports (color: rgb(0 0 0 / 0)) {
.contact-form {
    --cf-shadow:  var(--shadow-card, 0 1.375rem 3.75rem -2.125rem rgb(20 23 28 / .35));
}
}
.contact-form[data-scheme="dark"] {
    --cf-ink:     var(--ink-dark, #e9eaee);
    --cf-muted:   var(--muted-dark, #9aa1b0);
    --cf-surface: var(--surface-dark, var(--paper-dark, #14161c));
    --cf-paper:   var(--paper-dark, #0f1117);
    --cf-line:    var(--line-dark, #2a2e38);
    --cf-shadow:  var(--shadow-card-dark, 0 1.375rem 3.75rem -2.125rem rgba(0, 0, 0, 0.6));
}

@supports (color: rgb(0 0 0 / 0)) {
.contact-form[data-scheme="dark"] {
    --cf-shadow:  var(--shadow-card-dark, 0 1.375rem 3.75rem -2.125rem rgb(0 0 0 / .6));
}
}
.contact-form.cf-has-aside { grid-template-columns: 1fr 1fr; }
.contact-form:not(.cf-has-aside) .cf-form { max-width: 40rem; margin-left: auto; margin-right: auto; }

.contact-form .cf-eyebrow {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: clamp(.7rem, .6rem + calc(.3 * var(--pe-vw)), .82rem);
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--cf-accent);
    margin: 0 0 1.2rem;
}

.cf-aside .cf-heading {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, system-ui, sans-serif);
    font-weight: 600;
    font-size: clamp(2.2rem, 1.4rem + calc(4 * var(--pe-vw)), 4.4rem);
    line-height: .98;
    letter-spacing: -.02em;
    color: var(--cf-ink);
    margin: 0 0 2.4rem;
}
.cf-details {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-gap: .6rem 2.5rem;
    gap: .6rem 2.5rem;
    margin: 0;
}
.cf-details dt {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, ui-monospace, monospace);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .74rem;
    color: var(--cf-muted);
    align-self: start;
    padding-top: .25em;
}
.cf-details dd {
    margin: 0;
    color: var(--cf-ink);
    font-size: clamp(1rem, .9rem + calc(.4 * var(--pe-vw)), 1.2rem);
    line-height: 1.45;
}
.cf-details a {
    color: var(--cf-accent);
    -webkit-text-decoration: none;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease;
}
.cf-details a:hover { border-color: var(--cf-accent); }

.cf-form {
    background: var(--cf-surface);
    border: 1px solid var(--cf-line);
    border-radius: calc(1vh * 1.6);
    border-radius: var(--r-lg, 1.4rem);
    box-shadow: var(--cf-shadow);
    padding: max(1.6rem, min(calc(3 * var(--pe-vw)), 2.6rem));
    padding: clamp(1.6rem, calc(3 * var(--pe-vw)), 2.6rem);
}
.cf-field { margin-bottom: 1.3rem; }
.cf-field label {
    display: block;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, ui-monospace, monospace);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .72rem;
    color: var(--cf-muted);
    margin-bottom: .55rem;
}
.cf-req { color: var(--cf-accent); }

.cf-field input,
.cf-field select,
.cf-field textarea {
    width: 100%;
    background: var(--cf-paper);
    color: var(--cf-ink);
    border: 1px solid var(--cf-line);
    border-radius: 1vh;
    border-radius: var(--radius, .7rem);
    padding: .9em 1em;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.3;
    transition: border-color .2s ease, box-shadow .2s ease;
    outline: none;
}
.cf-field textarea { resize: vertical; min-height: 6.5em; }
.cf-field select { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 1.15em) center, calc(100% - .85em) center;
    background-size: .35em .35em, .35em .35em;
    background-repeat: no-repeat;
    padding-right: 2.4em;
    color: var(--cf-ink);
}
.cf-field input::-moz-placeholder, .cf-field textarea::-moz-placeholder { color: var(--cf-muted); opacity: .7; }
.cf-field input::placeholder,
.cf-field textarea::placeholder { color: var(--cf-muted); opacity: .7; }

.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
    border-color: var(--cf-accent);
    box-shadow: 0 0 0 .1875rem rgba(0, 27, 34, 0.22);
}

@supports (color: color-mix(in lch, red, blue)) {
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
    box-shadow: 0 0 0 .1875rem color-mix(in srgb, var(--cf-accent) 22%, transparent);
}
}

.cf-submit {
    display: inline-flex;
    align-items: center;
    gap: .5ch;
    width: 100%;
    justify-content: center;
    margin-top: .4rem;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: clamp(.8rem, .7rem + calc(.4 * var(--pe-vw)), .95rem);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 1.05em 1.6em;
    border: 1px solid transparent;
    border-radius: 6.25rem;
    background: var(--cf-accent);
    color: var(--cf-acc-ink);
    cursor: pointer;
    line-height: 1;
    transition: transform .25s ease, filter .25s ease;
}
.cf-submit:hover { transform: translateY(-.125rem); filter: brightness(1.06); }
.cf-submit:focus-visible { outline: .1875rem solid rgba(0, 55, 69, 0.45); outline-offset: .1875rem; }

@supports (color: color-mix(in lch, red, blue)) {
.cf-submit:focus-visible { outline: .1875rem solid color-mix(in srgb, var(--cf-accent) 45%, transparent); }
}
.cf-submit:active { transform: translateY(0); }
.cf-arrow { transition: transform .25s ease; }
.cf-submit:hover .cf-arrow { transform: translateX(.1875rem); }

@media (max-width: 768px) {
    .contact-form.cf-has-aside { grid-template-columns: 1fr; }
    .cf-aside .cf-heading { margin-bottom: 1.6rem; }
}

.cf-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.cf-notice {
    display: none; margin: 0 0 1.2rem; padding: .7rem 1rem; border-radius: 1vh; border-radius: var(--radius, .5rem);
    background: rgba(0, 15, 18, 0.12);
    color: var(--cf-ink); font-size: .85rem; font-weight: 600;
}

@supports (color: color-mix(in lch, red, blue)) {
.cf-notice {
    background: color-mix(in oklab, var(--cf-accent) 12%, transparent);
}
}

.cf-error-line { display: none; margin: .8em 0 0; color: #b3261e; color: var(--danger, #b3261e); font-size: .95em; line-height: 1.4; }
.cf-form.is-sent .cf-notice { display: block; }
.cf-form.is-sent .cf-field, .cf-form.is-sent .cf-submit, .cf-form.is-sent .cf-error-line { display: none; }
.cf-form.is-failed .cf-error-line { display: block; }
.cf-form.is-busy .cf-submit { opacity: .6; pointer-events: none; }

/* blocks/countdown.css */

:where(.countdown) {
    --cd-ink: var(--ink, #0a0a0a);
    --cd-muted: var(--muted, #6b6b6b);
    --cd-line: var(--line, #e3e3e3);
    --cd-accent: var(--accent, #635bff);
    --cd-figure: 2.4em;
    width: 100%; margin: 0;
    color: #222;
    color: var(--cd-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif);
}
:where(.countdown.cd-size-small)  { --cd-figure: 1.7em; }
:where(.countdown.cd-size-medium) { --cd-figure: 2.4em; }
:where(.countdown.cd-size-large)  { --cd-figure: 3.6em; }
:where(.countdown.cd-size-huge)   { --cd-figure: 5.2em; }

:where(.countdown .cd-eyebrow) {
    margin: 0 0 .9em;
    color: var(--cd-muted);
    font-size: .78em; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2;
}

:where(.countdown .cd-row) { --row-item: auto; --row-gap: 0; justify-content: inherit; }
:where(.countdown .cd-unit) { flex: 0 0 auto; padding: 0 1.1em; position: relative; }
:where(.countdown .cd-unit:first-child) { padding-left: 0; }
:where(.countdown .cd-unit:last-child) { padding-right: 0; }
:where(.countdown .cd-unit + .cd-unit) { border-left: 1px solid var(--cd-line); }

:where(.countdown .cd-figure) {
    display: block;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, serif);
    font-weight: 400;
    font-size: var(--cd-figure); line-height: 1; letter-spacing: -.02em;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
:where(.countdown .cd-unit-label) {
    display: block; margin-top: .55em;
    color: var(--cd-muted);
    font-size: .78em; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1;
}

:where(.countdown .cd-when) {
    display: block; margin-top: 1.2em;
    color: var(--cd-muted);
    font-size: .78em; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3;
}

:where(.countdown .cd-today), :where(.countdown .cd-after) {
    display: none; margin: 0;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, serif);
    font-size: var(--cd-figure); line-height: 1; letter-spacing: -.02em;
    color: var(--cd-accent);
}
.countdown[data-countdown="today"] .cd-row, .countdown[data-countdown="after"] .cd-row { display: none; }
:where(.countdown[data-countdown="today"] .cd-today) { display: block; }
:where(.countdown[data-countdown="after"] .cd-after) { display: block; }
:where(.countdown[data-countdown="after"] .cd-when) { display: none; }

:where(.countdown.cd-tone-dark) { --cd-ink: var(--invert-fg, #f3ede1); --cd-muted: color-mix(in srgb, var(--invert-fg, #f3ede1) 62%, transparent); --cd-line: color-mix(in srgb, var(--invert-fg, #f3ede1) 22%, transparent); }
:where(.countdown.cd-tone-tint) { --cd-ink: var(--accent, #635bff); }

:where(.countdown.cd-align-center) { text-align: center; }
:where(.countdown.cd-align-center .cd-row) { justify-content: center; }
:where(.countdown.cd-align-right) { text-align: right; }
:where(.countdown.cd-align-right .cd-row) { justify-content: flex-end; }

@container (max-width: 24em) {
    .countdown .cd-row { --row-flow: row nowrap; }
    :where(.countdown) { --cd-figure: 1.9em; }
    :where(.countdown .cd-unit) { padding: 0 .7em; }
}

/* blocks/cursor.css */
html.gl-cursor-on, html.gl-cursor-on a, html.gl-cursor-on button, html.gl-cursor-on * { cursor: none !important; }
.gl-cursor { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; opacity: 0; will-change: transform, opacity; }
.gl-ring {
    position: absolute; left: 0; top: 0; width: 1.75rem; width: var(--cursor-size, 1.75rem); height: 1.75rem; height: var(--cursor-size, 1.75rem);
    border: .0875rem solid #fff;
    border: var(--cursor-border, .0875rem) solid var(--cursor-ink, #fff); border-radius: 50%;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    transition: background-color .28s ease, border-color .28s ease;
}
.gl-cursor[data-variant="dot"]  .gl-ring { background: #fff; background: var(--cursor-ink, #fff); }
.gl-cursor[data-variant="disc"] .gl-ring { background: #fff; background: var(--cursor-ink, #fff); border-color: #fff; border-color: var(--cursor-ink, #fff); }
.gl-label {
    position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
    font: 500 .5625rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 var(--cursor-label-size, .5625rem)/1 var(--font-mono, monospace);
    letter-spacing: .18em;
    letter-spacing: var(--cursor-label-tracking, .18em); text-transform: uppercase; color: #0b0b0c; color: var(--cursor-label-ink, #0b0b0c);
    opacity: 0; transition: opacity .2s ease .04s; white-space: nowrap;
}
.gl-cursor[data-variant="disc"] .gl-label { opacity: 1; }
.gl-ring .bi { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: calc(1.75rem * 0.55); font-size: calc(var(--cursor-size, 1.75rem) * 0.55); color: #0b0b0c; color: var(--cursor-icon-ink, var(--cursor-label-ink, #0b0b0c)); line-height: 1; }
.gl-cursor:has(.bi) .gl-ring { background: transparent; border-color: transparent; }

/* blocks/cutout.css */
:where([data-cutout]) { overflow: hidden; }
:where([data-cutout] > *) { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; margin: 0; }
:where([data-cutout] picture, [data-cutout] img, [data-cutout] video) { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

:where([data-cutout="none"]) { overflow: visible; clip-path: none; }
:where([data-cutout="hexagon"]) { clip-path: polygon(25% 2%, 75% 2%, 98% 50%, 75% 98%, 25% 98%, 2% 50%); }
:where([data-cutout="circle"]) { clip-path: circle(49% at 50% 50%); }
:where([data-cutout="rounded"]) { clip-path: inset(0 round 12%); clip-path: inset(0 round var(--cutout-radius, 12%)); }
:where([data-cutout="arch"]) { clip-path: inset(0 round 50% 50% 0 0 / 40% 40% 0 0); }
:where([data-cutout="blob"]) { clip-path: polygon(38% 4%, 66% 1%, 88% 14%, 99% 42%, 93% 72%, 74% 95%, 44% 99%, 16% 90%, 2% 62%, 5% 30%, 18% 10%); }
:where([data-cutout="torn"]) {
    clip-path: polygon(0 4%, 6% 1%, 14% 5%, 22% 0, 31% 4%, 40% 1%, 49% 5%, 58% 0, 67% 4%, 76% 1%, 85% 5%, 94% 0, 100% 3%,
        99% 12%, 100% 24%, 97% 36%, 100% 48%, 98% 60%, 100% 72%, 97% 84%, 100% 96%,
        94% 100%, 85% 96%, 76% 100%, 67% 95%, 58% 100%, 49% 96%, 40% 100%, 31% 95%, 22% 100%, 14% 96%, 6% 100%, 0 97%,
        2% 86%, 0 74%, 3% 62%, 0 50%, 2% 38%, 0 26%, 3% 14%);
}
:where([data-cutout="tilt"]), :where([data-cutout="card"]) { rotate: -4deg; rotate: var(--cutout-tilt, -4deg); overflow: visible; }
:where([data-cutout="card"]) { box-shadow: 0 .4cqi 1.6cqi rgba(0, 0, 0, .18); background: #f9f9f9; background: var(--page-bg, #fff); }
:where([data-cutout="card"] > *) { -o-object-fit: contain; object-fit: contain; }

:where([data-sticker]) {
    --_e: var(--sticker-edge, .5cqi);
    --_c: var(--sticker-ink, var(--page-bg, #fff));
    filter: drop-shadow(.5cqi 0 0 #f9f9f9) drop-shadow(calc(-1 * .5cqi) 0 0 #f9f9f9) drop-shadow(0 .5cqi 0 #f9f9f9) drop-shadow(0 calc(-1 * .5cqi) 0 #f9f9f9);
    filter: drop-shadow(var(--_e) 0 0 var(--_c)) drop-shadow(calc(-1 * var(--_e)) 0 0 var(--_c)) drop-shadow(0 var(--_e) 0 var(--_c)) drop-shadow(0 calc(-1 * var(--_e)) 0 var(--_c));
}
:where([data-sticker="accent"]) { --_c: var(--sticker-ink, var(--accent, #ff2d8a)); }
:where([data-sticker="shadow"]) { filter: drop-shadow(0 .6cqi 1.2cqi rgba(0, 0, 0, .28)); }
:where([data-sticker] > img, [data-sticker] > picture, [data-sticker] > figure) { display: block; }

:where([data-drag]) {
    translate: calc(0 * 1px) calc(0 * 1px);
    translate: calc(var(--drag-x, 0) * 1px) calc(var(--drag-y, 0) * 1px);
    touch-action: none; cursor: grab; -moz-user-select: none; user-select: none; -webkit-user-select: none;
    transition: scale .25s cubic-bezier(.4, 0, .2, 1);
    transition: scale .25s var(--ease, ease);
}
:where([data-drag="held"]) { cursor: grabbing; z-index: 9; scale: 1.05; }
:where([data-drag="thrown"]) { z-index: 8; }
:where([data-drag] img) { pointer-events: none; }

/* blocks/data-table.css */

.data-table {
    --dt-ink:    var(--ink, #0a2540);
    --dt-muted:  var(--muted, #6b7280);
    --dt-accent: var(--accent, #635bff);
    --dt-paper:  var(--paper, #fff);
    --dt-line:   var(--line, #e3e8ee);
    --dt-faint:  var(--faint, color-mix(in srgb, var(--dt-muted) 55%, transparent));
    width: 100%;
}

.data-table[data-scheme="dark"] {
    --dt-ink:    var(--ink-dark, #e9eaee);
    --dt-muted:  var(--muted-dark, #9aa3b2);
    --dt-accent: var(--accent-dark, var(--accent, #7c75ff));
    --dt-paper:  var(--paper-dark, #0c0d10);
    --dt-line:   var(--line-dark, #23262d);
}

.data-table .dt-eyebrow {
    color: var(--dt-accent);
    font: 600 .72rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 .72rem/1 var(--font-mono, var(--font-display, system-ui));
    letter-spacing: .2em; text-transform: uppercase;
    margin: 0 0 max(1.2rem, min(2.6cqi, 2rem));
    margin: 0 0 clamp(1.2rem, 2.6cqi, 2rem);
}

.data-table[data-variant="compare"] .dt-scroll { overflow-x: auto; }

.data-table[data-variant="compare"] table {
    width: 100%; border-collapse: collapse;
    font-size: max(.85rem, min(1.7cqi, .95rem));
    font-size: clamp(.85rem, 1.7cqi, .95rem);
    font-feature-settings: tabular-nums lining-nums;
    font-variant-numeric: tabular-nums lining-nums;
}
.data-table[data-variant="compare"] th,
.data-table[data-variant="compare"] td {
    padding: .9em 1.1em; text-align: left;
    border-bottom: 1px solid var(--dt-line);
}

.data-table[data-variant="compare"] thead th {
    font: 600 max(.75rem, min(1.5cqi, .82rem))/1.2 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 max(.75rem, min(1.5cqi, .82rem))/1.2 var(--font-mono, var(--font-display, system-ui));
    font: 600 max(.75rem, min(1.5cqi, .82rem))/1.2 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 clamp(.75rem, 1.5cqi, .82rem)/1.2 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 clamp(.75rem, 1.5cqi, .82rem)/1.2 var(--font-mono, var(--font-display, system-ui));
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--dt-muted);
    vertical-align: bottom;
}
.data-table[data-variant="compare"] thead .dt-feat-head { color: var(--dt-ink); }

.data-table[data-variant="compare"] .dt-label { color: var(--dt-ink); }
.data-table[data-variant="compare"] tbody td:not(.dt-label) {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, var(--font-display, system-ui));
    color: var(--dt-ink);
}

.data-table[data-variant="compare"] .dt-cat td {
    font: 600 .68rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 .68rem/1 var(--font-mono, var(--font-display, system-ui));
    text-transform: uppercase; letter-spacing: .18em;
    color: var(--dt-faint);
    padding-top: 1.8em; border-bottom: none;
}

.data-table[data-variant="compare"] td.dt-yes { color: var(--dt-accent); font-weight: 700; }
.data-table[data-variant="compare"] td.dt-no { color: var(--dt-faint); }

.data-table[data-variant="compare"] th.dt-col-feat { color: var(--dt-accent); }
.data-table[data-variant="compare"] th.dt-col-feat,
.data-table[data-variant="compare"] td.dt-col-feat {
    background: rgba(0, 7, 9, 0.06);
}

@supports (color: color-mix(in lch, red, blue)) {
.data-table[data-variant="compare"] th.dt-col-feat,
.data-table[data-variant="compare"] td.dt-col-feat {
    background: color-mix(in srgb, var(--dt-accent) 6%, transparent);
}
}
.data-table[data-variant="compare"] td.dt-col-feat.dt-yes { color: var(--dt-accent); }

.data-table[data-variant="compare"] tbody tr:not(.dt-cat):hover td {
    background: rgba(1, 1, 1, 0.03);
}

@supports (color: color-mix(in lch, red, blue)) {
.data-table[data-variant="compare"] tbody tr:not(.dt-cat):hover td {
    background: color-mix(in srgb, var(--dt-ink) 3%, transparent);
}
}
.data-table[data-variant="compare"] tbody tr:not(.dt-cat):hover td.dt-col-feat {
    background: rgba(0, 12, 15, 0.1);
}

@supports (color: color-mix(in lch, red, blue)) {
.data-table[data-variant="compare"] tbody tr:not(.dt-cat):hover td.dt-col-feat {
    background: color-mix(in srgb, var(--dt-accent) 10%, transparent);
}
}

.data-table[data-variant="spec"] {
    margin: 0;
    display: flex; flex-direction: column;
}

.data-table[data-variant="spec"] .dt-eyebrow {
    font-weight: 500; letter-spacing: .28em; margin-bottom: 1.4rem;
    color: var(--dt-accent, var(--dt-muted));
}

.data-table[data-variant="spec"] .dt-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: max(1rem, min(4cqi, 3rem));
    gap: clamp(1rem, 4cqi, 3rem);
    padding: max(.9rem, min(1.8cqi, 1.4rem)) 0;
    padding: clamp(.9rem, 1.8cqi, 1.4rem) 0;
    border-top: 1px solid var(--dt-line);
}
.data-table[data-variant="spec"] .dt-row:last-child { border-bottom: 1px solid var(--dt-line); }

.data-table[data-variant="spec"] .dt-key {
    flex: 0 0 auto;
    font: 500 max(.66rem, min(1.1cqi, .76rem))/1.3 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 max(.66rem, min(1.1cqi, .76rem))/1.3 var(--font-mono, var(--font-display, system-ui));
    font: 500 max(.66rem, min(1.1cqi, .76rem))/1.3 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 clamp(.66rem, 1.1cqi, .76rem)/1.3 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 clamp(.66rem, 1.1cqi, .76rem)/1.3 var(--font-mono, var(--font-display, system-ui));
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--dt-muted);
}
.data-table[data-variant="spec"] .dt-value {
    margin: 0; min-width: 0;
    font: 400 max(1.1rem, min(2.2cqi, 1.7rem))/1.2 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 max(1.1rem, min(2.2cqi, 1.7rem))/1.2 var(--font-display, system-ui);
    font: 400 max(1.1rem, min(2.2cqi, 1.7rem))/1.2 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 clamp(1.1rem, 2.2cqi, 1.7rem)/1.2 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 clamp(1.1rem, 2.2cqi, 1.7rem)/1.2 var(--font-display, system-ui);
    letter-spacing: -.01em; color: var(--dt-ink);
    text-wrap: balance;
}

.data-table[data-variant="spec"].dt-val-right .dt-value { text-align: right; }
.data-table[data-variant="spec"].dt-val-left .dt-row { justify-content: flex-start; gap: max(1.5rem, min(6cqi, 5rem)); gap: clamp(1.5rem, 6cqi, 5rem); }
.data-table[data-variant="spec"].dt-val-left .dt-key { flex: 0 0 max(6rem, min(18cqi, 11rem)); flex: 0 0 clamp(6rem, 18cqi, 11rem); }
.data-table[data-variant="spec"].dt-val-left .dt-value { text-align: left; }

/* blocks/data.css */

.faq { max-width: 56rem; }
.faq details { border-bottom: 1px solid rgba(5, 5, 5, 0.14); border-bottom: 1px solid var(--line, rgba(5, 5, 5, 0.14)); }

@supports (color: color-mix(in lch, red, blue)) {
.faq details { border-bottom: 1px solid var(--line, color-mix(in srgb, var(--ink) 14%, transparent)); }
}
.faq summary { cursor: pointer; list-style: none; padding: 1.1rem 0; display: flex; gap: 1rem; justify-content: space-between; align-items: center;
    font: 600 1.1rem/1.3 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 1.1rem/1.3 var(--font-display); color: #222; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: #007b9a; color: var(--accent); font: 400 1.5rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 400 1.5rem/1 var(--font-mono); }
.faq details[open] summary::after { content: "×"; }
.faq-answer { padding: 0 0 1.2rem; margin: 0; max-width: 60ch; color: #626262; color: var(--muted); font: 400 1rem/1.6 'Open Sans', Arial, Helvetica, sans-serif; font: 400 1rem/1.6 var(--font-text); }

.spec { border-top: 1px solid rgba(5, 5, 5, 0.14); border-top: 1px solid var(--line, rgba(5, 5, 5, 0.14)); }

@supports (color: color-mix(in lch, red, blue)) {
.spec { border-top: 1px solid var(--line, color-mix(in srgb, var(--ink) 14%, transparent)); }
}
.spec > div { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem .4rem; border-bottom: 1px solid rgba(5, 5, 5, 0.14); border-bottom: 1px solid var(--line, rgba(3, 3, 3, 0.1)); }

@supports (color: color-mix(in lch, red, blue)) {
.spec > div { border-bottom: 1px solid var(--line, color-mix(in srgb, var(--ink) 10%, transparent)); }
}
.spec dt { font: 400 1rem/1.4 'Open Sans', Arial, Helvetica, sans-serif; font: 400 1rem/1.4 var(--font-text); color: #626262; color: var(--muted); margin: 0; }
.spec dd { margin: 0; font: 600 1rem/1.4 ui-monospace, 'SF Mono', Menlo, monospace; font: 600 1rem/1.4 var(--font-mono); color: #222; color: var(--ink); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* blocks/datalist.css */
.loop-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); grid-gap: 1.5rem; grid-gap: var(--gap, 1.5rem); gap: 1.5rem; gap: var(--gap, 1.5rem); align-items: start; }
.loop-cards > .content-block { padding: 0; }
.card > .imagesingle { margin: 0 0 .3rem; aspect-ratio: 16 / 10; border-radius: calc(1vh * 0.5); border-radius: var(--r-sm, .5rem); overflow: hidden; background: rgb(241, 241, 241); background: color-mix(in srgb, #222 4%, #fafafa); background: var(--surface, #f0f0f0); }

@supports (color: color-mix(in lch, red, blue)) {
.card > .imagesingle { background: var(--surface, color-mix(in srgb, var(--ink) 4%, var(--page-bg))); }
}
.card > .imagesingle img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.card:hover > .imagesingle img { transform: scale(1.04); }
.loop-features > .content-block { padding: 0; }
.loop-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); grid-gap: 1.5rem max(1.5rem, min(calc(4 * var(--pe-vw)), 3rem)); grid-gap: var(--gap, 1.5rem) max(1.5rem, min(calc(4 * var(--pe-vw)), 3rem)); grid-gap: 1.5rem max(1.5rem, min(calc(4 * var(--pe-vw)), 3rem)); grid-gap: 1.5rem clamp(1.5rem, calc(4 * var(--pe-vw)), 3rem); grid-gap: var(--gap, 1.5rem) clamp(1.5rem, calc(4 * var(--pe-vw)), 3rem); gap: 1.5rem max(1.5rem, min(calc(4 * var(--pe-vw)), 3rem)); gap: var(--gap, 1.5rem) max(1.5rem, min(calc(4 * var(--pe-vw)), 3rem)); gap: 1.5rem max(1.5rem, min(calc(4 * var(--pe-vw)), 3rem)); gap: 1.5rem clamp(1.5rem, calc(4 * var(--pe-vw)), 3rem); gap: var(--gap, 1.5rem) clamp(1.5rem, calc(4 * var(--pe-vw)), 3rem); }
.loop-metrics > .content-block { padding: 0; }

/* blocks/day-plan.css */

:where(.day-plan) {
    --dp-ink: var(--ink, #0a0a0a);
    --dp-muted: var(--muted, #6b6b6b);
    --dp-line: var(--line, #e3e3e3);
    --dp-accent: var(--accent, #635bff);
    --dp-time-col: 6.5em;
    --dp-row-pad: .95em;
    width: 100%; margin: 0;
    color: #222;
    color: var(--dp-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif);
}
:where(.day-plan.dp-rule-none) { --dp-line: transparent; }
:where(.day-plan.dp-rule-strong) { --dp-line: var(--rule-strong, var(--ink, #0a0a0a)); }

:where(.day-plan .dp-eyebrow) {
    margin: 0 0 1.4em;
    color: var(--dp-muted);
    font-size: .78em; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2;
}

:where(.day-plan .dp-live) {
    display: none; margin: 0 0 1.2em;
    font-size: .78em; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2;
    color: var(--dp-accent);
}
:where(.day-plan[data-schedule="during"] .dp-live) { display: block; }
:where(.day-plan .dp-live-tag) { margin-right: .8em; }
:where(.day-plan .dp-live-name) { color: var(--dp-ink); }
:where(.day-plan .dp-live-in) { color: var(--dp-muted); margin-left: .8em; padding-left: .8em; border-left: 1px solid var(--dp-line); }

:where(.day-plan .dp-list) { list-style: none; margin: 0; padding: 0; }
:where(.day-plan .dp-row) {
    position: relative;
    padding: var(--dp-row-pad) 0 var(--dp-row-pad) var(--dp-time-col);
    border-top: 1px solid var(--dp-line);
    transition: color .3s cubic-bezier(.4, 0, .2, 1), opacity .3s cubic-bezier(.4, 0, .2, 1);
    transition: color .3s var(--ease, ease), opacity .3s var(--ease, ease);
}
:where(.day-plan .dp-row:first-child) { border-top: 0; padding-top: 0; }
:where(.day-plan .dp-row:last-child) { padding-bottom: 0; }

:where(.day-plan .dp-time) {
    position: absolute; left: 0; top: calc(var(--dp-row-pad) + .45em);
    color: var(--dp-muted);
    font-size: .78em; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
:where(.day-plan .dp-row:first-child .dp-time) { top: .45em; }
:where(.day-plan .dp-title) {
    display: block;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, serif); font-weight: 400;
    font-size: 1.35em; line-height: 1.1; letter-spacing: -.01em;
}
:where(.day-plan .dp-place) { display: block; margin-top: .3em; color: var(--dp-muted); line-height: 1.4; }
:where(.day-plan .dp-note) { display: block; margin-top: .3em; color: var(--dp-muted); font-size: .9em; line-height: 1.45; }

:where(.day-plan .dp-row.is-past) { color: var(--dp-muted); }
:where(.day-plan .dp-row.is-past .dp-title) { color: var(--dp-muted); }
:where(.day-plan .dp-row.is-now) { border-top-color: var(--dp-accent); }
:where(.day-plan .dp-row.is-now .dp-title), :where(.day-plan .dp-row.is-now .dp-time) { color: var(--dp-accent); }
:where(.day-plan .dp-row.is-now + .dp-row) { border-top-color: var(--dp-accent); }

:where(.day-plan.dp-tone-dark) { --dp-ink: var(--invert-fg, #f3ede1); --dp-muted: color-mix(in srgb, var(--invert-fg, #f3ede1) 62%, transparent); --dp-line: color-mix(in srgb, var(--invert-fg, #f3ede1) 22%, transparent); }

:where(.day-plan.dp-align-center) { text-align: center; }
:where(.day-plan.dp-align-center .dp-row) { padding-left: 0; }
:where(.day-plan.dp-align-center .dp-time) { position: static; display: block; margin-bottom: .6em; }

@container (max-width: 26em) {
    :where(.day-plan .dp-row) { padding-left: 0; }
    :where(.day-plan .dp-time) { position: static; display: block; margin-bottom: .6em; }
}

/* blocks/device-frames.css */

.browser-frame {
    border-radius: .8em; overflow: hidden; background: #fafafa; background: var(--paper, #fff);
    border: 1px solid rgba(3, 3, 3, 0.1);
    border: 1px solid color-mix(in srgb, #222 10%, transparent);
    box-shadow: 0 0 0 1px rgba(250, 250, 250, 0.4) inset;
    box-shadow: 0 0 0 1px color-mix(in srgb, #fafafa 40%, transparent) inset;
}

@supports (color: color-mix(in lch, red, blue)) {
.browser-frame {
    border: 1px solid color-mix(in srgb, var(--ink, #000) 10%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--paper, #fff) 40%, transparent) inset;
}
}
/* the title bar scales with the window (1.4cqi of its cell), so a small screenshot gets a small bar */
.browser-frame .bf-bar {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    font-size: max(.45rem, min(1.4cqi, .8rem));
    font-size: clamp(.45rem, 1.4cqi, .8rem); padding: .75em 1em;
    background: linear-gradient(rgb(244, 244, 244), rgb(231, 231, 231));
    background: linear-gradient(color-mix(in srgb, #fafafa 97%, #222), color-mix(in srgb, #fafafa 91%, #222));
    border-bottom: 1px solid rgba(3, 3, 3, 0.09);
    border-bottom: 1px solid color-mix(in srgb, #222 9%, transparent);
}

@supports (color: color-mix(in lch, red, blue)) {
.browser-frame .bf-bar {
    background: linear-gradient(color-mix(in srgb, var(--paper, #fff) 97%, var(--ink, #000)), color-mix(in srgb, var(--paper, #fff) 91%, var(--ink, #000)));
    border-bottom: 1px solid color-mix(in srgb, var(--ink, #000) 9%, transparent);
}
}
.browser-frame .bf-bar .richtext { display: contents; }
.browser-frame .bf-dots { display: inline-flex; gap: .5em; justify-self: start; }
.browser-frame .bf-dots i { display: inline-block; width: .95em; height: .95em; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
.browser-frame .bf-dots i:nth-child(1) { background: #ff5f57; }
.browser-frame .bf-dots i:nth-child(2) { background: #febc2e; }
.browser-frame .bf-dots i:nth-child(3) { background: #28c840; }
.browser-frame .bf-url {
    display: flex; align-items: center; gap: .5em; min-width: 16em; max-width: 60cqi; padding: .4em 1.1em; border-radius: .55em;
    font: 400 1em/1.2 system-ui, sans-serif;
    font: 400 1em/1.2 var(--font-body, system-ui, sans-serif); letter-spacing: .01em; color: rgba(21, 21, 21, 0.62); color: color-mix(in srgb, #222 62%, transparent);
    background: rgba(238, 238, 238, 0.74);
    background: color-mix(in srgb, #fafafa 70%, #222 4%);
    box-shadow: inset 0 0 0 1px rgba(2, 2, 2, 0.07);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #222 7%, transparent);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@supports (color: color-mix(in lch, red, blue)) {
.browser-frame .bf-url { color: color-mix(in srgb, var(--ink, #000) 62%, transparent);
    background: color-mix(in srgb, var(--paper, #fff) 70%, var(--ink, #000) 4%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink, #000) 7%, transparent);
}
}
/* the padlock before the address, drawn in CSS so the markup stays one text field */
.browser-frame .bf-url::before {
    content: ''; flex: none; width: .7em; height: .8em; opacity: .55;
    background: currentColor;
    -webkit-mask: radial-gradient(circle at 50% 30%, transparent .22em, #000 .23em, #000 .32em, transparent .33em) top / 100% 60% no-repeat,
          linear-gradient(#000 0, #000 0) bottom / 100% 55% no-repeat;
            mask: radial-gradient(circle at 50% 30%, transparent .22em, #000 .23em, #000 .32em, transparent .33em) top / 100% 60% no-repeat,
          linear-gradient(#000 0, #000 0) bottom / 100% 55% no-repeat;
    -webkit-mask: radial-gradient(circle at 50% 30%, transparent .22em, #000 .23em, #000 .32em, transparent .33em) top / 100% 60% no-repeat,
          linear-gradient(#000 0 0) bottom / 100% 55% no-repeat;
            mask: radial-gradient(circle at 50% 30%, transparent .22em, #000 .23em, #000 .32em, transparent .33em) top / 100% 60% no-repeat,
          linear-gradient(#000 0 0) bottom / 100% 55% no-repeat;
}
.browser-frame .bf-url:empty { display: none; }   /* no address: just the window and its lights, never an empty pill */
.browser-frame .videosingle, .browser-frame .imagesingle { margin: 0; border: 0; border-radius: 0; background: #000; background: var(--frame-matte, #000); }
.browser-frame .videosingle video, .browser-frame .imagesingle img,
.browser-frame > video, .browser-frame > img, .browser-frame picture > img { display: block; width: 100%; aspect-ratio: 16/9; -o-object-fit: cover; object-fit: cover; }

.phone-frame { border-radius: 1.375rem; background: #222; background: var(--ink, #111); padding: .4375rem; max-width: 17rem; margin-left: auto; margin-right: auto; }
.phone-frame .videosingle, .phone-frame .imagesingle { margin: 0; border: 0; border-radius: .9375rem; overflow: hidden; background: #000; background: var(--frame-matte, #000); }
.phone-frame .videosingle video, .phone-frame .imagesingle img,
.phone-frame > video, .phone-frame > img, .phone-frame picture > img { display: block; width: 100%; aspect-ratio: 3/4; -o-object-fit: cover; object-fit: cover; border-radius: .9375rem; }

.poster-frame { background: #fafafa; background: var(--paper, #fff); padding: 5%; border: 1px solid rgba(5, 5, 5, 0.14); border: 1px solid var(--line, rgba(4, 4, 4, 0.12)); }

@supports (color: color-mix(in lch, red, blue)) {
.poster-frame { border: 1px solid var(--line, color-mix(in srgb, var(--ink,#000) 12%, transparent)); }
}
.poster-frame .imagesingle { margin: 0; border: 0; }
.poster-frame .imagesingle img, .poster-frame > img, .poster-frame picture > img { display: block; width: 100%; height: auto; aspect-ratio: 3/4; -o-object-fit: cover; object-fit: cover; }

@media (max-width: 768px) { .phone-frame { max-width: none; } }

/* an image's turn, lean and drop shadow (props tilt, lean, shadow → --frame-*, and the classes image.twig sets): turn and
   lean are one rotation on the separate `rotate` property, so it adds to a keyed move (the engine animates `transform`).
   Never a [style*=] test here: inside :has() it makes every inline style write on the page re-check its ancestors */
.imagesingle.is-turned {
    rotate: 0 -0 0 0deg;
    rotate: 0 calc(-1 * 0) 0 calc(hypot(0, 0) * 1deg);
    rotate: var(--frame-lean, 0) calc(-1 * var(--frame-tilt, 0)) 0 calc(hypot(var(--frame-tilt, 0), var(--frame-lean, 0)) * 1deg);
}
:has(> .imagesingle.is-turned) { perspective: 110em; }   /* a cell, a wrapper, a deck */
/* the perspective already makes the cell the image's containing block; `position` says so to the editor's handles, which
   find it only there (a positioned cell keeps its own) */
:where(.plot):has(> .imagesingle.is-turned) { position: relative; }
.imagesingle img { -o-object-position: center; object-position: center; -o-object-position: var(--image-focus, center); object-position: var(--image-focus, center); }   /* the image's "Crop from" */
.imagesingle.has-shadow {
    box-shadow:
        0 .12em .25em color-mix(in srgb, #222 calc(var(--frame-shadow) * .3%), transparent),
        0 1.1em 2.4em -.6em color-mix(in srgb, #222 calc(var(--frame-shadow) * .8%), transparent),
        0 2.6em 5.2em -1.6em color-mix(in srgb, #222 calc(var(--frame-shadow) * 1%), transparent);
}

@supports (color: color-mix(in lch, red, blue)) {
.imagesingle.has-shadow {
    box-shadow:
        0 .12em .25em color-mix(in srgb, var(--ink, #000) calc(var(--frame-shadow) * .3%), transparent),
        0 1.1em 2.4em -.6em color-mix(in srgb, var(--ink, #000) calc(var(--frame-shadow) * .8%), transparent),
        0 2.6em 5.2em -1.6em color-mix(in srgb, var(--ink, #000) calc(var(--frame-shadow) * 1%), transparent);
}
}

/* blocks/device-showcase.css */

.device-showcase {
    --dsc-ink: var(--ink, #0a0a0a);
    --dsc-muted: var(--muted, #6b6b6b);
    --dsc-line: var(--line, #e3e3e3);
    --dsc-paper: var(--paper, #fff);
    --dsc-accent: var(--accent, #635bff);
    --dsc-bezel: var(--ink, #0a0a0a);
    --dsc-w: min(56rem, 100%);
    --dsc-pad: 0;
    margin: 0; width: 100%;
    color: #222;
    color: var(--dsc-ink);
}

.device-showcase .dsc-label {
    margin: 0 0 max(.8rem, min(calc(2.2 * var(--pe-vw)), 1.25rem));
    margin: 0 0 clamp(.8rem, calc(2.2 * var(--pe-vw)), 1.25rem);
    color: var(--dsc-muted);
    font: 600 .72rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 .72rem/1 var(--font-mono, var(--font-display, ui-monospace, monospace));
    letter-spacing: .18em; text-transform: uppercase;
}

.device-showcase .dsc-stage {
    position: relative; padding: var(--dsc-pad);
    border-radius: calc(1vh * 1.6);
    border-radius: var(--r-lg, 1.25rem);
    isolation: isolate;
}
.device-showcase.dsc-ground-surface  { --dsc-pad: max(1.6rem, min(calc(5 * var(--pe-vw)), 4rem)); --dsc-pad: clamp(1.6rem, calc(5 * var(--pe-vw)), 4rem); }
.device-showcase.dsc-ground-gradient { --dsc-pad: max(1.8rem, min(calc(5.5 * var(--pe-vw)), 4.4rem)); --dsc-pad: clamp(1.8rem, calc(5.5 * var(--pe-vw)), 4.4rem); }

.device-showcase.dsc-ground-surface .dsc-stage {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--dsc-ink) 2%, var(--dsc-paper)),
            color-mix(in srgb, var(--dsc-ink) 6%, var(--dsc-paper)));
    border: 1px solid var(--dsc-line);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dsc-paper) 65%, transparent);
}

.device-showcase.dsc-ground-gradient .dsc-stage {
    background:
        radial-gradient(88% 62% at 50% 8%,  color-mix(in srgb, var(--dsc-paper) 92%, transparent), transparent 66%),
        radial-gradient(130% 92% at 50% 128%, color-mix(in srgb, var(--dsc-accent) 26%, transparent), transparent 62%),
        linear-gradient(180deg, color-mix(in srgb, var(--dsc-accent) 6%, var(--dsc-paper)), var(--dsc-paper));
    border: 1px solid color-mix(in srgb, var(--dsc-accent) 14%, var(--dsc-line));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dsc-paper) 60%, transparent);
}

.device-showcase .dsc-shot {
    position: relative; z-index: 1;
    margin: 0 auto; width: 100%; max-width: var(--dsc-w);
}
.device-showcase .dsc-shot img, .device-showcase .dsc-shot picture { display: block; width: 100%; }

.device-showcase.dsc-device-browser { --dsc-w: min(56rem, 100%); }
.device-showcase.dsc-device-laptop  { --dsc-w: min(52rem, 100%); }
.device-showcase.dsc-device-phone   { --dsc-w: 17rem; }
.device-showcase.dsc-device-tablet  { --dsc-w: 24rem; }

.device-showcase.dsc-device-laptop .dsc-shot {
    overflow: hidden; background: var(--dsc-bezel);
    border: .5rem solid var(--dsc-bezel); border-bottom-width: 1.05rem;
    border-top-color: color-mix(in srgb, var(--dsc-bezel) 82%, var(--dsc-paper));
    border-bottom-color: color-mix(in srgb, var(--dsc-bezel) 90%, var(--dsc-paper));
    border-radius: 1.15rem;
}
.device-showcase.dsc-device-laptop .dsc-shot img { aspect-ratio: 16 / 10; -o-object-fit: cover; object-fit: cover; }

.device-showcase.dsc-device-tablet .dsc-shot {
    overflow: hidden; background: var(--dsc-bezel);
    border: .85rem solid var(--dsc-bezel);
    border-top-color: color-mix(in srgb, var(--dsc-bezel) 84%, var(--dsc-paper));
    border-radius: 1.7rem;
}
.device-showcase.dsc-device-tablet .dsc-shot img { aspect-ratio: 3 / 4; -o-object-fit: cover; object-fit: cover; }

.device-showcase.dsc-shadow-none .dsc-shot { box-shadow: none; }
.device-showcase.dsc-shadow-soft .dsc-shot {
    box-shadow: 0 .5rem 1.4rem rgba(5, 5, 5, 0.15);
}

@supports (color: color-mix(in lch, red, blue)) {
.device-showcase.dsc-shadow-soft .dsc-shot {
    box-shadow: 0 .5rem 1.4rem color-mix(in srgb, var(--dsc-ink) 15%, transparent);
}
}
.device-showcase.dsc-shadow-float .dsc-shot {
    box-shadow:
        0 .12rem .25rem rgba(3, 3, 3, 0.08),
        0 1.1rem 2.4rem -.6rem rgba(7, 7, 7, 0.2),
        0 2.6rem 5.2rem -1.6rem rgba(9, 9, 9, 0.26);
}

@supports (color: color-mix(in lch, red, blue)) {
.device-showcase.dsc-shadow-float .dsc-shot {
    box-shadow:
        0 .12rem .25rem color-mix(in srgb, var(--dsc-ink) 8%, transparent),
        0 1.1rem 2.4rem -.6rem color-mix(in srgb, var(--dsc-ink) 20%, transparent),
        0 2.6rem 5.2rem -1.6rem color-mix(in srgb, var(--dsc-ink) 26%, transparent);
}
}

.device-showcase.dsc-tilt-1 .dsc-shot {
    transform: perspective(112.5rem)
               rotateY(calc(14 * -1deg))
               rotateX(3deg) rotate(.4deg);
    transform: perspective(112.5rem)
               rotateY(calc(var(--dsc-tilt, 14) * -1deg))
               rotateX(3deg) rotate(.4deg);
    transform-origin: 50% 100%;
    transform-style: preserve-3d;
}

.device-showcase .dsc-caption {
    position: relative; z-index: 2;
    margin: max(1.15rem, min(calc(2.8 * var(--pe-vw)), 1.9rem)) 0 0;
    margin: clamp(1.15rem, calc(2.8 * var(--pe-vw)), 1.9rem) 0 0; text-align: center;
    font: 400 .82rem/1.5 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 400 .82rem/1.5 var(--font-mono, ui-monospace, monospace);
    color: var(--dsc-muted); letter-spacing: .015em; text-wrap: balance;
}
.device-showcase.dsc-tilt-1 .dsc-caption { margin-top: max(1.5rem, min(calc(3.6 * var(--pe-vw)), 2.5rem)); margin-top: clamp(1.5rem, calc(3.6 * var(--pe-vw)), 2.5rem); }

.device-showcase.dsc-cappos-hidden .dsc-caption { display: none; }
.device-showcase.dsc-cappos-overlay .dsc-caption {
    position: absolute; left: 50%; bottom: var(--dsc-pad); translate: -50% 0; z-index: 3;
    width: 100%; max-width: var(--dsc-w); margin: 0; text-align: center;
    padding: 2.6cqi 1.6cqi 1.3cqi;
    color: var(--dsc-paper); letter-spacing: .01em;
    background: linear-gradient(to top,
        rgba(24, 24, 24, 0.72) 8%,
        rgba(12, 12, 12, 0.34) 60%,
        transparent);
    border-radius: 0 0 1.1rem 1.1rem;
}

@supports (color: color-mix(in lch, red, blue)) {
.device-showcase.dsc-cappos-overlay .dsc-caption {
    background: linear-gradient(to top,
        color-mix(in srgb, var(--dsc-ink) 72%, transparent) 8%,
        color-mix(in srgb, var(--dsc-ink) 34%, transparent) 60%,
        transparent);
}
}

.device-showcase.dsc-align-center .dsc-label { text-align: center; }

@media (max-width: 48rem) {
    .device-showcase.dsc-tilt-1 .dsc-shot { transform: none; }
    .device-showcase.dsc-ground-surface,
    .device-showcase.dsc-ground-gradient { --dsc-pad: max(1rem, min(calc(6 * var(--pe-vw)), 2rem)); --dsc-pad: clamp(1rem, calc(6 * var(--pe-vw)), 2rem); }
    .device-showcase.dsc-device-phone, .device-showcase.dsc-device-tablet { --dsc-w: 14rem; }
}

/* blocks/divider.css */

.divider {
    --dv-accent: var(--accent, #635bff);
    --dv-ink: var(--ink, #0a2540);
    --dv-line: var(--line, color-mix(in srgb, var(--ink, #0a2540) 12%, transparent));
    --dv-muted: var(--muted, #425466);
    --dv-width: 100%;
    --dv-space: 2.4rem;
    --dv-thick: 1px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
    padding-top: var(--dv-space);
    padding-bottom: var(--dv-space);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, system-ui, sans-serif);
}

.divider.dv-s-sm { --dv-space: 1.1rem; }
.divider.dv-s-md { --dv-space: 2.4rem; }
.divider.dv-s-lg { --dv-space: max(3.5rem, min(9cqi, 6.5rem)); --dv-space: clamp(3.5rem, 9cqi, 6.5rem); }

.divider.dv-w-hairline { --dv-thick: 1px; }
.divider.dv-w-medium   { --dv-thick: .125rem; }

.dv-rule {
    display: block;
    flex: 1;
    height: var(--dv-thick);
    border: 0;
    background: var(--dv-line);
}

.divider--line { display: flex; }
.divider--line .dv-rule {
    flex: 0 1 var(--dv-width);
    max-width: var(--dv-width);
    margin-left: auto;
    margin-right: auto;
}

.divider--labelled {
    display: flex;
    align-items: center;
    gap: max(1rem, min(3cqi, 2rem));
    gap: clamp(1rem, 3cqi, 2rem);
    max-width: var(--dv-width);
    margin-left: auto;
    margin-right: auto;
}
.divider--labelled .dv-label {
    flex: 0 0 auto;
    color: var(--dv-muted);
    font: 600 .72rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 .72rem/1 var(--font-mono, ui-monospace, monospace);
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
}

.divider--dots { display: flex; justify-content: center; }
.dv-dots {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    color: var(--dv-line);
    line-height: 1;
}
.dv-dots i {
    width: .1875rem; height: .1875rem; border-radius: 50%;
    background: currentColor;
    opacity: .9;
}
.dv-dots b {
    font: 400 1.05rem/1 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 1.05rem/1 var(--font-display, system-ui, sans-serif);
    color: var(--dv-accent);
    transform: translateY(-.04em);
}

.divider--gradient { display: flex; }
.divider--gradient .dv-rule {
    flex: 0 1 var(--dv-width);
    max-width: var(--dv-width);
    margin-left: auto;
    margin-right: auto;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 68, 85, 0.55) 50%,
        transparent 100%);
}

@supports (color: color-mix(in lch, red, blue)) {
.divider--gradient .dv-rule {
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--dv-accent) 55%, transparent) 50%,
        transparent 100%);
}
}

.divider--marquee {
    overflow: hidden;
    border-top: var(--dv-thick) solid var(--dv-line);
    border-bottom: var(--dv-thick) solid var(--dv-line);
    padding-top: max(.7rem, min(calc(2 * var(--pe-vw)), 1.2rem));
    padding-bottom: max(.7rem, min(calc(2 * var(--pe-vw)), 1.2rem));
    padding-top: max(.7rem, min(calc(2 * var(--pe-vw)), 1.2rem));
    padding-top: clamp(.7rem, calc(2 * var(--pe-vw)), 1.2rem);
    padding-bottom: max(.7rem, min(calc(2 * var(--pe-vw)), 1.2rem));
    padding-bottom: clamp(.7rem, calc(2 * var(--pe-vw)), 1.2rem);
    margin-top: calc(var(--dv-space) - max(.7rem, min(calc(2 * var(--pe-vw)), 1.2rem)));
    margin-bottom: calc(var(--dv-space) - max(.7rem, min(calc(2 * var(--pe-vw)), 1.2rem)));
    margin-top: calc(var(--dv-space) - max(.7rem, min(calc(2 * var(--pe-vw)), 1.2rem)));
    margin-top: calc(var(--dv-space) - clamp(.7rem, calc(2 * var(--pe-vw)), 1.2rem));
    margin-bottom: calc(var(--dv-space) - max(.7rem, min(calc(2 * var(--pe-vw)), 1.2rem)));
    margin-bottom: calc(var(--dv-space) - clamp(.7rem, calc(2 * var(--pe-vw)), 1.2rem));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.dv-track {
    display: inline-flex;
    white-space: nowrap;
    will-change: transform;
    animation: dv-marquee 26s linear infinite;
    animation: dv-marquee var(--dv-duration, 26s) linear infinite;
}
.dv-phrase {
    padding-right: 1.5rem;
    color: var(--dv-ink);
    font: 600 max(1.05rem, min(3cqi, 1.9rem))/1 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 max(1.05rem, min(3cqi, 1.9rem))/1 var(--font-display, system-ui, sans-serif);
    font: 600 max(1.05rem, min(3cqi, 1.9rem))/1 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 clamp(1.05rem, 3cqi, 1.9rem)/1 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 clamp(1.05rem, 3cqi, 1.9rem)/1 var(--font-display, system-ui, sans-serif);
    letter-spacing: -.005em;
    text-transform: uppercase;
}
@keyframes dv-marquee { to { transform: translateX(-50%); } }
.divider--marquee:hover .dv-track { animation-play-state: paused; }

@container (max-width: 620px) {
    .divider.dv-s-lg { --dv-space: max(2.4rem, min(8cqi, 4rem)); --dv-space: clamp(2.4rem, 8cqi, 4rem); }
    .divider--labelled { gap: 1rem; }
}

/* blocks/drawing-sheet.css */

.drawing-sheet {
    --dsh-ink: var(--ink, #0a0a0a);
    --dsh-muted: var(--muted, #6b6b6b);
    --dsh-line: var(--line, #e3e3e3);
    --dsh-paper: var(--paper, #fff);
    --dsh-surface: var(--surface, #ece7dd);
    --dsh-accent: var(--accent, #635bff);
    --dsh-ground: transparent;
    --dsh-pad: var(--sp-4, calc(3 * var(--pe-vw)));
    --dsh-block-w: 26em;
    position: relative;
    width: 100%; margin: 0;
    padding: var(--dsh-pad);
    padding-bottom: calc(var(--dsh-pad) * 2.2);
    background: transparent;
    background: var(--dsh-ground);
    color: #222;
    color: var(--dsh-ink);
    container-type: inline-size;
}

.drawing-sheet.dsh-well-timber { --dsh-ground: var(--timber, var(--dsh-surface)); }
.drawing-sheet.dsh-well-paper { --dsh-ground: var(--dsh-paper); }
.drawing-sheet.dsh-well-ink { --dsh-ground: var(--invert-bg, var(--dsh-ink)); --dsh-ink: var(--invert-fg, var(--dsh-paper)); --dsh-line: color-mix(in srgb, var(--invert-fg, #fff) 26%, transparent); --dsh-muted: color-mix(in srgb, var(--invert-fg, #fff) 62%, transparent); }
.drawing-sheet.dsh-well-none { --dsh-ground: transparent; --dsh-pad: 0; padding-bottom: var(--sp-5, calc(4.8 * var(--pe-vw))); }

.drawing-sheet.dsh-ruling-on {
    background-image:
        repeating-linear-gradient(to right, rgba(3, 3, 3, 0.09) 0,rgba(3, 3, 3, 0.09) .07em, transparent .07em, transparent 3.4em),
        repeating-linear-gradient(to bottom, rgba(3, 3, 3, 0.09) 0,rgba(3, 3, 3, 0.09) .07em, transparent .07em, transparent 3.4em);
    background-image:
        repeating-linear-gradient(to right, rgba(3, 3, 3, 0.09) 0,rgba(3, 3, 3, 0.09) .07em, transparent .07em 3.4em),
        repeating-linear-gradient(to bottom, rgba(3, 3, 3, 0.09) 0,rgba(3, 3, 3, 0.09) .07em, transparent .07em 3.4em);
    background-image:
        repeating-linear-gradient(to right, rgba(3, 3, 3, 0.09) 0 .07em, transparent .07em 3.4em),
        repeating-linear-gradient(to bottom, rgba(3, 3, 3, 0.09) 0 .07em, transparent .07em 3.4em);
}

@supports (background: repeating-linear-gradient(red 0%, red 0% 1%, red 2%)) {
.drawing-sheet.dsh-ruling-on {
    background-image:
        repeating-linear-gradient(to right, rgba(3, 3, 3, 0.09) 0,rgba(3, 3, 3, 0.09) .07em, transparent .07em var(--dsh-step, 3.4em)),
        repeating-linear-gradient(to bottom, rgba(3, 3, 3, 0.09) 0,rgba(3, 3, 3, 0.09) .07em, transparent .07em var(--dsh-step, 3.4em));
    background-image:
        repeating-linear-gradient(to right, rgba(3, 3, 3, 0.09) 0 .07em, transparent .07em var(--dsh-step, 3.4em)),
        repeating-linear-gradient(to bottom, rgba(3, 3, 3, 0.09) 0 .07em, transparent .07em var(--dsh-step, 3.4em));
}
}

@supports (background: repeating-linear-gradient(red 0%, red 0% 1%, red 2%)) and (color: color-mix(in lch, red, blue)) {
.drawing-sheet.dsh-ruling-on {
    background-image:
        repeating-linear-gradient(to right, color-mix(in srgb, var(--dsh-ink) 9%, transparent) 0 .07em, transparent .07em 3.4em),
        repeating-linear-gradient(to bottom, color-mix(in srgb, var(--dsh-ink) 9%, transparent) 0 .07em, transparent .07em 3.4em);
    background-image:
        repeating-linear-gradient(to right, color-mix(in srgb, var(--dsh-ink) 9%, transparent) 0 .07em, transparent .07em var(--dsh-step, 3.4em)),
        repeating-linear-gradient(to bottom, color-mix(in srgb, var(--dsh-ink) 9%, transparent) 0 .07em, transparent .07em var(--dsh-step, 3.4em));
}
}
.drawing-sheet.dsh-ruling-fine { --dsh-step: 1.7em; background-image: repeating-linear-gradient(to right, rgba(2, 2, 2, 0.07) 0,rgba(2, 2, 2, 0.07) .07em, transparent .07em, transparent 1.7em), repeating-linear-gradient(to bottom, rgba(2, 2, 2, 0.07) 0,rgba(2, 2, 2, 0.07) .07em, transparent .07em, transparent 1.7em); background-image: repeating-linear-gradient(to right, rgba(2, 2, 2, 0.07) 0,rgba(2, 2, 2, 0.07) .07em, transparent .07em 1.7em), repeating-linear-gradient(to bottom, rgba(2, 2, 2, 0.07) 0,rgba(2, 2, 2, 0.07) .07em, transparent .07em 1.7em); background-image: repeating-linear-gradient(to right, rgba(2, 2, 2, 0.07) 0 .07em, transparent .07em 1.7em), repeating-linear-gradient(to bottom, rgba(2, 2, 2, 0.07) 0 .07em, transparent .07em 1.7em); }

@supports (background: repeating-linear-gradient(red 0%, red 0% 1%, red 2%)) {
.drawing-sheet.dsh-ruling-fine { background-image: repeating-linear-gradient(to right, rgba(2, 2, 2, 0.07) 0,rgba(2, 2, 2, 0.07) .07em, transparent .07em var(--dsh-step)), repeating-linear-gradient(to bottom, rgba(2, 2, 2, 0.07) 0,rgba(2, 2, 2, 0.07) .07em, transparent .07em var(--dsh-step)); background-image: repeating-linear-gradient(to right, rgba(2, 2, 2, 0.07) 0 .07em, transparent .07em var(--dsh-step)), repeating-linear-gradient(to bottom, rgba(2, 2, 2, 0.07) 0 .07em, transparent .07em var(--dsh-step)); }
}

@supports (background: repeating-linear-gradient(red 0%, red 0% 1%, red 2%)) and (color: color-mix(in lch, red, blue)) {
.drawing-sheet.dsh-ruling-fine { background-image: repeating-linear-gradient(to right, color-mix(in srgb, var(--dsh-ink) 7%, transparent) 0 .07em, transparent .07em 1.7em), repeating-linear-gradient(to bottom, color-mix(in srgb, var(--dsh-ink) 7%, transparent) 0 .07em, transparent .07em 1.7em); background-image: repeating-linear-gradient(to right, color-mix(in srgb, var(--dsh-ink) 7%, transparent) 0 .07em, transparent .07em var(--dsh-step)), repeating-linear-gradient(to bottom, color-mix(in srgb, var(--dsh-ink) 7%, transparent) 0 .07em, transparent .07em var(--dsh-step)); }
}

.drawing-sheet.dsh-frame-on { border: 1px solid var(--dsh-line); outline: .1875rem solid var(--dsh-ground); outline-offset: -0.55em; }
.drawing-sheet.dsh-frame-rule { border: 1px solid var(--dsh-line); }

.drawing-sheet .dsh-label {
    margin: 0 0 var(--sp-2, calc(1 * var(--pe-vw)));
    color: var(--dsh-accent);
    font: 500 .78rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 var(--fs-label, .78rem)/1 var(--font-mono, ui-monospace, monospace);
    letter-spacing: .16em; text-transform: uppercase;
}
.drawing-sheet .dsh-title {
    margin: 0; max-width: 24ch;
    color: var(--dsh-ink);
    font: 400 2rem/1.04 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 var(--fs-h3, 2rem)/1.04 var(--font-display, Georgia, serif);
    letter-spacing: -.015em;
}
.drawing-sheet .dsh-scale-note {
    margin: var(--sp-2, calc(1 * var(--pe-vw))) 0 0;
    color: var(--dsh-muted);
    font: 400 .78rem/1.5 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 400 var(--fs-label, .78rem)/1.5 var(--font-mono, ui-monospace, monospace);
    letter-spacing: .1em; text-transform: uppercase;
}

.drawing-sheet .pd-svg {
    width: 100%; height: auto;
    aspect-ratio: 1.6;
    aspect-ratio: var(--dsh-ratio, 1.6);
    margin-top: var(--sp-4, calc(3 * var(--pe-vw)));
    overflow: visible;
}
.drawing-sheet.dsh-block-right .pd-svg,
.drawing-sheet.dsh-block-left .pd-svg { margin-bottom: var(--sp-3, calc(1.8 * var(--pe-vw))); }

.drawing-sheet .dsh-block {
    position: absolute; bottom: var(--dsh-pad); width: min(var(--dsh-block-w), 82%);
    border: 1px solid var(--dsh-ink);
    background: color-mix(in srgb, var(--dsh-ground) 88%, var(--dsh-paper));
}
.drawing-sheet.dsh-block-right .dsh-block { right: var(--dsh-pad); }
.drawing-sheet.dsh-block-left .dsh-block { left: var(--dsh-pad); }
.drawing-sheet.dsh-block-over .dsh-block { position: static; width: 100%; margin-top: var(--sp-3, calc(1.8 * var(--pe-vw))); }
.drawing-sheet.dsh-block-none .dsh-block { display: none; }
.drawing-sheet.dsh-block-none, .drawing-sheet.dsh-block-over { padding-bottom: var(--dsh-pad); }

.drawing-sheet .dsh-cell {
    padding: .52em .8em;
    border-top: 1px solid rgba(12, 12, 12, 0.34);
}

@supports (color: color-mix(in lch, red, blue)) {
.drawing-sheet .dsh-cell {
    border-top: 1px solid color-mix(in srgb, var(--dsh-ink) 34%, transparent);
}
}
.drawing-sheet .dsh-cell:first-child { border-top: 0; }
.drawing-sheet .dsh-cell-wide { background: rgba(2, 2, 2, 0.06); }

@supports (color: color-mix(in lch, red, blue)) {
.drawing-sheet .dsh-cell-wide { background: color-mix(in srgb, var(--dsh-ink) 6%, transparent); }
}
.drawing-sheet .dsh-cell-rev .dsh-v { color: var(--dsh-accent); font-weight: 700; }
.drawing-sheet .dsh-k {
    display: inline-block; width: 7.2em;
    color: var(--dsh-muted);
    font: 400 .72rem/1.5 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 400 var(--fs-label, .72rem)/1.5 var(--font-mono, ui-monospace, monospace);
    letter-spacing: .12em; text-transform: uppercase;
    vertical-align: baseline;
}
.drawing-sheet .dsh-v {
    color: var(--dsh-ink);
    font: 500 .78rem/1.5 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 var(--fs-label, .78rem)/1.5 var(--font-mono, ui-monospace, monospace);
    letter-spacing: .04em;
}
.drawing-sheet .dsh-cell-wide .dsh-v { font-size: 1rem; font-size: var(--fs-body, 1rem); letter-spacing: 0; }

.drawing-sheet .dsh-revs {
    position: absolute; left: var(--dsh-pad); bottom: var(--dsh-pad);
    width: min(38em, 60%); margin: 0; padding: 0; list-style: none;
}
.drawing-sheet.dsh-block-left .dsh-revs { left: auto; right: var(--dsh-pad); }
.drawing-sheet.dsh-block-over .dsh-revs, .drawing-sheet.dsh-block-none .dsh-revs {
    position: static; width: 100%; margin-top: var(--sp-3, calc(1.8 * var(--pe-vw)));
}
.drawing-sheet .dsh-rev {
    padding: .4em 0;
    border-top: 1px solid var(--dsh-line);
    color: var(--dsh-muted);
    font: 400 .72rem/1.5 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 400 var(--fs-label, .72rem)/1.5 var(--font-mono, ui-monospace, monospace);
    letter-spacing: .05em;
}
.drawing-sheet .dsh-rev-code {
    display: inline-block; width: 3.4em;
    color: var(--dsh-accent); font-weight: 700;
}
.drawing-sheet .dsh-rev-note { color: var(--dsh-ink); }
.drawing-sheet .dsh-rev-date, .drawing-sheet .dsh-rev-by { padding-left: .9em; }

.drawing-sheet .dsh-notes {
    position: absolute; left: var(--dsh-pad); bottom: calc(var(--dsh-pad) * .25);
    max-width: 60%;
    color: var(--dsh-muted);
    font: 400 .72rem/1.5 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 400 var(--fs-label, .72rem)/1.5 var(--font-mono, ui-monospace, monospace);
    letter-spacing: .1em; text-transform: uppercase;
}
.drawing-sheet.dsh-block-over .dsh-notes, .drawing-sheet.dsh-block-none .dsh-notes {
    position: static; max-width: 100%; margin: var(--sp-2, calc(1 * var(--pe-vw))) 0 0;
}

@container (max-width: 42em) {
    .drawing-sheet { padding-bottom: var(--dsh-pad); }
    .drawing-sheet .dsh-block, .drawing-sheet .dsh-revs, .drawing-sheet .dsh-notes {
        position: static; width: 100%; max-width: 100%; margin-top: var(--sp-3, calc(1.8 * var(--pe-vw)));
    }
    .drawing-sheet .dsh-k { width: 6em; }
}

.drawing-sheet.dsh-align-center { text-align: center; }
.drawing-sheet.dsh-align-right { text-align: right; }

/* blocks/editable-gallery.css */

.egal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-columns: repeat(var(--egal-cols, 3), minmax(0, 1fr));
    grid-auto-rows: var(--egal-row, calc(15.5 * var(--pe-vw)));
    grid-auto-flow: dense;
    grid-gap: var(--egal-gap, max(.6rem, min(calc(1.1 * var(--pe-vw)), 1rem)));
    grid-gap: var(--egal-gap, clamp(.6rem, calc(1.1 * var(--pe-vw)), 1rem));
    gap: var(--egal-gap, max(.6rem, min(calc(1.1 * var(--pe-vw)), 1rem)));
    gap: var(--egal-gap, clamp(.6rem, calc(1.1 * var(--pe-vw)), 1rem));
}
.egal-tile {
  margin: 0;
    position: relative; overflow: hidden;
    border-radius: 1vh;
    border-radius: var(--egal-radius, var(--r-md, .75rem));
    box-shadow: 0 1.875rem 3.75rem -2.125rem rgba(0, 0, 0, .55);
    box-shadow: var(--egal-shadow, 0 1.875rem 3.75rem -2.125rem rgba(0, 0, 0, .55));
    display: flex; align-items: flex-end;
}
.egal-tile .imagesingle { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; z-index: 0; border-radius: inherit; overflow: hidden; }
.egal-tile .imagesingle img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.egal-tile::before {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, .58), transparent 52%);
    background: var(--egal-tint, linear-gradient(to top, rgba(0, 0, 0, .58), transparent 52%));
}
.egal-cap {
    position: relative; z-index: 2; margin: 0;
    padding: var(--egal-cap-pad, max(.9rem, min(calc(2 * var(--pe-vw)), 1.4rem)));
    padding: var(--egal-cap-pad, clamp(.9rem, calc(2 * var(--pe-vw)), 1.4rem));
    font: 600 .74rem/1.3 ui-monospace, 'SF Mono', Menlo, monospace;
    font: var(--egal-cap-font, 600 .74rem/1.3 var(--font-mono, ui-monospace, monospace));
    letter-spacing: .08em; text-transform: uppercase;
    color: #fff;
    color: var(--egal-cap-color, #fff); text-shadow: 0 1px .5rem rgba(0, 0, 0, .6);
}
.egal-tile--wide { grid-column: span 2; }
.egal-tile--tall { grid-row: span 2; }

@media (max-width: 768px) {
    .egal-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: calc(34 * var(--pe-vw)); }
    .egal-tile--wide { grid-column: span 2; }
    .egal-tile--tall { grid-row: span 1; }
}

/* blocks/endings.css */

.contact { display: grid; grid-template-columns: 1fr 1.2fr; grid-gap: max(1.5rem, min(calc(5 * var(--pe-vw)), 4rem)); grid-gap: clamp(1.5rem, calc(5 * var(--pe-vw)), 4rem); gap: max(1.5rem, min(calc(5 * var(--pe-vw)), 4rem)); gap: clamp(1.5rem, calc(5 * var(--pe-vw)), 4rem); align-items: start; }
.contact-info { display: grid; grid-template-columns: max-content 1fr; grid-gap: .5rem 1.5rem; gap: .5rem 1.5rem; font: 400 1rem/1.5 'Open Sans', Arial, Helvetica, sans-serif; font: 400 1rem/1.5 var(--font-text); }
.contact-info dt { font: 600 .75rem/1.6 ui-monospace, 'SF Mono', Menlo, monospace; font: 600 .75rem/1.6 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #626262; color: var(--muted); }
.contact-info dd { margin: 0; color: #222; color: var(--ink); }
.contact-form { display: flex; flex-direction: column; gap: 1rem; padding: max(1.4rem, min(calc(3 * var(--pe-vw)), 2.4rem)); padding: clamp(1.4rem, calc(3 * var(--pe-vw)), 2.4rem);
    background: #f9f9f9;
    background: var(--card-bg, var(--page-bg)); border: 1px solid rgba(5, 5, 5, 0.14); border: 1px solid var(--line, rgba(5, 5, 5, 0.14)); border-radius: 1vh; border-radius: var(--radius, 1vh); }

@supports (color: color-mix(in lch, red, blue)) {
.contact-form { border: 1px solid var(--line, color-mix(in srgb, var(--ink) 14%, transparent)); }
}
.contact-form .field { display: flex; flex-direction: column; gap: .4rem; }
.contact-form .field label { font: 600 .75rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 600 .75rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: #626262; color: var(--muted); }
.contact-form .field input, .contact-form .field textarea, .contact-form .field select { font: 400 1rem/1.4 'Open Sans', Arial, Helvetica, sans-serif; font: 400 1rem/1.4 var(--font-text); color: #222; color: var(--ink); background: #f9f9f9; background: var(--page-bg);
    border: 1px solid rgba(5, 5, 5, 0.14);
    border: 1px solid var(--line, rgba(6, 6, 6, 0.18)); border-radius: calc(1vh - .125rem); border-radius: calc(var(--radius, 1vh) - .125rem); padding: .7em .8em; width: 100%; }

@supports (color: color-mix(in lch, red, blue)) {
.contact-form .field input, .contact-form .field textarea, .contact-form .field select {
    border: 1px solid var(--line, color-mix(in srgb, var(--ink) 18%, transparent)); }
}
.contact-form .field :is(input, textarea, select) { font: 400 1rem/1.4 'Open Sans', Arial, Helvetica, sans-serif; font: 400 1rem/1.4 var(--font-text); color: #222; color: var(--ink); background: #f9f9f9; background: var(--page-bg);
    border: 1px solid rgba(5, 5, 5, 0.14);
    border: 1px solid var(--line, rgba(6, 6, 6, 0.18)); border-radius: calc(1vh - .125rem); border-radius: calc(var(--radius, 1vh) - .125rem); padding: .7em .8em; width: 100%; }

@supports (color: color-mix(in lch, red, blue)) {
.contact-form .field :is(input, textarea, select) {
    border: 1px solid var(--line, color-mix(in srgb, var(--ink) 18%, transparent)); }
}
.contact-form .field input:focus, .contact-form .field textarea:focus, .contact-form .field select:focus { outline: .125rem solid #007b9a; outline: .125rem solid var(--accent); outline-offset: 1px; }
.contact-form .field :is(input, textarea, select):focus { outline: .125rem solid #007b9a; outline: .125rem solid var(--accent); outline-offset: 1px; }
@media (max-width: 768px) { .contact { grid-template-columns: 1fr; } }

.newsletter { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; justify-content: space-between;
    padding-top: max(1.4rem, min(calc(4 * var(--pe-vw)), 2.6rem));
    padding-bottom: max(1.4rem, min(calc(4 * var(--pe-vw)), 2.6rem));
    padding-top: max(1.4rem, min(calc(4 * var(--pe-vw)), 2.6rem));
    padding-top: clamp(1.4rem, calc(4 * var(--pe-vw)), 2.6rem);
    padding-bottom: max(1.4rem, min(calc(4 * var(--pe-vw)), 2.6rem));
    padding-bottom: clamp(1.4rem, calc(4 * var(--pe-vw)), 2.6rem); border-top: 1px solid rgba(5, 5, 5, 0.14); border-bottom: 1px solid rgba(5, 5, 5, 0.14); border-top: 1px solid var(--line, rgba(4, 4, 4, 0.12)); border-bottom: 1px solid var(--line, rgba(4, 4, 4, 0.12)); }

@supports (color: color-mix(in lch, red, blue)) {
.newsletter { border-top: 1px solid var(--line, color-mix(in srgb, var(--ink) 12%, transparent)); border-bottom: 1px solid var(--line, color-mix(in srgb, var(--ink) 12%, transparent)); }
}
.newsletter-copy { font: 600 max(1.2rem, min(calc(2.6 * var(--pe-vw)), 1.8rem))/1.1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 max(1.2rem, min(calc(2.6 * var(--pe-vw)), 1.8rem))/1.1 var(--font-display); font: 600 max(1.2rem, min(calc(2.6 * var(--pe-vw)), 1.8rem))/1.1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 clamp(1.2rem, calc(2.6 * var(--pe-vw)), 1.8rem)/1.1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 clamp(1.2rem, calc(2.6 * var(--pe-vw)), 1.8rem)/1.1 var(--font-display); }
.newsletter-form { display: flex; gap: 0; flex: 0 1 26.25rem; }
.newsletter-form input { flex: 1; border: 1px solid #222; border: 1px solid var(--ink); border-right: 0; border-radius: 1vh 0 0 1vh; border-radius: var(--radius, 1vh) 0 0 var(--radius, 1vh); padding: .8em 1em; font: 400 1rem/1 'Open Sans', Arial, Helvetica, sans-serif; font: 400 1rem/1 var(--font-text); background: #f9f9f9; background: var(--page-bg); color: #222; color: var(--ink); }
.newsletter-form .btn { border-radius: 0 1vh 1vh 0; border-radius: 0 var(--radius, 1vh) var(--radius, 1vh) 0; }
.newsletter-note { flex-basis: 100%; font: 400 .75rem/1.4 ui-monospace, 'SF Mono', Menlo, monospace; font: 400 .75rem/1.4 var(--font-mono); color: #626262; color: var(--muted); }

.site-footer { padding: var(--space, max(2rem, min(calc(5 * var(--pe-vw)), 5rem))); padding: var(--space, clamp(2rem, calc(5 * var(--pe-vw)), 5rem)); display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); grid-gap: max(1.5rem, min(calc(4 * var(--pe-vw)), 3rem)); grid-gap: clamp(1.5rem, calc(4 * var(--pe-vw)), 3rem); gap: max(1.5rem, min(calc(4 * var(--pe-vw)), 3rem)); gap: clamp(1.5rem, calc(4 * var(--pe-vw)), 3rem); }
.footer-brand { font: 600 max(2rem, min(calc(6 * var(--pe-vw)), 4rem))/.95 'Open Sans', Arial, Helvetica, sans-serif; font: 600 max(2rem, min(calc(6 * var(--pe-vw)), 4rem))/.95 var(--font-display); font: 600 max(2rem, min(calc(6 * var(--pe-vw)), 4rem))/.95 'Open Sans', Arial, Helvetica, sans-serif; font: 600 clamp(2rem, calc(6 * var(--pe-vw)), 4rem)/.95 'Open Sans', Arial, Helvetica, sans-serif; font: 600 clamp(2rem, calc(6 * var(--pe-vw)), 4rem)/.95 var(--font-display); letter-spacing: -.03em; }
.footer-brand .brand-dot { color: #007b9a; color: var(--accent); }
.footer-col { display: flex; flex-direction: column; gap: .6rem; }
.footer-col-head { font: 600 .6875rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 600 .6875rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #007b9a; color: var(--accent); margin-bottom: .3rem; }
.footer-col a { color: #626262; color: var(--muted); -webkit-text-decoration: none; text-decoration: none; font: 400 .95rem/1 'Open Sans', Arial, Helvetica, sans-serif; font: 400 .95rem/1 var(--font-text); transition: color .2s; }
.footer-col a:hover { color: #222; color: var(--ink); }
@media (max-width: 768px) { .site-footer { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

.legal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.2rem var(--space, max(2rem, min(calc(5 * var(--pe-vw)), 5rem)));
    padding: 1.2rem var(--space, clamp(2rem, calc(5 * var(--pe-vw)), 5rem)); border-top: 1px solid rgba(5, 5, 5, 0.14); border-top: 1px solid var(--line, rgba(4, 4, 4, 0.12));
    font: 400 .75rem/1.4 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 400 .75rem/1.4 var(--font-mono); color: #626262; color: var(--muted); }

@supports (color: color-mix(in lch, red, blue)) {
.legal-bar { border-top: 1px solid var(--line, color-mix(in srgb, var(--ink) 12%, transparent)); }
}
.legal-bar nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.legal-bar a { color: #626262; color: var(--muted); -webkit-text-decoration: none; text-decoration: none; }
.legal-bar a:hover { color: #222; color: var(--ink); }

/* blocks/event-log.css */

.event-log {
    --el-ink: var(--ink, #0a0a0a);
    --el-body: var(--body, var(--ink, #0a0a0a));
    --el-muted: var(--muted, #6b6b6b);
    --el-line: var(--line, #e3e3e3);
    --el-paper: var(--paper, #fff);
    --el-tint: var(--tint, color-mix(in srgb, var(--ink, #0a0a0a) 4%, var(--paper, #fff)));
    --el-accent: var(--accent, #635bff);
    --el-ok: var(--ok-ink, var(--ok, #15803d));
    --el-warn: var(--warn-ink, var(--warn, #92400e));
    --el-fail: var(--fail-ink, var(--accent-ink, var(--accent, #635bff)));
    --el-r: calc(var(--el-radius, 1.2) * 1cqi);
    --el-row: 1.1em;
    --el-fill: 999;
    --el-chip: 1.5em;
    width: 100%; margin: 0; color: #222; color: var(--el-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif);
    font-size: max(calc(.9 * var(--pe-vw)), 1cqi);
}
.event-log.el-density-compact { --el-row: .7em; }
.event-log.el-ic-small { --el-chip: 1.2em; }
.event-log.el-ic-large { --el-chip: 1.9em; }

.event-log.el-tone-panel {
    background: var(--el-paper); border-radius: var(--el-r); overflow: hidden;
    box-shadow: 0 0 0 1px var(--el-line),
                0 .15cqi .3cqi rgba(2, 2, 2, 0.06),
                0 2.2cqi 4.4cqi -1.4cqi rgba(4, 4, 4, 0.12);
}

@supports (color: color-mix(in lch, red, blue)) {
.event-log.el-tone-panel {
    box-shadow: 0 0 0 1px var(--el-line),
                0 .15cqi .3cqi color-mix(in srgb, var(--el-ink) 6%, transparent),
                0 2.2cqi 4.4cqi -1.4cqi color-mix(in srgb, var(--el-ink) 12%, transparent);
}
}

.event-log .el-bar { --row-item: auto; --row-gap: .9em; align-items: center; padding: 1em 1.4em; border-bottom: 1px solid var(--el-line); }
.event-log .el-bar > * { flex: 0 0 auto; }
.event-log .el-title { margin: 0; font-size: 1.15em; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.event-log .el-meta { color: var(--el-muted); font: 500 .85em/1.2 ui-monospace, 'SF Mono', Menlo, monospace; font: 500 .85em/1.2 var(--font-mono, monospace); letter-spacing: .02em; }
.event-log .el-live { --row-item: auto; --row-gap: .45em; align-items: center; margin-left: auto; padding: .3em .75em .3em .6em; border-radius: 99em; background: var(--el-tint); }
.event-log .el-live > * { flex: 0 0 auto; }
.event-log .el-live-text { font: 500 .85em/1.2 ui-monospace, 'SF Mono', Menlo, monospace; font: 500 .85em/1.2 var(--font-mono, monospace); letter-spacing: .04em; text-transform: uppercase; color: var(--el-ink); }

.event-log .el-dot { display: inline-block; width: .55em; height: .55em; font-size: 1em; line-height: 1; color: var(--el-muted); }
.event-log .el-dot::before { font-size: .55em; vertical-align: .18em; }
.event-log .el-dot-live { color: var(--el-accent); border-radius: 50%; box-shadow: 0 0 0 .28em rgba(0, 22, 28, 0.18); }

@supports (color: color-mix(in lch, red, blue)) {
.event-log .el-dot-live { box-shadow: 0 0 0 .28em color-mix(in srgb, var(--el-accent) 18%, transparent); }
}

.event-log .el-head { --row-flow: row nowrap; --row-gap: 0; padding: .7em 1.4em .55em; border-bottom: 1px solid var(--el-line); }
.event-log .el-h { box-sizing: border-box; padding-right: 1em; color: var(--el-muted); font: 500 .85em/1.2 ui-monospace, 'SF Mono', Menlo, monospace; font: 500 .85em/1.2 var(--font-mono, monospace); letter-spacing: .06em; text-transform: uppercase; }

.event-log .el-rows { margin: 0; }
.event-log .el-row { --row-flow: row nowrap; --row-gap: 0; align-items: center; padding: var(--el-row) 1.4em; border-bottom: 1px solid var(--el-line); transition: background .18s cubic-bezier(.4, 0, .2, 1); transition: background .18s var(--ease, ease);
    opacity: max(0, min(calc(var(--el-fill) - 1 + 1), 1));
    opacity: max(0, min(calc(var(--el-fill) - var(--n, 1) + 1), 1));
    opacity: max(0, min(calc(var(--el-fill) - 1 + 1), 1));
    opacity: clamp(0, calc(var(--el-fill) - 1 + 1), 1);
    opacity: clamp(0, calc(var(--el-fill) - var(--n, 1) + 1), 1); translate: 0 calc((1 - max(0, min(calc(var(--el-fill) - 1 + 1), 1))) * .6em); translate: 0 calc((1 - max(0, min(calc(var(--el-fill) - var(--n, 1) + 1), 1))) * .6em); translate: 0 calc((1 - max(0, min(calc(var(--el-fill) - 1 + 1), 1))) * .6em); translate: 0 calc((1 - clamp(0, calc(var(--el-fill) - 1 + 1), 1)) * .6em); translate: 0 calc((1 - clamp(0, calc(var(--el-fill) - var(--n, 1) + 1), 1)) * .6em); }
.event-log .el-row:last-child { border-bottom: 0; }
.event-log .el-row:hover { background: var(--el-tint); }
.event-log.el-stripes-1 .el-row:nth-child(even) { background: color-mix(in srgb, var(--el-tint) 60%, var(--el-paper)); }

.event-log .el-cell { box-sizing: border-box; min-width: 0; padding-right: 1em; line-height: 1.3; }
.event-log .el-h:nth-child(1), .event-log .el-time    { flex: 0 0 12%; }
.event-log .el-h:nth-child(2), .event-log .el-channel { flex: 0 0 16%; }
.event-log .el-h:nth-child(3), .event-log .el-to      { flex: 1 1 22%; }
.event-log .el-h:nth-child(4), .event-log .el-event   { flex: 1 1 21%; }
.event-log .el-h:nth-child(5), .event-log .el-status  { flex: 0 0 15%; white-space: nowrap; }
.event-log .el-h:nth-child(6), .event-log .el-latency { flex: 0 0 10%; text-align: right; white-space: nowrap; padding-right: 0; }
.event-log .el-time { font: 500 .9em/1.3 ui-monospace, 'SF Mono', Menlo, monospace; font: 500 .9em/1.3 var(--font-mono, monospace); color: var(--el-muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.event-log .el-channel { --row-item: auto; --row-gap: .5em; align-items: center; }
.event-log .el-channel > * { flex: 0 0 auto; }
.event-log .el-chip { width: var(--el-chip); height: var(--el-chip); line-height: var(--el-chip); text-align: center; border-radius: .3em; background: var(--el-tint); color: var(--el-ink); font-size: 1em; }
.event-log .el-chip::before { font-size: .78em; vertical-align: 0; line-height: var(--el-chip); }
.event-log .el-chname { font-weight: 500; letter-spacing: -.005em; }
.event-log .el-to { font: 400 .92em/1.3 ui-monospace, 'SF Mono', Menlo, monospace; font: 400 .92em/1.3 var(--font-mono, monospace); color: var(--el-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-log .el-event { color: var(--el-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-log .el-status { --row-item: auto; --row-gap: .45em; align-items: center; font-weight: 500; }
.event-log .el-status > * { flex: 0 0 auto; }
.event-log .el-latency { font: 500 .9em/1.3 ui-monospace, 'SF Mono', Menlo, monospace; font: 500 .9em/1.3 var(--font-mono, monospace); color: var(--el-ink); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

.event-log .el-state-delivered .el-dot, .event-log .el-state-delivered .el-stext { color: var(--el-ok); }
.event-log .el-state-sent .el-dot, .event-log .el-state-sent .el-stext { color: var(--el-ok); }
.event-log .el-state-queued .el-dot, .event-log .el-state-queued .el-stext { color: var(--el-warn); }
.event-log .el-state-pending .el-dot { color: var(--el-muted); }
.event-log .el-state-pending .el-stext { color: var(--el-muted); }
.event-log .el-state-failed .el-dot, .event-log .el-state-failed .el-stext { color: var(--el-fail); }

.event-log .el-empty { margin: 0; padding: 2.4em 1.4em; text-align: center; color: var(--el-muted); font-size: .95em; }
.event-log .el-rows:has(.el-row) + .el-empty { display: none; }
.event-log.el-align-center .el-title { text-align: center; }

@container (max-width: 40rem) {
    .event-log { font-size: 3.4cqi; }
    .event-log .el-to, .event-log .el-h:nth-child(3), .event-log .el-event, .event-log .el-h:nth-child(4) { display: none; }
    .event-log .el-row, .event-log .el-head { --row-flow: row nowrap; }
    .event-log .el-h { white-space: nowrap; overflow: hidden; }
    .event-log .el-h:nth-child(1), .event-log .el-time { flex: 0 0 27%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .event-log .el-h:nth-child(2), .event-log .el-channel { flex: 1 1 28%; }
    .event-log .el-h:nth-child(5), .event-log .el-status { flex: 0 0 29%; }
    .event-log .el-h:nth-child(6), .event-log .el-latency { flex: 0 0 16%; }
    .event-log .el-bar { --row-flow: row wrap; }
    .event-log .el-meta { order: 3; flex: 1 1 100%; }
    .event-log .el-live { margin-left: auto; }
}

/* blocks/facts-row.css */

.facts-row {
    --fr-cols: 0;
    --fr-min: 11rem;
    --fr-rule: var(--line, #e3e8ee);
    --fr-pad: max(1rem, min(2.6cqi, 1.6rem));
    --fr-pad: clamp(1rem, 2.6cqi, 1.6rem);
    width: 100%;
}

.facts-row .fr-eyebrow {
    color: #007b9a;
    color: var(--accent, #635bff);
    font: 600 .72rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 .72rem/1 var(--font-mono, var(--font-display, system-ui));
    letter-spacing: .14em; text-transform: uppercase;
    margin-bottom: max(1rem, min(2.4cqi, 1.7rem));
    margin-bottom: clamp(1rem, 2.4cqi, 1.7rem);
}

.facts-row .fr-grid {
    display: grid;
    grid-template-columns: repeat(var(--fr-cols), minmax(0, 1fr));
    margin: 0;
}
.facts-row[style*="--fr-cols: 0"] .fr-grid,
.facts-row:not([style]) .fr-grid {
    grid-template-columns: repeat(auto-fit, minmax(var(--fr-min), 1fr));
}

.facts-row .fr-fact {
    display: flex; flex-direction: column; gap: .45rem;
    min-width: 0; margin: 0; padding: var(--fr-pad) 0;
}

.facts-row .fr-key {
    color: rgba(98, 98, 98, 0.85);
    color: color-mix(in srgb, #626262 85%, transparent);
    font: 500 .68rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 .68rem/1 var(--font-mono, ui-monospace, monospace);
    letter-spacing: .12em; text-transform: uppercase;
    margin: 0;
}

@supports (color: color-mix(in lch, red, blue)) {
.facts-row .fr-key {
    color: color-mix(in srgb, var(--muted, #425466) 85%, transparent);
}
}
.facts-row .fr-value {
    color: #222;
    color: var(--ink, #0a2540);
    font: 500 max(1rem, min(2.1cqi, 1.18rem))/1.25 'Open Sans', Arial, Helvetica, sans-serif;
    font: 500 max(1rem, min(2.1cqi, 1.18rem))/1.25 var(--font-display, system-ui);
    font: 500 max(1rem, min(2.1cqi, 1.18rem))/1.25 'Open Sans', Arial, Helvetica, sans-serif;
    font: 500 clamp(1rem, 2.1cqi, 1.18rem)/1.25 'Open Sans', Arial, Helvetica, sans-serif;
    font: 500 clamp(1rem, 2.1cqi, 1.18rem)/1.25 var(--font-display, system-ui);
    letter-spacing: -.012em; text-wrap: balance;
    margin: 0; font-feature-settings: tabular-nums lining-nums; font-variant-numeric: tabular-nums lining-nums;
}

.facts-row.fr-div-hairline .fr-fact { padding-left: var(--fr-pad); padding-right: var(--fr-pad); border-left: 1px solid var(--fr-rule); border-top: 0; }
.facts-row.fr-div-hairline .fr-fact:first-child { padding-left: 0; border-left: 0; }
.facts-row.fr-div-hairline .fr-grid { border-top: 1px solid var(--fr-rule); }

.facts-row.fr-div-dots .fr-key { position: relative; padding-left: 1rem; }
.facts-row.fr-div-dots .fr-key::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: .32rem; height: .32rem; border-radius: 50%;
    background: #007b9a;
    background: var(--accent, #635bff);
}

@container (max-width: 32rem) {
    .facts-row .fr-grid { grid-template-columns: 1fr; border-top: 0; }
    .facts-row.fr-div-hairline .fr-fact {
        border-left: 0; padding-left: 0; padding-right: 0;
        border-top: 1px solid var(--fr-rule);
    }
    .facts-row.fr-div-hairline .fr-fact:first-child { border-top: 0; }
}

/* blocks/feature-list.css */

.feature-list {
    --fl-gap: max(3.5rem, min(calc(9 * var(--pe-vw)), 8rem));
    --fl-gap: clamp(3.5rem, calc(9 * var(--pe-vw)), 8rem);
    --fl-col-gap: max(2rem, min(calc(5 * var(--pe-vw)), 5.5rem));
    --fl-col-gap: clamp(2rem, calc(5 * var(--pe-vw)), 5.5rem);
    width: 100%; margin-left: auto; margin-right: auto;
    color: #222;
    color: var(--ink, #0a2540);
}

.feature-list .fl-eyebrow {
    margin: 0 0 max(2rem, min(calc(5 * var(--pe-vw)), 4rem));
    margin: 0 0 clamp(2rem, calc(5 * var(--pe-vw)), 4rem); padding: 0;
    color: #007b9a;
    color: var(--accent, #635bff);
    font: 600 .8rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 .8rem/1 var(--font-mono, ui-monospace, monospace);
    letter-spacing: .18em; text-transform: uppercase;
}

.feature-list .fl-rows { --row-flow: column nowrap; --row-gap: var(--fl-gap); }

.feature-list .fl-beat { --row-gap: var(--fl-col-gap); --row-item: 22rem; align-items: center; }
.feature-list .fl-shot { flex: 1.05 1 22rem; box-shadow: 0 50px 100px -20px rgba(34, 34, 34, 0.22),
                    0 30px 60px -30px rgba(34, 34, 34, 0.26); box-shadow: 0 50px 100px -20px color-mix(in srgb, #222 22%, transparent),
                    0 30px 60px -30px color-mix(in srgb, #222 26%, transparent); box-shadow: var(--shadow-panel); }
.feature-list .fl-text { flex: 1 1 22rem; max-width: 42ch; }

.feature-list.fl-alt-1 .fl-rows > .fl-beat:nth-child(even) .fl-text { order: 1; }
.feature-list.fl-alt-1 .fl-rows > .fl-beat:nth-child(even) .fl-shot { order: 2; }

.feature-list .fl-num {
    display: block; margin-bottom: 1rem;
    color: #007b9a;
    color: var(--accent, #635bff);
    font: 600 .85rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 .85rem/1 var(--font-mono, ui-monospace, monospace);
    letter-spacing: .14em;
}
.feature-list .fl-title {
    margin: 0; padding: 0;
    color: #222;
    color: var(--ink, #0a2540);
    font: 600 max(1.7rem, min(calc(3.2 * var(--pe-vw)), 2.9rem))/1.04 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 max(1.7rem, min(calc(3.2 * var(--pe-vw)), 2.9rem))/1.04 var(--font-display, system-ui, sans-serif);
    font: 600 max(1.7rem, min(calc(3.2 * var(--pe-vw)), 2.9rem))/1.04 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 clamp(1.7rem, calc(3.2 * var(--pe-vw)), 2.9rem)/1.04 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 clamp(1.7rem, calc(3.2 * var(--pe-vw)), 2.9rem)/1.04 var(--font-display, system-ui, sans-serif);
    letter-spacing: -.025em; text-wrap: balance;
}
.feature-list .fl-body {
    margin: 1rem 0 0; padding: 0;
    color: #626262;
    color: var(--muted, #425466);
    font: 400 max(1rem, min(calc(1.3 * var(--pe-vw)), 1.18rem))/1.55 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 max(1rem, min(calc(1.3 * var(--pe-vw)), 1.18rem))/1.55 var(--font-text, var(--font-display, system-ui, sans-serif));
    font: 400 max(1rem, min(calc(1.3 * var(--pe-vw)), 1.18rem))/1.55 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 clamp(1rem, calc(1.3 * var(--pe-vw)), 1.18rem)/1.55 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 clamp(1rem, calc(1.3 * var(--pe-vw)), 1.18rem)/1.55 var(--font-text, var(--font-display, system-ui, sans-serif));
    text-wrap: pretty;
}

.feature-list.fl-align-center .fl-eyebrow,
.feature-list.fl-align-center .fl-text { text-align: center; }

@media (max-width: 48rem) {
    .feature-list .fl-beat { --row-flow: column nowrap; }
    .feature-list .fl-shot { flex: none; width: 100%; }   /* in a column its row basis would be its height, and its width the 16:9 of that */
    .feature-list.fl-alt-1 .fl-rows > .fl-beat:nth-child(even) .fl-text,
    .feature-list.fl-alt-1 .fl-rows > .fl-beat:nth-child(even) .fl-shot { order: 0; }
    .feature-list .fl-text { flex: none; max-width: none; }   /* the same for the text: a 22rem basis was its height, a screen of empty air under each beat */
}

/* blocks/field.css */
/* field — a form control and its label (components/field.twig). The control takes the text's font and colour; its
   surface comes from the knobs, each a registry prop with a cssVar:
   --field-fill (the control's colour) · --field-edge (its line) · --field-accent (focus, a picked pill, a switch that is
   on) · --field-accent-ink (words on the accent) · --field-radius (corners, times the theme's corner). Styles (field--<variant>): box, line (a line under), pill.
   A form's states: formPost writes data-state (busy / sent / failed) on the form; blocks/states.css shows a piece whose
   showIn names the state. */
.field {
    --field-line: var(--field-edge, color-mix(in oklab, currentColor 26%, transparent));
    --field-surface: var(--field-fill, color-mix(in oklab, currentColor 5%, transparent));
    --field-on: var(--field-accent, var(--accent, currentColor));
    --field-corner: calc(var(--field-radius, 1) * var(--radius, .4em));
    display: flex; flex-direction: column; gap: .45em; min-width: 0; margin: 0; padding: 0; border: 0;
    font: inherit; color: inherit;
}
.field-label { font-size: .8em; line-height: 1.3; color: color-mix(in oklab, currentColor 70%, transparent); }
.field-required { margin-left: .2em; color: var(--field-on); }
.field--label-hidden .field-label {
    position: absolute; width: 1em; height: 1em; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* the text-like controls: a line, an email, a phone number, long text, a drop-down, a date, a number */
.field-control:not([type="checkbox"]) {
    box-sizing: border-box; width: 100%; min-width: 0; margin: 0; padding: .7em .9em;
    font: inherit; line-height: 1.3; color: inherit;
    border: 1px solid var(--field-line); border-radius: var(--field-corner); background-color: var(--field-surface);
    transition: border-color .2s, box-shadow .2s;
}
.field-control::-moz-placeholder { color: color-mix(in oklab, currentColor 45%, transparent); opacity: 1; }
.field-control::placeholder { color: color-mix(in oklab, currentColor 45%, transparent); opacity: 1; }
.field-control:focus-visible { outline: none; border-color: var(--field-on); box-shadow: 0 0 0 .2em rgba(0, 30, 37, 0.24); }

@supports (color: color-mix(in lch, red, blue)) {
.field-control:focus-visible { box-shadow: 0 0 0 .2em color-mix(in oklab, var(--field-on) 24%, transparent); }
}
.field-control:user-invalid { border-color: #c2410c; border-color: var(--danger, #c2410c); }
.field--textarea .field-control { flex: 1 1 auto; min-height: 6em; resize: vertical; }
.field--select .field-control {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none; padding-right: 2.4em; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-size: .36em .36em; background-repeat: no-repeat;
    background-position: calc(100% - 1.3em) 55%, calc(100% - .94em) 55%;
}

.field--line .field-control:not([type="checkbox"]) { border-width: 0 0 1px; border-radius: 0; background-color: transparent; padding-left: 0; padding-right: 0; }
.field--line.field--select .field-control { padding-right: 1.6em; background-position: calc(100% - .5em) 55%, calc(100% - .14em) 55%; }
.field--line .field-control:focus-visible { box-shadow: inset 0 -.12em 0 var(--field-on); }
.field--pill .field-control:not([type="checkbox"]) { border-radius: 99em; padding-left: 1.25em; padding-right: 1.25em; }
.field--pill.field--textarea .field-control { border-radius: 1.4em; }

/* pills: a radio (or a checkbox when several can be picked) under each, still focusable */
.field--choice { display: block; }
.field--choice > legend { float: left; width: 100%; padding: 0; margin-bottom: .55em; }
.field-options { clear: both; display: flex; flex-wrap: wrap; gap: .5em; }
.field-option { position: relative; cursor: pointer; }
.field-option > input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; opacity: 0; cursor: pointer; }
.field-option > span {
    display: inline-block; padding: .55em 1em; line-height: 1.2;
    border: 1px solid var(--field-line); border-radius: var(--field-corner); background-color: var(--field-surface);
    transition: background-color .2s, border-color .2s, color .2s;
}
.field-option:hover > span { border-color: color-mix(in oklab, var(--field-on) 60%, var(--field-line)); }
.field-option > input:checked + span { background-color: var(--field-on); border-color: var(--field-on); color: rgb(240, 251, 255); color: color(display-p3 0.94504 0.9821 1); color: oklch(from #007b9a clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h); color: var(--field-accent-ink, var(--on-accent, white)); }
.field--fill .field-option { flex: 1 1 0; }
.field--fill .field-option > span { display: block; text-align: center; }
.field-option > input:focus-visible + span { outline: .14em solid var(--field-on); outline-offset: .16em; }
.field--pill .field-option > span { border-radius: 99em; }
.field--line .field-option > span { border-width: 0 0 1px; border-radius: 0; background-color: transparent; padding-left: 0; padding-right: 0; }
.field--line .field-options { gap: .5em 1.4em; }
.field--line .field-option > input:checked + span { background-color: transparent; color: var(--field-on); }

/* a tick box (the browser's own, in the accent) and a switch */
.field--checkbox, .field--switch { flex-direction: row; align-items: center; gap: .65em; cursor: pointer; }
.field--checkbox .field-label, .field--switch .field-label { font-size: 1em; color: inherit; }
.field--checkbox .field-control { flex: none; width: 1.15em; height: 1.15em; margin: 0; accent-color: var(--field-on); cursor: pointer; }
.field--switch .field-control {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none; flex: none; width: 2.3em; height: 1.3em; margin: 0; border: 0; border-radius: 99em; cursor: pointer;
    background: radial-gradient(circle closest-side, rgb(240, 251, 255) 82%, transparent 90%) left .14em center / 1.02em 1.02em no-repeat,
        color-mix(in oklab, currentColor 24%, transparent);
    transition: background-position .2s, background-color .2s;
}

@media (color-gamut: p3) {
.field--switch .field-control {
    background: radial-gradient(circle closest-side, color(display-p3 0.94504 0.9821 1) 82%, transparent 90%) left .14em center / 1.02em 1.02em no-repeat,
        color-mix(in oklab, currentColor 24%, transparent);
}
}

@media (color-gamut: rec2020) {
.field--switch .field-control {
    background: radial-gradient(circle closest-side, oklch(from #007b9a clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h) 82%, transparent 90%) left .14em center / 1.02em 1.02em no-repeat,
        color-mix(in oklab, currentColor 24%, transparent);
}
}

@supports (color: color-mix(in lch, red, blue)) {
.field--switch .field-control {
    background: radial-gradient(circle closest-side, var(--on-accent, white) 82%, transparent 90%) left .14em center / 1.02em 1.02em no-repeat,
        color-mix(in oklab, currentColor 24%, transparent);
}
}
.field--switch .field-control:checked { background-position: right .14em center; background-color: var(--field-on); }
.field--switch .field-control:focus-visible, .field--checkbox .field-control:focus-visible { outline: .14em solid var(--field-on); outline-offset: .18em; }

/* the honeypot formPost adds to a form: off screen, never focused */
[data-form-trap] { position: absolute; left: calc(-100 * var(--pe-vw)); width: 1em; opacity: 0; pointer-events: none; }

/* blocks/fill-rows.css */
/* Rows filled by shape (justified rows): a row box or looper with data-fill-rows. render.php gives each item its
   picture's shape (--ratio, and --ratio-grow = ratio × 100); an item grows by it from a width of its shape at the row
   height, so every row fills the width at one height, and the spacer after the last item keeps the last row at the row
   height. The row height is a share of the box's width (its plot is the size container); a browser without container
   units takes a row of 12 lines of text. The item keeps its picture's shape; a picture inside it fills it. */
.wraprow[data-fill-rows] { --row-flow-narrow: row wrap; flex-flow: row wrap; align-items: flex-start; }
.wraprow[data-fill-rows] > * {
    flex: 150 1 calc(1.5 * 12em);
    flex: var(--ratio-grow, 150) 1 calc(var(--ratio, 1.5) * 12em);
    aspect-ratio: 1.5;
    aspect-ratio: var(--ratio, 1.5);
}
@supports (width: 1cqi) {
    .wraprow[data-fill-rows] > * { flex-basis: calc(1.5 * 24 * 1cqi); flex-basis: calc(var(--ratio, 1.5) * var(--fill-row-height, 24) * 1cqi); }
}
.wraprow[data-fill-rows]::after { content: ""; flex: 10000 1 0; }

/* blocks/film-hero.css */

:where(.film-hero) {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100cqh;
    overflow: hidden;
    container-type: inline-size;
    background: #0d0f14;
    background: var(--fh-matte, var(--invert-bg, #0c0e10));
    color: #f4f6fb;
    color: var(--fh-ink, var(--invert-fg, #f3ede1));
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, Georgia, serif);
}
:where(.film-hero .fh-film) { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; z-index: 0; }
:where(.film-hero .fh-film video) {
    display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;
    opacity: .92;
    opacity: var(--fh-film-opacity, .92);
}
:where(.film-hero .fh-film figcaption) { display: none; }

:where(.film-hero .fh-label) {
    position: absolute; z-index: 2;
    left: 5cqi;
    left: var(--fh-pad, 5cqi); top: 5cqi; top: var(--fh-pad, 5cqi);
    margin: 0;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, inherit);
    font-size: 0.6875rem;
    font-size: var(--text-label, 1.1cqi);
    letter-spacing: .12em; text-transform: uppercase; line-height: 1.3;
    padding: .35em .6em;
    background: #f9f9f9;
    background: var(--fh-plate, var(--page-bg, #fff));
    color: #222;
    color: var(--fh-plate-ink, var(--ink, #111));
}
:where(.film-hero .fh-title) {
    position: absolute; z-index: 2;
    left: 5cqi;
    left: var(--fh-pad, 5cqi); bottom: calc(5cqi + 2.2cqi); bottom: calc(var(--fh-pad, 5cqi) + 2.2cqi);
    margin: 0 0 0 -.03em; max-width: 78cqi;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, inherit);
    font-weight: 800; font-size: 11cqi; font-size: var(--fh-title-size, 11cqi); line-height: .84; letter-spacing: .005em; text-transform: uppercase;
    text-wrap: balance;
    text-shadow: 0 0 1.5cqi rgba(0, 0, 0, 0.7);
    text-shadow: 0 0 1.5cqi color-mix(in srgb, #000 70%, transparent);
}

@supports (color: color-mix(in lch, red, blue)) {
:where(.film-hero .fh-title) {
    text-shadow: 0 0 1.5cqi color-mix(in srgb, var(--fh-matte, #000) 70%, transparent);
}
}

:where(.film-hero .fh-chapters) {
    position: absolute; z-index: 2;
    right: 5cqi;
    right: var(--fh-pad, 5cqi); top: 50%;
    width: 34cqi;
    width: var(--fh-chapter-w, 34cqi);
    transform: translateY(-50%);
}
:where(.film-hero .fh-chapter) {
    position: absolute; top: 0; left: 0; right: 0;
    margin: 0;
    padding: 1em 1.1em;
    background: #f9f9f9;
    background: var(--fh-plate, var(--page-bg, #fff));
    color: #222;
    color: var(--fh-plate-ink, var(--ink, #111));
    font-size: 1.6cqi;
    font-size: var(--text-lg, 1.6cqi); line-height: 1.35; text-wrap: pretty;
    opacity: 0; translate: 0 .8em;
    transition: opacity .5s cubic-bezier(.4, 0, .2, 1), translate .5s cubic-bezier(.4, 0, .2, 1);
    transition: opacity .5s var(--ease, ease), translate .5s var(--ease, ease);
    pointer-events: none;
}
:where(.film-hero .fh-chapter.is-current) { opacity: 1; translate: 0 0; pointer-events: auto; }

:where(.film-hero .fh-transport) {
    position: absolute; z-index: 2;
    left: 5cqi;
    left: var(--fh-pad, 5cqi); right: 5cqi; right: var(--fh-pad, 5cqi); bottom: 5cqi; bottom: var(--fh-pad, 5cqi);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, inherit);
    font-size: 0.6875rem;
    font-size: var(--text-label, 1.1cqi); letter-spacing: .1em; line-height: 1;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
:where(.film-hero .fh-track) {
    position: relative; margin-right: 9em;
    border-top: 1px solid rgba(89, 89, 89, 0.35);
    border-top: 1px solid var(--fh-line, rgba(89, 89, 89, 0.35));
    border-top: 1px solid color-mix(in srgb, #fff 35%, transparent);
}

@supports (color: color-mix(in lch, red, blue)) {
:where(.film-hero .fh-track) {
    border-top: 1px solid var(--fh-line, color-mix(in srgb, var(--fh-ink, #fff) 35%, transparent));
}
}
:where(.film-hero .fh-playhead) {
    position: absolute; top: 50%; left: 0;
    width: .9em; height: .9em; margin: -.45em 0 0 -.45em;
    background: #007b9a;
    background: var(--accent, #fff);
    border-radius: 50%;
    transform: translateX(calc(0 * 100cqi - 5cqi * 2 * 0));
    transform: translateX(calc(var(--film-t, 0) * 100cqi - var(--fh-pad, 5cqi) * 2 * var(--film-t, 0)));
    will-change: transform;
}
:where(.film-hero .fh-time) { position: absolute; right: 0; bottom: 0; white-space: nowrap; }
:where(.film-hero .fh-time .fh-sep) { margin: 0 .4em; opacity: .6; }

:where(.film-hero.film-poster-only .fh-film video) { opacity: .92; opacity: var(--fh-film-opacity, .92); }
:where(.film-hero.film-poster-only .fh-transport) { opacity: .45; }

@media (max-width: 48em) {
    :where(.film-hero .fh-chapters) { right: auto; left: 5cqi; left: var(--fh-pad, 5cqi); top: auto; bottom: calc(5cqi + 4cqi); bottom: calc(var(--fh-pad, 5cqi) + 4cqi); width: calc(100cqi - 5cqi * 2); width: calc(100cqi - var(--fh-pad, 5cqi) * 2); transform: none; }
    :where(.film-hero .fh-title) { bottom: auto; top: calc(5cqi + 4em); top: calc(var(--fh-pad, 5cqi) + 4em); font-size: max(11cqi, 14cqi); font-size: max(var(--fh-title-size, 11cqi), 14cqi); }
    :where(.film-hero .fh-chapter) { font-size: max(1.6cqi, 4.2cqi); font-size: max(var(--text-lg, 1.6cqi), 4.2cqi); }
    :where(.film-hero .fh-label), :where(.film-hero .fh-transport) { font-size: max(0.6875rem, 3.1cqi); font-size: max(var(--text-label, 1.1cqi), 3.1cqi); }
}

/* blocks/filter-bar.css */

.filter-bar {
    --fbr-ink:     var(--ink, #15171c);
    --fbr-muted:   var(--muted, #6b7280);
    --fbr-accent:  var(--accent, #635bff);
    --fbr-acc-ink: var(--accent-ink, var(--page-bg, #fff));
    --fbr-bg:      var(--page-bg, var(--paper, #fff));
    --fbr-line:    var(--line, #e3e8ee);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1.1rem max(1rem, min(calc(5 * var(--pe-vw)), calc(5 * var(--pe-vw))));
    padding: 1.1rem clamp(1rem, calc(5 * var(--pe-vw)), calc(5 * var(--pe-vw)));
    background: rgba(204, 204, 204, 0.82);
    background: color-mix(in srgb, #f9f9f9 82%, transparent);
    -webkit-backdrop-filter: blur(.75rem);
            backdrop-filter: blur(.75rem);
    border-top: 1px solid rgba(5, 5, 5, 0.14);
    border-top: 1px solid var(--fbr-line);
    border-bottom: 1px solid rgba(5, 5, 5, 0.14);
    border-bottom: 1px solid var(--fbr-line);
    color: #222;
    color: var(--fbr-ink);
}

@supports (color: color-mix(in lch, red, blue)) {
.filter-bar {
    background: color-mix(in srgb, var(--fbr-bg) 82%, transparent);
}
}
.filter-bar[data-scheme="dark"] {
    --fbr-ink:     var(--ink-dark, #e9eaee);
    --fbr-muted:   var(--muted-dark, #9aa1b0);
    --fbr-acc-ink: var(--accent-ink, #fff);
    --fbr-bg:      var(--page-bg-dark, var(--paper-dark, #0f1117));
    --fbr-line:    var(--line-dark, #2a2e38);
}
.filter-bar.fb-sticky { position: sticky; top: 0; z-index: 20; }

.fb-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.fb-chip {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border: 1px solid var(--fbr-line);
    background: transparent;
    color: var(--fbr-muted);
    padding: .5em 1.1em;
    border-radius: 62.4375rem;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: .78rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.fb-chip:hover { color: var(--fbr-ink); border-color: var(--fbr-ink); }
.fb-chip:focus-visible { outline: .1875rem solid rgba(0, 55, 69, 0.45); outline-offset: .125rem; }

@supports (color: color-mix(in lch, red, blue)) {
.fb-chip:focus-visible { outline: .1875rem solid color-mix(in srgb, var(--fbr-accent) 45%, transparent); }
}
.fb-chip.is-on {
    background: var(--fbr-accent);
    color: var(--fbr-acc-ink);
    border-color: transparent;
}

.fb-sort {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: .82rem;
    line-height: 1;
    color: var(--fbr-muted);
    white-space: nowrap;
}
.fb-sort b { color: var(--fbr-ink); font-weight: 600; }

@media (max-width: 768px) {
    .filter-bar { flex-direction: column; align-items: flex-start; gap: .7rem; }
    .fb-sort { display: none; }
}

/* blocks/flavor-story.css */

.flavor-story {
    --fs-bg: transparent;
    --fs-fg: var(--ink, #1c1917);
    --fs-word: var(--accent, #bf3b25);
    --fs-soft: var(--muted, #6b6158);
    --fs-edge: var(--page-margin, 6cqi);
    --fs-radius: 50%;
    --fs-move: .9s var(--ease, cubic-bezier(.2, .8, .2, 1));
    position: relative; margin: 0; background: transparent; background: var(--fs-bg); color: #222; color: var(--fs-fg);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, "Helvetica Neue", Arial, sans-serif);
}
.flavor-story.fs-tone-accent { --fs-bg: var(--accent, #bf3b25); --fs-fg: var(--on-accent, #fff8ee); --fs-word: var(--on-accent, #fff8ee); --fs-soft: var(--on-accent, #fff8ee); }
.flavor-story.fs-tone-spark { --fs-bg: var(--spark, #e8a93a); --fs-fg: var(--on-spark, #1c1917); --fs-word: var(--on-spark, #1c1917); --fs-soft: color-mix(in srgb, var(--on-spark, #1c1917) 76%, transparent); }
.flavor-story.fs-tone-ink { --fs-bg: var(--ink, #1c1917); --fs-fg: var(--paper, #fffdf8); --fs-word: var(--accent, #bf3b25); --fs-soft: color-mix(in srgb, var(--paper, #fffdf8) 72%, transparent); }
.flavor-story.fs-shape-arch { --fs-radius: 50cqi 50cqi .6em .6em; }
.flavor-story.fs-shape-square { --fs-radius: .6em; }

.flavor-story .fs-stage { position: relative; container-type: inline-size; padding: max(1.4em, min(4svh, 3.5em)) var(--fs-edge); padding: clamp(1.4em, 4svh, 3.5em) var(--fs-edge); }
.flavor-story .fs-eyebrow { position: relative; z-index: 3; margin: 0; font-size: 0.6875rem; font-size: var(--text-label, .78em); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fs-soft); }
.flavor-story .fs-chapters { list-style: none; margin: 0; padding: 0; }
.flavor-story .fs-chapter > * { margin: 0; }
.flavor-story .fs-word { font: 400 max(3.4em, min(15cqi, 18em))/.86 'Open Sans', Arial, Helvetica, sans-serif; font: 400 max(3.4em, min(15cqi, 18em))/.86 var(--font-display, Georgia, serif); font: 400 max(3.4em, min(15cqi, 18em))/.86 'Open Sans', Arial, Helvetica, sans-serif; font: 400 clamp(3.4em, 15cqi, 18em)/.86 'Open Sans', Arial, Helvetica, sans-serif; font: 400 clamp(3.4em, 15cqi, 18em)/.86 var(--font-display, Georgia, serif); letter-spacing: -.045em; color: var(--fs-word); white-space: nowrap; }
.flavor-story .fs-picture { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--fs-radius); background: color-mix(in srgb, currentColor 10%, transparent); }
.flavor-story .fs-shot { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; }
.flavor-story .fs-shot img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.flavor-story .fs-caption { max-width: 30em; }
.flavor-story .fs-caption > * { margin: 0; }
.flavor-story .fs-n { font-size: 0.6875rem; font-size: var(--text-label, .78em); font-weight: 700; letter-spacing: .12em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--fs-soft); }
.flavor-story .fs-title { margin-top: .5em; font: 400 max(1.5em, min(2.6cqi, 2.6em))/1.04 'Open Sans', Arial, Helvetica, sans-serif; font: 400 max(1.5em, min(2.6cqi, 2.6em))/1.04 var(--font-display, Georgia, serif); font: 400 max(1.5em, min(2.6cqi, 2.6em))/1.04 'Open Sans', Arial, Helvetica, sans-serif; font: 400 clamp(1.5em, 2.6cqi, 2.6em)/1.04 'Open Sans', Arial, Helvetica, sans-serif; font: 400 clamp(1.5em, 2.6cqi, 2.6em)/1.04 var(--font-display, Georgia, serif); letter-spacing: -.02em; }
.flavor-story .fs-body { margin-top: .7em; font-size: 1.125rem; font-size: var(--text-md, 1em); line-height: 1.5; }
.flavor-story .fs-credit { margin-top: .9em; font-size: 0.6875rem; font-size: var(--text-label, .78em); line-height: 1.45; color: var(--fs-soft); }

.flavor-story:not([data-story="pinned"]) .fs-chapter { position: relative; padding-top: 2em; padding-bottom: 2em; }
.flavor-story:not([data-story="pinned"]) .fs-picture { width: min(100%, 34em); margin-top: 1em; margin-bottom: 1em; }

.flavor-story.flavor-story[data-story="pinned"] { height: calc(3 * 80 * 1svh + 100svh - 0px); height: calc(var(--story-count, 3) * var(--fs-chapter-length, 80) * 1svh + 100svh - var(--story-top, 0px)); }
.flavor-story[data-story="pinned"] .fs-stage { position: sticky; top: 0px; top: var(--story-top, 0px); height: calc(100svh - 0px); height: calc(100svh - var(--story-top, 0px)); overflow: hidden; }
.flavor-story[data-story="pinned"] .fs-chapter { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.flavor-story[data-story="pinned"] .fs-chapter[data-state="current"] { pointer-events: auto; }
.flavor-story[data-story="pinned"] .fs-word { position: absolute; z-index: 1; left: var(--fs-edge); top: 16%; clip-path: inset(-10% -5% -20% -5%); transition: clip-path var(--fs-move), transform var(--fs-move); }
.flavor-story[data-story="pinned"] .fs-picture { position: absolute; z-index: 2; right: var(--fs-edge); top: 50%; width: min(44cqi, 72svh); transform: translateY(-50%) scale(calc(1 + 0 * .06)); transform: translateY(-50%) scale(calc(1 + var(--story-progress, 0) * .06)); transition: clip-path 1.1s cubic-bezier(.65, 0, .25, 1); }
.flavor-story[data-story="pinned"] .fs-shot img { transition: transform 1.4s cubic-bezier(.4, 0, .2, 1); transition: transform 1.4s var(--ease, cubic-bezier(.2, .8, .2, 1)); }
.flavor-story[data-story="pinned"] .fs-caption { position: absolute; z-index: 3; left: var(--fs-edge); bottom: 9%; width: min(30em, 40cqi); transition: opacity .6s ease, transform .8s cubic-bezier(.4, 0, .2, 1); transition: opacity .6s ease, transform .8s var(--ease, cubic-bezier(.2, .8, .2, 1)); }
.flavor-story[data-story="pinned"] .fs-chapter:not([data-state="current"]) .fs-word { clip-path: inset(-10% -5% 100% -5%); transform: translateY(-18%); }
.flavor-story[data-story="pinned"] .fs-chapter[data-state="next"] .fs-word { clip-path: inset(100% -5% 0% -5%); transform: translateY(22%); }
.flavor-story[data-story="pinned"] .fs-chapter[data-state="next"] .fs-picture { clip-path: circle(0% at 50% 50%); }
.flavor-story[data-story="pinned"] .fs-chapter:not([data-state="next"]) .fs-picture { clip-path: circle(72% at 50% 50%); }
.flavor-story[data-story="pinned"] .fs-chapter[data-state="next"] .fs-shot img { transform: scale(1.3); }
.flavor-story[data-story="pinned"] .fs-chapter:not([data-state="current"]) .fs-caption { opacity: 0; transform: translateY(-1.2em); }
.flavor-story[data-story="pinned"] .fs-chapter[data-state="current"] .fs-word { transition-delay: .28s; }
.flavor-story[data-story="pinned"] .fs-chapter[data-state="current"] .fs-caption { transition-delay: .4s; }
.flavor-story[data-story="pinned"] .fs-chapter:not([data-state="current"]) .fs-word { transition-duration: .5s; }
.flavor-story[data-story="pinned"] .fs-chapter[data-state="next"] .fs-caption { transform: translateY(1.6em); }

@container (max-width: 44em) {
    .flavor-story .fs-word { font-size: 21cqi; }
    .flavor-story[data-story="pinned"] .fs-word { top: 9%; }
    .flavor-story[data-story="pinned"] .fs-picture { right: auto; left: 50%; top: 22%; width: min(70cqi, 31svh); transform: translate(-50%, 0) scale(calc(1 + 0 * .06)); transform: translate(-50%, 0) scale(calc(1 + var(--story-progress, 0) * .06)); }
    .flavor-story[data-story="pinned"] .fs-caption { width: auto; right: var(--fs-edge); bottom: 5%; }
}

/* blocks/flow-masonry.css */
/* Masonry: a flow box or looper with data-masonry (its Masonry setting). Each item keeps its own height and drops into
   the shortest column; the columns, the spans and the phone rules stay the flow grid's own (render.php flowGridCss).
   Native `display: grid-lanes` where the browser has it; elsewhere system/masonry-fallback.js gives the grid short
   rows and each item a row span. Without script the items sit in plain rows. */
@supports (display: grid-lanes) {
    .flowgrid[data-masonry] { display: grid-lanes; }
}

/* blocks/fontbox.css */

.fontbox {
    --fb-ink: var(--ink, #0a0a0a);
    --fb-muted: var(--muted, #6b6b6b);
    --fb-line: var(--line, #e3e3e3);
    --fb-paper: var(--paper, #fff);
    --fb-accent: var(--accent, #635bff);
    --fb-face: var(--fb-font, var(--font-display, Georgia, "Times New Roman", serif));
    --fb-mono: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
    --fb-ground: transparent;
    --fb-fg: var(--fb-ink);
    --fb-hair: var(--fb-line);
    width: 100%; margin: 0;
    padding: max(1.5rem, min(4cqi, 3.1rem));
    padding: clamp(1.5rem, 4cqi, 3.1rem);
    border-radius: 1.6cqi;
    container-type: inline-size;
    color: #222;
    color: var(--fb-fg);
    background: transparent;
    background: var(--fb-ground);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--fb-face);
}

.fontbox.fb-tone-paper {
    --fb-ground: var(--fb-paper);
    border: 1px solid var(--fb-line);
    box-shadow: 0 1px .125rem rgba(2, 2, 2, 0.05),
                0 1.25rem 2.75rem rgba(2, 2, 2, 0.07);
}

@supports (color: color-mix(in lch, red, blue)) {
.fontbox.fb-tone-paper {
    box-shadow: 0 1px .125rem color-mix(in srgb, var(--fb-ink) 5%, transparent),
                0 1.25rem 2.75rem color-mix(in srgb, var(--fb-ink) 7%, transparent);
}
}
.fontbox.fb-tone-ink {
    --fb-ground: var(--fb-ink);
    --fb-fg: var(--fb-paper);
    --fb-muted: color-mix(in srgb, var(--fb-paper, #fff) 56%, transparent);
    --fb-hair: color-mix(in srgb, var(--fb-paper, #fff) 18%, transparent);
    --fb-accent: color-mix(in srgb, var(--accent, #635bff) 68%, var(--fb-paper, #fff));
}
.fontbox.fb-tone-accent {
    --fb-ground: color-mix(in srgb, var(--fb-accent) 9%, var(--fb-paper, #fff));
    --fb-hair: color-mix(in srgb, var(--fb-accent) 28%, transparent);
    border: 1px solid rgba(0, 30, 37, 0.24);
}

@supports (color: color-mix(in lch, red, blue)) {
.fontbox.fb-tone-accent {
    border: 1px solid color-mix(in srgb, var(--fb-accent) 24%, transparent);
}
}

.fontbox .fb-eyebrow {
    margin: 0 0 max(1.3rem, min(3.4cqi, 2.3rem));
    margin: 0 0 clamp(1.3rem, 3.4cqi, 2.3rem);
    padding: 0 0 max(.85rem, min(2cqi, 1.25rem));
    padding: 0 0 clamp(.85rem, 2cqi, 1.25rem);
    border-bottom: 1px solid var(--fb-hair);
    color: var(--fb-muted);
    font: 600 max(.66rem, min(.92cqi, .78rem))/1 var(--fb-mono);
    font: 600 clamp(.66rem, .92cqi, .78rem)/1 var(--fb-mono);
    letter-spacing: .2em; text-transform: uppercase;
}

.fontbox .fb-specimen { position: relative; margin: 0 0 max(1.6rem, min(4.2cqi, 2.9rem)); margin: 0 0 clamp(1.6rem, 4.2cqi, 2.9rem); }

.fontbox .fb-word {
    margin: 0;
    font-size: calc(1 * 13.5cqi);
    font-size: calc(var(--fb-scale, 1) * 13.5cqi);
    line-height: .84; letter-spacing: -.035em;
    text-wrap: balance; word-wrap: break-word; overflow-wrap: break-word;
}

.fontbox .fb-aa {
    display: none;
    margin: max(.5rem, min(1.6cqi, 1.1rem)) 0 0;
    margin: clamp(.5rem, 1.6cqi, 1.1rem) 0 0;
    color: var(--fb-accent);
    font-size: max(1.5rem, min(4cqi, 2.8rem));
    font-size: clamp(1.5rem, 4cqi, 2.8rem);
    line-height: 1; letter-spacing: .01em;
}
.fontbox .fb-aa::first-letter { color: var(--fb-fg); }
.fontbox.fb-aa-1 .fb-aa { display: block; }

.fontbox .fb-name {
    margin: max(.9rem, min(2.2cqi, 1.5rem)) 0 0;
    margin: clamp(.9rem, 2.2cqi, 1.5rem) 0 0;
    padding: max(.75rem, min(1.8cqi, 1.2rem)) 0 0;
    padding: clamp(.75rem, 1.8cqi, 1.2rem) 0 0;
    border-top: 1px solid var(--fb-hair);
    color: var(--fb-muted);
    font: 500 max(.8rem, min(1.15cqi, 1.02rem))/1.3 var(--fb-mono);
    font: 500 clamp(.8rem, 1.15cqi, 1.02rem)/1.3 var(--fb-mono);
    letter-spacing: .04em;
}

.fontbox .fb-ladder {
    margin: 0; padding: 0; list-style: none;
    --row-gap: 0;
}
.fontbox.fb-ladder-column .fb-ladder { --row-flow: column nowrap; --row-item: auto; }
.fontbox.fb-ladder-row .fb-ladder { --row-gap: max(1.6rem, min(4cqi, 3rem)); --row-gap: clamp(1.6rem, 4cqi, 3rem); --row-item: auto; align-items: baseline; }

.fontbox .fb-rung {
    margin: 0; padding: max(.7rem, min(1.9cqi, 1.25rem)) 0; padding: clamp(.7rem, 1.9cqi, 1.25rem) 0;
    border-top: 1px solid var(--fb-hair);
    --row-gap: 1rem; --row-item: auto;
    align-items: baseline;
    transition: padding-left .3s cubic-bezier(.2, .7, .2, 1);
}
.fontbox.fb-ladder-column .fb-rung:last-child { border-bottom: 1px solid var(--fb-hair); }
.fontbox.fb-ladder-column .fb-rung:hover { padding-left: max(.4rem, min(1.2cqi, .9rem)); padding-left: clamp(.4rem, 1.2cqi, .9rem); }
.fontbox .fb-rung:hover .fb-rung-weight { color: var(--fb-accent); }

.fontbox .fb-rung-label {
    font-size: max(1.35rem, min(4cqi, 3rem));
    font-size: clamp(1.35rem, 4cqi, 3rem);
    line-height: 1; letter-spacing: -.012em;
}
.fontbox .fb-rung-weight {
    text-align: right;
    color: var(--fb-muted);
    font: 500 max(.7rem, min(.95cqi, .82rem))/1 var(--fb-mono);
    font: 500 clamp(.7rem, .95cqi, .82rem)/1 var(--fb-mono);
    letter-spacing: .08em;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    transition: color .25s ease;
}

.fontbox.fb-ladder-row .fb-rung { padding: 0; border: 0; --row-flow: column nowrap; --row-gap: .3rem; }
.fontbox.fb-ladder-row .fb-rung-weight { text-align: left; }

.fontbox .fb-sample {
    margin: max(1.7rem, min(4.4cqi, 3rem)) 0 0;
    margin: clamp(1.7rem, 4.4cqi, 3rem) 0 0;
    max-width: 42ch;
    color: var(--fb-fg);
    font-size: max(1rem, min(2cqi, 1.4rem));
    font-size: clamp(1rem, 2cqi, 1.4rem);
    line-height: 1.5; letter-spacing: -.005em;
    text-wrap: pretty;
}

.fontbox.fb-align-center .fb-eyebrow,
.fontbox.fb-align-center .fb-aa,
.fontbox.fb-align-center .fb-word,
.fontbox.fb-align-center .fb-name { text-align: center; }
.fontbox.fb-align-center .fb-sample { margin-left: auto; margin-right: auto; }

@container (max-width: 26rem) {
    .fontbox .fb-sample { max-width: none; }
}

/* blocks/fonts.css */





/* blocks/formation.css */
/* formation — a box's children take a shape together (registry `formation` on a group or a list → data-formation):
   fan      a row of them, small and fanned like cards in a hand
   tilt     lying back in depth like cards on a table, each a step further away
   scatter  thrown apart, each its own way, turning
   corner   a small fanned pile in a corner
   zigzag   in place, each one up or down from the last (the first up), a row that steps
   --formation (0 → 1) is how far they have gone into the shape; 1 holds it. A key on any track drives it: on a scroll
   track they go into it as the page scrolls, on the page's timeline in time. Each child's place is its order (--i, --n
   from render.php renderStacked), in a slideshow counted from the card on show (--depth from playInTurn): the first
   place is the front of the shape, and a card further back is also lower in the stacking, so a browser that sorts 3D
   by depth (Safari) and one that keeps the stacking agree. --from-middle is how many places it sits from the middle one.
   Once the shape has begun, a slideshow's own stack (loop.css) stands aside: the cards are solid, in that one order, and
   follow the driver at once (--stack-weight = --at-rest: 1 at 0 exactly, else 0), and the slideshow holds its turn (playInTurn).
   Knobs, plain numbers (the pane's controls):
   fan      --fan-gap (% of a card, card to card) · --fan-angle (deg per card) · --fan-drop (% per card from the middle) · --fan-size
            · --fan-rows (the cards in order over N rows, each fanned from its own middle) · --fan-shift (% of a card: rows sit
            this far apart sideways, brick-wise, each against the way it drifts: the top one to the right) · --fan-row-gap (% of
            a card's height, row to row) · --fan-drift (% of a card: how far --drift carries the rows sideways, the top one
            left, the next right, so a row's drift closes the gap its shift left and brings its hidden cards in)
   tilt     --tilt-angle (deg back) · --tilt-twist (deg per card) · --tilt-step (% per card up) · --tilt-depth (vw per card away)
            · --tilt-rise (% the whole pile moves up) · --tilt-distance (vw the whole pile moves away) · --tilt-size
            · --tilt-perspective (vw: smaller = stronger 3D)
   scatter  --scatter-distance (% of a card) · --scatter-spin (deg at most) · --scatter-turn (deg: turns the whole burst) · --scatter-size
   corner   --corner-x / --corner-y (% of a card: + = right / down) · --corner-fan (deg per card) · --corner-size
            · --corner-fade (each card behind the front one shows this much less: 0 = all solid)
   A STACK (a slideshow: every card on one spot) spreads out into the shape; a LAID-OUT list or box (its children side by
   side: a row of figures, a grid of cards) takes the shape from where each child stands, so it has its own defaults (below):
   a row of figures fans, tilts and scatters as a row of figures, never shrunk to a fifth. In a laid-out list the corner
   pile's --corner-x is per place: each child moves that far (% of a card) toward the last one's place, and the ones behind
   the front fade (a row of figures has no panel of its own to hide them: solid, their words print over each other).
   zigzag   --zigzag-offset (% of a card's height, up for the first, down for the next)
   --leave (0 → 1, a second lane) throws the cards out of the shape one after another, the front one first, on top of
   whatever shape they are in: --leave-x / --leave-y (% of a card: + = right / down) · --leave-z (vw: + = toward the eye)
   · --leave-spin (deg) · --leave-scale (the size they end at: 0 = gone to nothing) · --leave-stagger (0 = all at once,
   1 = one fully gone before the next goes)
   --arrive (0 → 1, its twin) brings them in one after another, the first one first: from --arrive-x / --arrive-y (% of a
   card) at --arrive-scale, faded in · --arrive-stagger. No key = 1, all in place; keyed on a scroll track it plays back
   as the page scrolls back
   --cards-opacity (0 → 1) fades every card on its own: an opacity on the formation itself would cut each card's
   backdrop blur off from what is behind it
   --drift (0 → 1, a third lane, fan) slides the rows apart sideways, each the other way from the row above: keyed on a
   scroll track, a wall of cards that moves past as the page scrolls */
[data-formation] { --formation: 1; --leave: 0; --drift: 0; --arrive: 1; }
/* no shape: the cards sit in place, while their lanes (--arrive, --leave, --drift, --cards-opacity) still move them */
[data-formation="none"] { --formation: 0; }
[data-formation]:not(.is-played) {
    --fan-size: .8; --fan-gap: -12; --fan-angle: 6; --fan-drop: 8; --fan-shift: 0; --fan-row-gap: 0;
    --tilt-angle: 35; --tilt-step: 0; --tilt-depth: 2; --tilt-rise: 0; --tilt-distance: 4; --tilt-size: .9;
    --scatter-distance: 14; --scatter-spin: 8; --scatter-size: .85;
    --corner-x: 60; --corner-y: 10; --corner-fan: 4; --corner-size: .8; --corner-fade: .75;
}
[data-formation] > * {
    --place: var(--i, 0);
    --from-middle: calc(var(--place) - (var(--n, 1) - 1) / 2);
    --away: max(var(--from-middle), -1 * var(--from-middle));
    --stack-weight: var(--at-rest);   /* the stack's own places drop the moment the shape begins, all cards together behind the one on show */
    --at-rest: clamp(0, 1 - var(--formation) * 1e9, 1);   /* 1 only at 0 exactly: a switch, never a ramp a scroll could stop inside */
    --stack-shown: calc(1 - var(--at-rest));
    --formation-z: calc(var(--n, 1) - var(--place));
    z-index: calc((0 + 1) * var(--at-rest) + (1 - 0) * (1 - var(--at-rest))) !important;
    z-index: calc((0 + 1) * var(--at-rest) + calc(1 - 0) * (1 - var(--at-rest))) !important;
    z-index: calc((var(--i, 0) + 1) * var(--at-rest) + var(--formation-z) * (1 - var(--at-rest))) !important;
    will-change: transform;   /* its own layer: a frame of the shape moves it, never repaints it */
    --leave-own: clamp(0, var(--leave) * (1 + var(--leave-stagger, .12) * (var(--n, 1) - 1)) - var(--place) * var(--leave-stagger, .12), 1);
    /* each card eases out and in on its own way (smoothstep): the cards flow off together, never start and stop hard */
    --leave-eased: calc(var(--leave-own) * var(--leave-own) * (3 - 2 * var(--leave-own)));
    --leave-move: translate3d(calc(var(--leave-x, 0) * 1% * var(--leave-eased)), calc(var(--leave-y, -160) * 1% * var(--leave-eased)),
            calc(var(--leave-z, 0) * calc(1 * var(--pe-vw)) * var(--leave-eased)));
    /* the spin and the shrink come LAST in a shape: each card turns and shrinks about its own middle where it stands,
       never pulled in toward the shape's middle with the distances it was laid out at */
    --leave-turn: rotate(calc(var(--leave-spin, -8) * 1deg * var(--leave-eased)))
        scale(calc(1 - (1 - var(--leave-scale, 1)) * var(--leave-eased)));
    /* arriving: the first one first, each eased on its own way; --arrive-out is how far it still has to come */
    --arrive-own: clamp(0, var(--arrive) * (1 + var(--arrive-stagger, .15) * (var(--n, 1) - 1)) - var(--place) * var(--arrive-stagger, .15), 1);
    --arrive-out: calc(1 - var(--arrive-own) * var(--arrive-own) * (3 - 2 * var(--arrive-own)));
    --arrive-move: translate3d(calc(var(--arrive-x, 0) * 1% * var(--arrive-out)), calc(var(--arrive-y, 40) * 1% * var(--arrive-out)), 0)
        scale(calc(1 - (1 - var(--arrive-scale, 1)) * var(--arrive-out)));
    --card-opacity: calc((1 - var(--arrive-out)) * var(--cards-opacity, 1));
    opacity: var(--card-opacity);
}
/* a bare wrapper (a list's plot) hands its fade to the piece it holds: below 1 it would cut that piece's backdrop blur
   off from what is behind it */
[data-formation] > .plot:not([data-uid]) { opacity: 1; }
[data-formation] > .plot:not([data-uid]) > * { opacity: var(--card-opacity); }
[data-formation].loop.is-played > * { --place: var(--depth, var(--i, 0)); }
/* the pieces inside a child neither read these nor restyle with them every frame, and a slideshow inside keeps its own */
[data-formation] > * > * {
    --formation: initial; --leave: initial; --drift: initial; --arrive: initial; --stack-weight: initial; --at-rest: initial;
    --stack-shown: initial; --leave-own: initial; --leave-eased: initial; --leave-move: initial; --leave-turn: initial; --arrive-own: initial;
    --arrive-out: initial; --arrive-move: initial; --corner-x-here: initial; --cards-opacity: initial;
}
[data-formation] > * > * > * { --card-opacity: initial; }
/* The eased steps are numbers, worked out once where they are set: untyped, each var() pasted its whole formula into the
   next (--leave-eased holds --leave-own three times, the move holds it three times again), and every frame parsed each
   card's grown transform. Their first values are loop.css's fallbacks (a slideshow with no shape). A browser without
   @property skips these and computes the same values untyped */
@property --leave-own { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --leave-eased { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --arrive-own { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --arrive-out { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --at-rest { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --stack-weight { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --stack-shown { syntax: '<number>'; inherits: true; initial-value: 0; }

[data-formation="fan"] > * {
    --per-row: round(up, calc(var(--n, 1) / var(--fan-rows, 1)), 1);
    --row: round(down, calc(var(--place) / var(--per-row)), 1);
    --row-from-middle: calc(var(--row) - (var(--fan-rows, 1) - 1) / 2);
    --in-row: calc(var(--place) - var(--row) * var(--per-row));
    --in-row-from-middle: calc(var(--in-row) - (var(--per-row) - 1) / 2);
    --in-row-away: max(var(--in-row-from-middle), -1 * var(--in-row-from-middle));
    --row-way: calc(mod(var(--row), 2) * 2 - 1);   /* -1 left on the top row, +1 right on the next, and so on */
    transform: var(--arrive-move) var(--leave-move) scale(calc(1 - (1 - .19) * var(--formation)))
        translate(calc((var(--in-row-from-middle) * 110 - var(--row-from-middle) * 30) * 1% * var(--formation)
                + var(--row-way) * var(--drift) * 60 * 1%),
            calc((var(--in-row-away) * 12 + var(--row-from-middle) * 120) * 1% * var(--formation)))
        rotate(calc(var(--in-row-from-middle) * 5 * 1deg * var(--formation))) var(--leave-turn);
    transform: var(--arrive-move) var(--leave-move) scale(calc(1 - (1 - var(--fan-size, .19)) * var(--formation)))
        translate(calc((var(--in-row-from-middle) * var(--fan-gap, 110) - var(--row-from-middle) * var(--fan-shift, 30)) * 1% * var(--formation)
                + var(--row-way) * var(--drift) * var(--fan-drift, 60) * 1%),
            calc((var(--in-row-away) * var(--fan-drop, 12) + var(--row-from-middle) * var(--fan-row-gap, 120)) * 1% * var(--formation)))
        rotate(calc(var(--in-row-from-middle) * var(--fan-angle, 5) * 1deg * var(--formation))) var(--leave-turn);
}

[data-formation="tilt"] { perspective: calc(120 * (1 * var(--pe-vw))); perspective: calc(var(--tilt-perspective, 120) * (1 * var(--pe-vw))); perspective: calc(120 * calc(1 * var(--pe-vw))); perspective: calc(var(--tilt-perspective, 120) * calc(1 * var(--pe-vw))); }
[data-formation="tilt"] > * {
    transform: var(--arrive-move) var(--leave-move) translateY(calc((var(--from-middle) * 16 + 10) * -1% * var(--formation)))
        translateZ(calc((var(--from-middle) * 8 + 20) * (-1 * var(--pe-vw)) * var(--formation)))
        rotateX(calc(58 * 1deg * var(--formation)))
        rotateZ(calc(var(--from-middle) * 4 * -1deg * var(--formation)))
        scale(calc(1 - (1 - .7) * var(--formation))) var(--leave-turn);
    transform: var(--arrive-move) var(--leave-move) translateY(calc((var(--from-middle) * var(--tilt-step, 16) + var(--tilt-rise, 10)) * -1% * var(--formation)))
        translateZ(calc((var(--from-middle) * var(--tilt-depth, 8) + var(--tilt-distance, 20)) * (-1 * var(--pe-vw)) * var(--formation)))
        rotateX(calc(var(--tilt-angle, 58) * 1deg * var(--formation)))
        rotateZ(calc(var(--from-middle) * var(--tilt-twist, 4) * -1deg * var(--formation)))
        scale(calc(1 - (1 - var(--tilt-size, .7)) * var(--formation))) var(--leave-turn);
    transform: var(--arrive-move) var(--leave-move) translateY(calc((var(--from-middle) * 16 + 10) * -1% * var(--formation)))
        translateZ(calc((var(--from-middle) * 8 + 20) * calc(-1 * var(--pe-vw)) * var(--formation)))
        rotateX(calc(58 * 1deg * var(--formation)))
        rotateZ(calc(var(--from-middle) * 4 * -1deg * var(--formation)))
        scale(calc(1 - (1 - .7) * var(--formation))) var(--leave-turn);
    transform: var(--arrive-move) var(--leave-move) translateY(calc((var(--from-middle) * var(--tilt-step, 16) + var(--tilt-rise, 10)) * -1% * var(--formation)))
        translateZ(calc((var(--from-middle) * var(--tilt-depth, 8) + var(--tilt-distance, 20)) * calc(-1 * var(--pe-vw)) * var(--formation)))
        rotateX(calc(var(--tilt-angle, 58) * 1deg * var(--formation)))
        rotateZ(calc(var(--from-middle) * var(--tilt-twist, 4) * -1deg * var(--formation)))
        scale(calc(1 - (1 - var(--tilt-size, .7)) * var(--formation))) var(--leave-turn);
}

/* each child heads off a golden angle round from the last: every one its own way, evenly round */
[data-formation="scatter"] > * {
    --heading: calc(var(--place) * 137.5deg + var(--scatter-turn, 200) * 1deg);
    transform: var(--arrive-move) var(--leave-move) translate(calc(cos(var(--heading)) * 140 * 1% * var(--formation)),
            calc(sin(var(--heading)) * 140 * 1% * var(--formation)))
        rotate(calc(sin(var(--place) * 97deg) * 28 * 1deg * var(--formation)))
        scale(calc(1 - (1 - .45) * var(--formation))) var(--leave-turn);
    transform: var(--arrive-move) var(--leave-move) translate(calc(cos(var(--heading)) * var(--scatter-distance, 140) * 1% * var(--formation)),
            calc(sin(var(--heading)) * var(--scatter-distance, 140) * 1% * var(--formation)))
        rotate(calc(sin(var(--place) * 97deg) * var(--scatter-spin, 28) * 1deg * var(--formation)))
        scale(calc(1 - (1 - var(--scatter-size, .45)) * var(--formation))) var(--leave-turn);
}

[data-formation="corner"]:not(.is-played) > * { --corner-x-here: calc((var(--n, 1) - 1 - var(--place)) * var(--corner-x)); }
[data-formation="corner"] > * {
    transform: var(--arrive-move) var(--leave-move) translate(calc(38 * 1% * var(--formation)), calc(36 * 1% * var(--formation)))
        rotate(calc(var(--from-middle) * 3 * 1deg * var(--formation)))
        scale(calc(1 - (1 - .2) * var(--formation))) var(--leave-turn);
    transform: var(--arrive-move) var(--leave-move) translate(calc(var(--corner-x-here, var(--corner-x, 38)) * 1% * var(--formation)), calc(var(--corner-y, 36) * 1% * var(--formation)))
        rotate(calc(var(--from-middle) * var(--corner-fan, 3) * 1deg * var(--formation)))
        scale(calc(1 - (1 - var(--corner-size, .2)) * var(--formation))) var(--leave-turn);
    opacity: calc((1 - var(--arrive-out)) * pow(1 - 0 * var(--formation), var(--place)));
    opacity: calc((1 - var(--arrive-out)) * pow(1 - var(--corner-fade, 0) * var(--formation), var(--place)));
}

[data-formation="zigzag"] > * {
    --zig: calc(mod(var(--place), 2) * 2 - 1);   /* -1 up for the first, +1 down for the next, and so on */
}
/* wrapped into rows on a phone, a step reads as a card out of line: the cards sit level */
@media (max-width: 48em) { [data-phone-columns][data-formation="zigzag"] > * { --zig: 0; } }
[data-formation="zigzag"] > * {
    transform: var(--arrive-move) var(--leave-move) translateY(calc(var(--zig) * 12 * 1% * var(--formation))) var(--leave-turn);
    transform: var(--arrive-move) var(--leave-move) translateY(calc(var(--zig) * var(--zigzag-offset, 12) * 1% * var(--formation))) var(--leave-turn);
}

/* blocks/gift-card.css */

.gift-card {
    --gfc-ink: var(--ink, #151316);
    --gfc-muted: var(--muted, #5f5a60);
    --gfc-line: var(--line, #d9d4cd);
    --gfc-plate: var(--paper, #faf9f6);
    --gfc-well: var(--surface, var(--page-bg, #eeebe6));
    --gfc-accent: var(--accent, #b7a3f6);
    --gfc-on-accent: var(--accent-ink, #151316);
    --gfc-accent-text: var(--accent-text, var(--accent, #5a3dc8));
    margin: 0; color: #222; color: var(--gfc-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, 'Helvetica Neue', Arial, sans-serif); font-size: 1.125rem; font-size: var(--text-md, 1rem); line-height: 1.45;
}
.gift-card :where(h2, p, fieldset, legend) { margin: 0; padding: 0; border: 0; min-width: 0; }
.gift-card :where(input, textarea, button) { font: inherit; color: inherit; }

.gift-card .gfc-head { margin-bottom: 4.5cqi; }
.gift-card :where(.gfc-eyebrow, .gfc-label) { color: var(--gfc-muted); font-size: 0.75rem; font-size: var(--text-xs, .78rem); font-weight: 560; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; }
.gift-card .gfc-title { margin-top: .5em; max-width: 14ch; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 400; font-size: 3rem; font-size: var(--text-xl, 3rem); line-height: .98; letter-spacing: -.015em; text-wrap: balance; }
.gift-card .gfc-lead { margin-top: 1em; max-width: 48ch; color: var(--gfc-muted); text-wrap: pretty; }
.gift-card.gfc-align-center .gfc-head { text-align: center; }
.gift-card.gfc-align-center :where(.gfc-title, .gfc-lead) { margin-left: auto; margin-right: auto; }

.gift-card .gfc-stage { --row-gap: 5cqi; align-items: flex-start; }
.gift-card .gfc-stage > .gfc-card { flex: 1 1 0; }
.gift-card .gfc-stage > .gfc-form-wrap { flex: 1.25 1 0; }

.gift-card .gfc-card {
    position: relative; container-type: inline-size; aspect-ratio: 85.6 / 54; box-sizing: border-box; overflow: hidden;
    background: var(--gfc-accent); color: var(--gfc-on-accent); border-radius: 4.5cqi;
    box-shadow: 0 .4em 1em rgba(5, 5, 5, 0.16), 0 2.4em 4em -1.6em rgba(14, 14, 14, 0.4);
    transform: rotate(0deg); transform-origin: 40% 60%; transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

@supports (color: color-mix(in lch, red, blue)) {
.gift-card .gfc-card {
    box-shadow: 0 .4em 1em color-mix(in srgb, var(--gfc-ink) 16%, transparent), 0 2.4em 4em -1.6em color-mix(in srgb, var(--gfc-ink) 40%, transparent);
}
}
.gift-card:where(.gfc-tilt-1) .gfc-card { transform: rotate(calc(-4 * 1deg)) translateY(.6em); transform: rotate(calc(var(--gfc-tilt, -4) * 1deg)) translateY(.6em); }
.gift-card:where(.gfc-tilt-1) .gfc-card:hover, .gift-card:where(.gfc-tilt-1).is-filled .gfc-card { transform: rotate(0deg) translateY(0); }
.gift-card .gfc-card > * { position: absolute; left: 7cqi; right: 7cqi; margin: 0; }
.gift-card .gfc-brand { top: 6cqi; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-size: 11cqi; line-height: .9; letter-spacing: .02em; text-transform: uppercase; }
.gift-card .gfc-amount { top: 5cqi; left: auto; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-size: 15cqi; line-height: 1; letter-spacing: -.02em; font-feature-settings: lining-nums tabular-nums; font-variant-numeric: lining-nums tabular-nums; }
.gift-card .gfc-message { top: 22cqi; right: 34cqi; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-style: italic; font-size: 4.2cqi; line-height: 1.15; }
.gift-card .gfc-line { font-size: 3.2cqi; line-height: 1.2; }
.gift-card .gfc-line-to { bottom: 20cqi; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-size: 7.2cqi; line-height: 1.05; }
.gift-card .gfc-line-from { bottom: 14cqi; }
.gift-card .gfc-line-key { margin-right: .3em; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-text, 'Helvetica Neue', Arial, sans-serif); font-size: 2.6cqi; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; vertical-align: .3em; }
.gift-card .gfc-line-to .gfc-line-key { font-size: 2.6cqi; vertical-align: .9em; }
.gift-card .gfc-card-note { bottom: 5cqi; padding-top: 2cqi; border-top: 1px solid color-mix(in srgb, var(--gfc-on-accent) 28%, transparent); font-size: 2.5cqi; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

.gift-card .gfc-form { position: relative; margin: 0; }
.gift-card.gfc-surface-paper .gfc-form { padding: 3.2cqi; background: var(--gfc-plate); border-radius: 1.2cqi; box-shadow: 0 1px 2px rgba(34, 34, 34, 0.08),
                    0 8px 24px -12px rgba(34, 34, 34, 0.18); box-shadow: 0 1px 2px color-mix(in srgb, #222 8%, transparent),
                    0 8px 24px -12px color-mix(in srgb, #222 18%, transparent); box-shadow: var(--shadow-card, 0 0 0 1px rgba(2, 2, 2, 0.07), 0 1.4cqi 3cqi -1.2cqi rgba(7, 7, 7, 0.2)); }

@supports (color: color-mix(in lch, red, blue)) {
.gift-card.gfc-surface-paper .gfc-form { box-shadow: var(--shadow-card, 0 0 0 1px color-mix(in srgb, var(--gfc-ink) 7%, transparent), 0 1.4cqi 3cqi -1.2cqi color-mix(in srgb, var(--gfc-ink) 20%, transparent)); }
}
.gift-card .gfc-step + .gfc-step, .gift-card .gfc-step + .gfc-row { margin-top: 1.6em; }
.gift-card .gfc-label { display: block; margin-bottom: .7em; }
.gift-card .gfc-pills { --row-gap: .5em; --row-item: auto; --row-flow-narrow: row wrap; }
.gift-card .gfc-pills > * { flex: 0 0 auto; }
.gift-card .gfc-pills-wide > * { flex: 1 1 12em; }
.gift-card .gfc-pill {
    position: relative; padding: .8em 1.3em; cursor: pointer; border: 1px solid var(--gfc-line); border-radius: 99em;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, serif); font-size: 1.3rem; font-size: var(--text-lg, 1.3rem); line-height: 1; font-feature-settings: lining-nums tabular-nums; font-variant-numeric: lining-nums tabular-nums;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.gift-card .gfc-pill-wide { padding: .85em 1.1em; border-radius: .7cqi; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-text, 'Helvetica Neue', Arial, sans-serif); font-size: 1em; line-height: 1.3; }
.gift-card .gfc-pill-name { display: block; font-weight: 600; }
.gift-card .gfc-pill-note { display: block; margin-top: .2em; color: var(--gfc-muted); }
.gift-card .gfc-pill input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.gift-card .gfc-pill:hover { border-color: var(--gfc-ink); }
.gift-card .gfc-pill:has(input:checked) { background: var(--gfc-accent); border-color: var(--gfc-accent); color: var(--gfc-on-accent); }
.gift-card .gfc-pill:has(input:checked) .gfc-pill-note { color: inherit; opacity: .8; }
.gift-card .gfc-pill:has(input:focus-visible) { outline: .125rem solid var(--gfc-accent-text); outline-offset: .125rem; }
.gift-card .gfc-row { --row-gap: 1em 1.2em; --row-item: 12em; margin-top: 1em; }
.gift-card .gfc-field { display: block; margin: 0; }
.gift-card .gfc-field-wide { margin-top: 1em; }
.gift-card .gfc-input {
    display: block; box-sizing: border-box; width: 100%; margin: 0; padding: .8em .9em; outline: none;
    background: var(--gfc-well); border: 1px solid var(--gfc-line); border-radius: .5cqi; transition: border-color .2s ease, box-shadow .2s ease;
}
.gift-card .gfc-input:focus { border-color: var(--gfc-accent-text); box-shadow: 0 0 0 .1875rem rgba(0, 49, 62, 0.4); }

@supports (color: color-mix(in lch, red, blue)) {
.gift-card .gfc-input:focus { box-shadow: 0 0 0 .1875rem color-mix(in srgb, var(--gfc-accent) 40%, transparent); }
}
.gift-card .gfc-textarea { resize: vertical; min-height: 4.6em; }
.gift-card .gfc-error { display: none; margin-top: 1.2em; padding: .8em 1em; background: var(--gfc-well); border-left: .125rem solid var(--gfc-accent-text); }
.gift-card .gfc-form.is-failed .gfc-error { display: block; }
.gift-card .gfc-foot { --row-gap: 1em 1.4em; --row-item: auto; align-items: center; margin-top: 1.6em; }
.gift-card .gfc-foot > * { flex: 0 1 auto; }
.gift-card .gfc-footnote { flex: 1 1 14em; color: var(--gfc-muted); }
.gift-card .gfc-submit.btn { padding: 1.05em 1.6em; border-radius: 99em; background: var(--gfc-ink); border-color: var(--gfc-ink); color: var(--gfc-plate); font-size: 0.75rem; font-size: var(--text-xs, .8rem); font-weight: 620; letter-spacing: .1em; text-transform: uppercase; }
.gift-card .gfc-submit.btn:hover { transform: none; background: var(--gfc-accent); border-color: var(--gfc-accent); color: var(--gfc-on-accent); }
.gift-card .gfc-submit.btn:focus-visible { outline: .125rem solid var(--gfc-accent-text); outline-offset: .1875rem; }
.gift-card .gfc-form.is-busy .gfc-submit { opacity: .55; cursor: progress; }
.gift-card .gfc-hp { position: absolute; left: calc(-200 * var(--pe-vw)); width: .1em; height: .1em; overflow: hidden; }

.gift-card .gfc-success { display: none; }
.gift-card .gfc-form.is-sent .gfc-fields { display: none; }
.gift-card .gfc-form.is-sent .gfc-success { display: block; }
.gift-card .gfc-success-title { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-size: 2.6rem; font-size: var(--text-xl, 2.6rem); line-height: 1; letter-spacing: -.012em; }
.gift-card .gfc-readback { margin-top: 1em; padding: .9em 1.1em; background: var(--gfc-well); border-left: .125rem solid var(--gfc-accent-text); font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-size: 1.35rem; font-size: var(--text-lg, 1.35rem); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.gift-card .gfc-success-text { margin-top: 1em; max-width: 44ch; color: var(--gfc-muted); }

@container (max-width: 46rem) {
    .gift-card .gfc-stage { --row-flow: column nowrap; --row-gap: 9cqi; }
    .gift-card :where(.gfc-title, .gfc-success-title) { font-size: min(2.4rem, 12cqi); font-size: min(var(--text-xl, 2.4rem), 12cqi); }
    .gift-card.gfc-surface-paper .gfc-form { padding: 6cqi; }
}

/* blocks/grade-ladder.css */

:where(.grade-ladder) {
    --gl-ink: var(--ink, #0a0a0a);
    --gl-muted: var(--muted, #6b6b6b);
    --gl-line: var(--line, #e3e3e3);
    --gl-accent: var(--accent, #c8ff00);
    --gl-rung-pad: .8em;
    --gl-grade-col: 4.5em;
    --gl-circuit-col: 7em;
    --gl-count-col: 3.5em;
    width: 100%; margin: 0;
    color: #222;
    color: var(--gl-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif);
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
:where(.grade-ladder.gl-rule-none) { --gl-line: transparent; }
:where(.grade-ladder.gl-rule-strong) { --gl-line: var(--rule-strong, var(--ink, #0a0a0a)); }

:where(.grade-ladder .gl-eyebrow) {
    margin: 0 0 1.2em;
    color: var(--gl-muted);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, monospace);
    font-size: .78em; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2;
}
:where(.grade-ladder .gl-list) { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--gl-line); }
:where(.grade-ladder .gl-rung) {
    --row-gap: 1em; --row-item: 0; --row-flow: row nowrap; --row-flow-narrow: row nowrap;
    align-items: center;
    padding: var(--gl-rung-pad) 0;
    border-top: 1px solid var(--gl-line);
}
:where(.grade-ladder .gl-grade) {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, monospace); font-weight: 700;
    font-size: 1.25em; line-height: 1; letter-spacing: -.01em;
}
:where(.grade-ladder .gl-chip) {
    height: 1em;
    height: var(--gl-chip, 1em);
    border-radius: 50%;
    background: var(--gl-colour, var(--gl-accent));
    box-shadow: inset 0 0 0 1px rgba(7, 7, 7, 0.22);
}

@supports (color: color-mix(in lch, red, blue)) {
:where(.grade-ladder .gl-chip) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gl-ink) 22%, transparent);
}
}
:where(.grade-ladder .gl-circuit) {
    color: var(--gl-muted); font-size: .9em; line-height: 1.3;
}
:where(.grade-ladder .gl-track) {
    position: relative; overflow: hidden;
    height: .9em;
    background: rgba(2, 2, 2, 0.07);
}

@supports (color: color-mix(in lch, red, blue)) {
:where(.grade-ladder .gl-track) {
    background: color-mix(in srgb, var(--gl-ink) 7%, transparent);
}
}
:where(.grade-ladder .gl-bar) {
    display: block; height: 100%;
    width: calc(0 * 1%);
    width: calc(var(--gl-share, 0) * 1%);
    background: var(--gl-ink);
    transition: width .6s cubic-bezier(.4, 0, .2, 1);
    transition: width .6s var(--ease, ease);
}
:where(.grade-ladder .gl-count) {
    text-align: right;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, monospace); font-size: .95em; font-weight: 500; line-height: 1;
}
:where(.grade-ladder .gl-note) {
    margin: 1.2em 0 0; color: var(--gl-muted);
    font-size: .95em; line-height: 1.45;
}

.grade-ladder .gl-grade { flex: 0 0 var(--gl-grade-col); }
.grade-ladder .gl-chip { flex: 0 0 1em; flex: 0 0 var(--gl-chip, 1em); }
.grade-ladder .gl-circuit { flex: 0 0 var(--gl-circuit-col); }
.grade-ladder .gl-track { flex: 1 1 0; }
.grade-ladder .gl-count { flex: 0 0 var(--gl-count-col); }

:where(.grade-ladder.gl-tone-dark) { --gl-ink: var(--invert-fg, #ffffff); --gl-muted: color-mix(in srgb, var(--invert-fg, #ffffff) 64%, transparent); --gl-line: color-mix(in srgb, var(--invert-fg, #ffffff) 22%, transparent); }
:where(.grade-ladder.gl-tone-dark .gl-bar) { background: var(--gl-accent); }

:where(.grade-ladder.gl-align-center) { text-align: center; }

@container (max-width: 26em) {
    .grade-ladder .gl-circuit { flex: 1 1 100%; order: 9; margin-left: calc(var(--gl-grade-col) + 1em); margin-left: calc(var(--gl-grade-col) + var(--row-gap, 1em)); }
    :where(.grade-ladder .gl-rung) { --row-flow: row wrap; }
}

/* blocks/gradient-bg.css */
.gradient-bg { position: relative; width: 100%; min-height: 20rem; min-height: var(--gbg-h, 20rem); overflow: hidden; pointer-events: none; }
.free > .gradient-bg, .layer .gradient-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; min-height: 0; z-index: -1; pointer-events: none; }
.gradient-bg i { position: absolute; left: 50%; left: var(--gbg-x, 50%); top: 50%; top: var(--gbg-y, 50%); width: 27.5%; height: 27.5%; border-radius: 50%; will-change: transform;
    background: radial-gradient(ellipse closest-side, rgba(0, 86, 108, 0.7) 0%, rgba(0, 37, 46, 0.3) 45%, transparent 68%);
    background: radial-gradient(ellipse closest-side, rgba(0, 86, 108, 0.7) 0%, rgba(0, 37, 46, 0.3) 45%, transparent var(--gbg-spread, 68%));
    background: radial-gradient(ellipse closest-side, color-mix(in srgb, #007b9a 70%, transparent) 0%, color-mix(in srgb, #007b9a 30%, transparent) 45%, transparent 68%);
    animation: gbg-drift 26s ease-in-out 0s infinite alternate;
    animation: gbg-drift var(--gbg-t, 26s) ease-in-out var(--gbg-d, 0s) infinite alternate; }

@supports (color: color-mix(in lch, red, blue)) {
.gradient-bg i {
    background: radial-gradient(ellipse closest-side, color-mix(in srgb, var(--gbg-c, var(--accent, #635bff)) 70%, transparent) 0%, color-mix(in srgb, var(--gbg-c, var(--accent, #635bff)) 30%, transparent) 45%, transparent var(--gbg-spread, 68%)); }
}
@keyframes gbg-drift { from { transform: translate(-50%, -50%) scale(2); } to { transform: translate(-44%, -55%) scale(2.32); } }

/* blocks/grids.css */

.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(8.75rem, auto); grid-gap: var(--gap, calc(2 * var(--pe-vw))); gap: var(--gap, calc(2 * var(--pe-vw))); }
.bento-tile { display: flex; flex-direction: column; justify-content: space-between; gap: .8rem;
    padding: max(1.1rem, min(calc(2.2 * var(--pe-vw)), 1.8rem));
    padding: clamp(1.1rem, calc(2.2 * var(--pe-vw)), 1.8rem);
    background: #f9f9f9;
    background: var(--card-bg, var(--page-bg)); color: #222; color: var(--ink);
    border: 1px solid rgba(5, 5, 5, 0.14);
    border: 1px solid var(--line, rgba(5, 5, 5, 0.14));
    border-radius: 1vh;
    border-radius: var(--radius, 1vh); overflow: hidden; }

@supports (color: color-mix(in lch, red, blue)) {
.bento-tile {
    border: 1px solid var(--line, color-mix(in srgb, var(--ink) 14%, transparent)); }
}
.bento-tile--wide { grid-column: span 2; }
.bento-tile--tall { grid-row: span 2; }
.bento-tile--big  { grid-column: span 2; grid-row: span 2; }
.bento-tile--dark { background: #0d0f14; background: var(--invert-bg); color: #f4f6fb; color: var(--invert-fg); border-color: transparent; }
.bento-tile .imagesingle { margin: 0; width: 100%; height: 100%; min-height: 8.75rem; }
.bento-tile .imagesingle picture, .bento-tile .imagesingle img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.bento-stat { font: 600 max(2.2rem, min(calc(5 * var(--pe-vw)), 4rem))/1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 max(2.2rem, min(calc(5 * var(--pe-vw)), 4rem))/1 var(--font-display); font: 600 max(2.2rem, min(calc(5 * var(--pe-vw)), 4rem))/1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 clamp(2.2rem, calc(5 * var(--pe-vw)), 4rem)/1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 clamp(2.2rem, calc(5 * var(--pe-vw)), 4rem)/1 var(--font-display); letter-spacing: -.02em; }
.bento-label { font: 600 .6875rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 600 .6875rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #626262; color: var(--muted); }
.bento-big-title { font: 600 max(1.6rem, min(calc(3 * var(--pe-vw)), 2.6rem))/1.05 'Open Sans', Arial, Helvetica, sans-serif; font: 600 max(1.6rem, min(calc(3 * var(--pe-vw)), 2.6rem))/1.05 var(--font-display); font: 600 max(1.6rem, min(calc(3 * var(--pe-vw)), 2.6rem))/1.05 'Open Sans', Arial, Helvetica, sans-serif; font: 600 clamp(1.6rem, calc(3 * var(--pe-vw)), 2.6rem)/1.05 'Open Sans', Arial, Helvetica, sans-serif; font: 600 clamp(1.6rem, calc(3 * var(--pe-vw)), 2.6rem)/1.05 var(--font-display); letter-spacing: -.02em; }
@media (max-width: 768px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento-tile--big, .bento-tile--wide { grid-column: span 2; } }

.masonry { -moz-columns: 3 15rem; columns: 3 15rem; -moz-column-gap: var(--gap, calc(2 * var(--pe-vw))); column-gap: var(--gap, calc(2 * var(--pe-vw))); }
.masonry > * { page-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid; margin-bottom: var(--gap, calc(2 * var(--pe-vw))); border-radius: 1vh; border-radius: var(--radius, 1vh); overflow: hidden; display: block; }
.masonry .imagesingle { margin: 0; }
.masonry .imagesingle img, .masonry img { width: 100%; display: block; }
.masonry-quote { padding: max(1.2rem, min(calc(2.4 * var(--pe-vw)), 2rem)); padding: clamp(1.2rem, calc(2.4 * var(--pe-vw)), 2rem); background: #0d0f14; background: var(--invert-bg); color: #f4f6fb; color: var(--invert-fg);
    font: 500 1.15rem/1.4 'Open Sans', Arial, Helvetica, sans-serif;
    font: 500 1.15rem/1.4 var(--font-display); }
@media (max-width: 768px) { .masonry { -moz-columns: 2 150px; columns: 2 150px; } }

/* blocks/guest-seats.css */

:where(.guest-seats) {
    --gs-ink: var(--ink, #0a0a0a);
    --gs-muted: var(--muted, #6b6b6b);
    --gs-line: var(--line, #e3e3e3);
    --gs-free: var(--surface, color-mix(in srgb, var(--ink, #0a0a0a) 6%, var(--paper, #fff)));
    --gs-accent: var(--accent, #635bff);
    --gs-on-accent: var(--on-accent, #fff);
    --gs-card-w: 2.9em;
    --gs-card-h: 2.05em;
    --gs-gap: .5em;
    width: 100%; margin: 0;
    color: #222;
    color: var(--gs-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif);
}
:where(.guest-seats .gs-row) {
    display: flex; flex-wrap: wrap; gap: var(--gs-gap);
    margin: 0; padding: 0; list-style: none;
}
:where(.guest-seats .gs-seat) {
    display: grid; align-items: center; justify-items: center; place-items: center;
    width: var(--gs-card-w); height: var(--gs-card-h); margin: 0;
    border-radius: .22em .22em .3em .3em;
    background: var(--gs-free);
    box-shadow: inset 0 0 0 1px var(--gs-line), 0 .12em 0 -.02em rgba(3, 3, 3, 0.08);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, serif); font-weight: 600; font-size: .92em; line-height: 1; letter-spacing: .03em;
    color: var(--gs-ink);
    transition: background .35s cubic-bezier(.4, 0, .2, 1), color .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s cubic-bezier(.4, 0, .2, 1);
    transition: background .35s var(--ease, ease), color .35s var(--ease, ease), box-shadow .35s var(--ease, ease);
}

@supports (color: color-mix(in lch, red, blue)) {
:where(.guest-seats .gs-seat) {
    box-shadow: inset 0 0 0 1px var(--gs-line), 0 .12em 0 -.02em color-mix(in srgb, var(--gs-ink) 8%, transparent);
}
}
:where(.guest-seats .gs-seat.is-taken) {
    background: var(--gs-accent); color: var(--gs-on-accent);
    box-shadow: 0 .12em 0 -.02em rgba(6, 6, 6, 0.18);
}

@supports (color: color-mix(in lch, red, blue)) {
:where(.guest-seats .gs-seat.is-taken) {
    box-shadow: 0 .12em 0 -.02em color-mix(in srgb, var(--gs-ink) 18%, transparent);
}
}
:where(.guest-seats .gs-seat.is-next) { animation: gs-breathe 2.4s ease-in-out infinite; }
:where(.guest-seats .gs-seat.is-new) { animation: gs-land .7s cubic-bezier(.34, 1.56, .64, 1); }
:where(.guest-seats.is-full .gs-seat) { animation: none; }
@keyframes gs-breathe {
    0%, 100% { box-shadow: inset 0 0 0 1px var(--gs-line), 0 .12em 0 -.02em rgba(3, 3, 3, 0.08); }

@supports (color: color-mix(in lch, red, blue)) {
0%, 100% { box-shadow: inset 0 0 0 1px var(--gs-line), 0 .12em 0 -.02em color-mix(in srgb, var(--gs-ink) 8%, transparent); }
}
    50%      { box-shadow: inset 0 0 0 1px var(--gs-accent), 0 0 0 .28em rgba(0, 22, 28, 0.18); }

@supports (color: color-mix(in lch, red, blue)) {
50%      { box-shadow: inset 0 0 0 1px var(--gs-accent), 0 0 0 .28em color-mix(in srgb, var(--gs-accent) 18%, transparent); }
}
}
@keyframes gs-land {
    0%   { transform: translateY(-.9em) scale(1.15); opacity: 0; }
    60%  { opacity: 1; }
    100% { transform: none; }
}

:where(.guest-seats .gs-count) {
    margin: .9em 0 0;
    color: var(--gs-muted);
    font-size: .82em; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
:where(.guest-seats .gs-count b, .guest-seats .gs-count strong) {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, serif); font-weight: 600; font-size: 1.35em; letter-spacing: 0; text-transform: none;
    color: var(--gs-accent); vertical-align: -.04em;
}
:where(.guest-seats .gs-count-full) { display: none; }
:where(.guest-seats.is-full .gs-count-open) { display: none; }
:where(.guest-seats.is-full .gs-count-full) { display: block; }

:where(.guest-seats.gs-tone-dark) {
    --gs-ink: var(--invert-fg, #f3ede1);
    --gs-muted: color-mix(in srgb, var(--invert-fg, #f3ede1) 64%, transparent);
    --gs-line: color-mix(in srgb, var(--invert-fg, #f3ede1) 22%, transparent);
    --gs-free: color-mix(in srgb, var(--invert-fg, #f3ede1) 8%, transparent);
    --gs-on-accent: var(--invert-fg, #f3ede1);
}

html.respect-reduced-motion :where(.guest-seats .gs-seat) { animation: none !important; }

/* blocks/halftone.css */

[data-halftone] {
    position: relative;
    isolation: isolate;
    background-color: transparent;
    background-color: var(--ht-paper, transparent);
}
[data-halftone="screen"], [data-halftone="duotone"], [data-halftone="live"] { overflow: clip; }
[data-halftone="texture"] { background-color: #f9f9f9; background-color: var(--ht-paper, var(--page-bg, #fff)); }

[data-ht-hide-source] img { opacity: 0; }

[data-halftone]::before,
[data-halftone][data-ht-plates="2"]::after {
    content: "";
    position: absolute;
    top: calc(-1 * .125rem);
    right: calc(-1 * .125rem);
    bottom: calc(-1 * .125rem);
    left: calc(-1 * .125rem);
    top: calc(-1 * var(--ht-bleed, .125rem));
    right: calc(-1 * var(--ht-bleed, .125rem));
    bottom: calc(-1 * var(--ht-bleed, .125rem));
    left: calc(-1 * var(--ht-bleed, .125rem));
    z-index: 1;
    pointer-events: none;
    background-image:
        var(--ht-screen-a),
        linear-gradient(rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.24)),
        linear-gradient(rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.34)),
        none;
    background-size: 100% 100%, 100% 100%, 100% 100%, cover;
    background-position: 0 0, 0 0, 0 0, center;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat;
    background-blend-mode: overlay, screen, normal, normal;
    filter: grayscale(1) brightness(1) contrast(calc(14 * 100%)) var(--ht-filter-a);
    filter: grayscale(1) brightness(var(--ht-gain, 1)) contrast(calc(var(--ht-cut, 14) * 100%)) var(--ht-filter-a);
    mix-blend-mode: multiply;
    mix-blend-mode: var(--ht-blend, multiply);
}

@supports (color: rgb(0 0 0 / 0)) {
[data-halftone]::before,
[data-halftone][data-ht-plates="2"]::after {
    background-image:
        var(--ht-screen-a),
        linear-gradient(rgb(255 255 255 / calc(.24 * 100%)), rgb(255 255 255 / calc(.24 * 100%))),
        linear-gradient(rgb(0 0 0 / calc((1 - .66) * 100%)), rgb(0 0 0 / calc((1 - .66) * 100%))),
        none;
    background-image:
        var(--ht-screen-a),
        linear-gradient(rgb(255 255 255 / calc(var(--ht-lift, .24) * 100%)), rgb(255 255 255 / calc(var(--ht-lift, .24) * 100%))),
        linear-gradient(rgb(0 0 0 / calc((1 - var(--ht-white, .66)) * 100%)), rgb(0 0 0 / calc((1 - var(--ht-white, .66)) * 100%))),
        var(--ht-src, none);
}
}
[data-halftone][data-ht-plates="2"]::after {
    background-image:
        var(--ht-screen-b),
        linear-gradient(rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.24)),
        linear-gradient(rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.34)),
        none;
    filter: grayscale(1) brightness(1) contrast(calc(14 * 100%)) var(--ht-filter-b);
    filter: grayscale(1) brightness(var(--ht-gain-b, 1)) contrast(calc(var(--ht-cut, 14) * 100%)) var(--ht-filter-b);
    translate: .0938rem calc(-1 * .0938rem);
    translate: var(--ht-shift-b, .0938rem) calc(-1 * var(--ht-shift-b, .0938rem));
}

@supports (color: rgb(0 0 0 / 0)) {
[data-halftone][data-ht-plates="2"]::after {
    background-image:
        var(--ht-screen-b),
        linear-gradient(rgb(255 255 255 / calc(.24 * 100%)), rgb(255 255 255 / calc(.24 * 100%))),
        linear-gradient(rgb(0 0 0 / calc((1 - .66) * 100%)), rgb(0 0 0 / calc((1 - .66) * 100%))),
        none;
    background-image:
        var(--ht-screen-b),
        linear-gradient(rgb(255 255 255 / calc(var(--ht-lift-b, .24) * 100%)), rgb(255 255 255 / calc(var(--ht-lift-b, .24) * 100%))),
        linear-gradient(rgb(0 0 0 / calc((1 - var(--ht-white-b, .66)) * 100%)), rgb(0 0 0 / calc((1 - var(--ht-white-b, .66)) * 100%))),
        var(--ht-src, none);
}
}

[data-halftone="texture"]::before,
[data-halftone="texture"]::after { z-index: -1; top: 0; right: 0; bottom: 0; left: 0; }

[data-halftone][data-ht-pending]::before,
[data-halftone][data-ht-pending]::after { content: none; }

[data-ht-degrade] img,
[data-ht-degrade] video { filter: grayscale(1) contrast(1.14); }
[data-halftone][data-ht-degrade]::before,
[data-halftone][data-ht-degrade]::after,
[data-ht-degrade]::before, [data-ht-degrade]::after { content: none; }

@media print {
    [data-halftone]::before,
    [data-halftone][data-ht-plates="2"]::after { content: none; }
    [data-ht-hide-source] img { opacity: 1; }
}

/* blocks/hero.css */

.hero-block {
    --hero-paper:   var(--paper, var(--page-bg, #ffffff));
    --hero-surface: var(--surface, color-mix(in srgb, var(--accent, #635bff) 6%, var(--hero-paper)));
    --hero-ink:     var(--ink, #0a2540);
    --hero-muted:   var(--muted, #425466);
    --hero-line:    var(--line, #e3e8ee);
    --hero-accent:  var(--accent, #635bff);
    --hero-accent2: var(--accent-2, color-mix(in srgb, var(--hero-accent) 55%, #00d4ff));
    --hero-invert:  var(--invert-fg, #ffffff);
    --hero-radius:  var(--r-lg, var(--radius, 0.75rem));
    --hero-shadow:  var(--shadow-card, 0 1.875rem 3.75rem -1.875rem color-mix(in srgb, var(--hero-ink) 35%, transparent));
    --hero-font-display: var(--font-display, system-ui, sans-serif);
    --hero-font-text:    var(--font-text, var(--font-display, system-ui, sans-serif));
    --hero-font-mono:    var(--font-mono, ui-monospace, monospace);
}
.hero-block[data-scheme="dark"] {
    --hero-paper:   var(--paper-dark, #0b0e16);
    --hero-surface: var(--surface-dark, color-mix(in srgb, var(--hero-accent) 14%, #11151f));
    --hero-ink:     var(--ink-dark, #f4f6fb);
    --hero-muted:   var(--muted-dark, rgba(244, 246, 251, 0.65));
    --hero-line:    var(--line-dark, rgba(244, 246, 251, 0.18));
    --hero-shadow:  0 1.875rem 3.75rem -1.75rem rgba(0, 0, 0, .6);
}

@supports (color: color-mix(in lch, red, blue)) {
.hero-block[data-scheme="dark"] {
    --hero-muted:   var(--muted-dark, color-mix(in srgb, #f4f6fb 65%, transparent));
    --hero-line:    var(--line-dark, color-mix(in srgb, #f4f6fb 18%, transparent));
}
}

.hero-block { width: 100%; box-sizing: border-box; }
.hero-block .hero-eyebrow {
    margin: 0; font: 600 .8rem/1 var(--hero-font-mono);
    letter-spacing: .24em; text-transform: uppercase; color: var(--hero-accent);
}
.hero-block .hero-title {
    margin: 0; color: var(--hero-ink);
    font: 600 max(2.6rem, min(calc(8 * var(--pe-vw)), 6rem))/1.02 var(--hero-font-display);
    font: 600 clamp(2.6rem, calc(8 * var(--pe-vw)), 6rem)/1.02 var(--hero-font-display); letter-spacing: -.035em;
}
.hero-block .hero-title .accent { font-style: normal; color: var(--hero-accent); }
.hero-block .hero-sub {
    margin: 0; max-width: 46ch; color: var(--hero-muted);
    font: 400 max(1rem, min(calc(1.6 * var(--pe-vw)), 1.3rem))/1.55 var(--hero-font-text);
    font: 400 clamp(1rem, calc(1.6 * var(--pe-vw)), 1.3rem)/1.55 var(--hero-font-text);
}

.hero-block[data-variant="mesh"] {
    position: relative; overflow: hidden; isolation: isolate;
    min-height: 100vh;
    min-height: var(--hero-height, 100vh);
    display: grid; align-items: center; justify-items: center; place-items: center;
    padding: max(2rem, min(8vh, 7rem)) max(1.5rem, min(calc(6 * var(--pe-vw)), 6rem));
    padding: max(2rem, min(8vh, 7rem)) clamp(1.5rem, calc(6 * var(--pe-vw)), 6rem);
    padding: max(1.5rem, min(calc(6 * var(--pe-vw)), 6rem)) max(1.5rem, min(calc(6 * var(--pe-vw)), 6rem));
    padding: max(1.5rem, min(calc(6 * var(--pe-vw)), 6rem)) clamp(1.5rem, calc(6 * var(--pe-vw)), 6rem);
    padding: clamp(2rem, 8vh, 7rem) clamp(1.5rem, calc(6 * var(--pe-vw)), 6rem);
    background: var(--hero-paper);
}
.hero-mesh-bg { --hero-accent: var(--accent, #635bff); --hero-accent2: var(--accent-2, color-mix(in srgb, var(--hero-accent) 55%, #00d4ff));
    position: absolute; top: -10%; right: -10%; bottom: -10%; left: -10%; z-index: -1; filter: blur(3.75rem) saturate(1.15); filter: blur(var(--mesh-blur, 3.75rem)) saturate(1.15); }
.hero-mesh-bg i {
    position: absolute; width: 55%; height: 55%; border-radius: 50%;
    background: radial-gradient(circle at center, var(--hero-blob, var(--hero-accent)), transparent 68%);
    background: radial-gradient(circle at center, var(--hero-blob, var(--hero-accent)), transparent var(--mesh-spread, 68%));
    opacity: .5;
    opacity: var(--mesh-opacity, .5); will-change: transform;
    animation: hero-drift 22s ease-in-out infinite alternate;
}
.hero-block[data-scheme="dark"] .hero-mesh-bg i { opacity: .55; opacity: var(--mesh-opacity, .55); }
.hero-mesh-bg i:nth-child(1) { --hero-blob: var(--hb1, var(--hero-accent));  top: -8%;  left: -6%;  animation-duration: 24s; }
.hero-mesh-bg i:nth-child(2) { --hero-blob: var(--hb2, var(--hero-accent2)); top: 10%; right: -8%; left: auto; animation-duration: 30s; animation-delay: -6s; }
.hero-mesh-bg i:nth-child(3) { --hero-blob: var(--hb3, color-mix(in srgb, var(--hero-accent) 70%, #34d3ff)); bottom: -12%; left: 8%; top: auto; animation-duration: 27s; animation-delay: -12s; }
.hero-mesh-bg i:nth-child(4) { --hero-blob: var(--hb4, color-mix(in srgb, var(--hero-accent) 55%, #ffd07a)); bottom: -6%; right: 6%; left: auto; top: auto; animation-duration: 33s; animation-delay: -3s; }
.hero-mesh-bg i:nth-child(5) { --hero-blob: var(--hb5, color-mix(in srgb, var(--hero-accent) 60%, #b06bff)); top: 32%; left: 34%; animation-duration: 29s; animation-delay: -9s; }
.hero-mesh-bg i:nth-child(6) { --hero-blob: var(--hb6, color-mix(in srgb, var(--hero-accent) 50%, #34ffd3)); bottom: 30%; right: 32%; top: auto; left: auto; animation-duration: 31s; animation-delay: -15s; }
@keyframes hero-drift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(14%, 10%) scale(1.18); }
    100% { transform: translate(-10%, -6%) scale(.92); }
}

.hero-block[data-variant="mesh"] .hero-inner {
    display: flex; flex-direction: column; gap: max(1rem, min(2.4vh, 1.8rem)); gap: clamp(1rem, 2.4vh, 1.8rem);
    max-width: 56rem; position: relative; z-index: 1;
}
.hero-inner.align-center { align-items: center; text-align: center; }
.hero-inner.align-left { align-items: flex-start; text-align: left; margin-right: auto; }
.hero-mesh-bg.align-center { }

.hero-cta-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .4rem; }
.hero-inner.align-center .hero-cta-row { justify-content: center; }
.hero-block[data-variant="mesh"] .hero-btn {
    display: inline-flex; align-items: center; justify-content: center;
    font: 600 .95rem/1 var(--hero-font-text); letter-spacing: -.01em; -webkit-text-decoration: none; text-decoration: none; white-space: nowrap;
    padding: .95rem 1.8rem; border-radius: 62.4375rem;
    border: 1px solid var(--hero-line); color: var(--hero-ink);
    background: rgba(2, 2, 2, 0.05);
    transition: transform .2s, background .2s, border-color .2s, color .2s, box-shadow .2s;
}

@supports (color: color-mix(in lch, red, blue)) {
.hero-block[data-variant="mesh"] .hero-btn {
    background: color-mix(in srgb, var(--hero-ink) 5%, transparent);
}
}
.hero-block[data-variant="mesh"] .hero-btn:hover { transform: translateY(-.125rem); border-color: var(--hero-accent); }
.hero-block[data-variant="mesh"] .hero-btn.is-solid {
    background: var(--hero-accent); color: var(--hero-invert); border-color: var(--hero-accent);
    box-shadow: 0 .625rem 2.125rem rgba(0, 39, 49, 0.32);
}

@supports (color: color-mix(in lch, red, blue)) {
.hero-block[data-variant="mesh"] .hero-btn.is-solid {
    box-shadow: 0 .625rem 2.125rem color-mix(in srgb, var(--hero-accent) 32%, transparent);
}
}
.hero-block[data-variant="mesh"] .hero-btn.is-solid:hover { box-shadow: 0 .875rem 2.625rem rgba(0, 49, 62, 0.4); }

@supports (color: color-mix(in lch, red, blue)) {
.hero-block[data-variant="mesh"] .hero-btn.is-solid:hover { box-shadow: 0 .875rem 2.625rem color-mix(in srgb, var(--hero-accent) 40%, transparent); }
}

.hero-block[data-variant="flap"] {
    min-height: 92vh;
    min-height: var(--hero-height, 92vh);
    display: grid; align-items: center; overflow: hidden;
    padding: max(3rem, min(9vh, 8rem)) max(1.5rem, min(calc(6 * var(--pe-vw)), 7rem));
    padding: max(3rem, min(9vh, 8rem)) clamp(1.5rem, calc(6 * var(--pe-vw)), 7rem);
    padding: max(1.5rem, min(calc(6 * var(--pe-vw)), 7rem)) max(1.5rem, min(calc(6 * var(--pe-vw)), 7rem));
    padding: max(1.5rem, min(calc(6 * var(--pe-vw)), 7rem)) clamp(1.5rem, calc(6 * var(--pe-vw)), 7rem);
    padding: clamp(3rem, 9vh, 8rem) clamp(1.5rem, calc(6 * var(--pe-vw)), 7rem);
    background: var(--hero-paper);
}
.hero-block[data-variant="flap"] .hero-inner { display: flex; flex-direction: column; max-width: 22ch; }
.hero-block[data-variant="flap"] .hero-eyebrow { margin: 0 0 1.2rem; font-size: max(.75rem, min(calc(1.6 * var(--pe-vw)), 1rem)); font-size: clamp(.75rem, calc(1.6 * var(--pe-vw)), 1rem); letter-spacing: .3em; }
.hero-block[data-variant="flap"] .hero-title { font: 800 max(2rem, min(calc(5 * var(--pe-vw)), 3.6rem))/1 var(--hero-font-display); font: 800 clamp(2rem, calc(5 * var(--pe-vw)), 3.6rem)/1 var(--hero-font-display); letter-spacing: -.025em; }
.hero-flap {
    margin: -.06em 0 .1em -.02em;
    font: 900 max(3.4rem, min(calc(18 * var(--pe-vw)), 16rem))/.82 var(--hero-font-display);
    font: 900 clamp(3.4rem, calc(18 * var(--pe-vw)), 16rem)/.82 var(--hero-font-display);
    letter-spacing: -.04em; text-transform: uppercase; color: var(--hero-accent); white-space: nowrap;
}
.hero-flap .flap-cell { display: inline-block; transition: transform .12s ease, color .12s ease; }
.hero-flap .flap-cell.flapping { color: #0a6076; transform: rotateX(28deg); }

@supports (color: color-mix(in lch, red, blue)) {
.hero-flap .flap-cell.flapping { color: color-mix(in srgb, var(--hero-accent) 70%, var(--hero-ink)); }
}
.hero-flap .flap-cell.is-space { width: .35em; }
.hero-block[data-variant="flap"] .hero-sub { margin: 1.4rem 0 0; max-width: 36ch; font-size: max(1rem, min(calc(1.9 * var(--pe-vw)), 1.3rem)); font-size: clamp(1rem, calc(1.9 * var(--pe-vw)), 1.3rem); }
.hero-block[data-variant="flap"] .hero-sub b { color: var(--hero-ink); }
.hero-block[data-variant="flap"] .hero-cta {
    align-self: flex-start; margin-top: 2rem; display: inline-flex; align-items: center; justify-content: center;
    font: 700 max(1rem, min(calc(1.8 * var(--pe-vw)), 1.25rem))/1 var(--hero-font-display);
    font: 700 clamp(1rem, calc(1.8 * var(--pe-vw)), 1.25rem)/1 var(--hero-font-display); letter-spacing: -.01em; -webkit-text-decoration: none; text-decoration: none;
    padding: .9em 1.7em; border-radius: 62.4375rem;
    background: var(--hero-accent); color: var(--hero-invert); border: .125rem solid var(--hero-accent);
    transition: transform .2s, box-shadow .2s;
}
.hero-block[data-variant="flap"] .hero-cta:hover { transform: translateY(-.125rem); box-shadow: 0 .625rem 1.875rem rgba(0, 49, 62, 0.4); }

@supports (color: color-mix(in lch, red, blue)) {
.hero-block[data-variant="flap"] .hero-cta:hover { box-shadow: 0 .625rem 1.875rem color-mix(in srgb, var(--hero-accent) 40%, transparent); }
}
@media (max-width: 768px) {
    .hero-block[data-variant="flap"] .hero-inner { max-width: none; }
    .hero-flap { white-space: normal; }
}

.hero-block[data-variant="editorial"] {
    container-type: inline-size;
    display: grid; grid-template-columns: 1.05fr .95fr; align-items: center;
    grid-gap: max(2rem, min(6cqi, 6rem));
    grid-gap: clamp(2rem, 6cqi, 6rem);
    gap: max(2rem, min(6cqi, 6rem));
    gap: clamp(2rem, 6cqi, 6rem); padding: max(3rem, min(8cqi, 8rem)) 0; padding: clamp(3rem, 8cqi, 8rem) 0;
}
.hero-block[data-variant="editorial"].is-flipped { direction: rtl; }
.hero-block[data-variant="editorial"].is-flipped > * { direction: ltr; }
.hero-block[data-variant="editorial"] .hero-copy { min-width: 0; }
.hero-block[data-variant="editorial"] .hero-eyebrow { margin: 0 0 max(1rem, min(2.6cqi, 1.8rem)); margin: 0 0 clamp(1rem, 2.6cqi, 1.8rem); font-weight: 500; letter-spacing: .28em; font-size: max(.72rem, min(.9cqi, .9rem)); font-size: clamp(.72rem, .9cqi, .9rem); }
.hero-block[data-variant="editorial"] .hero-title {
    font: 400 max(2.4rem, min(8cqi, 6.5rem))/.98 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 max(2.4rem, min(8cqi, 6.5rem))/.98 var(--font-display, Georgia, serif);
    font: 400 max(2.4rem, min(8cqi, 6.5rem))/.98 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 clamp(2.4rem, 8cqi, 6.5rem)/.98 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 clamp(2.4rem, 8cqi, 6.5rem)/.98 var(--font-display, Georgia, serif);
    letter-spacing: -.015em; text-wrap: balance;
}
.hero-block[data-variant="editorial"] .hero-title .accent { font-style: italic; color: var(--hero-accent); }
.hero-block[data-variant="editorial"] .hero-sub { margin: max(1.4rem, min(3cqi, 2.2rem)) 0 0; margin: clamp(1.4rem, 3cqi, 2.2rem) 0 0; max-width: 38ch; font-size: max(1rem, min(1.5cqi, 1.25rem)); font-size: clamp(1rem, 1.5cqi, 1.25rem); }
.hero-block[data-variant="editorial"] .hero-cta {
    display: inline-block; margin-top: max(1.6rem, min(3.4cqi, 2.6rem)); margin-top: clamp(1.6rem, 3.4cqi, 2.6rem); padding: .95em 2.2em;
    background: var(--hero-ink); color: var(--hero-paper); -webkit-text-decoration: none; text-decoration: none;
    font: 500 max(.74rem, min(.95cqi, .92rem))/1 var(--hero-font-mono);
    font: 500 clamp(.74rem, .95cqi, .92rem)/1 var(--hero-font-mono); letter-spacing: .16em; text-transform: uppercase;
    border-radius: 62.4375rem; transition: background .25s ease, transform .2s ease;
}
.hero-block[data-variant="editorial"] .hero-cta:hover { background: var(--hero-accent); transform: translateY(-.125rem); }
.hero-block[data-variant="editorial"] .hero-plate {
    margin: 0; align-self: stretch; min-height: max(18rem, min(44cqi, 34rem)); min-height: clamp(18rem, 44cqi, 34rem);
    background: var(--hero-surface); border-radius: var(--hero-radius); overflow: hidden; box-shadow: var(--hero-shadow);
}
.hero-block[data-variant="editorial"] .hero-plate img,
.hero-block[data-variant="editorial"] .hero-plate picture { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
@container (max-width: 44rem) {
    .hero-block[data-variant="editorial"] { grid-template-columns: 1fr; gap: max(1.6rem, min(5cqi, 2.4rem)); gap: clamp(1.6rem, 5cqi, 2.4rem); }
    .hero-block[data-variant="editorial"].is-flipped { direction: ltr; }
    .hero-block[data-variant="editorial"] .hero-plate { min-height: max(14rem, min(70cqi, 22rem)); min-height: clamp(14rem, 70cqi, 22rem); order: -1; }
}

.hero-block[data-variant="broken"] {
    display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; min-height: 64vh;
}
.hero-block[data-variant="broken"] .hero-media {
    grid-column: 5 / 13; grid-row: 1; z-index: 1; aspect-ratio: 4 / 3; overflow: hidden;
    border: 1px solid var(--hero-line); border-radius: var(--hero-radius);
}
.hero-block[data-variant="broken"] .hero-media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.hero-block[data-variant="broken"] .hero-title {
    grid-column: 1 / 9; grid-row: 1; z-index: 2;
    font-family: var(--hero-font-display); font-weight: 600;
    font-size: max(4rem, min(calc(16 * var(--pe-vw)), 13rem));
    font-size: clamp(4rem, calc(16 * var(--pe-vw)), 13rem); line-height: .82; letter-spacing: -.04em; pointer-events: none;
}
.hero-block[data-variant="broken"] .hero-title .outline {
    color: transparent;
    -webkit-text-stroke: .125rem var(--hero-accent); text-stroke: .125rem var(--hero-accent);
}
.hero-block[data-variant="broken"] .hero-caption {
    grid-column: 1 / 6; grid-row: 1; align-self: end; z-index: 3;
    margin: 0 0 -1.5rem; max-width: 34ch;
    font-family: var(--hero-font-text); font-size: .95rem; line-height: 1.5; color: var(--hero-muted);
}
.hero-block[data-variant="broken"] .hero-folio {
    grid-column: 11 / 13; grid-row: 1; align-self: start; justify-self: end; z-index: 3;
    transform: translate(1.2rem, -1.4rem);
    font-family: var(--hero-font-mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--hero-accent); background: var(--hero-paper); padding: .4rem .6rem;
    border: 1px solid var(--hero-line); border-radius: var(--hero-radius);
}
@media (max-width: 768px) {
    .hero-block[data-variant="broken"] { min-height: 0; row-gap: 1.5rem; }
    .hero-block[data-variant="broken"] .hero-media { grid-column: 1 / 13; grid-row: 2; }
    .hero-block[data-variant="broken"] .hero-title { grid-column: 1 / 13; grid-row: 1; font-size: max(3.4rem, min(calc(22 * var(--pe-vw)), 6rem)); font-size: clamp(3.4rem, calc(22 * var(--pe-vw)), 6rem); }
    .hero-block[data-variant="broken"] .hero-title .outline { -webkit-text-stroke-width: 0.0938rem; }
    .hero-block[data-variant="broken"] .hero-caption { grid-column: 1 / 13; grid-row: 3; margin: 0; max-width: none; }
    .hero-block[data-variant="broken"] .hero-folio { grid-column: 1 / 13; grid-row: 4; justify-self: start; transform: none; }
}

/* blocks/hover-index.css */

[data-hidx-plate] {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    aspect-ratio: var(--hidx-aspect, 4 / 5);
    background: #fafafa;
    background: var(--hidx-plate-bg, var(--page-2, var(--panel, #eae7e1)));
}

[data-hidx-stack] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translate3d(calc(0 * .625rem),
                           calc(0 * .625rem), 0)
               scale(1.03);
    transform: translate3d(calc(var(--hidx-px, 0) * var(--hidx-shift, .625rem)),
                           calc(var(--hidx-py, 0) * var(--hidx-shift, .625rem)), 0)
               scale(var(--hidx-scale, 1.03));
    will-change: transform;
}

[data-hidx-frame] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: opacity 420ms cubic-bezier(.4, 0, .2, 1);
    transition: opacity var(--hidx-crossfade, 420ms) var(--hidx-ease, var(--ease, cubic-bezier(.22, .61, .36, 1)));
    will-change: opacity;
}
[data-hidx-frame].is-active { opacity: 1; }

[data-hidx-host]:not(.hidx-ready) [data-hidx-frame]:first-child { opacity: 1; }

[data-hidx-frame] .imagesingle { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; }
[data-hidx-frame] .imagesingle img,
[data-hidx-frame] .imagesingle picture { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }

[data-hidx-plate]::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    height: var(--hidx-rail-height, 1px);
    background: rgba(5, 5, 5, 0.14);
    background: var(--hidx-plate-rail, var(--line, rgba(0, 0, 0, .16)));
    opacity: 0;
    transition: opacity 180ms linear;
    transition: opacity var(--dur-fast, 180ms) linear;
    z-index: 2;
}
[data-hidx-plate].is-loading::after { opacity: 1; }
[data-hidx-plate]::before {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 34%;
    height: 1px;
    height: var(--hidx-rail-height, 1px);
    background: #007b9a;
    background: var(--hidx-plate-bar, var(--accent, #253a7c));
    transform: translateX(-100%);
    opacity: 0;
    z-index: 3;
}
[data-hidx-plate].is-loading::before {
    opacity: 1;
    animation: hidx-sweep 1150ms cubic-bezier(.4, 0, .2, 1) infinite;
    animation: hidx-sweep var(--hidx-sweep-duration, 1150ms) var(--ease-soft, cubic-bezier(.4, 0, .2, 1)) infinite;
}
@keyframes hidx-sweep {
    from { transform: translateX(-100%); }
    to   { transform: translateX(340%); }
}

[data-hidx-item] { transition: color 320ms cubic-bezier(.4, 0, .2, 1); transition: color var(--hidx-dim-duration, var(--dur, 320ms)) var(--hidx-ease, var(--ease, cubic-bezier(.22, .61, .36, 1))); }
[data-hidx-item].is-dim { color: #9f9f9f; color: var(--hidx-dim, var(--faint, #6e695e)); }

@media (hover: none) {
    [data-hidx-item].is-active { color: #222; color: var(--ink, #111); }
}

/* blocks/hud-reticle.css */
:where([data-reticle]) {
    position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none;
    width: var(--hr-size, calc(7 * var(--pe-vw))); height: var(--hr-size, calc(7 * var(--pe-vw)));
    color: #007b9a;
    color: var(--hr-color, var(--accent, #5de6ff));
    opacity: 1; transition: opacity .35s cubic-bezier(.4, 0, .2, 1); transition: opacity .35s var(--ease, ease);
    will-change: transform, width, height;
}
:where([data-reticle].is-hidden) { opacity: 0; }
:where([data-reticle] svg) { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; overflow: visible; transition: opacity .25s cubic-bezier(.4, 0, .2, 1), transform .25s cubic-bezier(.4, 0, .2, 1); transition: opacity var(--hr-ease, .25s) var(--ease, ease), transform var(--hr-ease, .25s) var(--ease, ease); }
:where([data-reticle] [data-reticle-ring]) { animation: hr-turn 14s linear infinite; }
:where([data-reticle] [data-reticle-brackets]) { opacity: 0; transform: scale(1.12); }
:where([data-reticle].is-lock [data-reticle-ring]) { opacity: 0; transform: scale(.6); }
:where([data-reticle].is-lock [data-reticle-brackets]) { opacity: 1; transform: scale(1); }
:where([data-reticle].is-tick [data-reticle-ring]) { transform: scale(.82); }
:where([data-reticle-readout]) {
    position: absolute; left: calc(100% + .6em); top: 50%; transform: translateY(-50%);
    white-space: nowrap; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.6875rem; font-size: var(--text-label, var(--fs-label, calc(.8 * var(--pe-vw))));
    letter-spacing: .06em; text-transform: uppercase; color: #007b9a; color: var(--hr-color, var(--accent, #5de6ff));
    padding: .25em .55em; background: rgba(194, 194, 194, 0.78); background: var(--hr-readout-bg, rgba(194, 194, 194, 0.78)); background: color-mix(in srgb, #f9f9f9 78%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}

@supports (color: color-mix(in lch, red, blue)) {
:where([data-reticle-readout]) { background: var(--hr-readout-bg, color-mix(in srgb, var(--page-bg, #070b12) 78%, transparent));
}
}
:where([data-reticle].is-lock [data-reticle-readout]) { left: 0; top: calc(100% + .5em); transform: none; }
@keyframes hr-turn { to { transform: rotate(360deg); } }
html.respect-reduced-motion :where([data-reticle] [data-reticle-ring]) { animation: none; }

/* blocks/icons.css */
/*!
 * Bootstrap Icons v1.11.3 (https://icons.getbootstrap.com/)
 * Copyright 2019-2024 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/icons/blob/main/LICENSE)
 */@font-face{font-display:block;font-family:bootstrap-icons;src:url("/media/fonts/bootstrap-icons.woff2") format("woff2")}.bi::before,[class*=" bi-"]::before,[class^=bi-]::before{display:inline-block;font-family:bootstrap-icons!important;font-style:normal;font-weight:400!important;font-feature-settings:normal;font-variant:normal;text-transform:none;line-height:1;vertical-align:-.125em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.bi-123::before{content:"\f67f"}.bi-alarm-fill::before{content:"\f101"}.bi-alarm::before{content:"\f102"}.bi-align-bottom::before{content:"\f103"}.bi-align-center::before{content:"\f104"}.bi-align-end::before{content:"\f105"}.bi-align-middle::before{content:"\f106"}.bi-align-start::before{content:"\f107"}.bi-align-top::before{content:"\f108"}.bi-alt::before{content:"\f109"}.bi-app-indicator::before{content:"\f10a"}.bi-app::before{content:"\f10b"}.bi-archive-fill::before{content:"\f10c"}.bi-archive::before{content:"\f10d"}.bi-arrow-90deg-down::before{content:"\f10e"}.bi-arrow-90deg-left::before{content:"\f10f"}.bi-arrow-90deg-right::before{content:"\f110"}.bi-arrow-90deg-up::before{content:"\f111"}.bi-arrow-bar-down::before{content:"\f112"}.bi-arrow-bar-left::before{content:"\f113"}.bi-arrow-bar-right::before{content:"\f114"}.bi-arrow-bar-up::before{content:"\f115"}.bi-arrow-clockwise::before{content:"\f116"}.bi-arrow-counterclockwise::before{content:"\f117"}.bi-arrow-down-circle-fill::before{content:"\f118"}.bi-arrow-down-circle::before{content:"\f119"}.bi-arrow-down-left-circle-fill::before{content:"\f11a"}.bi-arrow-down-left-circle::before{content:"\f11b"}.bi-arrow-down-left-square-fill::before{content:"\f11c"}.bi-arrow-down-left-square::before{content:"\f11d"}.bi-arrow-down-left::before{content:"\f11e"}.bi-arrow-down-right-circle-fill::before{content:"\f11f"}.bi-arrow-down-right-circle::before{content:"\f120"}.bi-arrow-down-right-square-fill::before{content:"\f121"}.bi-arrow-down-right-square::before{content:"\f122"}.bi-arrow-down-right::before{content:"\f123"}.bi-arrow-down-short::before{content:"\f124"}.bi-arrow-down-square-fill::before{content:"\f125"}.bi-arrow-down-square::before{content:"\f126"}.bi-arrow-down-up::before{content:"\f127"}.bi-arrow-down::before{content:"\f128"}.bi-arrow-left-circle-fill::before{content:"\f129"}.bi-arrow-left-circle::before{content:"\f12a"}.bi-arrow-left-right::before{content:"\f12b"}.bi-arrow-left-short::before{content:"\f12c"}.bi-arrow-left-square-fill::before{content:"\f12d"}.bi-arrow-left-square::before{content:"\f12e"}.bi-arrow-left::before{content:"\f12f"}.bi-arrow-repeat::before{content:"\f130"}.bi-arrow-return-left::before{content:"\f131"}.bi-arrow-return-right::before{content:"\f132"}.bi-arrow-right-circle-fill::before{content:"\f133"}.bi-arrow-right-circle::before{content:"\f134"}.bi-arrow-right-short::before{content:"\f135"}.bi-arrow-right-square-fill::before{content:"\f136"}.bi-arrow-right-square::before{content:"\f137"}.bi-arrow-right::before{content:"\f138"}.bi-arrow-up-circle-fill::before{content:"\f139"}.bi-arrow-up-circle::before{content:"\f13a"}.bi-arrow-up-left-circle-fill::before{content:"\f13b"}.bi-arrow-up-left-circle::before{content:"\f13c"}.bi-arrow-up-left-square-fill::before{content:"\f13d"}.bi-arrow-up-left-square::before{content:"\f13e"}.bi-arrow-up-left::before{content:"\f13f"}.bi-arrow-up-right-circle-fill::before{content:"\f140"}.bi-arrow-up-right-circle::before{content:"\f141"}.bi-arrow-up-right-square-fill::before{content:"\f142"}.bi-arrow-up-right-square::before{content:"\f143"}.bi-arrow-up-right::before{content:"\f144"}.bi-arrow-up-short::before{content:"\f145"}.bi-arrow-up-square-fill::before{content:"\f146"}.bi-arrow-up-square::before{content:"\f147"}.bi-arrow-up::before{content:"\f148"}.bi-arrows-angle-contract::before{content:"\f149"}.bi-arrows-angle-expand::before{content:"\f14a"}.bi-arrows-collapse::before{content:"\f14b"}.bi-arrows-expand::before{content:"\f14c"}.bi-arrows-fullscreen::before{content:"\f14d"}.bi-arrows-move::before{content:"\f14e"}.bi-aspect-ratio-fill::before{content:"\f14f"}.bi-aspect-ratio::before{content:"\f150"}.bi-asterisk::before{content:"\f151"}.bi-at::before{content:"\f152"}.bi-award-fill::before{content:"\f153"}.bi-award::before{content:"\f154"}.bi-back::before{content:"\f155"}.bi-backspace-fill::before{content:"\f156"}.bi-backspace-reverse-fill::before{content:"\f157"}.bi-backspace-reverse::before{content:"\f158"}.bi-backspace::before{content:"\f159"}.bi-badge-3d-fill::before{content:"\f15a"}.bi-badge-3d::before{content:"\f15b"}.bi-badge-4k-fill::before{content:"\f15c"}.bi-badge-4k::before{content:"\f15d"}.bi-badge-8k-fill::before{content:"\f15e"}.bi-badge-8k::before{content:"\f15f"}.bi-badge-ad-fill::before{content:"\f160"}.bi-badge-ad::before{content:"\f161"}.bi-badge-ar-fill::before{content:"\f162"}.bi-badge-ar::before{content:"\f163"}.bi-badge-cc-fill::before{content:"\f164"}.bi-badge-cc::before{content:"\f165"}.bi-badge-hd-fill::before{content:"\f166"}.bi-badge-hd::before{content:"\f167"}.bi-badge-tm-fill::before{content:"\f168"}.bi-badge-tm::before{content:"\f169"}.bi-badge-vo-fill::before{content:"\f16a"}.bi-badge-vo::before{content:"\f16b"}.bi-badge-vr-fill::before{content:"\f16c"}.bi-badge-vr::before{content:"\f16d"}.bi-badge-wc-fill::before{content:"\f16e"}.bi-badge-wc::before{content:"\f16f"}.bi-bag-check-fill::before{content:"\f170"}.bi-bag-check::before{content:"\f171"}.bi-bag-dash-fill::before{content:"\f172"}.bi-bag-dash::before{content:"\f173"}.bi-bag-fill::before{content:"\f174"}.bi-bag-plus-fill::before{content:"\f175"}.bi-bag-plus::before{content:"\f176"}.bi-bag-x-fill::before{content:"\f177"}.bi-bag-x::before{content:"\f178"}.bi-bag::before{content:"\f179"}.bi-bar-chart-fill::before{content:"\f17a"}.bi-bar-chart-line-fill::before{content:"\f17b"}.bi-bar-chart-line::before{content:"\f17c"}.bi-bar-chart-steps::before{content:"\f17d"}.bi-bar-chart::before{content:"\f17e"}.bi-basket-fill::before{content:"\f17f"}.bi-basket::before{content:"\f180"}.bi-basket2-fill::before{content:"\f181"}.bi-basket2::before{content:"\f182"}.bi-basket3-fill::before{content:"\f183"}.bi-basket3::before{content:"\f184"}.bi-battery-charging::before{content:"\f185"}.bi-battery-full::before{content:"\f186"}.bi-battery-half::before{content:"\f187"}.bi-battery::before{content:"\f188"}.bi-bell-fill::before{content:"\f189"}.bi-bell::before{content:"\f18a"}.bi-bezier::before{content:"\f18b"}.bi-bezier2::before{content:"\f18c"}.bi-bicycle::before{content:"\f18d"}.bi-binoculars-fill::before{content:"\f18e"}.bi-binoculars::before{content:"\f18f"}.bi-blockquote-left::before{content:"\f190"}.bi-blockquote-right::before{content:"\f191"}.bi-book-fill::before{content:"\f192"}.bi-book-half::before{content:"\f193"}.bi-book::before{content:"\f194"}.bi-bookmark-check-fill::before{content:"\f195"}.bi-bookmark-check::before{content:"\f196"}.bi-bookmark-dash-fill::before{content:"\f197"}.bi-bookmark-dash::before{content:"\f198"}.bi-bookmark-fill::before{content:"\f199"}.bi-bookmark-heart-fill::before{content:"\f19a"}.bi-bookmark-heart::before{content:"\f19b"}.bi-bookmark-plus-fill::before{content:"\f19c"}.bi-bookmark-plus::before{content:"\f19d"}.bi-bookmark-star-fill::before{content:"\f19e"}.bi-bookmark-star::before{content:"\f19f"}.bi-bookmark-x-fill::before{content:"\f1a0"}.bi-bookmark-x::before{content:"\f1a1"}.bi-bookmark::before{content:"\f1a2"}.bi-bookmarks-fill::before{content:"\f1a3"}.bi-bookmarks::before{content:"\f1a4"}.bi-bookshelf::before{content:"\f1a5"}.bi-bootstrap-fill::before{content:"\f1a6"}.bi-bootstrap-reboot::before{content:"\f1a7"}.bi-bootstrap::before{content:"\f1a8"}.bi-border-all::before{content:"\f1a9"}.bi-border-bottom::before{content:"\f1aa"}.bi-border-center::before{content:"\f1ab"}.bi-border-inner::before{content:"\f1ac"}.bi-border-left::before{content:"\f1ad"}.bi-border-middle::before{content:"\f1ae"}.bi-border-outer::before{content:"\f1af"}.bi-border-right::before{content:"\f1b0"}.bi-border-style::before{content:"\f1b1"}.bi-border-top::before{content:"\f1b2"}.bi-border-width::before{content:"\f1b3"}.bi-border::before{content:"\f1b4"}.bi-bounding-box-circles::before{content:"\f1b5"}.bi-bounding-box::before{content:"\f1b6"}.bi-box-arrow-down-left::before{content:"\f1b7"}.bi-box-arrow-down-right::before{content:"\f1b8"}.bi-box-arrow-down::before{content:"\f1b9"}.bi-box-arrow-in-down-left::before{content:"\f1ba"}.bi-box-arrow-in-down-right::before{content:"\f1bb"}.bi-box-arrow-in-down::before{content:"\f1bc"}.bi-box-arrow-in-left::before{content:"\f1bd"}.bi-box-arrow-in-right::before{content:"\f1be"}.bi-box-arrow-in-up-left::before{content:"\f1bf"}.bi-box-arrow-in-up-right::before{content:"\f1c0"}.bi-box-arrow-in-up::before{content:"\f1c1"}.bi-box-arrow-left::before{content:"\f1c2"}.bi-box-arrow-right::before{content:"\f1c3"}.bi-box-arrow-up-left::before{content:"\f1c4"}.bi-box-arrow-up-right::before{content:"\f1c5"}.bi-box-arrow-up::before{content:"\f1c6"}.bi-box-seam::before{content:"\f1c7"}.bi-box::before{content:"\f1c8"}.bi-braces::before{content:"\f1c9"}.bi-bricks::before{content:"\f1ca"}.bi-briefcase-fill::before{content:"\f1cb"}.bi-briefcase::before{content:"\f1cc"}.bi-brightness-alt-high-fill::before{content:"\f1cd"}.bi-brightness-alt-high::before{content:"\f1ce"}.bi-brightness-alt-low-fill::before{content:"\f1cf"}.bi-brightness-alt-low::before{content:"\f1d0"}.bi-brightness-high-fill::before{content:"\f1d1"}.bi-brightness-high::before{content:"\f1d2"}.bi-brightness-low-fill::before{content:"\f1d3"}.bi-brightness-low::before{content:"\f1d4"}.bi-broadcast-pin::before{content:"\f1d5"}.bi-broadcast::before{content:"\f1d6"}.bi-brush-fill::before{content:"\f1d7"}.bi-brush::before{content:"\f1d8"}.bi-bucket-fill::before{content:"\f1d9"}.bi-bucket::before{content:"\f1da"}.bi-bug-fill::before{content:"\f1db"}.bi-bug::before{content:"\f1dc"}.bi-building::before{content:"\f1dd"}.bi-bullseye::before{content:"\f1de"}.bi-calculator-fill::before{content:"\f1df"}.bi-calculator::before{content:"\f1e0"}.bi-calendar-check-fill::before{content:"\f1e1"}.bi-calendar-check::before{content:"\f1e2"}.bi-calendar-date-fill::before{content:"\f1e3"}.bi-calendar-date::before{content:"\f1e4"}.bi-calendar-day-fill::before{content:"\f1e5"}.bi-calendar-day::before{content:"\f1e6"}.bi-calendar-event-fill::before{content:"\f1e7"}.bi-calendar-event::before{content:"\f1e8"}.bi-calendar-fill::before{content:"\f1e9"}.bi-calendar-minus-fill::before{content:"\f1ea"}.bi-calendar-minus::before{content:"\f1eb"}.bi-calendar-month-fill::before{content:"\f1ec"}.bi-calendar-month::before{content:"\f1ed"}.bi-calendar-plus-fill::before{content:"\f1ee"}.bi-calendar-plus::before{content:"\f1ef"}.bi-calendar-range-fill::before{content:"\f1f0"}.bi-calendar-range::before{content:"\f1f1"}.bi-calendar-week-fill::before{content:"\f1f2"}.bi-calendar-week::before{content:"\f1f3"}.bi-calendar-x-fill::before{content:"\f1f4"}.bi-calendar-x::before{content:"\f1f5"}.bi-calendar::before{content:"\f1f6"}.bi-calendar2-check-fill::before{content:"\f1f7"}.bi-calendar2-check::before{content:"\f1f8"}.bi-calendar2-date-fill::before{content:"\f1f9"}.bi-calendar2-date::before{content:"\f1fa"}.bi-calendar2-day-fill::before{content:"\f1fb"}.bi-calendar2-day::before{content:"\f1fc"}.bi-calendar2-event-fill::before{content:"\f1fd"}.bi-calendar2-event::before{content:"\f1fe"}.bi-calendar2-fill::before{content:"\f1ff"}.bi-calendar2-minus-fill::before{content:"\f200"}.bi-calendar2-minus::before{content:"\f201"}.bi-calendar2-month-fill::before{content:"\f202"}.bi-calendar2-month::before{content:"\f203"}.bi-calendar2-plus-fill::before{content:"\f204"}.bi-calendar2-plus::before{content:"\f205"}.bi-calendar2-range-fill::before{content:"\f206"}.bi-calendar2-range::before{content:"\f207"}.bi-calendar2-week-fill::before{content:"\f208"}.bi-calendar2-week::before{content:"\f209"}.bi-calendar2-x-fill::before{content:"\f20a"}.bi-calendar2-x::before{content:"\f20b"}.bi-calendar2::before{content:"\f20c"}.bi-calendar3-event-fill::before{content:"\f20d"}.bi-calendar3-event::before{content:"\f20e"}.bi-calendar3-fill::before{content:"\f20f"}.bi-calendar3-range-fill::before{content:"\f210"}.bi-calendar3-range::before{content:"\f211"}.bi-calendar3-week-fill::before{content:"\f212"}.bi-calendar3-week::before{content:"\f213"}.bi-calendar3::before{content:"\f214"}.bi-calendar4-event::before{content:"\f215"}.bi-calendar4-range::before{content:"\f216"}.bi-calendar4-week::before{content:"\f217"}.bi-calendar4::before{content:"\f218"}.bi-camera-fill::before{content:"\f219"}.bi-camera-reels-fill::before{content:"\f21a"}.bi-camera-reels::before{content:"\f21b"}.bi-camera-video-fill::before{content:"\f21c"}.bi-camera-video-off-fill::before{content:"\f21d"}.bi-camera-video-off::before{content:"\f21e"}.bi-camera-video::before{content:"\f21f"}.bi-camera::before{content:"\f220"}.bi-camera2::before{content:"\f221"}.bi-capslock-fill::before{content:"\f222"}.bi-capslock::before{content:"\f223"}.bi-card-checklist::before{content:"\f224"}.bi-card-heading::before{content:"\f225"}.bi-card-image::before{content:"\f226"}.bi-card-list::before{content:"\f227"}.bi-card-text::before{content:"\f228"}.bi-caret-down-fill::before{content:"\f229"}.bi-caret-down-square-fill::before{content:"\f22a"}.bi-caret-down-square::before{content:"\f22b"}.bi-caret-down::before{content:"\f22c"}.bi-caret-left-fill::before{content:"\f22d"}.bi-caret-left-square-fill::before{content:"\f22e"}.bi-caret-left-square::before{content:"\f22f"}.bi-caret-left::before{content:"\f230"}.bi-caret-right-fill::before{content:"\f231"}.bi-caret-right-square-fill::before{content:"\f232"}.bi-caret-right-square::before{content:"\f233"}.bi-caret-right::before{content:"\f234"}.bi-caret-up-fill::before{content:"\f235"}.bi-caret-up-square-fill::before{content:"\f236"}.bi-caret-up-square::before{content:"\f237"}.bi-caret-up::before{content:"\f238"}.bi-cart-check-fill::before{content:"\f239"}.bi-cart-check::before{content:"\f23a"}.bi-cart-dash-fill::before{content:"\f23b"}.bi-cart-dash::before{content:"\f23c"}.bi-cart-fill::before{content:"\f23d"}.bi-cart-plus-fill::before{content:"\f23e"}.bi-cart-plus::before{content:"\f23f"}.bi-cart-x-fill::before{content:"\f240"}.bi-cart-x::before{content:"\f241"}.bi-cart::before{content:"\f242"}.bi-cart2::before{content:"\f243"}.bi-cart3::before{content:"\f244"}.bi-cart4::before{content:"\f245"}.bi-cash-stack::before{content:"\f246"}.bi-cash::before{content:"\f247"}.bi-cast::before{content:"\f248"}.bi-chat-dots-fill::before{content:"\f249"}.bi-chat-dots::before{content:"\f24a"}.bi-chat-fill::before{content:"\f24b"}.bi-chat-left-dots-fill::before{content:"\f24c"}.bi-chat-left-dots::before{content:"\f24d"}.bi-chat-left-fill::before{content:"\f24e"}.bi-chat-left-quote-fill::before{content:"\f24f"}.bi-chat-left-quote::before{content:"\f250"}.bi-chat-left-text-fill::before{content:"\f251"}.bi-chat-left-text::before{content:"\f252"}.bi-chat-left::before{content:"\f253"}.bi-chat-quote-fill::before{content:"\f254"}.bi-chat-quote::before{content:"\f255"}.bi-chat-right-dots-fill::before{content:"\f256"}.bi-chat-right-dots::before{content:"\f257"}.bi-chat-right-fill::before{content:"\f258"}.bi-chat-right-quote-fill::before{content:"\f259"}.bi-chat-right-quote::before{content:"\f25a"}.bi-chat-right-text-fill::before{content:"\f25b"}.bi-chat-right-text::before{content:"\f25c"}.bi-chat-right::before{content:"\f25d"}.bi-chat-square-dots-fill::before{content:"\f25e"}.bi-chat-square-dots::before{content:"\f25f"}.bi-chat-square-fill::before{content:"\f260"}.bi-chat-square-quote-fill::before{content:"\f261"}.bi-chat-square-quote::before{content:"\f262"}.bi-chat-square-text-fill::before{content:"\f263"}.bi-chat-square-text::before{content:"\f264"}.bi-chat-square::before{content:"\f265"}.bi-chat-text-fill::before{content:"\f266"}.bi-chat-text::before{content:"\f267"}.bi-chat::before{content:"\f268"}.bi-check-all::before{content:"\f269"}.bi-check-circle-fill::before{content:"\f26a"}.bi-check-circle::before{content:"\f26b"}.bi-check-square-fill::before{content:"\f26c"}.bi-check-square::before{content:"\f26d"}.bi-check::before{content:"\f26e"}.bi-check2-all::before{content:"\f26f"}.bi-check2-circle::before{content:"\f270"}.bi-check2-square::before{content:"\f271"}.bi-check2::before{content:"\f272"}.bi-chevron-bar-contract::before{content:"\f273"}.bi-chevron-bar-down::before{content:"\f274"}.bi-chevron-bar-expand::before{content:"\f275"}.bi-chevron-bar-left::before{content:"\f276"}.bi-chevron-bar-right::before{content:"\f277"}.bi-chevron-bar-up::before{content:"\f278"}.bi-chevron-compact-down::before{content:"\f279"}.bi-chevron-compact-left::before{content:"\f27a"}.bi-chevron-compact-right::before{content:"\f27b"}.bi-chevron-compact-up::before{content:"\f27c"}.bi-chevron-contract::before{content:"\f27d"}.bi-chevron-double-down::before{content:"\f27e"}.bi-chevron-double-left::before{content:"\f27f"}.bi-chevron-double-right::before{content:"\f280"}.bi-chevron-double-up::before{content:"\f281"}.bi-chevron-down::before{content:"\f282"}.bi-chevron-expand::before{content:"\f283"}.bi-chevron-left::before{content:"\f284"}.bi-chevron-right::before{content:"\f285"}.bi-chevron-up::before{content:"\f286"}.bi-circle-fill::before{content:"\f287"}.bi-circle-half::before{content:"\f288"}.bi-circle-square::before{content:"\f289"}.bi-circle::before{content:"\f28a"}.bi-clipboard-check::before{content:"\f28b"}.bi-clipboard-data::before{content:"\f28c"}.bi-clipboard-minus::before{content:"\f28d"}.bi-clipboard-plus::before{content:"\f28e"}.bi-clipboard-x::before{content:"\f28f"}.bi-clipboard::before{content:"\f290"}.bi-clock-fill::before{content:"\f291"}.bi-clock-history::before{content:"\f292"}.bi-clock::before{content:"\f293"}.bi-cloud-arrow-down-fill::before{content:"\f294"}.bi-cloud-arrow-down::before{content:"\f295"}.bi-cloud-arrow-up-fill::before{content:"\f296"}.bi-cloud-arrow-up::before{content:"\f297"}.bi-cloud-check-fill::before{content:"\f298"}.bi-cloud-check::before{content:"\f299"}.bi-cloud-download-fill::before{content:"\f29a"}.bi-cloud-download::before{content:"\f29b"}.bi-cloud-drizzle-fill::before{content:"\f29c"}.bi-cloud-drizzle::before{content:"\f29d"}.bi-cloud-fill::before{content:"\f29e"}.bi-cloud-fog-fill::before{content:"\f29f"}.bi-cloud-fog::before{content:"\f2a0"}.bi-cloud-fog2-fill::before{content:"\f2a1"}.bi-cloud-fog2::before{content:"\f2a2"}.bi-cloud-hail-fill::before{content:"\f2a3"}.bi-cloud-hail::before{content:"\f2a4"}.bi-cloud-haze-fill::before{content:"\f2a6"}.bi-cloud-haze::before{content:"\f2a7"}.bi-cloud-haze2-fill::before{content:"\f2a8"}.bi-cloud-lightning-fill::before{content:"\f2a9"}.bi-cloud-lightning-rain-fill::before{content:"\f2aa"}.bi-cloud-lightning-rain::before{content:"\f2ab"}.bi-cloud-lightning::before{content:"\f2ac"}.bi-cloud-minus-fill::before{content:"\f2ad"}.bi-cloud-minus::before{content:"\f2ae"}.bi-cloud-moon-fill::before{content:"\f2af"}.bi-cloud-moon::before{content:"\f2b0"}.bi-cloud-plus-fill::before{content:"\f2b1"}.bi-cloud-plus::before{content:"\f2b2"}.bi-cloud-rain-fill::before{content:"\f2b3"}.bi-cloud-rain-heavy-fill::before{content:"\f2b4"}.bi-cloud-rain-heavy::before{content:"\f2b5"}.bi-cloud-rain::before{content:"\f2b6"}.bi-cloud-slash-fill::before{content:"\f2b7"}.bi-cloud-slash::before{content:"\f2b8"}.bi-cloud-sleet-fill::before{content:"\f2b9"}.bi-cloud-sleet::before{content:"\f2ba"}.bi-cloud-snow-fill::before{content:"\f2bb"}.bi-cloud-snow::before{content:"\f2bc"}.bi-cloud-sun-fill::before{content:"\f2bd"}.bi-cloud-sun::before{content:"\f2be"}.bi-cloud-upload-fill::before{content:"\f2bf"}.bi-cloud-upload::before{content:"\f2c0"}.bi-cloud::before{content:"\f2c1"}.bi-clouds-fill::before{content:"\f2c2"}.bi-clouds::before{content:"\f2c3"}.bi-cloudy-fill::before{content:"\f2c4"}.bi-cloudy::before{content:"\f2c5"}.bi-code-slash::before{content:"\f2c6"}.bi-code-square::before{content:"\f2c7"}.bi-code::before{content:"\f2c8"}.bi-collection-fill::before{content:"\f2c9"}.bi-collection-play-fill::before{content:"\f2ca"}.bi-collection-play::before{content:"\f2cb"}.bi-collection::before{content:"\f2cc"}.bi-columns-gap::before{content:"\f2cd"}.bi-columns::before{content:"\f2ce"}.bi-command::before{content:"\f2cf"}.bi-compass-fill::before{content:"\f2d0"}.bi-compass::before{content:"\f2d1"}.bi-cone-striped::before{content:"\f2d2"}.bi-cone::before{content:"\f2d3"}.bi-controller::before{content:"\f2d4"}.bi-cpu-fill::before{content:"\f2d5"}.bi-cpu::before{content:"\f2d6"}.bi-credit-card-2-back-fill::before{content:"\f2d7"}.bi-credit-card-2-back::before{content:"\f2d8"}.bi-credit-card-2-front-fill::before{content:"\f2d9"}.bi-credit-card-2-front::before{content:"\f2da"}.bi-credit-card-fill::before{content:"\f2db"}.bi-credit-card::before{content:"\f2dc"}.bi-crop::before{content:"\f2dd"}.bi-cup-fill::before{content:"\f2de"}.bi-cup-straw::before{content:"\f2df"}.bi-cup::before{content:"\f2e0"}.bi-cursor-fill::before{content:"\f2e1"}.bi-cursor-text::before{content:"\f2e2"}.bi-cursor::before{content:"\f2e3"}.bi-dash-circle-dotted::before{content:"\f2e4"}.bi-dash-circle-fill::before{content:"\f2e5"}.bi-dash-circle::before{content:"\f2e6"}.bi-dash-square-dotted::before{content:"\f2e7"}.bi-dash-square-fill::before{content:"\f2e8"}.bi-dash-square::before{content:"\f2e9"}.bi-dash::before{content:"\f2ea"}.bi-diagram-2-fill::before{content:"\f2eb"}.bi-diagram-2::before{content:"\f2ec"}.bi-diagram-3-fill::before{content:"\f2ed"}.bi-diagram-3::before{content:"\f2ee"}.bi-diamond-fill::before{content:"\f2ef"}.bi-diamond-half::before{content:"\f2f0"}.bi-diamond::before{content:"\f2f1"}.bi-dice-1-fill::before{content:"\f2f2"}.bi-dice-1::before{content:"\f2f3"}.bi-dice-2-fill::before{content:"\f2f4"}.bi-dice-2::before{content:"\f2f5"}.bi-dice-3-fill::before{content:"\f2f6"}.bi-dice-3::before{content:"\f2f7"}.bi-dice-4-fill::before{content:"\f2f8"}.bi-dice-4::before{content:"\f2f9"}.bi-dice-5-fill::before{content:"\f2fa"}.bi-dice-5::before{content:"\f2fb"}.bi-dice-6-fill::before{content:"\f2fc"}.bi-dice-6::before{content:"\f2fd"}.bi-disc-fill::before{content:"\f2fe"}.bi-disc::before{content:"\f2ff"}.bi-discord::before{content:"\f300"}.bi-display-fill::before{content:"\f301"}.bi-display::before{content:"\f302"}.bi-distribute-horizontal::before{content:"\f303"}.bi-distribute-vertical::before{content:"\f304"}.bi-door-closed-fill::before{content:"\f305"}.bi-door-closed::before{content:"\f306"}.bi-door-open-fill::before{content:"\f307"}.bi-door-open::before{content:"\f308"}.bi-dot::before{content:"\f309"}.bi-download::before{content:"\f30a"}.bi-droplet-fill::before{content:"\f30b"}.bi-droplet-half::before{content:"\f30c"}.bi-droplet::before{content:"\f30d"}.bi-earbuds::before{content:"\f30e"}.bi-easel-fill::before{content:"\f30f"}.bi-easel::before{content:"\f310"}.bi-egg-fill::before{content:"\f311"}.bi-egg-fried::before{content:"\f312"}.bi-egg::before{content:"\f313"}.bi-eject-fill::before{content:"\f314"}.bi-eject::before{content:"\f315"}.bi-emoji-angry-fill::before{content:"\f316"}.bi-emoji-angry::before{content:"\f317"}.bi-emoji-dizzy-fill::before{content:"\f318"}.bi-emoji-dizzy::before{content:"\f319"}.bi-emoji-expressionless-fill::before{content:"\f31a"}.bi-emoji-expressionless::before{content:"\f31b"}.bi-emoji-frown-fill::before{content:"\f31c"}.bi-emoji-frown::before{content:"\f31d"}.bi-emoji-heart-eyes-fill::before{content:"\f31e"}.bi-emoji-heart-eyes::before{content:"\f31f"}.bi-emoji-laughing-fill::before{content:"\f320"}.bi-emoji-laughing::before{content:"\f321"}.bi-emoji-neutral-fill::before{content:"\f322"}.bi-emoji-neutral::before{content:"\f323"}.bi-emoji-smile-fill::before{content:"\f324"}.bi-emoji-smile-upside-down-fill::before{content:"\f325"}.bi-emoji-smile-upside-down::before{content:"\f326"}.bi-emoji-smile::before{content:"\f327"}.bi-emoji-sunglasses-fill::before{content:"\f328"}.bi-emoji-sunglasses::before{content:"\f329"}.bi-emoji-wink-fill::before{content:"\f32a"}.bi-emoji-wink::before{content:"\f32b"}.bi-envelope-fill::before{content:"\f32c"}.bi-envelope-open-fill::before{content:"\f32d"}.bi-envelope-open::before{content:"\f32e"}.bi-envelope::before{content:"\f32f"}.bi-eraser-fill::before{content:"\f330"}.bi-eraser::before{content:"\f331"}.bi-exclamation-circle-fill::before{content:"\f332"}.bi-exclamation-circle::before{content:"\f333"}.bi-exclamation-diamond-fill::before{content:"\f334"}.bi-exclamation-diamond::before{content:"\f335"}.bi-exclamation-octagon-fill::before{content:"\f336"}.bi-exclamation-octagon::before{content:"\f337"}.bi-exclamation-square-fill::before{content:"\f338"}.bi-exclamation-square::before{content:"\f339"}.bi-exclamation-triangle-fill::before{content:"\f33a"}.bi-exclamation-triangle::before{content:"\f33b"}.bi-exclamation::before{content:"\f33c"}.bi-exclude::before{content:"\f33d"}.bi-eye-fill::before{content:"\f33e"}.bi-eye-slash-fill::before{content:"\f33f"}.bi-eye-slash::before{content:"\f340"}.bi-eye::before{content:"\f341"}.bi-eyedropper::before{content:"\f342"}.bi-eyeglasses::before{content:"\f343"}.bi-facebook::before{content:"\f344"}.bi-file-arrow-down-fill::before{content:"\f345"}.bi-file-arrow-down::before{content:"\f346"}.bi-file-arrow-up-fill::before{content:"\f347"}.bi-file-arrow-up::before{content:"\f348"}.bi-file-bar-graph-fill::before{content:"\f349"}.bi-file-bar-graph::before{content:"\f34a"}.bi-file-binary-fill::before{content:"\f34b"}.bi-file-binary::before{content:"\f34c"}.bi-file-break-fill::before{content:"\f34d"}.bi-file-break::before{content:"\f34e"}.bi-file-check-fill::before{content:"\f34f"}.bi-file-check::before{content:"\f350"}.bi-file-code-fill::before{content:"\f351"}.bi-file-code::before{content:"\f352"}.bi-file-diff-fill::before{content:"\f353"}.bi-file-diff::before{content:"\f354"}.bi-file-earmark-arrow-down-fill::before{content:"\f355"}.bi-file-earmark-arrow-down::before{content:"\f356"}.bi-file-earmark-arrow-up-fill::before{content:"\f357"}.bi-file-earmark-arrow-up::before{content:"\f358"}.bi-file-earmark-bar-graph-fill::before{content:"\f359"}.bi-file-earmark-bar-graph::before{content:"\f35a"}.bi-file-earmark-binary-fill::before{content:"\f35b"}.bi-file-earmark-binary::before{content:"\f35c"}.bi-file-earmark-break-fill::before{content:"\f35d"}.bi-file-earmark-break::before{content:"\f35e"}.bi-file-earmark-check-fill::before{content:"\f35f"}.bi-file-earmark-check::before{content:"\f360"}.bi-file-earmark-code-fill::before{content:"\f361"}.bi-file-earmark-code::before{content:"\f362"}.bi-file-earmark-diff-fill::before{content:"\f363"}.bi-file-earmark-diff::before{content:"\f364"}.bi-file-earmark-easel-fill::before{content:"\f365"}.bi-file-earmark-easel::before{content:"\f366"}.bi-file-earmark-excel-fill::before{content:"\f367"}.bi-file-earmark-excel::before{content:"\f368"}.bi-file-earmark-fill::before{content:"\f369"}.bi-file-earmark-font-fill::before{content:"\f36a"}.bi-file-earmark-font::before{content:"\f36b"}.bi-file-earmark-image-fill::before{content:"\f36c"}.bi-file-earmark-image::before{content:"\f36d"}.bi-file-earmark-lock-fill::before{content:"\f36e"}.bi-file-earmark-lock::before{content:"\f36f"}.bi-file-earmark-lock2-fill::before{content:"\f370"}.bi-file-earmark-lock2::before{content:"\f371"}.bi-file-earmark-medical-fill::before{content:"\f372"}.bi-file-earmark-medical::before{content:"\f373"}.bi-file-earmark-minus-fill::before{content:"\f374"}.bi-file-earmark-minus::before{content:"\f375"}.bi-file-earmark-music-fill::before{content:"\f376"}.bi-file-earmark-music::before{content:"\f377"}.bi-file-earmark-person-fill::before{content:"\f378"}.bi-file-earmark-person::before{content:"\f379"}.bi-file-earmark-play-fill::before{content:"\f37a"}.bi-file-earmark-play::before{content:"\f37b"}.bi-file-earmark-plus-fill::before{content:"\f37c"}.bi-file-earmark-plus::before{content:"\f37d"}.bi-file-earmark-post-fill::before{content:"\f37e"}.bi-file-earmark-post::before{content:"\f37f"}.bi-file-earmark-ppt-fill::before{content:"\f380"}.bi-file-earmark-ppt::before{content:"\f381"}.bi-file-earmark-richtext-fill::before{content:"\f382"}.bi-file-earmark-richtext::before{content:"\f383"}.bi-file-earmark-ruled-fill::before{content:"\f384"}.bi-file-earmark-ruled::before{content:"\f385"}.bi-file-earmark-slides-fill::before{content:"\f386"}.bi-file-earmark-slides::before{content:"\f387"}.bi-file-earmark-spreadsheet-fill::before{content:"\f388"}.bi-file-earmark-spreadsheet::before{content:"\f389"}.bi-file-earmark-text-fill::before{content:"\f38a"}.bi-file-earmark-text::before{content:"\f38b"}.bi-file-earmark-word-fill::before{content:"\f38c"}.bi-file-earmark-word::before{content:"\f38d"}.bi-file-earmark-x-fill::before{content:"\f38e"}.bi-file-earmark-x::before{content:"\f38f"}.bi-file-earmark-zip-fill::before{content:"\f390"}.bi-file-earmark-zip::before{content:"\f391"}.bi-file-earmark::before{content:"\f392"}.bi-file-easel-fill::before{content:"\f393"}.bi-file-easel::before{content:"\f394"}.bi-file-excel-fill::before{content:"\f395"}.bi-file-excel::before{content:"\f396"}.bi-file-fill::before{content:"\f397"}.bi-file-font-fill::before{content:"\f398"}.bi-file-font::before{content:"\f399"}.bi-file-image-fill::before{content:"\f39a"}.bi-file-image::before{content:"\f39b"}.bi-file-lock-fill::before{content:"\f39c"}.bi-file-lock::before{content:"\f39d"}.bi-file-lock2-fill::before{content:"\f39e"}.bi-file-lock2::before{content:"\f39f"}.bi-file-medical-fill::before{content:"\f3a0"}.bi-file-medical::before{content:"\f3a1"}.bi-file-minus-fill::before{content:"\f3a2"}.bi-file-minus::before{content:"\f3a3"}.bi-file-music-fill::before{content:"\f3a4"}.bi-file-music::before{content:"\f3a5"}.bi-file-person-fill::before{content:"\f3a6"}.bi-file-person::before{content:"\f3a7"}.bi-file-play-fill::before{content:"\f3a8"}.bi-file-play::before{content:"\f3a9"}.bi-file-plus-fill::before{content:"\f3aa"}.bi-file-plus::before{content:"\f3ab"}.bi-file-post-fill::before{content:"\f3ac"}.bi-file-post::before{content:"\f3ad"}.bi-file-ppt-fill::before{content:"\f3ae"}.bi-file-ppt::before{content:"\f3af"}.bi-file-richtext-fill::before{content:"\f3b0"}.bi-file-richtext::before{content:"\f3b1"}.bi-file-ruled-fill::before{content:"\f3b2"}.bi-file-ruled::before{content:"\f3b3"}.bi-file-slides-fill::before{content:"\f3b4"}.bi-file-slides::before{content:"\f3b5"}.bi-file-spreadsheet-fill::before{content:"\f3b6"}.bi-file-spreadsheet::before{content:"\f3b7"}.bi-file-text-fill::before{content:"\f3b8"}.bi-file-text::before{content:"\f3b9"}.bi-file-word-fill::before{content:"\f3ba"}.bi-file-word::before{content:"\f3bb"}.bi-file-x-fill::before{content:"\f3bc"}.bi-file-x::before{content:"\f3bd"}.bi-file-zip-fill::before{content:"\f3be"}.bi-file-zip::before{content:"\f3bf"}.bi-file::before{content:"\f3c0"}.bi-files-alt::before{content:"\f3c1"}.bi-files::before{content:"\f3c2"}.bi-film::before{content:"\f3c3"}.bi-filter-circle-fill::before{content:"\f3c4"}.bi-filter-circle::before{content:"\f3c5"}.bi-filter-left::before{content:"\f3c6"}.bi-filter-right::before{content:"\f3c7"}.bi-filter-square-fill::before{content:"\f3c8"}.bi-filter-square::before{content:"\f3c9"}.bi-filter::before{content:"\f3ca"}.bi-flag-fill::before{content:"\f3cb"}.bi-flag::before{content:"\f3cc"}.bi-flower1::before{content:"\f3cd"}.bi-flower2::before{content:"\f3ce"}.bi-flower3::before{content:"\f3cf"}.bi-folder-check::before{content:"\f3d0"}.bi-folder-fill::before{content:"\f3d1"}.bi-folder-minus::before{content:"\f3d2"}.bi-folder-plus::before{content:"\f3d3"}.bi-folder-symlink-fill::before{content:"\f3d4"}.bi-folder-symlink::before{content:"\f3d5"}.bi-folder-x::before{content:"\f3d6"}.bi-folder::before{content:"\f3d7"}.bi-folder2-open::before{content:"\f3d8"}.bi-folder2::before{content:"\f3d9"}.bi-fonts::before{content:"\f3da"}.bi-forward-fill::before{content:"\f3db"}.bi-forward::before{content:"\f3dc"}.bi-front::before{content:"\f3dd"}.bi-fullscreen-exit::before{content:"\f3de"}.bi-fullscreen::before{content:"\f3df"}.bi-funnel-fill::before{content:"\f3e0"}.bi-funnel::before{content:"\f3e1"}.bi-gear-fill::before{content:"\f3e2"}.bi-gear-wide-connected::before{content:"\f3e3"}.bi-gear-wide::before{content:"\f3e4"}.bi-gear::before{content:"\f3e5"}.bi-gem::before{content:"\f3e6"}.bi-geo-alt-fill::before{content:"\f3e7"}.bi-geo-alt::before{content:"\f3e8"}.bi-geo-fill::before{content:"\f3e9"}.bi-geo::before{content:"\f3ea"}.bi-gift-fill::before{content:"\f3eb"}.bi-gift::before{content:"\f3ec"}.bi-github::before{content:"\f3ed"}.bi-globe::before{content:"\f3ee"}.bi-globe2::before{content:"\f3ef"}.bi-google::before{content:"\f3f0"}.bi-graph-down::before{content:"\f3f1"}.bi-graph-up::before{content:"\f3f2"}.bi-grid-1x2-fill::before{content:"\f3f3"}.bi-grid-1x2::before{content:"\f3f4"}.bi-grid-3x2-gap-fill::before{content:"\f3f5"}.bi-grid-3x2-gap::before{content:"\f3f6"}.bi-grid-3x2::before{content:"\f3f7"}.bi-grid-3x3-gap-fill::before{content:"\f3f8"}.bi-grid-3x3-gap::before{content:"\f3f9"}.bi-grid-3x3::before{content:"\f3fa"}.bi-grid-fill::before{content:"\f3fb"}.bi-grid::before{content:"\f3fc"}.bi-grip-horizontal::before{content:"\f3fd"}.bi-grip-vertical::before{content:"\f3fe"}.bi-hammer::before{content:"\f3ff"}.bi-hand-index-fill::before{content:"\f400"}.bi-hand-index-thumb-fill::before{content:"\f401"}.bi-hand-index-thumb::before{content:"\f402"}.bi-hand-index::before{content:"\f403"}.bi-hand-thumbs-down-fill::before{content:"\f404"}.bi-hand-thumbs-down::before{content:"\f405"}.bi-hand-thumbs-up-fill::before{content:"\f406"}.bi-hand-thumbs-up::before{content:"\f407"}.bi-handbag-fill::before{content:"\f408"}.bi-handbag::before{content:"\f409"}.bi-hash::before{content:"\f40a"}.bi-hdd-fill::before{content:"\f40b"}.bi-hdd-network-fill::before{content:"\f40c"}.bi-hdd-network::before{content:"\f40d"}.bi-hdd-rack-fill::before{content:"\f40e"}.bi-hdd-rack::before{content:"\f40f"}.bi-hdd-stack-fill::before{content:"\f410"}.bi-hdd-stack::before{content:"\f411"}.bi-hdd::before{content:"\f412"}.bi-headphones::before{content:"\f413"}.bi-headset::before{content:"\f414"}.bi-heart-fill::before{content:"\f415"}.bi-heart-half::before{content:"\f416"}.bi-heart::before{content:"\f417"}.bi-heptagon-fill::before{content:"\f418"}.bi-heptagon-half::before{content:"\f419"}.bi-heptagon::before{content:"\f41a"}.bi-hexagon-fill::before{content:"\f41b"}.bi-hexagon-half::before{content:"\f41c"}.bi-hexagon::before{content:"\f41d"}.bi-hourglass-bottom::before{content:"\f41e"}.bi-hourglass-split::before{content:"\f41f"}.bi-hourglass-top::before{content:"\f420"}.bi-hourglass::before{content:"\f421"}.bi-house-door-fill::before{content:"\f422"}.bi-house-door::before{content:"\f423"}.bi-house-fill::before{content:"\f424"}.bi-house::before{content:"\f425"}.bi-hr::before{content:"\f426"}.bi-hurricane::before{content:"\f427"}.bi-image-alt::before{content:"\f428"}.bi-image-fill::before{content:"\f429"}.bi-image::before{content:"\f42a"}.bi-images::before{content:"\f42b"}.bi-inbox-fill::before{content:"\f42c"}.bi-inbox::before{content:"\f42d"}.bi-inboxes-fill::before{content:"\f42e"}.bi-inboxes::before{content:"\f42f"}.bi-info-circle-fill::before{content:"\f430"}.bi-info-circle::before{content:"\f431"}.bi-info-square-fill::before{content:"\f432"}.bi-info-square::before{content:"\f433"}.bi-info::before{content:"\f434"}.bi-input-cursor-text::before{content:"\f435"}.bi-input-cursor::before{content:"\f436"}.bi-instagram::before{content:"\f437"}.bi-intersect::before{content:"\f438"}.bi-journal-album::before{content:"\f439"}.bi-journal-arrow-down::before{content:"\f43a"}.bi-journal-arrow-up::before{content:"\f43b"}.bi-journal-bookmark-fill::before{content:"\f43c"}.bi-journal-bookmark::before{content:"\f43d"}.bi-journal-check::before{content:"\f43e"}.bi-journal-code::before{content:"\f43f"}.bi-journal-medical::before{content:"\f440"}.bi-journal-minus::before{content:"\f441"}.bi-journal-plus::before{content:"\f442"}.bi-journal-richtext::before{content:"\f443"}.bi-journal-text::before{content:"\f444"}.bi-journal-x::before{content:"\f445"}.bi-journal::before{content:"\f446"}.bi-journals::before{content:"\f447"}.bi-joystick::before{content:"\f448"}.bi-justify-left::before{content:"\f449"}.bi-justify-right::before{content:"\f44a"}.bi-justify::before{content:"\f44b"}.bi-kanban-fill::before{content:"\f44c"}.bi-kanban::before{content:"\f44d"}.bi-key-fill::before{content:"\f44e"}.bi-key::before{content:"\f44f"}.bi-keyboard-fill::before{content:"\f450"}.bi-keyboard::before{content:"\f451"}.bi-ladder::before{content:"\f452"}.bi-lamp-fill::before{content:"\f453"}.bi-lamp::before{content:"\f454"}.bi-laptop-fill::before{content:"\f455"}.bi-laptop::before{content:"\f456"}.bi-layer-backward::before{content:"\f457"}.bi-layer-forward::before{content:"\f458"}.bi-layers-fill::before{content:"\f459"}.bi-layers-half::before{content:"\f45a"}.bi-layers::before{content:"\f45b"}.bi-layout-sidebar-inset-reverse::before{content:"\f45c"}.bi-layout-sidebar-inset::before{content:"\f45d"}.bi-layout-sidebar-reverse::before{content:"\f45e"}.bi-layout-sidebar::before{content:"\f45f"}.bi-layout-split::before{content:"\f460"}.bi-layout-text-sidebar-reverse::before{content:"\f461"}.bi-layout-text-sidebar::before{content:"\f462"}.bi-layout-text-window-reverse::before{content:"\f463"}.bi-layout-text-window::before{content:"\f464"}.bi-layout-three-columns::before{content:"\f465"}.bi-layout-wtf::before{content:"\f466"}.bi-life-preserver::before{content:"\f467"}.bi-lightbulb-fill::before{content:"\f468"}.bi-lightbulb-off-fill::before{content:"\f469"}.bi-lightbulb-off::before{content:"\f46a"}.bi-lightbulb::before{content:"\f46b"}.bi-lightning-charge-fill::before{content:"\f46c"}.bi-lightning-charge::before{content:"\f46d"}.bi-lightning-fill::before{content:"\f46e"}.bi-lightning::before{content:"\f46f"}.bi-link-45deg::before{content:"\f470"}.bi-link::before{content:"\f471"}.bi-linkedin::before{content:"\f472"}.bi-list-check::before{content:"\f473"}.bi-list-nested::before{content:"\f474"}.bi-list-ol::before{content:"\f475"}.bi-list-stars::before{content:"\f476"}.bi-list-task::before{content:"\f477"}.bi-list-ul::before{content:"\f478"}.bi-list::before{content:"\f479"}.bi-lock-fill::before{content:"\f47a"}.bi-lock::before{content:"\f47b"}.bi-mailbox::before{content:"\f47c"}.bi-mailbox2::before{content:"\f47d"}.bi-map-fill::before{content:"\f47e"}.bi-map::before{content:"\f47f"}.bi-markdown-fill::before{content:"\f480"}.bi-markdown::before{content:"\f481"}.bi-mask::before{content:"\f482"}.bi-megaphone-fill::before{content:"\f483"}.bi-megaphone::before{content:"\f484"}.bi-menu-app-fill::before{content:"\f485"}.bi-menu-app::before{content:"\f486"}.bi-menu-button-fill::before{content:"\f487"}.bi-menu-button-wide-fill::before{content:"\f488"}.bi-menu-button-wide::before{content:"\f489"}.bi-menu-button::before{content:"\f48a"}.bi-menu-down::before{content:"\f48b"}.bi-menu-up::before{content:"\f48c"}.bi-mic-fill::before{content:"\f48d"}.bi-mic-mute-fill::before{content:"\f48e"}.bi-mic-mute::before{content:"\f48f"}.bi-mic::before{content:"\f490"}.bi-minecart-loaded::before{content:"\f491"}.bi-minecart::before{content:"\f492"}.bi-moisture::before{content:"\f493"}.bi-moon-fill::before{content:"\f494"}.bi-moon-stars-fill::before{content:"\f495"}.bi-moon-stars::before{content:"\f496"}.bi-moon::before{content:"\f497"}.bi-mouse-fill::before{content:"\f498"}.bi-mouse::before{content:"\f499"}.bi-mouse2-fill::before{content:"\f49a"}.bi-mouse2::before{content:"\f49b"}.bi-mouse3-fill::before{content:"\f49c"}.bi-mouse3::before{content:"\f49d"}.bi-music-note-beamed::before{content:"\f49e"}.bi-music-note-list::before{content:"\f49f"}.bi-music-note::before{content:"\f4a0"}.bi-music-player-fill::before{content:"\f4a1"}.bi-music-player::before{content:"\f4a2"}.bi-newspaper::before{content:"\f4a3"}.bi-node-minus-fill::before{content:"\f4a4"}.bi-node-minus::before{content:"\f4a5"}.bi-node-plus-fill::before{content:"\f4a6"}.bi-node-plus::before{content:"\f4a7"}.bi-nut-fill::before{content:"\f4a8"}.bi-nut::before{content:"\f4a9"}.bi-octagon-fill::before{content:"\f4aa"}.bi-octagon-half::before{content:"\f4ab"}.bi-octagon::before{content:"\f4ac"}.bi-option::before{content:"\f4ad"}.bi-outlet::before{content:"\f4ae"}.bi-paint-bucket::before{content:"\f4af"}.bi-palette-fill::before{content:"\f4b0"}.bi-palette::before{content:"\f4b1"}.bi-palette2::before{content:"\f4b2"}.bi-paperclip::before{content:"\f4b3"}.bi-paragraph::before{content:"\f4b4"}.bi-patch-check-fill::before{content:"\f4b5"}.bi-patch-check::before{content:"\f4b6"}.bi-patch-exclamation-fill::before{content:"\f4b7"}.bi-patch-exclamation::before{content:"\f4b8"}.bi-patch-minus-fill::before{content:"\f4b9"}.bi-patch-minus::before{content:"\f4ba"}.bi-patch-plus-fill::before{content:"\f4bb"}.bi-patch-plus::before{content:"\f4bc"}.bi-patch-question-fill::before{content:"\f4bd"}.bi-patch-question::before{content:"\f4be"}.bi-pause-btn-fill::before{content:"\f4bf"}.bi-pause-btn::before{content:"\f4c0"}.bi-pause-circle-fill::before{content:"\f4c1"}.bi-pause-circle::before{content:"\f4c2"}.bi-pause-fill::before{content:"\f4c3"}.bi-pause::before{content:"\f4c4"}.bi-peace-fill::before{content:"\f4c5"}.bi-peace::before{content:"\f4c6"}.bi-pen-fill::before{content:"\f4c7"}.bi-pen::before{content:"\f4c8"}.bi-pencil-fill::before{content:"\f4c9"}.bi-pencil-square::before{content:"\f4ca"}.bi-pencil::before{content:"\f4cb"}.bi-pentagon-fill::before{content:"\f4cc"}.bi-pentagon-half::before{content:"\f4cd"}.bi-pentagon::before{content:"\f4ce"}.bi-people-fill::before{content:"\f4cf"}.bi-people::before{content:"\f4d0"}.bi-percent::before{content:"\f4d1"}.bi-person-badge-fill::before{content:"\f4d2"}.bi-person-badge::before{content:"\f4d3"}.bi-person-bounding-box::before{content:"\f4d4"}.bi-person-check-fill::before{content:"\f4d5"}.bi-person-check::before{content:"\f4d6"}.bi-person-circle::before{content:"\f4d7"}.bi-person-dash-fill::before{content:"\f4d8"}.bi-person-dash::before{content:"\f4d9"}.bi-person-fill::before{content:"\f4da"}.bi-person-lines-fill::before{content:"\f4db"}.bi-person-plus-fill::before{content:"\f4dc"}.bi-person-plus::before{content:"\f4dd"}.bi-person-square::before{content:"\f4de"}.bi-person-x-fill::before{content:"\f4df"}.bi-person-x::before{content:"\f4e0"}.bi-person::before{content:"\f4e1"}.bi-phone-fill::before{content:"\f4e2"}.bi-phone-landscape-fill::before{content:"\f4e3"}.bi-phone-landscape::before{content:"\f4e4"}.bi-phone-vibrate-fill::before{content:"\f4e5"}.bi-phone-vibrate::before{content:"\f4e6"}.bi-phone::before{content:"\f4e7"}.bi-pie-chart-fill::before{content:"\f4e8"}.bi-pie-chart::before{content:"\f4e9"}.bi-pin-angle-fill::before{content:"\f4ea"}.bi-pin-angle::before{content:"\f4eb"}.bi-pin-fill::before{content:"\f4ec"}.bi-pin::before{content:"\f4ed"}.bi-pip-fill::before{content:"\f4ee"}.bi-pip::before{content:"\f4ef"}.bi-play-btn-fill::before{content:"\f4f0"}.bi-play-btn::before{content:"\f4f1"}.bi-play-circle-fill::before{content:"\f4f2"}.bi-play-circle::before{content:"\f4f3"}.bi-play-fill::before{content:"\f4f4"}.bi-play::before{content:"\f4f5"}.bi-plug-fill::before{content:"\f4f6"}.bi-plug::before{content:"\f4f7"}.bi-plus-circle-dotted::before{content:"\f4f8"}.bi-plus-circle-fill::before{content:"\f4f9"}.bi-plus-circle::before{content:"\f4fa"}.bi-plus-square-dotted::before{content:"\f4fb"}.bi-plus-square-fill::before{content:"\f4fc"}.bi-plus-square::before{content:"\f4fd"}.bi-plus::before{content:"\f4fe"}.bi-power::before{content:"\f4ff"}.bi-printer-fill::before{content:"\f500"}.bi-printer::before{content:"\f501"}.bi-puzzle-fill::before{content:"\f502"}.bi-puzzle::before{content:"\f503"}.bi-question-circle-fill::before{content:"\f504"}.bi-question-circle::before{content:"\f505"}.bi-question-diamond-fill::before{content:"\f506"}.bi-question-diamond::before{content:"\f507"}.bi-question-octagon-fill::before{content:"\f508"}.bi-question-octagon::before{content:"\f509"}.bi-question-square-fill::before{content:"\f50a"}.bi-question-square::before{content:"\f50b"}.bi-question::before{content:"\f50c"}.bi-rainbow::before{content:"\f50d"}.bi-receipt-cutoff::before{content:"\f50e"}.bi-receipt::before{content:"\f50f"}.bi-reception-0::before{content:"\f510"}.bi-reception-1::before{content:"\f511"}.bi-reception-2::before{content:"\f512"}.bi-reception-3::before{content:"\f513"}.bi-reception-4::before{content:"\f514"}.bi-record-btn-fill::before{content:"\f515"}.bi-record-btn::before{content:"\f516"}.bi-record-circle-fill::before{content:"\f517"}.bi-record-circle::before{content:"\f518"}.bi-record-fill::before{content:"\f519"}.bi-record::before{content:"\f51a"}.bi-record2-fill::before{content:"\f51b"}.bi-record2::before{content:"\f51c"}.bi-reply-all-fill::before{content:"\f51d"}.bi-reply-all::before{content:"\f51e"}.bi-reply-fill::before{content:"\f51f"}.bi-reply::before{content:"\f520"}.bi-rss-fill::before{content:"\f521"}.bi-rss::before{content:"\f522"}.bi-rulers::before{content:"\f523"}.bi-save-fill::before{content:"\f524"}.bi-save::before{content:"\f525"}.bi-save2-fill::before{content:"\f526"}.bi-save2::before{content:"\f527"}.bi-scissors::before{content:"\f528"}.bi-screwdriver::before{content:"\f529"}.bi-search::before{content:"\f52a"}.bi-segmented-nav::before{content:"\f52b"}.bi-server::before{content:"\f52c"}.bi-share-fill::before{content:"\f52d"}.bi-share::before{content:"\f52e"}.bi-shield-check::before{content:"\f52f"}.bi-shield-exclamation::before{content:"\f530"}.bi-shield-fill-check::before{content:"\f531"}.bi-shield-fill-exclamation::before{content:"\f532"}.bi-shield-fill-minus::before{content:"\f533"}.bi-shield-fill-plus::before{content:"\f534"}.bi-shield-fill-x::before{content:"\f535"}.bi-shield-fill::before{content:"\f536"}.bi-shield-lock-fill::before{content:"\f537"}.bi-shield-lock::before{content:"\f538"}.bi-shield-minus::before{content:"\f539"}.bi-shield-plus::before{content:"\f53a"}.bi-shield-shaded::before{content:"\f53b"}.bi-shield-slash-fill::before{content:"\f53c"}.bi-shield-slash::before{content:"\f53d"}.bi-shield-x::before{content:"\f53e"}.bi-shield::before{content:"\f53f"}.bi-shift-fill::before{content:"\f540"}.bi-shift::before{content:"\f541"}.bi-shop-window::before{content:"\f542"}.bi-shop::before{content:"\f543"}.bi-shuffle::before{content:"\f544"}.bi-signpost-2-fill::before{content:"\f545"}.bi-signpost-2::before{content:"\f546"}.bi-signpost-fill::before{content:"\f547"}.bi-signpost-split-fill::before{content:"\f548"}.bi-signpost-split::before{content:"\f549"}.bi-signpost::before{content:"\f54a"}.bi-sim-fill::before{content:"\f54b"}.bi-sim::before{content:"\f54c"}.bi-skip-backward-btn-fill::before{content:"\f54d"}.bi-skip-backward-btn::before{content:"\f54e"}.bi-skip-backward-circle-fill::before{content:"\f54f"}.bi-skip-backward-circle::before{content:"\f550"}.bi-skip-backward-fill::before{content:"\f551"}.bi-skip-backward::before{content:"\f552"}.bi-skip-end-btn-fill::before{content:"\f553"}.bi-skip-end-btn::before{content:"\f554"}.bi-skip-end-circle-fill::before{content:"\f555"}.bi-skip-end-circle::before{content:"\f556"}.bi-skip-end-fill::before{content:"\f557"}.bi-skip-end::before{content:"\f558"}.bi-skip-forward-btn-fill::before{content:"\f559"}.bi-skip-forward-btn::before{content:"\f55a"}.bi-skip-forward-circle-fill::before{content:"\f55b"}.bi-skip-forward-circle::before{content:"\f55c"}.bi-skip-forward-fill::before{content:"\f55d"}.bi-skip-forward::before{content:"\f55e"}.bi-skip-start-btn-fill::before{content:"\f55f"}.bi-skip-start-btn::before{content:"\f560"}.bi-skip-start-circle-fill::before{content:"\f561"}.bi-skip-start-circle::before{content:"\f562"}.bi-skip-start-fill::before{content:"\f563"}.bi-skip-start::before{content:"\f564"}.bi-slack::before{content:"\f565"}.bi-slash-circle-fill::before{content:"\f566"}.bi-slash-circle::before{content:"\f567"}.bi-slash-square-fill::before{content:"\f568"}.bi-slash-square::before{content:"\f569"}.bi-slash::before{content:"\f56a"}.bi-sliders::before{content:"\f56b"}.bi-smartwatch::before{content:"\f56c"}.bi-snow::before{content:"\f56d"}.bi-snow2::before{content:"\f56e"}.bi-snow3::before{content:"\f56f"}.bi-sort-alpha-down-alt::before{content:"\f570"}.bi-sort-alpha-down::before{content:"\f571"}.bi-sort-alpha-up-alt::before{content:"\f572"}.bi-sort-alpha-up::before{content:"\f573"}.bi-sort-down-alt::before{content:"\f574"}.bi-sort-down::before{content:"\f575"}.bi-sort-numeric-down-alt::before{content:"\f576"}.bi-sort-numeric-down::before{content:"\f577"}.bi-sort-numeric-up-alt::before{content:"\f578"}.bi-sort-numeric-up::before{content:"\f579"}.bi-sort-up-alt::before{content:"\f57a"}.bi-sort-up::before{content:"\f57b"}.bi-soundwave::before{content:"\f57c"}.bi-speaker-fill::before{content:"\f57d"}.bi-speaker::before{content:"\f57e"}.bi-speedometer::before{content:"\f57f"}.bi-speedometer2::before{content:"\f580"}.bi-spellcheck::before{content:"\f581"}.bi-square-fill::before{content:"\f582"}.bi-square-half::before{content:"\f583"}.bi-square::before{content:"\f584"}.bi-stack::before{content:"\f585"}.bi-star-fill::before{content:"\f586"}.bi-star-half::before{content:"\f587"}.bi-star::before{content:"\f588"}.bi-stars::before{content:"\f589"}.bi-stickies-fill::before{content:"\f58a"}.bi-stickies::before{content:"\f58b"}.bi-sticky-fill::before{content:"\f58c"}.bi-sticky::before{content:"\f58d"}.bi-stop-btn-fill::before{content:"\f58e"}.bi-stop-btn::before{content:"\f58f"}.bi-stop-circle-fill::before{content:"\f590"}.bi-stop-circle::before{content:"\f591"}.bi-stop-fill::before{content:"\f592"}.bi-stop::before{content:"\f593"}.bi-stoplights-fill::before{content:"\f594"}.bi-stoplights::before{content:"\f595"}.bi-stopwatch-fill::before{content:"\f596"}.bi-stopwatch::before{content:"\f597"}.bi-subtract::before{content:"\f598"}.bi-suit-club-fill::before{content:"\f599"}.bi-suit-club::before{content:"\f59a"}.bi-suit-diamond-fill::before{content:"\f59b"}.bi-suit-diamond::before{content:"\f59c"}.bi-suit-heart-fill::before{content:"\f59d"}.bi-suit-heart::before{content:"\f59e"}.bi-suit-spade-fill::before{content:"\f59f"}.bi-suit-spade::before{content:"\f5a0"}.bi-sun-fill::before{content:"\f5a1"}.bi-sun::before{content:"\f5a2"}.bi-sunglasses::before{content:"\f5a3"}.bi-sunrise-fill::before{content:"\f5a4"}.bi-sunrise::before{content:"\f5a5"}.bi-sunset-fill::before{content:"\f5a6"}.bi-sunset::before{content:"\f5a7"}.bi-symmetry-horizontal::before{content:"\f5a8"}.bi-symmetry-vertical::before{content:"\f5a9"}.bi-table::before{content:"\f5aa"}.bi-tablet-fill::before{content:"\f5ab"}.bi-tablet-landscape-fill::before{content:"\f5ac"}.bi-tablet-landscape::before{content:"\f5ad"}.bi-tablet::before{content:"\f5ae"}.bi-tag-fill::before{content:"\f5af"}.bi-tag::before{content:"\f5b0"}.bi-tags-fill::before{content:"\f5b1"}.bi-tags::before{content:"\f5b2"}.bi-telegram::before{content:"\f5b3"}.bi-telephone-fill::before{content:"\f5b4"}.bi-telephone-forward-fill::before{content:"\f5b5"}.bi-telephone-forward::before{content:"\f5b6"}.bi-telephone-inbound-fill::before{content:"\f5b7"}.bi-telephone-inbound::before{content:"\f5b8"}.bi-telephone-minus-fill::before{content:"\f5b9"}.bi-telephone-minus::before{content:"\f5ba"}.bi-telephone-outbound-fill::before{content:"\f5bb"}.bi-telephone-outbound::before{content:"\f5bc"}.bi-telephone-plus-fill::before{content:"\f5bd"}.bi-telephone-plus::before{content:"\f5be"}.bi-telephone-x-fill::before{content:"\f5bf"}.bi-telephone-x::before{content:"\f5c0"}.bi-telephone::before{content:"\f5c1"}.bi-terminal-fill::before{content:"\f5c2"}.bi-terminal::before{content:"\f5c3"}.bi-text-center::before{content:"\f5c4"}.bi-text-indent-left::before{content:"\f5c5"}.bi-text-indent-right::before{content:"\f5c6"}.bi-text-left::before{content:"\f5c7"}.bi-text-paragraph::before{content:"\f5c8"}.bi-text-right::before{content:"\f5c9"}.bi-textarea-resize::before{content:"\f5ca"}.bi-textarea-t::before{content:"\f5cb"}.bi-textarea::before{content:"\f5cc"}.bi-thermometer-half::before{content:"\f5cd"}.bi-thermometer-high::before{content:"\f5ce"}.bi-thermometer-low::before{content:"\f5cf"}.bi-thermometer-snow::before{content:"\f5d0"}.bi-thermometer-sun::before{content:"\f5d1"}.bi-thermometer::before{content:"\f5d2"}.bi-three-dots-vertical::before{content:"\f5d3"}.bi-three-dots::before{content:"\f5d4"}.bi-toggle-off::before{content:"\f5d5"}.bi-toggle-on::before{content:"\f5d6"}.bi-toggle2-off::before{content:"\f5d7"}.bi-toggle2-on::before{content:"\f5d8"}.bi-toggles::before{content:"\f5d9"}.bi-toggles2::before{content:"\f5da"}.bi-tools::before{content:"\f5db"}.bi-tornado::before{content:"\f5dc"}.bi-trash-fill::before{content:"\f5dd"}.bi-trash::before{content:"\f5de"}.bi-trash2-fill::before{content:"\f5df"}.bi-trash2::before{content:"\f5e0"}.bi-tree-fill::before{content:"\f5e1"}.bi-tree::before{content:"\f5e2"}.bi-triangle-fill::before{content:"\f5e3"}.bi-triangle-half::before{content:"\f5e4"}.bi-triangle::before{content:"\f5e5"}.bi-trophy-fill::before{content:"\f5e6"}.bi-trophy::before{content:"\f5e7"}.bi-tropical-storm::before{content:"\f5e8"}.bi-truck-flatbed::before{content:"\f5e9"}.bi-truck::before{content:"\f5ea"}.bi-tsunami::before{content:"\f5eb"}.bi-tv-fill::before{content:"\f5ec"}.bi-tv::before{content:"\f5ed"}.bi-twitch::before{content:"\f5ee"}.bi-twitter::before{content:"\f5ef"}.bi-type-bold::before{content:"\f5f0"}.bi-type-h1::before{content:"\f5f1"}.bi-type-h2::before{content:"\f5f2"}.bi-type-h3::before{content:"\f5f3"}.bi-type-italic::before{content:"\f5f4"}.bi-type-strikethrough::before{content:"\f5f5"}.bi-type-underline::before{content:"\f5f6"}.bi-type::before{content:"\f5f7"}.bi-ui-checks-grid::before{content:"\f5f8"}.bi-ui-checks::before{content:"\f5f9"}.bi-ui-radios-grid::before{content:"\f5fa"}.bi-ui-radios::before{content:"\f5fb"}.bi-umbrella-fill::before{content:"\f5fc"}.bi-umbrella::before{content:"\f5fd"}.bi-union::before{content:"\f5fe"}.bi-unlock-fill::before{content:"\f5ff"}.bi-unlock::before{content:"\f600"}.bi-upc-scan::before{content:"\f601"}.bi-upc::before{content:"\f602"}.bi-upload::before{content:"\f603"}.bi-vector-pen::before{content:"\f604"}.bi-view-list::before{content:"\f605"}.bi-view-stacked::before{content:"\f606"}.bi-vinyl-fill::before{content:"\f607"}.bi-vinyl::before{content:"\f608"}.bi-voicemail::before{content:"\f609"}.bi-volume-down-fill::before{content:"\f60a"}.bi-volume-down::before{content:"\f60b"}.bi-volume-mute-fill::before{content:"\f60c"}.bi-volume-mute::before{content:"\f60d"}.bi-volume-off-fill::before{content:"\f60e"}.bi-volume-off::before{content:"\f60f"}.bi-volume-up-fill::before{content:"\f610"}.bi-volume-up::before{content:"\f611"}.bi-vr::before{content:"\f612"}.bi-wallet-fill::before{content:"\f613"}.bi-wallet::before{content:"\f614"}.bi-wallet2::before{content:"\f615"}.bi-watch::before{content:"\f616"}.bi-water::before{content:"\f617"}.bi-whatsapp::before{content:"\f618"}.bi-wifi-1::before{content:"\f619"}.bi-wifi-2::before{content:"\f61a"}.bi-wifi-off::before{content:"\f61b"}.bi-wifi::before{content:"\f61c"}.bi-wind::before{content:"\f61d"}.bi-window-dock::before{content:"\f61e"}.bi-window-sidebar::before{content:"\f61f"}.bi-window::before{content:"\f620"}.bi-wrench::before{content:"\f621"}.bi-x-circle-fill::before{content:"\f622"}.bi-x-circle::before{content:"\f623"}.bi-x-diamond-fill::before{content:"\f624"}.bi-x-diamond::before{content:"\f625"}.bi-x-octagon-fill::before{content:"\f626"}.bi-x-octagon::before{content:"\f627"}.bi-x-square-fill::before{content:"\f628"}.bi-x-square::before{content:"\f629"}.bi-x::before{content:"\f62a"}.bi-youtube::before{content:"\f62b"}.bi-zoom-in::before{content:"\f62c"}.bi-zoom-out::before{content:"\f62d"}.bi-bank::before{content:"\f62e"}.bi-bank2::before{content:"\f62f"}.bi-bell-slash-fill::before{content:"\f630"}.bi-bell-slash::before{content:"\f631"}.bi-cash-coin::before{content:"\f632"}.bi-check-lg::before{content:"\f633"}.bi-coin::before{content:"\f634"}.bi-currency-bitcoin::before{content:"\f635"}.bi-currency-dollar::before{content:"\f636"}.bi-currency-euro::before{content:"\f637"}.bi-currency-exchange::before{content:"\f638"}.bi-currency-pound::before{content:"\f639"}.bi-currency-yen::before{content:"\f63a"}.bi-dash-lg::before{content:"\f63b"}.bi-exclamation-lg::before{content:"\f63c"}.bi-file-earmark-pdf-fill::before{content:"\f63d"}.bi-file-earmark-pdf::before{content:"\f63e"}.bi-file-pdf-fill::before{content:"\f63f"}.bi-file-pdf::before{content:"\f640"}.bi-gender-ambiguous::before{content:"\f641"}.bi-gender-female::before{content:"\f642"}.bi-gender-male::before{content:"\f643"}.bi-gender-trans::before{content:"\f644"}.bi-headset-vr::before{content:"\f645"}.bi-info-lg::before{content:"\f646"}.bi-mastodon::before{content:"\f647"}.bi-messenger::before{content:"\f648"}.bi-piggy-bank-fill::before{content:"\f649"}.bi-piggy-bank::before{content:"\f64a"}.bi-pin-map-fill::before{content:"\f64b"}.bi-pin-map::before{content:"\f64c"}.bi-plus-lg::before{content:"\f64d"}.bi-question-lg::before{content:"\f64e"}.bi-recycle::before{content:"\f64f"}.bi-reddit::before{content:"\f650"}.bi-safe-fill::before{content:"\f651"}.bi-safe2-fill::before{content:"\f652"}.bi-safe2::before{content:"\f653"}.bi-sd-card-fill::before{content:"\f654"}.bi-sd-card::before{content:"\f655"}.bi-skype::before{content:"\f656"}.bi-slash-lg::before{content:"\f657"}.bi-translate::before{content:"\f658"}.bi-x-lg::before{content:"\f659"}.bi-safe::before{content:"\f65a"}.bi-apple::before{content:"\f65b"}.bi-microsoft::before{content:"\f65d"}.bi-windows::before{content:"\f65e"}.bi-behance::before{content:"\f65c"}.bi-dribbble::before{content:"\f65f"}.bi-line::before{content:"\f660"}.bi-medium::before{content:"\f661"}.bi-paypal::before{content:"\f662"}.bi-pinterest::before{content:"\f663"}.bi-signal::before{content:"\f664"}.bi-snapchat::before{content:"\f665"}.bi-spotify::before{content:"\f666"}.bi-stack-overflow::before{content:"\f667"}.bi-strava::before{content:"\f668"}.bi-wordpress::before{content:"\f669"}.bi-vimeo::before{content:"\f66a"}.bi-activity::before{content:"\f66b"}.bi-easel2-fill::before{content:"\f66c"}.bi-easel2::before{content:"\f66d"}.bi-easel3-fill::before{content:"\f66e"}.bi-easel3::before{content:"\f66f"}.bi-fan::before{content:"\f670"}.bi-fingerprint::before{content:"\f671"}.bi-graph-down-arrow::before{content:"\f672"}.bi-graph-up-arrow::before{content:"\f673"}.bi-hypnotize::before{content:"\f674"}.bi-magic::before{content:"\f675"}.bi-person-rolodex::before{content:"\f676"}.bi-person-video::before{content:"\f677"}.bi-person-video2::before{content:"\f678"}.bi-person-video3::before{content:"\f679"}.bi-person-workspace::before{content:"\f67a"}.bi-radioactive::before{content:"\f67b"}.bi-webcam-fill::before{content:"\f67c"}.bi-webcam::before{content:"\f67d"}.bi-yin-yang::before{content:"\f67e"}.bi-bandaid-fill::before{content:"\f680"}.bi-bandaid::before{content:"\f681"}.bi-bluetooth::before{content:"\f682"}.bi-body-text::before{content:"\f683"}.bi-boombox::before{content:"\f684"}.bi-boxes::before{content:"\f685"}.bi-dpad-fill::before{content:"\f686"}.bi-dpad::before{content:"\f687"}.bi-ear-fill::before{content:"\f688"}.bi-ear::before{content:"\f689"}.bi-envelope-check-fill::before{content:"\f68b"}.bi-envelope-check::before{content:"\f68c"}.bi-envelope-dash-fill::before{content:"\f68e"}.bi-envelope-dash::before{content:"\f68f"}.bi-envelope-exclamation-fill::before{content:"\f691"}.bi-envelope-exclamation::before{content:"\f692"}.bi-envelope-plus-fill::before{content:"\f693"}.bi-envelope-plus::before{content:"\f694"}.bi-envelope-slash-fill::before{content:"\f696"}.bi-envelope-slash::before{content:"\f697"}.bi-envelope-x-fill::before{content:"\f699"}.bi-envelope-x::before{content:"\f69a"}.bi-explicit-fill::before{content:"\f69b"}.bi-explicit::before{content:"\f69c"}.bi-git::before{content:"\f69d"}.bi-infinity::before{content:"\f69e"}.bi-list-columns-reverse::before{content:"\f69f"}.bi-list-columns::before{content:"\f6a0"}.bi-meta::before{content:"\f6a1"}.bi-nintendo-switch::before{content:"\f6a4"}.bi-pc-display-horizontal::before{content:"\f6a5"}.bi-pc-display::before{content:"\f6a6"}.bi-pc-horizontal::before{content:"\f6a7"}.bi-pc::before{content:"\f6a8"}.bi-playstation::before{content:"\f6a9"}.bi-plus-slash-minus::before{content:"\f6aa"}.bi-projector-fill::before{content:"\f6ab"}.bi-projector::before{content:"\f6ac"}.bi-qr-code-scan::before{content:"\f6ad"}.bi-qr-code::before{content:"\f6ae"}.bi-quora::before{content:"\f6af"}.bi-quote::before{content:"\f6b0"}.bi-robot::before{content:"\f6b1"}.bi-send-check-fill::before{content:"\f6b2"}.bi-send-check::before{content:"\f6b3"}.bi-send-dash-fill::before{content:"\f6b4"}.bi-send-dash::before{content:"\f6b5"}.bi-send-exclamation-fill::before{content:"\f6b7"}.bi-send-exclamation::before{content:"\f6b8"}.bi-send-fill::before{content:"\f6b9"}.bi-send-plus-fill::before{content:"\f6ba"}.bi-send-plus::before{content:"\f6bb"}.bi-send-slash-fill::before{content:"\f6bc"}.bi-send-slash::before{content:"\f6bd"}.bi-send-x-fill::before{content:"\f6be"}.bi-send-x::before{content:"\f6bf"}.bi-send::before{content:"\f6c0"}.bi-steam::before{content:"\f6c1"}.bi-terminal-dash::before{content:"\f6c3"}.bi-terminal-plus::before{content:"\f6c4"}.bi-terminal-split::before{content:"\f6c5"}.bi-ticket-detailed-fill::before{content:"\f6c6"}.bi-ticket-detailed::before{content:"\f6c7"}.bi-ticket-fill::before{content:"\f6c8"}.bi-ticket-perforated-fill::before{content:"\f6c9"}.bi-ticket-perforated::before{content:"\f6ca"}.bi-ticket::before{content:"\f6cb"}.bi-tiktok::before{content:"\f6cc"}.bi-window-dash::before{content:"\f6cd"}.bi-window-desktop::before{content:"\f6ce"}.bi-window-fullscreen::before{content:"\f6cf"}.bi-window-plus::before{content:"\f6d0"}.bi-window-split::before{content:"\f6d1"}.bi-window-stack::before{content:"\f6d2"}.bi-window-x::before{content:"\f6d3"}.bi-xbox::before{content:"\f6d4"}.bi-ethernet::before{content:"\f6d5"}.bi-hdmi-fill::before{content:"\f6d6"}.bi-hdmi::before{content:"\f6d7"}.bi-usb-c-fill::before{content:"\f6d8"}.bi-usb-c::before{content:"\f6d9"}.bi-usb-fill::before{content:"\f6da"}.bi-usb-plug-fill::before{content:"\f6db"}.bi-usb-plug::before{content:"\f6dc"}.bi-usb-symbol::before{content:"\f6dd"}.bi-usb::before{content:"\f6de"}.bi-boombox-fill::before{content:"\f6df"}.bi-displayport::before{content:"\f6e1"}.bi-gpu-card::before{content:"\f6e2"}.bi-memory::before{content:"\f6e3"}.bi-modem-fill::before{content:"\f6e4"}.bi-modem::before{content:"\f6e5"}.bi-motherboard-fill::before{content:"\f6e6"}.bi-motherboard::before{content:"\f6e7"}.bi-optical-audio-fill::before{content:"\f6e8"}.bi-optical-audio::before{content:"\f6e9"}.bi-pci-card::before{content:"\f6ea"}.bi-router-fill::before{content:"\f6eb"}.bi-router::before{content:"\f6ec"}.bi-thunderbolt-fill::before{content:"\f6ef"}.bi-thunderbolt::before{content:"\f6f0"}.bi-usb-drive-fill::before{content:"\f6f1"}.bi-usb-drive::before{content:"\f6f2"}.bi-usb-micro-fill::before{content:"\f6f3"}.bi-usb-micro::before{content:"\f6f4"}.bi-usb-mini-fill::before{content:"\f6f5"}.bi-usb-mini::before{content:"\f6f6"}.bi-cloud-haze2::before{content:"\f6f7"}.bi-device-hdd-fill::before{content:"\f6f8"}.bi-device-hdd::before{content:"\f6f9"}.bi-device-ssd-fill::before{content:"\f6fa"}.bi-device-ssd::before{content:"\f6fb"}.bi-displayport-fill::before{content:"\f6fc"}.bi-mortarboard-fill::before{content:"\f6fd"}.bi-mortarboard::before{content:"\f6fe"}.bi-terminal-x::before{content:"\f6ff"}.bi-arrow-through-heart-fill::before{content:"\f700"}.bi-arrow-through-heart::before{content:"\f701"}.bi-badge-sd-fill::before{content:"\f702"}.bi-badge-sd::before{content:"\f703"}.bi-bag-heart-fill::before{content:"\f704"}.bi-bag-heart::before{content:"\f705"}.bi-balloon-fill::before{content:"\f706"}.bi-balloon-heart-fill::before{content:"\f707"}.bi-balloon-heart::before{content:"\f708"}.bi-balloon::before{content:"\f709"}.bi-box2-fill::before{content:"\f70a"}.bi-box2-heart-fill::before{content:"\f70b"}.bi-box2-heart::before{content:"\f70c"}.bi-box2::before{content:"\f70d"}.bi-braces-asterisk::before{content:"\f70e"}.bi-calendar-heart-fill::before{content:"\f70f"}.bi-calendar-heart::before{content:"\f710"}.bi-calendar2-heart-fill::before{content:"\f711"}.bi-calendar2-heart::before{content:"\f712"}.bi-chat-heart-fill::before{content:"\f713"}.bi-chat-heart::before{content:"\f714"}.bi-chat-left-heart-fill::before{content:"\f715"}.bi-chat-left-heart::before{content:"\f716"}.bi-chat-right-heart-fill::before{content:"\f717"}.bi-chat-right-heart::before{content:"\f718"}.bi-chat-square-heart-fill::before{content:"\f719"}.bi-chat-square-heart::before{content:"\f71a"}.bi-clipboard-check-fill::before{content:"\f71b"}.bi-clipboard-data-fill::before{content:"\f71c"}.bi-clipboard-fill::before{content:"\f71d"}.bi-clipboard-heart-fill::before{content:"\f71e"}.bi-clipboard-heart::before{content:"\f71f"}.bi-clipboard-minus-fill::before{content:"\f720"}.bi-clipboard-plus-fill::before{content:"\f721"}.bi-clipboard-pulse::before{content:"\f722"}.bi-clipboard-x-fill::before{content:"\f723"}.bi-clipboard2-check-fill::before{content:"\f724"}.bi-clipboard2-check::before{content:"\f725"}.bi-clipboard2-data-fill::before{content:"\f726"}.bi-clipboard2-data::before{content:"\f727"}.bi-clipboard2-fill::before{content:"\f728"}.bi-clipboard2-heart-fill::before{content:"\f729"}.bi-clipboard2-heart::before{content:"\f72a"}.bi-clipboard2-minus-fill::before{content:"\f72b"}.bi-clipboard2-minus::before{content:"\f72c"}.bi-clipboard2-plus-fill::before{content:"\f72d"}.bi-clipboard2-plus::before{content:"\f72e"}.bi-clipboard2-pulse-fill::before{content:"\f72f"}.bi-clipboard2-pulse::before{content:"\f730"}.bi-clipboard2-x-fill::before{content:"\f731"}.bi-clipboard2-x::before{content:"\f732"}.bi-clipboard2::before{content:"\f733"}.bi-emoji-kiss-fill::before{content:"\f734"}.bi-emoji-kiss::before{content:"\f735"}.bi-envelope-heart-fill::before{content:"\f736"}.bi-envelope-heart::before{content:"\f737"}.bi-envelope-open-heart-fill::before{content:"\f738"}.bi-envelope-open-heart::before{content:"\f739"}.bi-envelope-paper-fill::before{content:"\f73a"}.bi-envelope-paper-heart-fill::before{content:"\f73b"}.bi-envelope-paper-heart::before{content:"\f73c"}.bi-envelope-paper::before{content:"\f73d"}.bi-filetype-aac::before{content:"\f73e"}.bi-filetype-ai::before{content:"\f73f"}.bi-filetype-bmp::before{content:"\f740"}.bi-filetype-cs::before{content:"\f741"}.bi-filetype-css::before{content:"\f742"}.bi-filetype-csv::before{content:"\f743"}.bi-filetype-doc::before{content:"\f744"}.bi-filetype-docx::before{content:"\f745"}.bi-filetype-exe::before{content:"\f746"}.bi-filetype-gif::before{content:"\f747"}.bi-filetype-heic::before{content:"\f748"}.bi-filetype-html::before{content:"\f749"}.bi-filetype-java::before{content:"\f74a"}.bi-filetype-jpg::before{content:"\f74b"}.bi-filetype-js::before{content:"\f74c"}.bi-filetype-jsx::before{content:"\f74d"}.bi-filetype-key::before{content:"\f74e"}.bi-filetype-m4p::before{content:"\f74f"}.bi-filetype-md::before{content:"\f750"}.bi-filetype-mdx::before{content:"\f751"}.bi-filetype-mov::before{content:"\f752"}.bi-filetype-mp3::before{content:"\f753"}.bi-filetype-mp4::before{content:"\f754"}.bi-filetype-otf::before{content:"\f755"}.bi-filetype-pdf::before{content:"\f756"}.bi-filetype-php::before{content:"\f757"}.bi-filetype-png::before{content:"\f758"}.bi-filetype-ppt::before{content:"\f75a"}.bi-filetype-psd::before{content:"\f75b"}.bi-filetype-py::before{content:"\f75c"}.bi-filetype-raw::before{content:"\f75d"}.bi-filetype-rb::before{content:"\f75e"}.bi-filetype-sass::before{content:"\f75f"}.bi-filetype-scss::before{content:"\f760"}.bi-filetype-sh::before{content:"\f761"}.bi-filetype-svg::before{content:"\f762"}.bi-filetype-tiff::before{content:"\f763"}.bi-filetype-tsx::before{content:"\f764"}.bi-filetype-ttf::before{content:"\f765"}.bi-filetype-txt::before{content:"\f766"}.bi-filetype-wav::before{content:"\f767"}.bi-filetype-woff::before{content:"\f768"}.bi-filetype-xls::before{content:"\f76a"}.bi-filetype-xml::before{content:"\f76b"}.bi-filetype-yml::before{content:"\f76c"}.bi-heart-arrow::before{content:"\f76d"}.bi-heart-pulse-fill::before{content:"\f76e"}.bi-heart-pulse::before{content:"\f76f"}.bi-heartbreak-fill::before{content:"\f770"}.bi-heartbreak::before{content:"\f771"}.bi-hearts::before{content:"\f772"}.bi-hospital-fill::before{content:"\f773"}.bi-hospital::before{content:"\f774"}.bi-house-heart-fill::before{content:"\f775"}.bi-house-heart::before{content:"\f776"}.bi-incognito::before{content:"\f777"}.bi-magnet-fill::before{content:"\f778"}.bi-magnet::before{content:"\f779"}.bi-person-heart::before{content:"\f77a"}.bi-person-hearts::before{content:"\f77b"}.bi-phone-flip::before{content:"\f77c"}.bi-plugin::before{content:"\f77d"}.bi-postage-fill::before{content:"\f77e"}.bi-postage-heart-fill::before{content:"\f77f"}.bi-postage-heart::before{content:"\f780"}.bi-postage::before{content:"\f781"}.bi-postcard-fill::before{content:"\f782"}.bi-postcard-heart-fill::before{content:"\f783"}.bi-postcard-heart::before{content:"\f784"}.bi-postcard::before{content:"\f785"}.bi-search-heart-fill::before{content:"\f786"}.bi-search-heart::before{content:"\f787"}.bi-sliders2-vertical::before{content:"\f788"}.bi-sliders2::before{content:"\f789"}.bi-trash3-fill::before{content:"\f78a"}.bi-trash3::before{content:"\f78b"}.bi-valentine::before{content:"\f78c"}.bi-valentine2::before{content:"\f78d"}.bi-wrench-adjustable-circle-fill::before{content:"\f78e"}.bi-wrench-adjustable-circle::before{content:"\f78f"}.bi-wrench-adjustable::before{content:"\f790"}.bi-filetype-json::before{content:"\f791"}.bi-filetype-pptx::before{content:"\f792"}.bi-filetype-xlsx::before{content:"\f793"}.bi-1-circle-fill::before{content:"\f796"}.bi-1-circle::before{content:"\f797"}.bi-1-square-fill::before{content:"\f798"}.bi-1-square::before{content:"\f799"}.bi-2-circle-fill::before{content:"\f79c"}.bi-2-circle::before{content:"\f79d"}.bi-2-square-fill::before{content:"\f79e"}.bi-2-square::before{content:"\f79f"}.bi-3-circle-fill::before{content:"\f7a2"}.bi-3-circle::before{content:"\f7a3"}.bi-3-square-fill::before{content:"\f7a4"}.bi-3-square::before{content:"\f7a5"}.bi-4-circle-fill::before{content:"\f7a8"}.bi-4-circle::before{content:"\f7a9"}.bi-4-square-fill::before{content:"\f7aa"}.bi-4-square::before{content:"\f7ab"}.bi-5-circle-fill::before{content:"\f7ae"}.bi-5-circle::before{content:"\f7af"}.bi-5-square-fill::before{content:"\f7b0"}.bi-5-square::before{content:"\f7b1"}.bi-6-circle-fill::before{content:"\f7b4"}.bi-6-circle::before{content:"\f7b5"}.bi-6-square-fill::before{content:"\f7b6"}.bi-6-square::before{content:"\f7b7"}.bi-7-circle-fill::before{content:"\f7ba"}.bi-7-circle::before{content:"\f7bb"}.bi-7-square-fill::before{content:"\f7bc"}.bi-7-square::before{content:"\f7bd"}.bi-8-circle-fill::before{content:"\f7c0"}.bi-8-circle::before{content:"\f7c1"}.bi-8-square-fill::before{content:"\f7c2"}.bi-8-square::before{content:"\f7c3"}.bi-9-circle-fill::before{content:"\f7c6"}.bi-9-circle::before{content:"\f7c7"}.bi-9-square-fill::before{content:"\f7c8"}.bi-9-square::before{content:"\f7c9"}.bi-airplane-engines-fill::before{content:"\f7ca"}.bi-airplane-engines::before{content:"\f7cb"}.bi-airplane-fill::before{content:"\f7cc"}.bi-airplane::before{content:"\f7cd"}.bi-alexa::before{content:"\f7ce"}.bi-alipay::before{content:"\f7cf"}.bi-android::before{content:"\f7d0"}.bi-android2::before{content:"\f7d1"}.bi-box-fill::before{content:"\f7d2"}.bi-box-seam-fill::before{content:"\f7d3"}.bi-browser-chrome::before{content:"\f7d4"}.bi-browser-edge::before{content:"\f7d5"}.bi-browser-firefox::before{content:"\f7d6"}.bi-browser-safari::before{content:"\f7d7"}.bi-c-circle-fill::before{content:"\f7da"}.bi-c-circle::before{content:"\f7db"}.bi-c-square-fill::before{content:"\f7dc"}.bi-c-square::before{content:"\f7dd"}.bi-capsule-pill::before{content:"\f7de"}.bi-capsule::before{content:"\f7df"}.bi-car-front-fill::before{content:"\f7e0"}.bi-car-front::before{content:"\f7e1"}.bi-cassette-fill::before{content:"\f7e2"}.bi-cassette::before{content:"\f7e3"}.bi-cc-circle-fill::before{content:"\f7e6"}.bi-cc-circle::before{content:"\f7e7"}.bi-cc-square-fill::before{content:"\f7e8"}.bi-cc-square::before{content:"\f7e9"}.bi-cup-hot-fill::before{content:"\f7ea"}.bi-cup-hot::before{content:"\f7eb"}.bi-currency-rupee::before{content:"\f7ec"}.bi-dropbox::before{content:"\f7ed"}.bi-escape::before{content:"\f7ee"}.bi-fast-forward-btn-fill::before{content:"\f7ef"}.bi-fast-forward-btn::before{content:"\f7f0"}.bi-fast-forward-circle-fill::before{content:"\f7f1"}.bi-fast-forward-circle::before{content:"\f7f2"}.bi-fast-forward-fill::before{content:"\f7f3"}.bi-fast-forward::before{content:"\f7f4"}.bi-filetype-sql::before{content:"\f7f5"}.bi-fire::before{content:"\f7f6"}.bi-google-play::before{content:"\f7f7"}.bi-h-circle-fill::before{content:"\f7fa"}.bi-h-circle::before{content:"\f7fb"}.bi-h-square-fill::before{content:"\f7fc"}.bi-h-square::before{content:"\f7fd"}.bi-indent::before{content:"\f7fe"}.bi-lungs-fill::before{content:"\f7ff"}.bi-lungs::before{content:"\f800"}.bi-microsoft-teams::before{content:"\f801"}.bi-p-circle-fill::before{content:"\f804"}.bi-p-circle::before{content:"\f805"}.bi-p-square-fill::before{content:"\f806"}.bi-p-square::before{content:"\f807"}.bi-pass-fill::before{content:"\f808"}.bi-pass::before{content:"\f809"}.bi-prescription::before{content:"\f80a"}.bi-prescription2::before{content:"\f80b"}.bi-r-circle-fill::before{content:"\f80e"}.bi-r-circle::before{content:"\f80f"}.bi-r-square-fill::before{content:"\f810"}.bi-r-square::before{content:"\f811"}.bi-repeat-1::before{content:"\f812"}.bi-repeat::before{content:"\f813"}.bi-rewind-btn-fill::before{content:"\f814"}.bi-rewind-btn::before{content:"\f815"}.bi-rewind-circle-fill::before{content:"\f816"}.bi-rewind-circle::before{content:"\f817"}.bi-rewind-fill::before{content:"\f818"}.bi-rewind::before{content:"\f819"}.bi-train-freight-front-fill::before{content:"\f81a"}.bi-train-freight-front::before{content:"\f81b"}.bi-train-front-fill::before{content:"\f81c"}.bi-train-front::before{content:"\f81d"}.bi-train-lightrail-front-fill::before{content:"\f81e"}.bi-train-lightrail-front::before{content:"\f81f"}.bi-truck-front-fill::before{content:"\f820"}.bi-truck-front::before{content:"\f821"}.bi-ubuntu::before{content:"\f822"}.bi-unindent::before{content:"\f823"}.bi-unity::before{content:"\f824"}.bi-universal-access-circle::before{content:"\f825"}.bi-universal-access::before{content:"\f826"}.bi-virus::before{content:"\f827"}.bi-virus2::before{content:"\f828"}.bi-wechat::before{content:"\f829"}.bi-yelp::before{content:"\f82a"}.bi-sign-stop-fill::before{content:"\f82b"}.bi-sign-stop-lights-fill::before{content:"\f82c"}.bi-sign-stop-lights::before{content:"\f82d"}.bi-sign-stop::before{content:"\f82e"}.bi-sign-turn-left-fill::before{content:"\f82f"}.bi-sign-turn-left::before{content:"\f830"}.bi-sign-turn-right-fill::before{content:"\f831"}.bi-sign-turn-right::before{content:"\f832"}.bi-sign-turn-slight-left-fill::before{content:"\f833"}.bi-sign-turn-slight-left::before{content:"\f834"}.bi-sign-turn-slight-right-fill::before{content:"\f835"}.bi-sign-turn-slight-right::before{content:"\f836"}.bi-sign-yield-fill::before{content:"\f837"}.bi-sign-yield::before{content:"\f838"}.bi-ev-station-fill::before{content:"\f839"}.bi-ev-station::before{content:"\f83a"}.bi-fuel-pump-diesel-fill::before{content:"\f83b"}.bi-fuel-pump-diesel::before{content:"\f83c"}.bi-fuel-pump-fill::before{content:"\f83d"}.bi-fuel-pump::before{content:"\f83e"}.bi-0-circle-fill::before{content:"\f83f"}.bi-0-circle::before{content:"\f840"}.bi-0-square-fill::before{content:"\f841"}.bi-0-square::before{content:"\f842"}.bi-rocket-fill::before{content:"\f843"}.bi-rocket-takeoff-fill::before{content:"\f844"}.bi-rocket-takeoff::before{content:"\f845"}.bi-rocket::before{content:"\f846"}.bi-stripe::before{content:"\f847"}.bi-subscript::before{content:"\f848"}.bi-superscript::before{content:"\f849"}.bi-trello::before{content:"\f84a"}.bi-envelope-at-fill::before{content:"\f84b"}.bi-envelope-at::before{content:"\f84c"}.bi-regex::before{content:"\f84d"}.bi-text-wrap::before{content:"\f84e"}.bi-sign-dead-end-fill::before{content:"\f84f"}.bi-sign-dead-end::before{content:"\f850"}.bi-sign-do-not-enter-fill::before{content:"\f851"}.bi-sign-do-not-enter::before{content:"\f852"}.bi-sign-intersection-fill::before{content:"\f853"}.bi-sign-intersection-side-fill::before{content:"\f854"}.bi-sign-intersection-side::before{content:"\f855"}.bi-sign-intersection-t-fill::before{content:"\f856"}.bi-sign-intersection-t::before{content:"\f857"}.bi-sign-intersection-y-fill::before{content:"\f858"}.bi-sign-intersection-y::before{content:"\f859"}.bi-sign-intersection::before{content:"\f85a"}.bi-sign-merge-left-fill::before{content:"\f85b"}.bi-sign-merge-left::before{content:"\f85c"}.bi-sign-merge-right-fill::before{content:"\f85d"}.bi-sign-merge-right::before{content:"\f85e"}.bi-sign-no-left-turn-fill::before{content:"\f85f"}.bi-sign-no-left-turn::before{content:"\f860"}.bi-sign-no-parking-fill::before{content:"\f861"}.bi-sign-no-parking::before{content:"\f862"}.bi-sign-no-right-turn-fill::before{content:"\f863"}.bi-sign-no-right-turn::before{content:"\f864"}.bi-sign-railroad-fill::before{content:"\f865"}.bi-sign-railroad::before{content:"\f866"}.bi-building-add::before{content:"\f867"}.bi-building-check::before{content:"\f868"}.bi-building-dash::before{content:"\f869"}.bi-building-down::before{content:"\f86a"}.bi-building-exclamation::before{content:"\f86b"}.bi-building-fill-add::before{content:"\f86c"}.bi-building-fill-check::before{content:"\f86d"}.bi-building-fill-dash::before{content:"\f86e"}.bi-building-fill-down::before{content:"\f86f"}.bi-building-fill-exclamation::before{content:"\f870"}.bi-building-fill-gear::before{content:"\f871"}.bi-building-fill-lock::before{content:"\f872"}.bi-building-fill-slash::before{content:"\f873"}.bi-building-fill-up::before{content:"\f874"}.bi-building-fill-x::before{content:"\f875"}.bi-building-fill::before{content:"\f876"}.bi-building-gear::before{content:"\f877"}.bi-building-lock::before{content:"\f878"}.bi-building-slash::before{content:"\f879"}.bi-building-up::before{content:"\f87a"}.bi-building-x::before{content:"\f87b"}.bi-buildings-fill::before{content:"\f87c"}.bi-buildings::before{content:"\f87d"}.bi-bus-front-fill::before{content:"\f87e"}.bi-bus-front::before{content:"\f87f"}.bi-ev-front-fill::before{content:"\f880"}.bi-ev-front::before{content:"\f881"}.bi-globe-americas::before{content:"\f882"}.bi-globe-asia-australia::before{content:"\f883"}.bi-globe-central-south-asia::before{content:"\f884"}.bi-globe-europe-africa::before{content:"\f885"}.bi-house-add-fill::before{content:"\f886"}.bi-house-add::before{content:"\f887"}.bi-house-check-fill::before{content:"\f888"}.bi-house-check::before{content:"\f889"}.bi-house-dash-fill::before{content:"\f88a"}.bi-house-dash::before{content:"\f88b"}.bi-house-down-fill::before{content:"\f88c"}.bi-house-down::before{content:"\f88d"}.bi-house-exclamation-fill::before{content:"\f88e"}.bi-house-exclamation::before{content:"\f88f"}.bi-house-gear-fill::before{content:"\f890"}.bi-house-gear::before{content:"\f891"}.bi-house-lock-fill::before{content:"\f892"}.bi-house-lock::before{content:"\f893"}.bi-house-slash-fill::before{content:"\f894"}.bi-house-slash::before{content:"\f895"}.bi-house-up-fill::before{content:"\f896"}.bi-house-up::before{content:"\f897"}.bi-house-x-fill::before{content:"\f898"}.bi-house-x::before{content:"\f899"}.bi-person-add::before{content:"\f89a"}.bi-person-down::before{content:"\f89b"}.bi-person-exclamation::before{content:"\f89c"}.bi-person-fill-add::before{content:"\f89d"}.bi-person-fill-check::before{content:"\f89e"}.bi-person-fill-dash::before{content:"\f89f"}.bi-person-fill-down::before{content:"\f8a0"}.bi-person-fill-exclamation::before{content:"\f8a1"}.bi-person-fill-gear::before{content:"\f8a2"}.bi-person-fill-lock::before{content:"\f8a3"}.bi-person-fill-slash::before{content:"\f8a4"}.bi-person-fill-up::before{content:"\f8a5"}.bi-person-fill-x::before{content:"\f8a6"}.bi-person-gear::before{content:"\f8a7"}.bi-person-lock::before{content:"\f8a8"}.bi-person-slash::before{content:"\f8a9"}.bi-person-up::before{content:"\f8aa"}.bi-scooter::before{content:"\f8ab"}.bi-taxi-front-fill::before{content:"\f8ac"}.bi-taxi-front::before{content:"\f8ad"}.bi-amd::before{content:"\f8ae"}.bi-database-add::before{content:"\f8af"}.bi-database-check::before{content:"\f8b0"}.bi-database-dash::before{content:"\f8b1"}.bi-database-down::before{content:"\f8b2"}.bi-database-exclamation::before{content:"\f8b3"}.bi-database-fill-add::before{content:"\f8b4"}.bi-database-fill-check::before{content:"\f8b5"}.bi-database-fill-dash::before{content:"\f8b6"}.bi-database-fill-down::before{content:"\f8b7"}.bi-database-fill-exclamation::before{content:"\f8b8"}.bi-database-fill-gear::before{content:"\f8b9"}.bi-database-fill-lock::before{content:"\f8ba"}.bi-database-fill-slash::before{content:"\f8bb"}.bi-database-fill-up::before{content:"\f8bc"}.bi-database-fill-x::before{content:"\f8bd"}.bi-database-fill::before{content:"\f8be"}.bi-database-gear::before{content:"\f8bf"}.bi-database-lock::before{content:"\f8c0"}.bi-database-slash::before{content:"\f8c1"}.bi-database-up::before{content:"\f8c2"}.bi-database-x::before{content:"\f8c3"}.bi-database::before{content:"\f8c4"}.bi-houses-fill::before{content:"\f8c5"}.bi-houses::before{content:"\f8c6"}.bi-nvidia::before{content:"\f8c7"}.bi-person-vcard-fill::before{content:"\f8c8"}.bi-person-vcard::before{content:"\f8c9"}.bi-sina-weibo::before{content:"\f8ca"}.bi-tencent-qq::before{content:"\f8cb"}.bi-wikipedia::before{content:"\f8cc"}.bi-alphabet-uppercase::before{content:"\f2a5"}.bi-alphabet::before{content:"\f68a"}.bi-amazon::before{content:"\f68d"}.bi-arrows-collapse-vertical::before{content:"\f690"}.bi-arrows-expand-vertical::before{content:"\f695"}.bi-arrows-vertical::before{content:"\f698"}.bi-arrows::before{content:"\f6a2"}.bi-ban-fill::before{content:"\f6a3"}.bi-ban::before{content:"\f6b6"}.bi-bing::before{content:"\f6c2"}.bi-cake::before{content:"\f6e0"}.bi-cake2::before{content:"\f6ed"}.bi-cookie::before{content:"\f6ee"}.bi-copy::before{content:"\f759"}.bi-crosshair::before{content:"\f769"}.bi-crosshair2::before{content:"\f794"}.bi-emoji-astonished-fill::before{content:"\f795"}.bi-emoji-astonished::before{content:"\f79a"}.bi-emoji-grimace-fill::before{content:"\f79b"}.bi-emoji-grimace::before{content:"\f7a0"}.bi-emoji-grin-fill::before{content:"\f7a1"}.bi-emoji-grin::before{content:"\f7a6"}.bi-emoji-surprise-fill::before{content:"\f7a7"}.bi-emoji-surprise::before{content:"\f7ac"}.bi-emoji-tear-fill::before{content:"\f7ad"}.bi-emoji-tear::before{content:"\f7b2"}.bi-envelope-arrow-down-fill::before{content:"\f7b3"}.bi-envelope-arrow-down::before{content:"\f7b8"}.bi-envelope-arrow-up-fill::before{content:"\f7b9"}.bi-envelope-arrow-up::before{content:"\f7be"}.bi-feather::before{content:"\f7bf"}.bi-feather2::before{content:"\f7c4"}.bi-floppy-fill::before{content:"\f7c5"}.bi-floppy::before{content:"\f7d8"}.bi-floppy2-fill::before{content:"\f7d9"}.bi-floppy2::before{content:"\f7e4"}.bi-gitlab::before{content:"\f7e5"}.bi-highlighter::before{content:"\f7f8"}.bi-marker-tip::before{content:"\f802"}.bi-nvme-fill::before{content:"\f803"}.bi-nvme::before{content:"\f80c"}.bi-opencollective::before{content:"\f80d"}.bi-pci-card-network::before{content:"\f8cd"}.bi-pci-card-sound::before{content:"\f8ce"}.bi-radar::before{content:"\f8cf"}.bi-send-arrow-down-fill::before{content:"\f8d0"}.bi-send-arrow-down::before{content:"\f8d1"}.bi-send-arrow-up-fill::before{content:"\f8d2"}.bi-send-arrow-up::before{content:"\f8d3"}.bi-sim-slash-fill::before{content:"\f8d4"}.bi-sim-slash::before{content:"\f8d5"}.bi-sourceforge::before{content:"\f8d6"}.bi-substack::before{content:"\f8d7"}.bi-threads-fill::before{content:"\f8d8"}.bi-threads::before{content:"\f8d9"}.bi-transparency::before{content:"\f8da"}.bi-twitter-x::before{content:"\f8db"}.bi-type-h4::before{content:"\f8dc"}.bi-type-h5::before{content:"\f8dd"}.bi-type-h6::before{content:"\f8de"}.bi-backpack-fill::before{content:"\f8df"}.bi-backpack::before{content:"\f8e0"}.bi-backpack2-fill::before{content:"\f8e1"}.bi-backpack2::before{content:"\f8e2"}.bi-backpack3-fill::before{content:"\f8e3"}.bi-backpack3::before{content:"\f8e4"}.bi-backpack4-fill::before{content:"\f8e5"}.bi-backpack4::before{content:"\f8e6"}.bi-brilliance::before{content:"\f8e7"}.bi-cake-fill::before{content:"\f8e8"}.bi-cake2-fill::before{content:"\f8e9"}.bi-duffle-fill::before{content:"\f8ea"}.bi-duffle::before{content:"\f8eb"}.bi-exposure::before{content:"\f8ec"}.bi-gender-neuter::before{content:"\f8ed"}.bi-highlights::before{content:"\f8ee"}.bi-luggage-fill::before{content:"\f8ef"}.bi-luggage::before{content:"\f8f0"}.bi-mailbox-flag::before{content:"\f8f1"}.bi-mailbox2-flag::before{content:"\f8f2"}.bi-noise-reduction::before{content:"\f8f3"}.bi-passport-fill::before{content:"\f8f4"}.bi-passport::before{content:"\f8f5"}.bi-person-arms-up::before{content:"\f8f6"}.bi-person-raised-hand::before{content:"\f8f7"}.bi-person-standing-dress::before{content:"\f8f8"}.bi-person-standing::before{content:"\f8f9"}.bi-person-walking::before{content:"\f8fa"}.bi-person-wheelchair::before{content:"\f8fb"}.bi-shadows::before{content:"\f8fc"}.bi-suitcase-fill::before{content:"\f8fd"}.bi-suitcase-lg-fill::before{content:"\f8fe"}.bi-suitcase-lg::before{content:"\f8ff"}.bi-suitcase::before{content:"\f900"}.bi-suitcase2-fill::before{content:"\f901"}.bi-suitcase2::before{content:"\f902"}.bi-vignette::before{content:"\f903"}
/* blocks/image-carousel.css */

.imagecarousel {
    --ic-frame: var(--paper, #fff);
    --ic-line: var(--line, #e3e8ee);
    --ic-shadow: var(--shadow-card, 0 1px .125rem rgba(20,30,60,.06), 0 1.375rem 3rem -1.5rem rgba(20,30,60,.4));
    --ic-radius: var(--r-lg, var(--radius, 0.875rem));
    --ic-accent: var(--accent, #635bff);
    --ic-gap: max(.9rem, min(calc(2 * var(--pe-vw)), 1.4rem));
    --ic-gap: clamp(.9rem, calc(2 * var(--pe-vw)), 1.4rem);
    --ic-peek: 0rem;
    width: 100%;
    color: #222;
    color: var(--ink, #0a2540);
}
.imagecarousel--peek { --ic-peek: max(1.75rem, min(9%, 5.0rem)); --ic-peek: clamp(1.75rem, 9%, 5.0rem); }

.imagecarousel .label { font: 600 .72rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 600 .72rem/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .14em;
    text-transform: uppercase; color: #626262; color: var(--muted, #425466); margin-bottom: 1.1rem; }

.ic-viewport { position: relative; }
.ic-track {
    display: flex; gap: var(--ic-gap);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding-right: var(--ic-peek);
    outline: none; scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.ic-track::-webkit-scrollbar { display: none; }
.ic-track:focus-visible { box-shadow: 0 0 0 .1875rem rgba(0, 43, 54, 0.35); border-radius: var(--ic-radius); }

@supports (color: color-mix(in lch, red, blue)) {
.ic-track:focus-visible { box-shadow: 0 0 0 .1875rem color-mix(in srgb, var(--ic-accent) 35%, transparent); }
}
.ic-track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.ic-slide { flex: 0 0 calc(100% - var(--ic-peek)); scroll-snap-align: center; margin: 0; min-width: 0; transition: opacity .45s ease; }

.ic-frame {
    background: var(--ic-frame); border: 1px solid var(--ic-line); border-radius: var(--ic-radius);
    box-shadow: var(--ic-shadow); overflow: hidden;
    transition: box-shadow .4s cubic-bezier(.2,.7,.3,1), border-color .4s ease;
}
.ic-chrome { display: flex; gap: .42rem; align-items: center; padding: .62rem .8rem;
    background: color-mix(in srgb, #222 3%, var(--ic-frame));
    border-bottom: 1px solid var(--ic-line); }

@supports (color: color-mix(in lch, red, blue)) {
.ic-chrome {
    background: color-mix(in srgb, var(--ink, #0a2540) 3%, var(--ic-frame)); }
}
.ic-chrome span { width: .58rem; height: .58rem; border-radius: 50%;
    background: rgba(5, 5, 5, 0.16);
    background: color-mix(in srgb, #222 16%, transparent); }

@supports (color: color-mix(in lch, red, blue)) {
.ic-chrome span {
    background: color-mix(in srgb, var(--ink, #0a2540) 16%, transparent); }
}
.ic-chrome span:first-child { background: #5a727a; }

@supports (color: color-mix(in lch, red, blue)) {
.ic-chrome span:first-child { background: color-mix(in srgb, var(--ic-accent) 60%, #e0654a); }
}

.ic-shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden;
    background: color-mix(in srgb, #222 2%, var(--ic-frame)); }

@supports (color: color-mix(in lch, red, blue)) {
.ic-shot {
    background: color-mix(in srgb, var(--ink, #0a2540) 2%, var(--ic-frame)); }
}
.ic-shot img, .ic-shot picture { display: block; width: 100%; height: 100%; }
.ic-shot img { -o-object-fit: cover; object-fit: cover; -o-object-position: top center; object-position: top center; }

.ic-cap { margin-top: .8rem; font: 500 .92rem/1.4 'Open Sans', Arial, Helvetica, sans-serif; font: 500 .92rem/1.4 var(--font-display, system-ui);
    color: #626262;
    color: var(--muted, #425466); padding-left: .1rem; padding-right: .1rem; }

.imagecarousel--peek .ic-slide:not(.is-active) { opacity: .55; }
.imagecarousel--peek .ic-slide:not(.is-active) .ic-frame { box-shadow: 0 1px 2px rgba(34, 34, 34, 0.08),
                    0 8px 24px -12px rgba(34, 34, 34, 0.18); box-shadow: 0 1px 2px color-mix(in srgb, #222 8%, transparent),
                    0 8px 24px -12px color-mix(in srgb, #222 18%, transparent); box-shadow: var(--shadow-card, 0 1px .125rem rgba(20,30,60,.05), 0 .625rem 1.5rem -1.25rem rgba(20,30,60,.3)); }

.ic-arrow {
    position: absolute; top: calc(50% - .8rem); transform: translateY(-50%);
    width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1px solid var(--ic-line);
    display: grid; align-items: center; justify-items: center; place-items: center; cursor: pointer; z-index: 3; padding: 0;
    background: color-mix(in srgb, var(--ic-frame) 78%, transparent); -webkit-backdrop-filter: blur(.625rem); backdrop-filter: blur(.625rem);
    box-shadow: 0 .125rem .375rem rgba(20,30,60,.1), 0 .75rem 1.875rem -1rem rgba(20,30,60,.5);
    transition: background .2s ease, transform .2s cubic-bezier(.2,.7,.3,1), opacity .25s ease, box-shadow .2s ease;
}
.ic-arrow svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: #222; stroke: var(--ink, #0a2540);
    stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ic-arrow:hover { transform: translateY(-50%) scale(1.07); border-color: color-mix(in srgb, var(--ic-accent) 45%, var(--ic-line));
    background: var(--ic-frame); }
.ic-arrow:focus-visible { outline: none; box-shadow: 0 0 0 .1875rem rgba(0, 49, 62, 0.4); }

@supports (color: color-mix(in lch, red, blue)) {
.ic-arrow:focus-visible { box-shadow: 0 0 0 .1875rem color-mix(in srgb, var(--ic-accent) 40%, transparent); }
}
.ic-arrow:active { transform: translateY(-50%) scale(.96); }
.ic-prev { left: max(.4rem, min(calc(1.4 * var(--pe-vw)), 1rem)); left: clamp(.4rem, calc(1.4 * var(--pe-vw)), 1rem); }
.ic-next { right: max(.4rem, min(calc(1.4 * var(--pe-vw)), 1rem)); right: clamp(.4rem, calc(1.4 * var(--pe-vw)), 1rem); }
.ic-arrow.is-end { opacity: 0; pointer-events: none; }

.ic-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.2rem; }
.ic-dot { width: .5rem; height: .5rem; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    background: rgba(6, 6, 6, 0.18);
    background: color-mix(in srgb, #222 18%, transparent);
    transition: background .3s ease, width .35s cubic-bezier(.2,.7,.3,1); }

@supports (color: color-mix(in lch, red, blue)) {
.ic-dot {
    background: color-mix(in srgb, var(--ink, #0a2540) 18%, transparent); }
}
.ic-dot:hover { background: rgba(0, 68, 85, 0.55); }

@supports (color: color-mix(in lch, red, blue)) {
.ic-dot:hover { background: color-mix(in srgb, var(--ic-accent) 55%, transparent); }
}
.ic-dot.is-active { width: 1.4rem; border-radius: .3rem; background: var(--ic-accent); }
.ic-dot:focus-visible { outline: none; box-shadow: 0 0 0 .1875rem rgba(0, 43, 54, 0.35); }

@supports (color: color-mix(in lch, red, blue)) {
.ic-dot:focus-visible { box-shadow: 0 0 0 .1875rem color-mix(in srgb, var(--ic-accent) 35%, transparent); }
}

@media (max-width: 768px) {
    .imagecarousel--peek { --ic-peek: max(1.25rem, min(8%, 2.75rem)); --ic-peek: clamp(1.25rem, 8%, 2.75rem); }
    .ic-arrow { width: 2.4rem; height: 2.4rem; }
    .ic-arrow svg { width: 1.05rem; height: 1.05rem; }
}

/* blocks/image-gallery.css */

.imagegallery {
    --ig-frame: var(--paper, #fff);
    --ig-line: var(--line, #e3e8ee);
    --ig-shadow: var(--shadow-card, 0 1px .125rem rgba(20,30,60,.06), 0 1.125rem 2.5rem -1.375rem rgba(20,30,60,.35));
    --ig-shadow-hover: 0 .125rem .25rem rgba(20,30,60,.08), 0 2.25rem 4.375rem -1.625rem rgba(20,30,60,.5);
    --ig-radius: var(--r-lg, var(--radius, 0.875rem));
    width: 100%;
    color: #222;
    color: var(--ink, #0a2540);
}
.imagegallery .label { font: 600 .72rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 600 .72rem/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .14em;
    text-transform: uppercase; color: #626262; color: var(--muted, #425466); margin-bottom: 1.1rem; }

.ig-grid { display: grid; grid-gap: max(1rem, min(calc(2.4 * var(--pe-vw)), 1.6rem)); grid-gap: clamp(1rem, calc(2.4 * var(--pe-vw)), 1.6rem); gap: max(1rem, min(calc(2.4 * var(--pe-vw)), 1.6rem)); gap: clamp(1rem, calc(2.4 * var(--pe-vw)), 1.6rem); }
.imagegallery--grid .ig-grid { grid-template-columns: repeat(auto-fill, minmax(min(17.5rem, 100%), 1fr)); }
.imagegallery--masonry .ig-grid { display: block; -moz-columns: 2 17.5rem; columns: 2 17.5rem; -moz-column-gap: max(1rem, min(calc(2.4 * var(--pe-vw)), 1.6rem)); column-gap: max(1rem, min(calc(2.4 * var(--pe-vw)), 1.6rem)); -moz-column-gap: clamp(1rem, calc(2.4 * var(--pe-vw)), 1.6rem); column-gap: clamp(1rem, calc(2.4 * var(--pe-vw)), 1.6rem); }
.imagegallery--masonry .ig-shot { page-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid; margin-bottom: max(1rem, min(calc(2.4 * var(--pe-vw)), 1.6rem)); margin-bottom: clamp(1rem, calc(2.4 * var(--pe-vw)), 1.6rem); }
.imagegallery--strip .ig-grid { grid-auto-flow: column; grid-auto-columns: min(78%, 28.75rem);
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; scrollbar-width: thin; }
.imagegallery--strip .ig-shot { scroll-snap-align: start; }

.ig-shot { margin: 0; min-width: 0; }
.ig-frame {
    background: var(--ig-frame); border: 1px solid var(--ig-line); border-radius: var(--ig-radius);
    box-shadow: var(--ig-shadow); overflow: hidden; cursor: zoom-in; outline: none;
    transition: box-shadow .35s cubic-bezier(.2,.7,.3,1), transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s ease;
}
.ig-frame:hover, .ig-frame:focus-visible { box-shadow: var(--ig-shadow-hover); transform: translateY(-.1875rem);
    border-color: color-mix(in srgb, #007b9a 35%, var(--ig-line)); }

@supports (color: color-mix(in lch, red, blue)) {
.ig-frame:hover, .ig-frame:focus-visible {
    border-color: color-mix(in srgb, var(--accent, #635bff) 35%, var(--ig-line)); }
}
.ig-frame:focus-visible { box-shadow: var(--ig-shadow-hover), 0 0 0 .1875rem rgba(0, 43, 54, 0.35); }

@supports (color: color-mix(in lch, red, blue)) {
.ig-frame:focus-visible { box-shadow: var(--ig-shadow-hover), 0 0 0 .1875rem color-mix(in srgb, #007b9a 35%, transparent); box-shadow: var(--ig-shadow-hover), 0 0 0 .1875rem color-mix(in srgb, var(--accent, #635bff) 35%, transparent); }
}

.ig-chrome { display: flex; gap: .42rem; align-items: center; padding: .62rem .8rem;
    background: color-mix(in srgb, #222 3%, var(--ig-frame));
    border-bottom: 1px solid var(--ig-line); }

@supports (color: color-mix(in lch, red, blue)) {
.ig-chrome {
    background: color-mix(in srgb, var(--ink, #0a2540) 3%, var(--ig-frame)); }
}
.ig-chrome span { width: .58rem; height: .58rem; border-radius: 50%;
    background: rgba(5, 5, 5, 0.16);
    background: color-mix(in srgb, #222 16%, transparent); }

@supports (color: color-mix(in lch, red, blue)) {
.ig-chrome span {
    background: color-mix(in srgb, var(--ink, #0a2540) 16%, transparent); }
}
.ig-chrome span:first-child { background: #5a727a; background: color-mix(in srgb, #007b9a 60%, #e0654a); }

@supports (color: color-mix(in lch, red, blue)) {
.ig-chrome span:first-child { background: color-mix(in srgb, var(--accent, #635bff) 60%, var(--ig-chrome-warm, #e0654a)); }
}

.ig-shot-img { position: relative; overflow: hidden;
    background: color-mix(in srgb, #222 2%, var(--ig-frame)); }

@supports (color: color-mix(in lch, red, blue)) {
.ig-shot-img {
    background: color-mix(in srgb, var(--ink, #0a2540) 2%, var(--ig-frame)); }
}
.ig-shot-img img, .ig-shot-img picture { display: block; width: 100%; height: auto; }
.imagegallery:not(.imagegallery--masonry) .ig-shot-img { aspect-ratio: 16 / 10; }
.imagegallery:not(.imagegallery--masonry) .ig-shot-img img { height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: top center; object-position: top center; }
.ig-frame:hover .ig-shot-img img { transform: scale(1.025); }
.ig-shot-img img { transition: transform .5s cubic-bezier(.2,.7,.3,1); }

.ig-zoom { position: absolute; top: .7rem; right: .7rem; width: 2rem; height: 2rem; border-radius: 50%;
    display: grid; align-items: center; justify-items: center; place-items: center; opacity: 0; transform: scale(.85);
    background: rgba(22, 22, 22, 0.64);
    background: color-mix(in srgb, #222 64%, transparent); -webkit-backdrop-filter: blur(.375rem); backdrop-filter: blur(.375rem);
    transition: opacity .3s ease, transform .3s ease; }

@supports (color: color-mix(in lch, red, blue)) {
.ig-zoom {
    background: color-mix(in srgb, var(--ink, #0a2540) 64%, transparent); }
}
.ig-zoom::before { content: ""; width: .7rem; height: .7rem; border: .125rem solid #fff; border: .125rem solid var(--ig-on-scrim, #fff); border-radius: 50%; }
.ig-zoom::after { content: ""; position: absolute; width: .42rem; height: .125rem; background: #fff; background: var(--ig-on-scrim, #fff);
    transform: rotate(45deg); right: .42rem; bottom: .5rem; }
.ig-frame:hover .ig-zoom, .ig-frame:focus-visible .ig-zoom { opacity: 1; transform: scale(1); }

.ig-cap { margin-top: .7rem; font: 500 .9rem/1.35 'Open Sans', Arial, Helvetica, sans-serif; font: 500 .9rem/1.35 var(--font-display, system-ui);
    color: #626262;
    color: var(--muted, #425466); padding-left: .1rem; padding-right: .1rem; }

@media (max-width: 768px) {
    .imagegallery--masonry .ig-grid { -moz-columns: 1; columns: 1; }
}

/* blocks/image-stack.css */

.image-stack {
    --is-ink: var(--ink, #0a0a0a);
    --is-muted: var(--muted, #6b6b6b);
    --is-line: var(--line, #e3e3e3);
    --is-paper: var(--paper, #fff);
    --is-w: 78%;
    --is-aspect: 4 / 3;
    width: 100%; margin: 0;
    color: #222;
    color: var(--is-ink);
}

.image-stack .is-eyebrow {
    margin: 0 0 max(1rem, min(calc(2.6 * var(--pe-vw)), 1.8rem));
    margin: 0 0 clamp(1rem, calc(2.6 * var(--pe-vw)), 1.8rem);
    color: var(--is-muted);
    font: 600 .74rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 .74rem/1 var(--font-mono, var(--font-display, ui-monospace, monospace));
    letter-spacing: .16em; text-transform: uppercase;
}
.image-stack.is-align-center .is-eyebrow { text-align: center; }
.image-stack.is-align-right .is-eyebrow { text-align: right; }

.image-stack .is-stage { position: relative; aspect-ratio: var(--is-aspect); margin: 0; padding: 0; }

.image-stack .is-card {
    position: absolute; left: 50%; top: 50%; width: var(--is-w); margin: 0;
    translate: -50% -50%;
    transform-origin: 50% 60%;
    transition: transform .45s cubic-bezier(.2, .7, .2, 1), z-index 0s;
    z-index: calc(20 - var(--n));
}
.image-stack .is-card:nth-child(1) { --n: 0; --s: 1; }
.image-stack .is-card:nth-child(2) { --n: 1; --s: -1; }
.image-stack .is-card:nth-child(3) { --n: 2; --s: 1; }
.image-stack .is-card:nth-child(4) { --n: 3; --s: -1; }
.image-stack .is-card:nth-child(5) { --n: 4; --s: 1; }
.image-stack .is-card:nth-child(6) { --n: 5; --s: -1; }
.image-stack .is-card:nth-child(7) { --n: 6; --s: 1; }
.image-stack .is-card:nth-child(8) { --n: 7; --s: -1; }
.image-stack.is-order-last .is-card { z-index: calc(var(--n) + 1); }

.image-stack .is-shot {
    width: 100%; aspect-ratio: var(--is-aspect); margin: 0; overflow: hidden;
    border-radius: calc(1.2 * 1cqi);
    border-radius: calc(var(--is-radius, 1.2) * 1cqi);
    background: var(--is-line);
    box-shadow: 0 0 0 1px rgba(3, 3, 3, 0.09);
}

@supports (color: color-mix(in lch, red, blue)) {
.image-stack .is-shot {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--is-ink) 9%, transparent);
}
}
.image-stack .is-shot img, .image-stack .is-shot picture, .image-stack .is-shot video { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

/* the pile's back cards turn and rise past the stage's top edge (tilt × place, spread × place): the stage keeps that
   much room above it, so they never cover the label or the piece over the pile */
.image-stack.is-pile .is-stage { margin-top: calc(4 * 2cqi + 6 * .6cqi); margin-top: calc(var(--is-tilt, 4) * 2cqi + var(--is-spread, 6) * .6cqi); }
.image-stack.is-pile .is-card {
    transform: rotate(calc(4 * var(--n) * var(--s) * 1deg))
               translate(calc(6 * var(--n) * var(--s) * .35cqi), calc(6 * var(--n) * -.2cqi));
    transform: rotate(calc(var(--is-tilt, 4) * var(--n) * var(--s) * 1deg))
               translate(calc(var(--is-spread, 6) * var(--n) * var(--s) * .35cqi), calc(var(--is-spread, 6) * var(--n) * -.2cqi));
}
.image-stack.is-fan .is-card {
    transform-origin: 50% 140%;
    transform: rotate(calc((var(--n) - 1.5) * 4 * 2deg))
               translateX(calc((var(--n) - 1.5) * 6 * .4cqi));
    transform: rotate(calc((var(--n) - 1.5) * var(--is-tilt, 4) * 2deg))
               translateX(calc((var(--n) - 1.5) * var(--is-spread, 6) * .4cqi));
}
.image-stack.is-cascade .is-card {
    left: 0; top: 0; translate: 0 0;
    transform: translate(calc(var(--n) * 6 * 1cqi), calc(var(--n) * 6 * .7cqi));
    transform: translate(calc(var(--n) * var(--is-spread, 6) * 1cqi), calc(var(--n) * var(--is-spread, 6) * .7cqi));
    z-index: calc(var(--n) + 1);
}
.image-stack.is-cascade.is-order-last .is-card { z-index: calc(20 - var(--n)); }
.image-stack.is-row .is-stage { aspect-ratio: auto; --row-gap: max(1rem, min(calc(2.5 * var(--pe-vw)), 2rem)); --row-gap: clamp(1rem, calc(2.5 * var(--pe-vw)), 2rem); --row-item: 14rem; }
.image-stack.is-row .is-card { position: relative; left: auto; top: auto; width: auto; translate: none; transform: none; z-index: auto; }

.image-stack.is-size-small { --is-w: 56%; }
.image-stack.is-size-medium { --is-w: 78%; }
.image-stack.is-size-large { --is-w: 90%; }
.image-stack.is-size-full { --is-w: 100%; }
.image-stack.is-aspect-landscape { --is-aspect: 4 / 3; }
.image-stack.is-aspect-square { --is-aspect: 1 / 1; }
.image-stack.is-aspect-portrait { --is-aspect: 3 / 4; }
.image-stack.is-aspect-wide { --is-aspect: 16 / 9; }

.image-stack.is-shadow-soft .is-shot {
    box-shadow: 0 0 0 1px rgba(3, 3, 3, 0.09),
                0 .3cqi .7cqi rgba(3, 3, 3, 0.1),
                0 1.6cqi 3.4cqi rgba(5, 5, 5, 0.15);
}

@supports (color: color-mix(in lch, red, blue)) {
.image-stack.is-shadow-soft .is-shot {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--is-ink) 9%, transparent),
                0 .3cqi .7cqi color-mix(in srgb, var(--is-ink) 10%, transparent),
                0 1.6cqi 3.4cqi color-mix(in srgb, var(--is-ink) 15%, transparent);
}
}
.image-stack.is-shadow-deep .is-shot {
    box-shadow: 0 0 0 1px rgba(3, 3, 3, 0.09),
                0 .4cqi 1cqi rgba(7, 7, 7, 0.2),
                0 2.6cqi 6.4cqi rgba(11, 11, 11, 0.32);
}

@supports (color: color-mix(in lch, red, blue)) {
.image-stack.is-shadow-deep .is-shot {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--is-ink) 9%, transparent),
                0 .4cqi 1cqi color-mix(in srgb, var(--is-ink) 20%, transparent),
                0 2.6cqi 6.4cqi color-mix(in srgb, var(--is-ink) 32%, transparent);
}
}
.image-stack.is-border-true .is-shot { padding: .9cqi; background: var(--is-paper); border: 1px solid var(--is-line); }
.image-stack.is-border-true .is-shot img, .image-stack.is-border-true .is-shot picture { border-radius: calc(1.2 * .6cqi); border-radius: calc(var(--is-radius, 1.2) * .6cqi); }

.image-stack .is-caption {
    position: absolute; top: auto; right: 0; bottom: 0; left: 0; margin: 0;
    padding: 3.2cqi 1.6cqi 1.3cqi;
    color: var(--is-paper);
    background: linear-gradient(to top,
        rgba(24, 24, 24, 0.72) 0%,
        rgba(15, 15, 15, 0.44) 46%,
        transparent 100%);
    border-radius: 0 0 calc(1.2 * 1cqi) calc(1.2 * 1cqi);
    border-radius: 0 0 calc(var(--is-radius, 1.2) * 1cqi) calc(var(--is-radius, 1.2) * 1cqi);
    font: 500 max(.72rem, min(calc(1 * var(--pe-vw)), .86rem))/1.35 'Open Sans', Arial, Helvetica, sans-serif;
    font: 500 max(.72rem, min(calc(1 * var(--pe-vw)), .86rem))/1.35 var(--font-text, var(--font-display, system-ui, sans-serif));
    font: 500 max(.72rem, min(calc(1 * var(--pe-vw)), .86rem))/1.35 'Open Sans', Arial, Helvetica, sans-serif;
    font: 500 clamp(.72rem, calc(1 * var(--pe-vw)), .86rem)/1.35 'Open Sans', Arial, Helvetica, sans-serif;
    font: 500 clamp(.72rem, calc(1 * var(--pe-vw)), .86rem)/1.35 var(--font-text, var(--font-display, system-ui, sans-serif));
    text-shadow: 0 1px .1875rem rgba(14, 14, 14, 0.4);
    text-wrap: balance;
    opacity: 0; transform: translateY(.4cqi); transition: opacity .3s ease, transform .3s ease;
}

@supports (color: color-mix(in lch, red, blue)) {
.image-stack .is-caption {
    background: linear-gradient(to top,
        color-mix(in srgb, var(--is-ink) 72%, transparent) 0%,
        color-mix(in srgb, var(--is-ink) 44%, transparent) 46%,
        transparent 100%);
    text-shadow: 0 1px .1875rem color-mix(in srgb, var(--is-ink) 40%, transparent);
}
}
.image-stack.is-captions-hidden .is-caption { display: none; }
.image-stack.is-captions-always .is-caption { opacity: 1; transform: translateY(0); }
.image-stack.is-captions-hover .is-card:hover .is-caption { opacity: 1; transform: translateY(0); }
.image-stack.is-border-true .is-caption { top: auto; right: .9cqi; bottom: .9cqi; left: .9cqi; }

.image-stack.is-hover-lift .is-card:hover { z-index: 30; transform: translateY(-1.6cqi) scale(1.03) rotate(0deg); }
.image-stack.is-hover-straighten .is-card:hover { z-index: 30; transform: rotate(0deg); }
.image-stack.is-hover-fan .is-stage:hover .is-card {
    transform-origin: 50% 140%;
    transform: rotate(calc((var(--n) - 1.5) * 4 * 2.6deg))
               translateX(calc((var(--n) - 1.5) * 6 * 1.3cqi));
    transform: rotate(calc((var(--n) - 1.5) * var(--is-tilt, 4) * 2.6deg))
               translateX(calc((var(--n) - 1.5) * var(--is-spread, 6) * 1.3cqi));
}
.image-stack.is-row .is-card:hover { transform: translateY(-.8cqi); }

@container (max-width: 30rem) {
    .image-stack .is-card { width: 92%; }
    .image-stack.is-pile .is-card { width: 72%; }   /* a turned pile card at 92% ran off the phone's edge */
}

/* blocks/image-wall.css */

.imagewall {
    --iw-frame: var(--paper, #fff);
    --iw-line: var(--line, #e3e8ee);
    --iw-shadow: var(--shadow-card, 0 1px .125rem rgba(20,30,60,.06), 0 .875rem 2.125rem -1.25rem rgba(20,30,60,.32));
    --iw-shadow-hover: 0 .125rem .3125rem rgba(20,30,60,.1), 0 2.125rem 4.125rem -1.5rem rgba(20,30,60,.5);
    --iw-radius: var(--r-md, var(--radius, 0.75rem));
    --iw-gap: max(.5rem, min(calc(1.2 * var(--pe-vw)), .85rem));
    --iw-gap: clamp(.5rem, calc(1.2 * var(--pe-vw)), .85rem);
    width: 100%;
    color: #222;
    color: var(--ink, #0a2540);
}
.imagewall--gap-tight { --iw-gap: max(.28rem, min(calc(.7 * var(--pe-vw)), .5rem)); --iw-gap: clamp(.28rem, calc(.7 * var(--pe-vw)), .5rem); }
.imagewall--gap-loose { --iw-gap: max(.9rem, min(calc(2.2 * var(--pe-vw)), 1.5rem)); --iw-gap: clamp(.9rem, calc(2.2 * var(--pe-vw)), 1.5rem); }

.imagewall .label { font: 600 .72rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 600 .72rem/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .14em;
    text-transform: uppercase; color: #626262; color: var(--muted, #425466); margin-bottom: 1.1rem; }

.imagewall--masonry .iw-wall { -moz-columns: 3 13.75rem; columns: 3 13.75rem; -moz-column-gap: var(--iw-gap); column-gap: var(--iw-gap); }
.imagewall--masonry .iw-tile { page-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid; margin: 0 0 var(--iw-gap); }

.imagewall--brick .iw-wall { display: grid; grid-gap: var(--iw-gap); gap: var(--iw-gap);
    grid-template-columns: repeat(auto-fill, minmax(min(12.5rem, 100%), 1fr)); grid-auto-rows: 1fr; }
.imagewall--brick .iw-tile { margin: 0; aspect-ratio: 4 / 3; }
.imagewall--brick .iw-tile--hero { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

.imagewall--justified { --iw-row-h: max(10.625rem, min(calc(22 * var(--pe-vw)), 16.25rem)); --iw-row-h: clamp(10.625rem, calc(22 * var(--pe-vw)), 16.25rem); }
.imagewall--justified .iw-wall { display: flex; flex-wrap: wrap; gap: var(--iw-gap); }
.imagewall--justified .iw-tile { margin: 0; height: var(--iw-row-h); min-width: 0;
    flex: calc(16/10) 1 calc(var(--iw-row-h) * 16/10); }
.imagewall--justified .iw-tile:nth-child(3n+1) { flex: calc(16/9) 1 calc(var(--iw-row-h) * 16/9); }
.imagewall--justified .iw-tile:nth-child(4n+3) { flex: calc(21/9) 1 calc(var(--iw-row-h) * 21/9); }
.imagewall--justified .iw-tile:nth-child(5n)   { flex: calc(4/5)  1 calc(var(--iw-row-h) * 4/5); }

.iw-tile { min-width: 0; }
.iw-frame {
    position: relative; display: block; height: 100%; overflow: hidden; cursor: zoom-in; outline: none;
    background: var(--iw-frame); border: 1px solid var(--iw-line); border-radius: var(--iw-radius);
    box-shadow: var(--iw-shadow);
    transition: box-shadow .35s cubic-bezier(.2,.7,.3,1), transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s ease, z-index 0s;
}
.iw-frame:hover, .iw-frame:focus-visible { box-shadow: var(--iw-shadow-hover); transform: translateY(-.25rem) scale(1.012);
    border-color: color-mix(in srgb, #007b9a 38%, var(--iw-line)); z-index: 2; }

@supports (color: color-mix(in lch, red, blue)) {
.iw-frame:hover, .iw-frame:focus-visible {
    border-color: color-mix(in srgb, var(--accent, #635bff) 38%, var(--iw-line)); }
}
.iw-frame:focus-visible { box-shadow: var(--iw-shadow-hover), 0 0 0 .1875rem rgba(0, 47, 59, 0.38); }

@supports (color: color-mix(in lch, red, blue)) {
.iw-frame:focus-visible { box-shadow: var(--iw-shadow-hover), 0 0 0 .1875rem color-mix(in srgb, #007b9a 38%, transparent); box-shadow: var(--iw-shadow-hover), 0 0 0 .1875rem color-mix(in srgb, var(--accent, #635bff) 38%, transparent); }
}

.iw-frame img, .iw-frame picture { display: block; width: 100%; }
.imagewall--masonry .iw-frame img { height: auto; }
.imagewall:not(.imagewall--masonry) .iw-frame img,
.imagewall:not(.imagewall--masonry) .iw-frame picture { height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: top center; object-position: top center; }
.iw-frame img { transition: transform .55s cubic-bezier(.2,.7,.3,1); }
.iw-frame:hover img { transform: scale(1.04); }

.iw-zoom { position: absolute; top: .55rem; right: .55rem; width: 1.85rem; height: 1.85rem; border-radius: 50%;
    display: grid; align-items: center; justify-items: center; place-items: center; opacity: 0; transform: scale(.85); pointer-events: none;
    background: rgba(22, 22, 22, 0.64);
    background: color-mix(in srgb, #222 64%, transparent); -webkit-backdrop-filter: blur(.375rem); backdrop-filter: blur(.375rem);
    transition: opacity .3s ease, transform .3s ease; }

@supports (color: color-mix(in lch, red, blue)) {
.iw-zoom {
    background: color-mix(in srgb, var(--ink, #0a2540) 64%, transparent); }
}
.iw-zoom::before { content: ""; width: .62rem; height: .62rem; border: .125rem solid #fff; border: .125rem solid var(--iw-on-scrim, #fff); border-radius: 50%; }
.iw-zoom::after { content: ""; position: absolute; width: .38rem; height: .125rem; background: #fff; background: var(--iw-on-scrim, #fff);
    transform: rotate(45deg); right: .42rem; bottom: .46rem; }
.iw-frame:hover .iw-zoom, .iw-frame:focus-visible .iw-zoom { opacity: 1; transform: scale(1); }

.iw-cap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 1.6rem .7rem .6rem;
    font: 500 .82rem/1.3 'Open Sans', Arial, Helvetica, sans-serif;
    font: 500 .82rem/1.3 var(--font-display, system-ui); color: #fff; color: var(--iw-on-scrim, #fff); opacity: 0; transform: translateY(35%);
    background: linear-gradient(to top, rgba(8, 12, 22, 0.82), rgba(8, 12, 22, 0));
    background: linear-gradient(to top, rgb(8 12 22 / .82), rgb(8 12 22 / 0));
    transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.iw-frame:hover .iw-cap, .iw-frame:focus-visible .iw-cap { opacity: 1; transform: translateY(0); }

@media (max-width: 768px) {
    .imagewall--masonry .iw-wall { -moz-columns: 2 9.375rem; columns: 2 9.375rem; }
    .imagewall--brick .iw-wall { grid-template-columns: repeat(2, 1fr); }
    .imagewall--justified .iw-tile { flex-basis: 45%; }
}

/* blocks/index-list.css */

.index-list {
    --il-ink:    var(--ink, #0a2540);
    --il-muted:  var(--muted, #6b7280);
    --il-accent: var(--accent, #635bff);
    --il-line:   var(--line, #e3e8ee);
    width: 100%; container-type: inline-size;
}
.index-list[data-scheme="dark"] {
    --il-ink:    var(--ink-dark, #e9eaee);
    --il-muted:  var(--muted-dark, #9aa1b0);
    --il-line:   var(--line-dark, #2a2e38);
}

.index-list .il-eyebrow {
    margin: 0 0 max(1rem, min(2.4cqi, 1.8rem));
    margin: 0 0 clamp(1rem, 2.4cqi, 1.8rem);
    font: 500 max(.7rem, min(.85cqi, .9rem))/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 max(.7rem, min(.85cqi, .9rem))/1 var(--font-mono, var(--font-display, system-ui));
    font: 500 max(.7rem, min(.85cqi, .9rem))/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 clamp(.7rem, .85cqi, .9rem)/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 clamp(.7rem, .85cqi, .9rem)/1 var(--font-mono, var(--font-display, system-ui));
    letter-spacing: .28em; text-transform: uppercase;
    color: var(--il-muted);
}

.index-list .il-rows { list-style: none; margin: 0; padding: 0; }
.index-list .il-row { border-top: 1px solid var(--il-line); }
.index-list .il-row:last-child { border-bottom: 1px solid var(--il-line); }

.index-list .il-link {
    position: relative; isolation: isolate;
    display: grid;
    grid-template-columns: 4rem 1fr auto;
    align-items: baseline;
    grid-gap: max(1rem, min(3cqi, 2.5rem));
    grid-gap: clamp(1rem, 3cqi, 2.5rem);
    gap: max(1rem, min(3cqi, 2.5rem));
    gap: clamp(1rem, 3cqi, 2.5rem);
    padding: max(1.4rem, min(3.2cqi, 3rem)) max(.6rem, min(1.6cqi, 1.4rem));
    padding: max(1.4rem, min(3.2cqi, 3rem)) clamp(.6rem, 1.6cqi, 1.4rem);
    padding: max(.6rem, min(1.6cqi, 1.4rem)) max(.6rem, min(1.6cqi, 1.4rem));
    padding: max(.6rem, min(1.6cqi, 1.4rem)) clamp(.6rem, 1.6cqi, 1.4rem);
    padding: clamp(1.4rem, 3.2cqi, 3rem) clamp(.6rem, 1.6cqi, 1.4rem);
    -webkit-text-decoration: none;
    text-decoration: none; color: inherit;
    transition: padding-left .4s cubic-bezier(.2, .8, .2, 1);
}
.index-list .il-link::before {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
    background: var(--il-accent);
    transform: scaleY(0); transform-origin: bottom;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
a.il-link:hover { padding-left: max(1.4rem, min(3cqi, 2.5rem)); padding-left: clamp(1.4rem, 3cqi, 2.5rem); }
a.il-link:hover::before { transform: scaleY(1); }

.index-list .il-num {
    font: 500 max(.8rem, min(.95cqi, .95rem))/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 max(.8rem, min(.95cqi, .95rem))/1 var(--font-mono, var(--font-display, system-ui));
    font: 500 max(.8rem, min(.95cqi, .95rem))/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 clamp(.8rem, .95cqi, .95rem)/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 clamp(.8rem, .95cqi, .95rem)/1 var(--font-mono, var(--font-display, system-ui));
    letter-spacing: .08em; color: var(--il-muted);
    transition: color .3s ease;
}
.index-list .il-title {
    font: 600 max(1.6rem, min(5cqi, 4rem))/.95 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 max(1.6rem, min(5cqi, 4rem))/.95 var(--font-display, system-ui);
    font: 600 max(1.6rem, min(5cqi, 4rem))/.95 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 clamp(1.6rem, 5cqi, 4rem)/.95 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 clamp(1.6rem, 5cqi, 4rem)/.95 var(--font-display, system-ui);
    letter-spacing: -.03em; color: var(--il-ink);
}
.index-list .il-meta {
    text-align: right;
    font: 500 max(.7rem, min(.85cqi, .85rem))/1.3 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 max(.7rem, min(.85cqi, .85rem))/1.3 var(--font-mono, var(--font-display, system-ui));
    font: 500 max(.7rem, min(.85cqi, .85rem))/1.3 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 clamp(.7rem, .85cqi, .85rem)/1.3 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 clamp(.7rem, .85cqi, .85rem)/1.3 var(--font-mono, var(--font-display, system-ui));
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--il-muted);
    transition: color .3s ease;
}
a.il-link:hover .il-num,
a.il-link:hover .il-meta { color: var(--il-ink); }

@media (max-width: 768px) {
    .index-list .il-link { grid-template-columns: 2.5rem 1fr; }
    .index-list .il-meta { grid-column: 2; text-align: left; }
}

/* blocks/inquiry-card.css */

.inquiry-card {
    --inq-ink: var(--ink, #151513);
    --inq-muted: var(--muted, #65625b);
    --inq-line: var(--line, #d8d5cd);
    --inq-paper: var(--paper, #fbfaf7);
    --inq-accent: var(--accent, #b3321d);
    --inq-on-ink: var(--page-bg, #f4f3ef);
    position: relative;
    width: 100%; margin: 0;
    padding: 3.2em 3.2em 2.8em;
    color: #222;
    color: var(--inq-ink);
    background: #fafafa;
    background: var(--inq-paper);
    border: 1px solid rgba(5, 5, 5, 0.14);
    border: 1px solid var(--inq-line);
    border-radius: calc(.4 * 1em);
    border-radius: calc(var(--inq-radius, .4) * 1em);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, 'Helvetica Neue', Arial, sans-serif);
}
.inquiry-card.inq-surface-open { padding: 0; background: transparent; border: 0; border-radius: 0; }

.inquiry-card .inq-head { margin: 0 0 2.6em; }
.inquiry-card .inq-title {
    margin: 0 0 0 -.03em; max-width: 16em;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, 'Helvetica Neue', Arial, sans-serif); font-weight: 400;
    font-size: 2.3em; line-height: 1.04; letter-spacing: -.03em; text-wrap: balance;
}
.inquiry-card .inq-lead { margin: .8em 0 0; max-width: 36em; color: var(--inq-muted); font-size: 1em; line-height: 1.5; text-wrap: pretty; }
.inquiry-card.inq-align-center .inq-head { text-align: center; }
.inquiry-card.inq-align-center .inq-title, .inquiry-card.inq-align-center .inq-lead { margin-left: auto; margin-right: auto; }

.inquiry-card .inq-hp { position: absolute; left: calc(-200 * var(--pe-vw)); width: 1em; height: 1em; overflow: hidden; }
.inquiry-card .inq-fields { --row-gap: 2.1em 2.4em; }
.inquiry-card .inq-fields > .inq-field { --row-item: 13em; margin: 0; }
.inquiry-card .inq-field { display: block; }
.inquiry-card .inq-label {
    display: block; margin: 0 0 .15em; padding: 0;
    color: var(--inq-muted);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, 'SFMono-Regular', Menlo, monospace); font-size: .82em; line-height: 1.4; letter-spacing: .01em;
}
.inquiry-card .inq-input {
    display: block; width: 100%; margin: 0;
    padding: .5em 0 .55em;
    color: var(--inq-ink); background: transparent;
    border: 0; border-bottom: 1px solid rgba(12, 12, 12, 0.34); border-radius: 0;
    font: inherit; font-size: 1.15em; line-height: 1.35;
    -moz-appearance: none;
         appearance: none; -webkit-appearance: none;
    transition: border-color .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s cubic-bezier(.4, 0, .2, 1);
    transition: border-color .2s var(--ease, ease), box-shadow .2s var(--ease, ease);
}

@supports (color: color-mix(in lch, red, blue)) {
.inquiry-card .inq-input { border-bottom: 1px solid color-mix(in srgb, var(--inq-ink) 34%, transparent);
}
}
.inquiry-card .inq-input:hover { border-bottom-color: var(--inq-ink); }
.inquiry-card .inq-input:focus-visible, .inquiry-card .inq-input:focus { outline: 0; border-bottom-color: var(--inq-ink); box-shadow: 0 1px 0 0 var(--inq-accent); }
.inquiry-card .inq-textarea { resize: vertical; min-height: 5.4em; }
.inquiry-card input[type="date"].inq-input { min-height: 2.45em; }
.inquiry-card .inq-select {
    padding-right: 1.6em; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--inq-ink) 50%), linear-gradient(135deg, var(--inq-ink) 50%, transparent 50%);
    background-size: .36em .36em, .36em .36em;
    background-position: calc(100% - .5em) 55%, calc(100% - .14em) 55%;
    background-repeat: no-repeat;
}
.inquiry-card.inq-fields-boxed .inq-input { padding: .6em .75em; border: 1px solid rgba(9, 9, 9, 0.26); border-radius: .3em; background-color: #f9f9f9; background-color: var(--page-bg, #f4f3ef); }

@supports (color: color-mix(in lch, red, blue)) {
.inquiry-card.inq-fields-boxed .inq-input { border: 1px solid color-mix(in srgb, var(--inq-ink) 26%, transparent); }
}
.inquiry-card.inq-fields-boxed .inq-input:focus { box-shadow: 0 0 0 .125rem rgba(0, 74, 92, 0.6); }

@supports (color: color-mix(in lch, red, blue)) {
.inquiry-card.inq-fields-boxed .inq-input:focus { box-shadow: 0 0 0 .125rem color-mix(in srgb, var(--inq-accent) 60%, transparent); }
}
.inquiry-card.inq-fields-boxed .inq-select { background-position: calc(100% - 1.1em) 55%, calc(100% - .75em) 55%; }

.inquiry-card .inq-choice { padding: 0; border: 0; min-width: 0; }
.inquiry-card .inq-body > * { margin: 0; }
.inquiry-card .inq-body > * + * { margin-top: 2.1em; }
.inquiry-card .inq-body > .inq-hp + * { margin-top: 0; }
.inquiry-card .inq-choice > .inq-label { margin-bottom: .9em; }
.inquiry-card .inq-pills { --row-gap: .6em; --row-flow-narrow: row wrap; margin: 0; }
.inquiry-card .inq-pills > .inq-pill { --row-item: auto; flex-grow: 0; }
.inquiry-card .inq-pill {
    position: relative; cursor: pointer;
    padding: .62em 1.15em .66em;
    border: 1px solid rgba(10, 10, 10, 0.3); border-radius: 99em;
    font-size: 1em; line-height: 1.2; white-space: nowrap;
    transition: background-color .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1), border-color .2s cubic-bezier(.4, 0, .2, 1);
    transition: background-color .2s var(--ease, ease), color .2s var(--ease, ease), border-color .2s var(--ease, ease);
}

@supports (color: color-mix(in lch, red, blue)) {
.inquiry-card .inq-pill {
    border: 1px solid color-mix(in srgb, var(--inq-ink) 30%, transparent);
}
}
.inquiry-card .inq-pill input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; opacity: 0; cursor: pointer; }
.inquiry-card .inq-pill:hover { border-color: var(--inq-ink); }
.inquiry-card .inq-tick {
    display: inline-block; width: 0; height: .42em; margin-right: 0; vertical-align: .12em;
    background: var(--inq-accent);
    transition: width .22s cubic-bezier(.4, 0, .2, 1), margin .22s cubic-bezier(.4, 0, .2, 1);
    transition: width .22s var(--ease, ease), margin .22s var(--ease, ease);
}
.inquiry-card .inq-pill:has(input:checked) { background: var(--inq-ink); border-color: var(--inq-ink); color: var(--inq-on-ink); }
.inquiry-card .inq-pill:has(input:checked) .inq-tick { width: .42em; margin-right: .6em; }
.inquiry-card .inq-pill:has(input:focus-visible) { outline: .125rem solid var(--inq-accent); outline-offset: .2em; }

.inquiry-card .inq-error { display: none; margin: 1.6em 0 0; color: var(--inq-accent); font-size: 1em; line-height: 1.45; }
.inquiry-card.is-failed .inq-error { display: block; }
.inquiry-card .inq-foot { --row-gap: 1em 2em; align-items: center; margin: 2.4em 0 0; }
.inquiry-card .inq-foot > .inq-submit { --row-item: 12em; flex-grow: 0; }
.inquiry-card .inq-foot > .inq-footnote { --row-item: 16em; }
.inquiry-card .inq-submit {
    margin: 0; padding: 1.05em 2.1em 1.1em; cursor: pointer;
    color: var(--inq-on-ink); background: var(--inq-ink);
    border: 1px solid var(--inq-ink); border-radius: 99em;
    font: inherit; font-size: 1em; font-weight: 500; line-height: 1; letter-spacing: .01em; white-space: nowrap;
    transition: background-color .2s cubic-bezier(.4, 0, .2, 1), transform .2s cubic-bezier(.4, 0, .2, 1);
    transition: background-color .2s var(--ease, ease), transform .2s var(--ease, ease);
}
.inquiry-card .inq-submit:hover { background: color-mix(in srgb, var(--inq-ink) 84%, var(--inq-paper)); transform: none; }
.inquiry-card .inq-submit:focus-visible { outline: .125rem solid var(--inq-accent); outline-offset: .25em; }
.inquiry-card.is-busy .inq-submit { opacity: .55; cursor: progress; }
.inquiry-card .inq-footnote { margin: 0; color: var(--inq-muted); font-size: .92em; line-height: 1.45; }

.inquiry-card .inq-success { display: none; padding: 1em 0 .4em; }
.inquiry-card.is-sent .inq-body { display: none; }
.inquiry-card.is-sent .inq-head .inq-lead { display: none; }
.inquiry-card.is-sent .inq-success { display: block; }
.inquiry-card .inq-sent-mark { display: block; width: .7em; height: .7em; margin: 0 0 1.4em; background: var(--inq-accent); }
.inquiry-card .inq-success-title {
    margin: 0; max-width: 16em;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, 'Helvetica Neue', Arial, sans-serif); font-weight: 400;
    font-size: 1.85em; line-height: 1.1; letter-spacing: -.025em; text-wrap: balance;
}
.inquiry-card .inq-readback {
    margin: 1.2em 0 0; padding: .9em 0; max-width: 44em;
    border-top: 1px solid var(--inq-line); border-bottom: 1px solid var(--inq-line);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, 'SFMono-Regular', Menlo, monospace); font-size: .92em; line-height: 1.5; letter-spacing: .01em;
}
.inquiry-card .inq-success-text { margin: 1.2em 0 0; max-width: 40em; color: var(--inq-muted); font-size: 1em; line-height: 1.5; }

@container (max-width: 30rem) {
    .inquiry-card .inq-fields > .inq-field, .inquiry-card .inq-foot > .inq-footnote { --row-item: auto; }

    .inquiry-card { padding: 2em 1.4em 1.8em; }
    .inquiry-card.inq-surface-open { padding: 0; }
    .inquiry-card .inq-title { font-size: 1.8em; }
    .inquiry-card .inq-foot > .inq-submit { --row-item: auto; }
}

.inquiry-card:has(.inq-estimate) .inq-field:has(input[name="place"]),
.inquiry-card:has(.inq-estimate) .inq-field-select:has(select[name="budget"]),
.inquiry-card.has-page-date .inq-field:has(input[type="date"][name="date"]),
.inquiry-card.has-page-package .inq-choice:has(input[name="package"]) { display: none; }
.inquiry-card.has-page-date:has(.inq-estimate) .inq-fields:has(input[name="place"]) { display: none; }

.inquiry-card .inq-estimate > * { margin: 0; }
.inquiry-card .inq-estimate > * + * { margin-top: 2.1em; }
.inquiry-card .inq-guests { --row-gap: 1em 2.4em; --row-flow-narrow: row wrap; align-items: end; }
.inquiry-card .inq-guests > .inq-field-guests { --row-item: 7em; flex-grow: 0; }
.inquiry-card .inq-guests > .inq-range { --row-item: 12em; flex-grow: 1; padding-bottom: .9em; }
.inquiry-card .inq-number { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, 'Helvetica Neue', Arial, sans-serif); font-size: 2em; font-weight: 300; line-height: 1.1; letter-spacing: -.02em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.inquiry-card .inq-number::-webkit-inner-spin-button, .inquiry-card .inq-number::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.inquiry-card .inq-range input { width: 100%; margin: 0; accent-color: var(--inq-accent); cursor: pointer; }
.inquiry-card .inq-pill-price { margin-left: .5em; color: var(--inq-muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; transition: color .2s cubic-bezier(.4, 0, .2, 1); transition: color .2s var(--ease, ease); }
.inquiry-card .inq-pill:has(input:checked) .inq-pill-price { color: rgba(179, 179, 179, 0.72); }

@supports (color: color-mix(in lch, red, blue)) {
.inquiry-card .inq-pill:has(input:checked) .inq-pill-price { color: color-mix(in srgb, var(--inq-on-ink) 72%, transparent); }
}

.inquiry-card .inq-sum { padding: 1.5em 1.6em 1.4em; border-radius: calc(.4 * 1.4em); border-radius: calc(var(--inq-radius, .4) * 1.4em); background: color-mix(in srgb, var(--inq-accent) 7%, var(--inq-paper)); }
.inquiry-card .inq-sum-label { margin: 0 0 .8em; color: var(--inq-accent); font-size: .78em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; }
.inquiry-card .inq-line { position: relative; margin: 0; padding: .7em 7.5em .7em 0; border-top: 1px solid rgba(4, 4, 4, 0.12); line-height: 1.35; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

@supports (color: color-mix(in lch, red, blue)) {
.inquiry-card .inq-line { border-top: 1px solid color-mix(in srgb, var(--inq-ink) 12%, transparent); }
}
.inquiry-card .inq-line-key { display: block; color: var(--inq-muted); font-size: .8em; letter-spacing: .02em; }
.inquiry-card .inq-line-what { display: block; margin-top: .15em; font-size: 1em; text-wrap: pretty; }
.inquiry-card .inq-line-amount { position: absolute; right: 0; bottom: .7em; font-size: 1.05em; font-weight: 500; white-space: nowrap; transition: color .3s cubic-bezier(.4, 0, .2, 1); transition: color .3s var(--ease, ease); }
.inquiry-card .inq-line.is-empty .inq-line-what { color: var(--inq-muted); font-style: italic; }
.inquiry-card .inq-total { position: relative; margin: 0; padding: 1em 0 0; border-top: 1px solid var(--inq-ink); line-height: 1; }
.inquiry-card .inq-total-key { display: block; color: var(--inq-muted); font-size: .8em; letter-spacing: .02em; }
.inquiry-card .inq-total-amount {
    display: block; margin-top: .25em;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, 'Helvetica Neue', Arial, sans-serif); font-weight: 300;
    font-size: 2.8em; line-height: 1; letter-spacing: -.03em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
    transition: color .3s cubic-bezier(.4, 0, .2, 1);
    transition: color .3s var(--ease, ease);
}
.inquiry-card .is-changed { color: var(--inq-accent); }
.inquiry-card .inq-sum-note { margin: .9em 0 0; color: var(--inq-muted); font-size: .86em; line-height: 1.45; }
@container (max-width: 30rem) {
    .inquiry-card .inq-guests > .inq-field-guests, .inquiry-card .inq-guests > .inq-range { --row-item: auto; }
    .inquiry-card .inq-sum { padding: 1.2em 1.1em 1.1em; }
    .inquiry-card .inq-total-amount { font-size: 2.3em; }
}

/* blocks/journey.css */
/* journey — a person's steps (components/journey.twig, behaviors/journey.js): one vertical line of numbered marks, done
   ones filled with a tick, locked ones dashed with a lock, and the step to do now lifted onto the theme's card with its
   text and its form (the kit's fields). A reviewer's list follows as cards. Colours, faces and corners are the theme's.
   Knobs (props.style): --journey-mark (the marks' size) · --journey-gap (room between steps) · --journey-card-pad. */
.member-journey {
    --journey-line: var(--line, color-mix(in oklab, currentColor 16%, transparent));
    --journey-accent: var(--accent, currentColor);
    --journey-on-accent: var(--accent-ink, var(--on-accent, white));
    container-type: inline-size; display: grid; grid-gap: 4.5em; gap: 4.5em; width: 100%; color: inherit;
}
.member-journey[data-state="loading"] { min-height: 14em; }
.member-journey[data-state="loading"] .journey-fallback { visibility: hidden; }
.member-journey .journey-fallback { color: #626262; color: var(--muted, currentColor); max-width: 68ch; max-width: var(--measure, 60ch); }
.member-journey :where(h2, h3, p, ol, dl, dd, blockquote) { margin: 0; }

/* a run's head: the sequence, the run's name, how far along */
.member-journey .journey-head { display: grid; grid-gap: .6em; gap: .6em; margin-bottom: 2.2em; }
.member-journey .journey-eyebrow {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, var(--font-text, inherit)); font-size: 0.6875rem; font-size: var(--text-label, .75em);
    letter-spacing: 0.08em;
    letter-spacing: var(--track-label, .14em); text-transform: uppercase; color: var(--journey-accent);
}
.member-journey .journey-name {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, inherit); font-size: calc(1.4em * 1.6); font-size: calc(var(--text-lg, 1.4em) * 1.6); font-weight: 400;
    line-height: 1.05; letter-spacing: -.015em; color: #222; color: var(--ink, currentColor); text-wrap: balance;
}
.member-journey .journey-progress { display: flex; align-items: center; gap: 1em; color: #626262; color: var(--muted, currentColor); font-size: .9em; }
.member-journey .journey-progress-bar {
    flex: 0 1 14em; height: .35em; border-radius: 99em;
    background: linear-gradient(to right, var(--journey-accent) calc(0 * 100%), color-mix(in oklab, currentColor 12%, transparent) 0);
}

@supports (color: color-mix(in lch, red, blue)) {
.member-journey .journey-progress-bar {
    background: linear-gradient(to right, var(--journey-accent) calc(var(--journey-done, 0) * 100%), color-mix(in oklab, currentColor 12%, transparent) 0);
}
}

/* the steps: a mark on one line down the left, the step beside it */
.member-journey .journey-steps { list-style: none; padding: 0; display: grid; }
.member-journey .journey-step {
    --mark: var(--journey-mark, 2.6em);
    position: relative; display: grid; grid-template-columns: 2.6em minmax(0, 1fr); grid-template-columns: var(--mark) minmax(0, 1fr); grid-gap: 1.4em; gap: 1.4em;
    padding-bottom: 2.2em;
    padding-bottom: var(--journey-gap, 2.2em);
}
.member-journey .journey-step:not(:last-child)::before {
    content: ""; position: absolute; left: calc(var(--mark) / 2); top: var(--mark); bottom: 0;
    border-left: 1px solid var(--journey-line);
}
.member-journey .journey-step[data-step-state="approved"]:not(:last-child)::before { border-color: var(--journey-accent); }
.member-journey .journey-mark {
    position: relative; display: grid; align-items: center; justify-items: center; place-items: center; width: 2.6em; width: var(--mark, 2.6em); height: 2.6em; height: var(--mark, 2.6em); border-radius: 50%;
    border: 1px solid var(--journey-line); background: #f9f9f9; background: var(--page-bg, transparent);
    font-weight: 600; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: #222; color: var(--ink, currentColor);
}
.member-journey .journey-mark svg { width: 48%; height: 48%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.member-journey [data-step-state="approved"] .journey-mark { background: var(--journey-accent); border-color: var(--journey-accent); color: var(--journey-on-accent); }
.member-journey [data-step-state="locked"] .journey-mark { border-style: dashed; color: #626262; color: var(--muted, currentColor); }
.member-journey .is-current .journey-mark {
    border: .12em solid var(--journey-accent); color: var(--journey-accent);
    box-shadow: 0 0 0 .4em rgba(0, 17, 22, 0.14);
}

@supports (color: color-mix(in lch, red, blue)) {
.member-journey .is-current .journey-mark {
    box-shadow: 0 0 0 .4em color-mix(in oklab, var(--journey-accent) 14%, transparent);
}
}

.member-journey .journey-step-body { display: grid; grid-gap: .5em; gap: .5em; min-width: 0; padding-top: calc(var(--mark) / 2 - .75em); }
.member-journey .journey-step-title {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, inherit); font-size: calc(1.4em * .9); font-size: calc(var(--text-lg, 1.4em) * .9); font-weight: 400;
    line-height: 1.2; color: #222; color: var(--ink, currentColor);
}
.member-journey [data-step-state="locked"] :where(.journey-step-title, .journey-status) { color: #626262; color: var(--muted, currentColor); opacity: .8; }
.member-journey :where(.journey-status, .journey-hint) { color: #626262; color: var(--muted, currentColor); font-size: .9em; }
/* nothing here yet: a calm, quiet box rather than a stray line */
.member-journey .journey-empty {
    max-width: 40em; padding: 1.4em 1.6em; color: #626262; color: var(--muted, currentColor);
    border: 1px dashed var(--journey-line); border-radius: calc(1vh * 2); border-radius: calc(var(--radius, .4em) * 2);
}
.member-journey .journey-hint { font-size: .8em; }

/* the step to do now: lifted onto the theme's card, bigger, with room */
.member-journey .is-current .journey-step-body {
    gap: 1em; padding: 2em 2.2em; padding: var(--journey-card-pad, 2em 2.2em);
    background: #fafafa;
    background: var(--card, var(--panel, var(--page-bg, transparent))); color: #494949; color: var(--body, currentColor);
    border: 1px solid var(--journey-line); border-radius: calc(1vh * 3); border-radius: calc(var(--radius, .4em) * 3);
    box-shadow: 0 1px 2px rgba(34, 34, 34, 0.08),
                    0 8px 24px -12px rgba(34, 34, 34, 0.18);
    box-shadow: 0 1px 2px color-mix(in srgb, #222 8%, transparent),
                    0 8px 24px -12px color-mix(in srgb, #222 18%, transparent);
    box-shadow: var(--shadow-card, 0 1em 2.4em -1.4em rgba(10, 10, 10, 0.3));
}

@supports (color: color-mix(in lch, red, blue)) {
.member-journey .is-current .journey-step-body {
    box-shadow: var(--shadow-card, 0 1em 2.4em -1.4em color-mix(in oklab, var(--ink, black) 30%, transparent));
}
}
.member-journey .is-current .journey-step-title { font-size: calc(1.4em * 1.3); font-size: calc(var(--text-lg, 1.4em) * 1.3); line-height: 1.1; }
.member-journey .journey-text { display: grid; grid-gap: .8em; gap: .8em; max-width: 68ch; max-width: var(--measure, 62ch); line-height: 1.55; line-height: var(--leading-body, 1.55); }
.member-journey .journey-lead { max-width: 68ch; max-width: var(--measure, 62ch); }

/* the form: the kit's fields, one per line, the button and the server's words under them */
.member-journey .journey-form { display: grid; grid-gap: 1.1em; gap: 1.1em; margin-top: .4em; max-width: 44em; }
.member-journey .journey-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8em 1em; }
.member-journey .journey-message { font-size: .9em; color: #626262; color: var(--muted, currentColor); }
.member-journey .journey-message:empty { display: none; }
.member-journey :where(.journey-message[role="alert"], .journey-error) { color: #b42318; color: var(--danger, #b42318); }
.member-journey .journey-error { font-size: .85em; }
.member-journey .field--file .field-control { padding: .5em; cursor: pointer; }
/* the file picker's own button wears the theme: a small outlined pill in the control, not the browser's grey box */
.member-journey .field--file .field-control::-webkit-file-upload-button {
    font: inherit; font-weight: 500; margin-right: 1em; padding: .45em 1em; cursor: pointer; color: #222; color: var(--ink, currentColor);
    background: #fafafa;
    background: var(--card, var(--page-bg, transparent)); border: 1px solid var(--journey-line); border-radius: 1vh; border-radius: var(--radius, .4em);
    -webkit-transition: border-color .2s, color .2s;
    transition: border-color .2s, color .2s;
}
.member-journey .field--file .field-control::file-selector-button {
    font: inherit; font-weight: 500; margin-right: 1em; padding: .45em 1em; cursor: pointer; color: #222; color: var(--ink, currentColor);
    background: #fafafa;
    background: var(--card, var(--page-bg, transparent)); border: 1px solid var(--journey-line); border-radius: 1vh; border-radius: var(--radius, .4em);
    transition: border-color .2s, color .2s;
}
.member-journey .field--file .field-control:hover::-webkit-file-upload-button { border-color: var(--journey-accent); color: var(--journey-accent); }
.member-journey .field--file .field-control:hover::file-selector-button { border-color: var(--journey-accent); color: var(--journey-accent); }

/* sent and waiting, a comment, what they sent */
.member-journey :where(.journey-received, .journey-flash) {
    display: grid; grid-gap: .3em; gap: .3em; padding: 1em 1.2em; border-radius: calc(1vh * 2); border-radius: calc(var(--radius, .4em) * 2);
    background: rgba(0, 10, 12, 0.08);
}

@supports (color: color-mix(in lch, red, blue)) {
.member-journey :where(.journey-received, .journey-flash) {
    background: color-mix(in oklab, var(--journey-accent) 8%, transparent);
}
}
.member-journey .journey-received-line { font-weight: 500; color: #222; color: var(--ink, currentColor); }
.member-journey .journey-flash {   /* focused after a send, as a place to land */
    display: flex; align-items: center; gap: .8em; color: #222; color: var(--ink, currentColor); font-weight: 500; outline: none;
}
.member-journey .journey-flash-mark {
    flex: none; display: grid; align-items: center; justify-items: center; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%;
    background: var(--journey-accent); color: var(--journey-on-accent);
}
.member-journey .journey-flash-mark svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.member-journey .journey-feedback {
    display: grid; grid-gap: .35em; gap: .35em; padding: .9em 1.2em; border-left: .2em solid var(--journey-accent);
    background: color-mix(in oklab, currentColor 4%, transparent); border-radius: 0 1vh 1vh 0; border-radius: 0 var(--radius, .4em) var(--radius, .4em) 0;
}
.member-journey .journey-feedback-label {
    font-size: 0.6875rem;
    font-size: var(--text-label, .75em); letter-spacing: 0.08em; letter-spacing: var(--track-label, .1em); text-transform: uppercase; color: #626262; color: var(--muted, currentColor);
}
.member-journey .journey-sent > summary { cursor: pointer; color: var(--journey-accent); width: -moz-max-content; width: max-content; }
.member-journey .journey-sent[open] > summary { margin-bottom: .6em; }
.member-journey .journey-answers { display: grid; border-top: 1px solid var(--journey-line); }
.member-journey .journey-answer {
    display: grid; grid-template-columns: minmax(8em, 1fr) 2fr; grid-gap: 1em; gap: 1em; padding: .65em 0; border-bottom: 1px solid var(--journey-line);
}
.member-journey .journey-answer dt { color: #626262; color: var(--muted, currentColor); font-size: .9em; }
.member-journey .journey-answer dd { white-space: pre-line; word-wrap: anywhere; overflow-wrap: anywhere; }
.member-journey .journey-answer a { color: var(--journey-accent); }

/* a reviewer's list: a card per submission */
.member-journey .journey-reviews { display: grid; grid-gap: 1.4em; gap: 1.4em; }
.member-journey .journey-reviews > .journey-head { margin-bottom: .6em; }
.member-journey .journey-review {
    display: grid; grid-gap: 1.2em; gap: 1.2em; padding: 1.8em 2em; padding: var(--journey-card-pad, 1.8em 2em);
    background: #fafafa;
    background: var(--card, var(--panel, transparent)); border: 1px solid var(--journey-line); border-radius: calc(1vh * 3); border-radius: calc(var(--radius, .4em) * 3);
}
.member-journey .journey-review-head { display: grid; grid-gap: .25em; gap: .25em; }
.member-journey .journey-review-person { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, inherit); font-size: calc(1.4em * .9); font-size: calc(var(--text-lg, 1.4em) * .9); color: #222; color: var(--ink, currentColor); }

/* a guest: the lock, one sentence and the way in */
.member-journey .journey-guest {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-gap: 1.4em; gap: 1.4em; align-items: start; max-width: 40em;
    padding: 2em 2.2em; border: 1px solid var(--journey-line); border-radius: calc(1vh * 3); border-radius: calc(var(--radius, .4em) * 3);
    background: #fafafa;
    background: var(--card, var(--panel, transparent));
}
.member-journey .journey-guest .journey-mark { --mark: 3em; color: var(--journey-accent); }
.member-journey .journey-guest > div { display: grid; grid-gap: .8em; gap: .8em; justify-items: start; }

@container (max-width: 34em) {
    .member-journey .journey-step { gap: .9em; --mark: var(--journey-mark, 2.2em); }
    .member-journey .is-current .journey-step-body { padding: 1.3em 1.2em; }
    .member-journey .journey-answer { grid-template-columns: minmax(0, 1fr); gap: .2em; }
    .member-journey .journey-guest { grid-template-columns: minmax(0, 1fr); padding: 1.4em; }
}

/* blocks/kit.css */

.section { padding: var(--space, max(2rem, min(calc(5 * var(--pe-vw)), 5rem))); padding: var(--space, clamp(2rem, calc(5 * var(--pe-vw)), 5rem)); }
.section--invert { background: #0d0f14; background: var(--invert-bg); color: #f4f6fb; color: var(--invert-fg); }
.section-head { display: flex; flex-direction: column; gap: .5rem; max-width: 60ch; margin-bottom: max(1.5rem, min(calc(4 * var(--pe-vw)), 3rem)); margin-bottom: clamp(1.5rem, calc(4 * var(--pe-vw)), 3rem); }
.section-kicker { font: 600 .75rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 600 .75rem/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: #626262; color: var(--muted); margin: 0; }
.section-title { font: 600 max(1.8rem, min(calc(4 * var(--pe-vw)), 3rem))/1.05 'Open Sans', Arial, Helvetica, sans-serif; font: 600 max(1.8rem, min(calc(4 * var(--pe-vw)), 3rem))/1.05 var(--font-display); font: 600 max(1.8rem, min(calc(4 * var(--pe-vw)), 3rem))/1.05 'Open Sans', Arial, Helvetica, sans-serif; font: 600 clamp(1.8rem, calc(4 * var(--pe-vw)), 3rem)/1.05 'Open Sans', Arial, Helvetica, sans-serif; font: 600 clamp(1.8rem, calc(4 * var(--pe-vw)), 3rem)/1.05 var(--font-display); letter-spacing: -.02em; margin: 0; }
.section-lede { font: 400 1.05rem/1.55 'Open Sans', Arial, Helvetica, sans-serif; font: 400 1.05rem/1.55 var(--font-text); color: #626262; color: var(--muted); margin: 0; }

/* an icon piece named brand:<name> is an inline svg (icon.twig): it takes a glyph's size, 1em of its piece's type, as the
   icon font's glyphs do; at no specificity, so a box that sizes its marks (tech-row) keeps its own */
:where(.icon-mark) > svg { display: block; width: 1em; height: 1em; }

/* pieces take the pointer; what only places them passes it through (sections overlap, their empty boxes ate clicks) */
.section { pointer-events: none; }
.section * { pointer-events: auto; }
.section .layer, .section .plot, .section .free, .section [data-shows-nothing] { pointer-events: none; }
.section :is(.layer, .plot, .free, [data-shows-nothing]) { pointer-events: none; }

.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font: 600 .75rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 600 .75rem/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: #626262; color: var(--muted); }
.eyebrow::before { content: "◉"; color: #007b9a; color: var(--accent); font-size: .7em; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; cursor: pointer;
    padding: .85em 1.5em; border: 1px solid #222; border: 1px solid var(--ink); border-radius: 1vh; border-radius: var(--radius, 1vh);
    font: 600 .95rem/1 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 .95rem/1 var(--font-text); -webkit-text-decoration: none; text-decoration: none; color: #222; color: var(--ink); background: transparent;
    transition: transform .25s, background .25s, color .25s, border-color .25s; }
.btn:hover { transform: translateY(-.125rem); }
.btn.btn-accent { background: #007b9a; background: var(--accent); border-color: #007b9a; border-color: var(--accent); color: #f4f6fb; color: var(--invert-fg, #fff); }
.btn.btn-accent:hover { background: #056f89; background: color-mix(in srgb, #007b9a 86%, #222); color: #f4f6fb; color: var(--invert-fg, #fff); }

@supports (color: color-mix(in lch, red, blue)) {
.btn.btn-accent:hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); }
}
.btn.btn-ghost { background: transparent; color: #222; color: var(--ink); }
.btn.btn-ghost:hover { background: #222; background: var(--ink); color: #f9f9f9; color: var(--page-bg); }
.btn-block { width: 100%; }

@property --row-flow { syntax: "*"; inherits: false; }
.wraprow { display: flex; flex-flow: row wrap; flex-flow: var(--row-flow, row wrap); align-items: stretch; gap: 1.25rem; gap: var(--row-gap, 1.25rem); margin: 0; }
.wraprow > * { min-width: 0; flex: 1 1 9rem; flex: 1 1 var(--row-item, 9rem); margin: 0; }
@property --row-flow-narrow { syntax: "*"; inherits: false; }
@container (max-width: 30rem) { .wraprow { --row-flow: var(--row-flow-narrow, column nowrap); } }

/* blocks/layer-bg.css */
#intro_stage > .layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.layer.layer-bg, .layer-sticky.layer-bg { z-index: -1; }
.layer-bg, .layer-sticky.layer-bg > * { pointer-events: none; }
.section:has(.layer-bg) { isolation: isolate; }

/* blocks/lead-time.css */

.lead-time {
    --lt-ink: var(--ink, #0a0a0a);
    --lt-muted: var(--muted, #6b6b6b);
    --lt-line: var(--line, #e3e3e3);
    --lt-paper: var(--paper, #fff);
    --lt-accent: var(--accent, #635bff);
    --lt-live: var(--live, #2f7d4b);
    --lt-warn: var(--warn, #a6521a);
    --lt-on: var(--lt-ink);
    --lt-hair: var(--lt-line);
    width: 100%;
    color: #222;
    color: var(--lt-on);
    padding-top: calc(var(--sp-4, calc(3 * var(--pe-vw))));
    padding-bottom: calc(var(--sp-4, calc(3 * var(--pe-vw))));
}
.lead-time.lt-align-center { text-align: center; }
.lead-time.lt-align-right { text-align: right; }

.lead-time.lt-tone-accent { background: var(--lt-accent); --lt-on: var(--accent-ink, var(--paper, #fff)); --lt-hair: color-mix(in srgb, var(--accent-ink, #fff) 34%, transparent); }
.lead-time.lt-tone-ink { background: #0d0f14; background: var(--invert-bg, var(--lt-ink)); --lt-on: var(--invert-fg, var(--lt-paper)); --lt-hair: color-mix(in srgb, var(--invert-fg, #fff) 26%, transparent); }
.lead-time.lt-tone-timber { background: rgb(241, 241, 241); background: color-mix(in srgb, #222 4%, #fafafa); background: var(--timber, var(--surface, #e6e2da)); }
.lead-time.lt-tone-page { background: transparent; }

.lead-time .lt-label {
    margin: 0 0 var(--sp-2, calc(1 * var(--pe-vw)));
    color: var(--lt-on); opacity: .72;
    font: 500 .78rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 var(--fs-label, .78rem)/1 var(--font-mono, ui-monospace, monospace);
    letter-spacing: .16em; text-transform: uppercase;
}
.lead-time .lt-title {
    margin: 0 0 var(--sp-4, calc(3 * var(--pe-vw))); max-width: 22ch;
    color: var(--lt-on);
    font: 400 2rem/1.06 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 var(--fs-h3, 2rem)/1.06 var(--font-display, Georgia, serif);
    letter-spacing: -.01em;
}

.lead-time .lt-tracks { --row-gap: var(--sp-5, calc(4.8 * var(--pe-vw))); align-items: stretch; }
.lead-time .lt-track {
    --row-item: 0;
    position: relative;
    padding-top: var(--sp-3, calc(1.8 * var(--pe-vw)));
    border-top: 1px solid var(--lt-hair);
}
.lead-time.lt-rule-none .lt-track { border-top: 0; padding-top: 0; }
.lead-time.lt-rule-full .lt-track { border-top: 1px solid var(--lt-hair); border-bottom: 1px solid var(--lt-hair); padding-bottom: var(--sp-3, calc(1.8 * var(--pe-vw))); }

.lead-time .lt-head { margin: 0 0 var(--sp-3, calc(1.8 * var(--pe-vw))); }
.lead-time .lt-name {
    margin: 0;
    color: var(--lt-on);
    font: 500 .78rem/1.2 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 var(--fs-label, .78rem)/1.2 var(--font-mono, ui-monospace, monospace);
    letter-spacing: .16em; text-transform: uppercase;
}
.lead-time .lt-kind {
    margin: .35em 0 0;
    color: var(--lt-on); opacity: .66;
    font: 400 1rem/1.4 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 var(--fs-body, 1rem)/1.4 var(--font-text, system-ui, sans-serif);
}

.lead-time .lt-date {
    margin: 0;
    color: var(--lt-on);
    font: 400 calc(2rem * 1) / 1.02 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 calc(var(--fs-h3, 2rem) * var(--lt-figure, 1)) / 1.02 var(--font-display, Georgia, serif);
    letter-spacing: -.015em; text-wrap: balance;
}
.lead-time.lt-figure-mono .lt-date { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-family: var(--font-mono, ui-monospace, monospace); letter-spacing: -.02em; }
.lead-time.lt-figure-large .lt-date { font-size: calc(3rem * 1); font-size: calc(var(--fs-h2, 3rem) * var(--lt-figure, 1)); }

.lead-time .lt-wait {
    position: relative;
    margin: var(--sp-2, calc(1 * var(--pe-vw))) 0 0; padding-top: var(--sp-2, calc(1 * var(--pe-vw)));
    border-top: 1px solid var(--lt-hair);
    color: var(--lt-on);
    font: 500 1.05rem/1.2 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 var(--fs-fig, 1.05rem)/1.2 var(--font-mono, ui-monospace, monospace);
    letter-spacing: -.01em;
}
.lead-time .lt-weeks { color: var(--lt-accent); }
.lead-time.lt-tone-accent .lt-weeks, .lead-time.lt-tone-ink .lt-weeks { color: var(--lt-on); }
.lead-time .lt-rel { opacity: .8; padding-left: .9em; }

.lead-time .lt-until {
    margin: var(--sp-2, calc(1 * var(--pe-vw))) 0 0;
    color: var(--lt-on); opacity: .62;
    font: 400 .78rem/1.4 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 400 var(--fs-label, .78rem)/1.4 var(--font-mono, ui-monospace, monospace);
    letter-spacing: .05em;
}
.lead-time .lt-until-val { padding-left: .5em; }
.lead-time .lt-note {
    margin: var(--sp-2, calc(1 * var(--pe-vw))) 0 0; max-width: 34ch;
    color: var(--lt-on); opacity: .66;
    font: 400 1rem/1.45 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 var(--fs-body, 1rem)/1.45 var(--font-text, system-ui, sans-serif);
}

.lead-time.lt-dots-on .lt-track { border-top-width: .18em; }
.lead-time.lt-dots-on .lt-track[data-lead-state="soon"] { border-top-color: var(--lt-live); }
.lead-time.lt-dots-on .lt-track[data-lead-state="open"] { border-top-color: var(--lt-accent); }
.lead-time.lt-dots-on .lt-track[data-lead-state="busy"] { border-top-color: var(--lt-warn); }
.lead-time.lt-dots-on .lt-track[data-lead-state] .lt-name { color: var(--lt-on); }
.lead-time.lt-dots-on.lt-tone-accent .lt-track[data-lead-state],
.lead-time.lt-dots-on.lt-tone-ink .lt-track[data-lead-state] { border-top-color: var(--lt-on); }
.lead-time .lt-track[data-lead-state="closed"] .lt-date { opacity: .45; }

.lead-time .lt-foot {
    margin: var(--sp-4, calc(3 * var(--pe-vw))) 0 0; max-width: 56ch;
    color: var(--lt-on); opacity: .66;
    font: 400 1rem/1.5 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 var(--fs-body, 1rem)/1.5 var(--font-text, system-ui, sans-serif);
}

/* blocks/lens-sentence.css */

.lens-sentence {
    --lns-ink: var(--ink, #111);
    --lns-accent: var(--accent, #e4572e);
    --lns-ground: var(--surface, #e6e2da);
    --lns-size: var(--text-xl, 4.6cqi);
    --lns-pic-w: 1.75em;
    --lns-pic-h: .78em;
    --lns-pic-radius: 99em;
    width: 100%; margin: 0;
    color: #222;
    color: var(--lns-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, 'Helvetica Neue', Arial, sans-serif);
    font-size: 4.6cqi;
    font-size: var(--lns-size); line-height: 1.02; letter-spacing: -.03em;
    text-wrap: balance;
}
.lens-sentence.lns-size-lead { --lns-size: var(--text-lg, 2.4cqi); line-height: 1.16; letter-spacing: -.015em; }
.lens-sentence.lns-size-huge { --lns-size: calc(var(--text-xl, 4.6cqi) * 1.45); line-height: .98; letter-spacing: -.035em; }
.lens-sentence.lns-shape-frame { --lns-pic-w: 1.3em; --lns-pic-h: .86em; --lns-pic-radius: .06em; }
.lens-sentence.lns-shape-round { --lns-pic-w: .9em; --lns-pic-h: .9em; }
.lens-sentence.lns-align-center { text-align: center; }
.lens-sentence.lns-align-right { text-align: right; }

.lens-sentence .lns-line { margin: 0; }
.lens-sentence .lns-part { display: inline-block; white-space: nowrap; }

.lens-sentence .lns-words { font: inherit; }
.lens-sentence .lns-voice-italic .lns-words {
    font-family: Georgia, 'Times New Roman', serif;
    font-family: var(--font-italic, Georgia, 'Times New Roman', serif); font-style: italic; font-weight: 500;
    font-size: 1.08em; letter-spacing: -.01em; font-stretch: 100%;
}
.lens-sentence .lns-voice-accent .lns-words { color: var(--lns-accent); }

.lens-sentence .lns-picture {
    display: inline-block; position: relative; top: .06em;
    width: var(--lns-pic-w); height: var(--lns-pic-h);
    margin: 0;
    overflow: hidden; vertical-align: baseline;
    border-radius: var(--lns-pic-radius);
    background: var(--lns-ground);
}
.lens-sentence .lns-picture img, .lens-sentence .lns-picture picture { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.lens-sentence .lns-picture.is-empty { display: none; }

.lens-sentence.lns-reveal-light .lns-part {
    animation: lns-light linear both;
    animation-timeline: view();
    animation-range: entry calc(20% + 0 * 4%) cover calc(30% + 0 * 4%);
    animation-range: entry calc(20% + var(--lns-i, 0) * 4%) cover calc(30% + var(--lns-i, 0) * 4%);
}
.lens-sentence.lns-reveal-light .lns-picture {
    animation: lns-open linear both;
    animation-timeline: view();
    animation-range: entry calc(20% + 0 * 4%) cover calc(34% + 0 * 4%);
    animation-range: entry calc(20% + var(--lns-i, 0) * 4%) cover calc(34% + var(--lns-i, 0) * 4%);
}
.lens-sentence.lns-reveal-light .lns-picture img { animation: lns-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
@keyframes lns-light { from { opacity: .14; transform: translateY(.18em); } to { opacity: 1; transform: none; } }
@keyframes lns-open { from { clip-path: inset(0 50% 0 50% round var(--lns-pic-radius)); } to { clip-path: inset(0 0 0 0 round var(--lns-pic-radius)); } }
@keyframes lns-settle { from { transform: scale(1.4); } to { transform: scale(1); } }

/* blocks/listing-facts.css */

:where(.listing-facts) {
    --lf-ink: var(--ink, #111);
    --lf-muted: var(--muted, #666);
    --lf-line: var(--line, #e3e3e3);
    --lf-accent: var(--accent, #17456B);
    width: 100%;
    color: #222;
    color: var(--lf-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif);
}
:where(.listing-facts .lf-eyebrow) {
    margin: 0 0 1.2em;
    color: var(--lf-muted);
    font-size: .78em; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3;
}
:where(.listing-facts .lf-rows) { margin: 0; border-top: 1px solid var(--lf-line); }
:where(.listing-facts.lf-div-none .lf-rows) { border-top: 0; }

:where(.listing-facts .lf-row) {
    position: relative;
    padding: .95em 0;
    border-bottom: 1px solid var(--lf-line);
    line-height: 1.35;
}
:where(.listing-facts.lf-div-none .lf-row) { border-bottom: 0; padding: .6em 0; }
:where(.listing-facts.lf-dense-compact .lf-row) { padding: .6em 0; }
:where(.listing-facts .lf-key) {
    display: inline-block; vertical-align: top;
    width: 42%;
    margin: 0; padding-right: 1em;
    color: var(--lf-muted);
    font-size: .78em; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; line-height: 1.7;
}
:where(.listing-facts .lf-cell) {
    display: inline-block; vertical-align: top;
    width: 58%;
    margin: 0;
    text-align: right;
}
:where(.listing-facts.lf-val-left .lf-cell) { text-align: left; }
:where(.listing-facts .lf-value) {
    display: block;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 1em; font-weight: 500;
    font-feature-settings: tabular-nums lining-nums;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -.01em;
}
:where(.listing-facts .lf-note) {
    display: block; margin-top: .35em;
    color: var(--lf-muted);
    font-size: .88em; line-height: 1.4;
}

:where(.listing-facts.lf-lead-first .lf-row:first-child) { padding: 1.1em 0 1.2em; }
:where(.listing-facts.lf-lead-first .lf-row:first-child .lf-value) { font-size: 1.7em; letter-spacing: -.02em; line-height: 1.05; }
:where(.listing-facts.lf-lead-first .lf-row:first-child .lf-key) { line-height: 2.2; }

:where(.listing-facts .lf-row:last-child .lf-value) { color: var(--lf-accent); }
:where(.listing-facts.lf-align-center) { text-align: center; }
:where(.listing-facts.lf-align-center .lf-key), :where(.listing-facts.lf-align-center .lf-cell) { text-align: center; width: 100%; }

@container (max-width: 15em) {
    :where(.listing-facts .lf-key), :where(.listing-facts .lf-cell) { display: block; width: 100%; text-align: left; }
    :where(.listing-facts .lf-cell) { margin-top: .3em; }
}

/* blocks/live-rail.css */
:where(.live-rail) {
    --lr-bg: var(--surface, #fff);
    --lr-ink: var(--ink, #111);
    --lr-muted: var(--muted, #6b6b6b);
    --lr-line: var(--line, rgba(0,0,0,.1));
    --lr-live: var(--live, var(--accent, #16A34A));
    --lr-warn: var(--warn, #D97706);
    --lr-font: max(.8em, min(calc(.82 * var(--pe-vw)), 1em));
    --lr-font: clamp(.8em, calc(.82 * var(--pe-vw)), 1em);
    position: fixed; z-index: 40;
    display: flex; flex-direction: column;
    max-height: 72vh; width: max(22em, min(calc(24 * var(--pe-vw)), 30em)); width: clamp(22em, calc(24 * var(--pe-vw)), 30em);
    right: calc(1.4 * var(--pe-vw)); bottom: calc(1.4 * var(--pe-vw));
    padding: 0; margin: 0;
    background: rgb(241, 241, 241);
    background: color-mix(in srgb, #222 4%, #fafafa);
    background: var(--lr-bg); color: #222; color: var(--lr-ink);
    border-radius: calc(1vh * 1.4);
    border-radius: calc(var(--radius, calc(.5 * var(--pe-vw))) * 1.4);
    box-shadow: 0 0 0 1px rgba(5, 5, 5, 0.14), 0 calc(1.2 * var(--pe-vw)) calc(3.6 * var(--pe-vw)) rgba(0,0,0,.14);
    box-shadow: 0 0 0 1px var(--lr-line), 0 calc(1.2 * var(--pe-vw)) calc(3.6 * var(--pe-vw)) rgba(0,0,0,.14);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif); font-size: var(--lr-font); line-height: 1.3;
    overflow: hidden;
}
:where(.live-rail-inline) { position: relative; right: auto; bottom: auto; width: 100%; max-height: none; }
:where(.live-rail-head) { padding: 1em 1.1em .8em; border-bottom: 1px solid var(--lr-line); }
:where(.live-rail-toggle) {
    display: flex; align-items: center; gap: .5em; width: 100%; margin: 0; padding: 0;
    background: none; border: 0; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
:where(.live-rail-dot) { width: .55em; height: .55em; border-radius: 50%; background: var(--lr-live); box-shadow: 0 0 0 .25em rgba(0, 22, 28, 0.18); }

@supports (color: color-mix(in lch, red, blue)) {
:where(.live-rail-dot) { box-shadow: 0 0 0 .25em color-mix(in srgb, var(--lr-live) 18%, transparent); }
}
:where(.live-rail-title) { flex: 1; }
:where(.live-rail-chev) { color: var(--lr-muted); transition: transform .3s cubic-bezier(.4, 0, .2, 1); transition: transform .3s var(--ease, ease); }
:where(.live-rail:not(.is-open) .live-rail-chev) { transform: rotate(180deg); }
:where(.live-rail-hint) { margin: .45em 0 0; color: var(--lr-muted); font-size: .88em; }
:where(.live-rail-list) { list-style: none; margin: 0; padding: .3em 0; overflow: auto; overscroll-behavior: contain; }
:where(.live-rail:not(.is-open) .live-rail-list, .live-rail:not(.is-open) .live-rail-published) { display: none; }
:where(.live-rail-row) { padding: .75em 1.1em; border-top: 1px solid var(--lr-line); }
:where(.live-rail-row:first-child) { border-top: 0; }
:where(.live-rail-row-top) { display: flex; align-items: center; gap: .5em; }
:where(.live-rail-no) { flex: none; width: 2em; color: var(--lr-muted); font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-family: var(--font-mono, monospace); font-size: .85em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
:where(.live-rail-input) {
    flex: 6 1 0;
    flex: var(--w, 6) 1 0; min-width: 0; margin: 0; padding: .4em .55em;
    background: rgba(1, 1, 1, 0.04); border: 1px solid transparent; border-radius: calc(1vh * .8); border-radius: calc(var(--radius, calc(.5 * var(--pe-vw))) * .8);
    color: inherit; font: inherit; font-weight: 500;
}

@supports (color: color-mix(in lch, red, blue)) {
:where(.live-rail-input) {
    background: color-mix(in srgb, var(--lr-ink) 4%, transparent);
}
}
:where(.live-rail-input-price) { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-family: var(--font-mono, monospace); text-align: right; }
:where(.live-rail-input:focus) { outline: none; border-color: var(--lr-live); background: var(--lr-bg); }
:where(.live-rail-order) { display: flex; flex-direction: column; gap: .1em; flex: none; }
:where(.live-rail-move) { padding: 0 .35em; background: none; border: 0; color: var(--lr-muted); font-size: .7em; line-height: 1.1; cursor: pointer; }
:where(.live-rail-move:hover) { color: var(--lr-ink); }
:where(.live-rail-seg) { display: flex; gap: .3em; margin-top: .55em; }
:where(.live-rail-state) {
    flex: 1; padding: .42em .5em; margin: 0;
    background: none; border: 1px solid var(--lr-line); border-radius: 99em;
    color: var(--lr-muted); font: inherit; font-size: .84em; font-weight: 500; letter-spacing: .01em; cursor: pointer;
    transition: background .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1), border-color .2s cubic-bezier(.4, 0, .2, 1);
    transition: background .2s var(--ease, ease), color .2s var(--ease, ease), border-color .2s var(--ease, ease);
}
:where(.live-rail-state:hover) { color: var(--lr-ink); border-color: var(--lr-ink); }
:where(.live-rail-state[aria-pressed="true"]) { background: var(--lr-ink); color: var(--lr-bg); border-color: var(--lr-ink); }
:where(.live-rail-state[aria-pressed="true"][data-state="pouring"]) { background: var(--lr-live); border-color: var(--lr-live); color: #fff; }
:where(.live-rail-state[aria-pressed="true"][data-state="low"]) { background: var(--lr-warn); border-color: var(--lr-warn); color: #fff; }
:where(.live-rail-published) {
    margin: 0; padding: .7em 1.1em; border-top: 1px solid var(--lr-line);
    color: var(--lr-live); font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-family: var(--font-mono, monospace); font-size: .8em; font-weight: 500; letter-spacing: .04em;
    min-height: 2.4em; opacity: 0; transition: opacity .25s cubic-bezier(.4, 0, .2, 1); transition: opacity .25s var(--ease, ease);
}
:where(.live-rail-published.is-on) { opacity: 1; }
:where(.live-rail-published:empty)::before { content: "Nothing to save · everything is live"; color: var(--lr-muted); }
@media (max-width: 900px) {
    :where(.live-rail) { left: 0; right: 0; bottom: 0; width: auto; max-height: 52vh; border-radius: calc(1vh * 1.2) calc(1vh * 1.2) 0 0; border-radius: calc(var(--radius, calc(2 * var(--pe-vw))) * 1.2) calc(var(--radius, calc(2 * var(--pe-vw))) * 1.2) 0 0; --lr-font: max(.9em, min(calc(3.6 * var(--pe-vw)), 1.1em)); --lr-font: clamp(.9em, calc(3.6 * var(--pe-vw)), 1.1em); }
}
:where([data-entry].is-changed) { animation: live-rail-changed 1.2s cubic-bezier(.4, 0, .2, 1); animation: live-rail-changed 1.2s var(--ease, ease-out); }
@keyframes live-rail-changed { 0% { background: rgba(4, 26, 12, 0.16); background: color-mix(in srgb, #16A34A 16%, transparent); }

@supports (color: color-mix(in lch, red, blue)) {
0% { background: color-mix(in srgb, var(--live, #16A34A) 16%, transparent); }
} 100% { background: transparent; } }

/* blocks/live-stamp.css */
:where(.live-dot, .nl-dot) {
    display: inline-block; width: .55em; height: .55em; border-radius: 50%; vertical-align: .08em; margin-right: .5em;
    background: #007b9a;
    background: var(--live, var(--accent, #16A34A));
    box-shadow: 0 0 0 0 rgba(0, 68, 85, 0.55);
    box-shadow: 0 0 0 0 color-mix(in srgb, #007b9a 55%, transparent);
    animation: live-pulse 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
    animation: live-pulse 2.4s var(--ease, ease-out) infinite;
}

@supports (color: color-mix(in lch, red, blue)) {
:where(.live-dot, .nl-dot) {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--live, var(--accent, #16A34A)) 55%, transparent);
}
}
@keyframes live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(0, 68, 85, 0.55); box-shadow: 0 0 0 0 color-mix(in srgb, #007b9a 55%, transparent); }

@supports (color: color-mix(in lch, red, blue)) {
0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live, var(--accent, #16A34A)) 55%, transparent); }
}
    70%  { box-shadow: 0 0 0 .6em rgba(0, 0, 0, 0); box-shadow: 0 0 0 .6em color-mix(in srgb, #007b9a 0%, transparent); }

@supports (color: color-mix(in lch, red, blue)) {
70%  { box-shadow: 0 0 0 .6em color-mix(in srgb, var(--live, var(--accent, #16A34A)) 0%, transparent); }
}
    100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 0 color-mix(in srgb, #007b9a 0%, transparent); }

@supports (color: color-mix(in lch, red, blue)) {
100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live, var(--accent, #16A34A)) 0%, transparent); }
}
}
:where(.respect-reduced-motion .live-dot, .respect-reduced-motion .nl-dot) { animation: none; }
:where([data-stamp]) { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
:where(.is-fresh [data-stamp]) { color: #007b9a; color: var(--live, var(--accent, #16A34A)); }

/* blocks/login-card.css */

.login-card {
    --lc-ink: var(--ink, #0a0a0a);
    --lc-muted: var(--muted, #6b6b6b);
    --lc-line: var(--line, #e3e3e3);
    --lc-paper: var(--paper, #fff);
    --lc-accent: var(--accent, #635bff);
    --lc-surface: color-mix(in srgb, var(--lc-ink) 3.5%, var(--lc-paper));
    --lc-cellbg: color-mix(in srgb, var(--lc-ink) 7%, var(--lc-paper));
    --lc-cell: 2.55em;
    --lc-pad: 1.5rem;
    --lc-rail: color-mix(in srgb, var(--lc-accent) 85%, var(--lc-ink));
    width: min(100%, calc(27 * 1rem));
    width: min(100%, calc(var(--lc-width, 27) * 1rem));
    margin-left: auto;
    margin-right: auto;
    color: #222;
    color: var(--lc-ink);
    background:
        linear-gradient(180deg, #fafafa, rgb(246, 246, 246));
    background:
        linear-gradient(180deg, #fafafa, color-mix(in srgb, #222 2%, #fafafa));
    border: 1px solid rgba(5, 5, 5, 0.14);
    border: 1px solid var(--lc-line);
    border-top: .18rem solid rgb(5, 110, 136);
    border-top: .18rem solid color-mix(in srgb, #007b9a 85%, #222);
    border-top: .18rem solid var(--lc-rail);
    border-radius: calc(1.1 * 1rem);
    border-radius: calc(var(--lc-radius, 1.1) * 1rem);
    overflow: hidden;
}

@supports (color: color-mix(in lch, red, blue)) {
.login-card {
    background:
        linear-gradient(180deg, var(--lc-paper), color-mix(in srgb, var(--lc-ink) 2%, var(--lc-paper)));
}
}

.login-card .lc-top {
    padding: .78rem var(--lc-pad);
    background: color-mix(in srgb, var(--lc-accent) 5%, var(--lc-surface));
    border-bottom: 1px solid var(--lc-line);
    color: color-mix(in srgb, var(--lc-muted) 78%, var(--lc-ink));
    font: 600 .72rem/1.2 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 .72rem/1.2 var(--font-mono, var(--font-display, ui-monospace, monospace));
    letter-spacing: .15em;
    text-transform: uppercase;
}

.login-card .lc-brand {
    --row-flow: row nowrap;
    --row-item: auto;
    --row-gap: .68rem;
    align-items: center;
    padding: 1.35rem var(--lc-pad) .15rem;
}
.login-card .lc-ic {
    --lc-chip: 2.1rem;
    display: inline-block;
    width: 2.1rem;
    width: var(--lc-chip);
    height: 2.1rem;
    height: var(--lc-chip);
    line-height: 2.1rem;
    line-height: var(--lc-chip);
    text-align: center;
    flex: none;
    border-radius: calc(2.1rem * .3);
    border-radius: calc(var(--lc-chip) * .3);
    color: var(--lc-accent);
    background: rgba(0, 16, 20, 0.13);
    box-shadow:
        inset 0 0 0 1px rgba(0, 27, 34, 0.22),
        0 .35rem .9rem -.4rem rgba(0, 68, 85, 0.55);
    font-size: 1.02rem;
}

@supports (color: color-mix(in lch, red, blue)) {
.login-card .lc-ic {
    background: color-mix(in srgb, var(--lc-accent) 13%, transparent);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--lc-accent) 22%, transparent),
        0 .35rem .9rem -.4rem color-mix(in srgb, var(--lc-accent) 55%, transparent);
}
}
.login-card .lc-brandname {
    color: var(--lc-ink);
    font: 640 1.06rem/1.15 'Open Sans', Arial, Helvetica, sans-serif;
    font: 640 1.06rem/1.15 var(--font-display, system-ui, sans-serif);
    letter-spacing: -.012em;
}

.login-card .lc-title {
    padding: .72rem var(--lc-pad) .08rem;
    color: var(--lc-ink);
    font: 640 1.34rem/1.12 'Open Sans', Arial, Helvetica, sans-serif;
    font: 640 1.34rem/1.12 var(--font-display, system-ui, sans-serif);
    letter-spacing: -.022em;
    text-wrap: balance;
}
.login-card .lc-sub {
    padding: .38rem var(--lc-pad) 0;
    max-width: 30rem;
    color: color-mix(in srgb, var(--lc-muted) 92%, transparent);
    font: 400 .9rem/1.5 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 .9rem/1.5 var(--font-text, var(--font-display, system-ui, sans-serif));
}

.login-card .lc-code {
    margin: 1.25rem var(--lc-pad);
    width: calc(6 * var(--lc-cell));
    width: calc(var(--lc-len, 6) * var(--lc-cell));
    max-width: calc(100% - var(--lc-pad) * 2);
    padding: .6em calc((var(--lc-cell) - 1ch) / 2);
    box-sizing: border-box;
    color: var(--lc-ink);
    font: 650 1.4rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 650 1.4rem/1 var(--font-mono, ui-monospace, monospace);
    letter-spacing: calc(var(--lc-cell) - 1ch);
    white-space: nowrap;
    overflow: hidden;
    border-radius: calc(1.1 * .5rem);
    border-radius: calc(var(--lc-radius, 1.1) * .5rem);
    background:
        repeating-linear-gradient(90deg,
            transparent 0,transparent .36em,
            var(--lc-accent) .36em calc(var(--lc-cell) - .36em),
            transparent calc(var(--lc-cell) - .36em) var(--lc-cell)) 0 100% / 100% .12em repeat-x,
        repeating-linear-gradient(90deg,
            transparent 0,transparent .2em,
            var(--lc-cellbg) .2em calc(var(--lc-cell) - .2em),
            transparent calc(var(--lc-cell) - .2em) var(--lc-cell));
    box-shadow:
        inset 0 .06em .18em rgba(3, 3, 3, 0.08),
        inset 0 0 0 1px var(--lc-line);
}

@supports (background: repeating-linear-gradient(red 0%, red 0% 1%, red 2%)) {
.login-card .lc-code {
    background:
        repeating-linear-gradient(90deg,
            transparent 0 .36em,
            var(--lc-accent) .36em calc(var(--lc-cell) - .36em),
            transparent calc(var(--lc-cell) - .36em) var(--lc-cell)) 0 100% / 100% .12em repeat-x,
        repeating-linear-gradient(90deg,
            transparent 0 .2em,
            var(--lc-cellbg) .2em calc(var(--lc-cell) - .2em),
            transparent calc(var(--lc-cell) - .2em) var(--lc-cell));
}
}

@supports (color: color-mix(in lch, red, blue)) {
.login-card .lc-code {
    box-shadow:
        inset 0 .06em .18em color-mix(in srgb, var(--lc-ink) 8%, transparent),
        inset 0 0 0 1px var(--lc-line);
}
}

.login-card .lc-btn {
    display: block;
    margin: .1rem var(--lc-pad) 0;
    padding: .82rem 1rem;
    text-align: center;
    -webkit-text-decoration: none;
    text-decoration: none;
    color: #fff;
    color: var(--lc-on-accent, #fff);
    background: linear-gradient(180deg,
        #1f8ba6,
        var(--lc-accent));
    border: 0;
    border-radius: calc(1.1 * .62rem);
    border-radius: calc(var(--lc-radius, 1.1) * .62rem);
    font: 640 .96rem/1.1 'Open Sans', Arial, Helvetica, sans-serif;
    font: 640 .96rem/1.1 var(--font-display, system-ui, sans-serif);
    letter-spacing: -.005em;
    box-shadow:
        inset 0 1px 0 rgba(87, 87, 87, 0.34),
        0 .55rem 1.05rem -.45rem rgba(0, 76, 95, 0.62);
    transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}

@supports (color: color-mix(in lch, red, blue)) {
.login-card .lc-btn {
    background: linear-gradient(180deg,
        color-mix(in srgb, #fff 12%, var(--lc-accent)),
        var(--lc-accent));
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--lc-on-accent, #fff) 12%, var(--lc-accent)),
        var(--lc-accent));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 34%, transparent),
        0 .55rem 1.05rem -.45rem color-mix(in srgb, var(--lc-accent) 62%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--lc-on-accent, #fff) 34%, transparent),
        0 .55rem 1.05rem -.45rem color-mix(in srgb, var(--lc-accent) 62%, transparent);
}
}
.login-card .lc-btn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(102, 102, 102, 0.4),
        0 .8rem 1.4rem -.5rem rgba(0, 81, 102, 0.66);
}

@supports (color: color-mix(in lch, red, blue)) {
.login-card .lc-btn:hover {
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent),
        0 .8rem 1.4rem -.5rem color-mix(in srgb, var(--lc-accent) 66%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--lc-on-accent, #fff) 40%, transparent),
        0 .8rem 1.4rem -.5rem color-mix(in srgb, var(--lc-accent) 66%, transparent);
}
}
.login-card .lc-btn:active { transform: translateY(0); filter: brightness(.99); }

.login-card .lc-meta {
    padding: .95rem var(--lc-pad) 1.4rem;
    color: color-mix(in srgb, var(--lc-muted) 80%, transparent);
    font: 400 .79rem/1.35 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 .79rem/1.35 var(--font-text, var(--font-display, system-ui, sans-serif));
    letter-spacing: .005em;
}

.login-card.lc-tone-tint {
    background: linear-gradient(180deg, var(--lc-surface), color-mix(in srgb, var(--lc-ink) 5%, var(--lc-paper)));
}
.login-card.lc-tone-dark {
    --lc-ink: var(--paper, #fff);
    --lc-paper: var(--ink, #0a0a0a);
    --lc-muted: color-mix(in srgb, var(--paper, #fff) 62%, transparent);
    --lc-line: color-mix(in srgb, var(--paper, #fff) 15%, transparent);
    --lc-surface: color-mix(in srgb, var(--paper, #fff) 6%, var(--ink, #0a0a0a));
    --lc-cellbg: color-mix(in srgb, var(--paper, #fff) 9%, var(--ink, #0a0a0a));
    --lc-rail: color-mix(in srgb, var(--lc-accent) 78%, var(--paper, #fff));
    background: linear-gradient(180deg, #222, rgb(40, 40, 40));
    background: linear-gradient(180deg, #222, color-mix(in srgb, #fafafa 3%, #222));
}

@supports (color: color-mix(in lch, red, blue)) {
.login-card.lc-tone-dark {
    background: linear-gradient(180deg, var(--lc-paper), color-mix(in srgb, var(--paper, #fff) 3%, var(--lc-paper)));
}
}

.login-card.lc-shadow-none { box-shadow: none; }
.login-card.lc-shadow-soft { box-shadow: 0 1.125rem 2.5rem -1.375rem rgba(8, 8, 8, 0.24); }

@supports (color: color-mix(in lch, red, blue)) {
.login-card.lc-shadow-soft { box-shadow: 0 1.125rem 2.5rem -1.375rem color-mix(in srgb, var(--lc-ink) 24%, transparent); }
}
.login-card.lc-shadow-deep {
    box-shadow: 0 2.5rem 5rem -1.5rem rgba(12, 12, 12, 0.36),
                0 .75rem 1.75rem -1.125rem rgba(7, 7, 7, 0.22);
}

@supports (color: color-mix(in lch, red, blue)) {
.login-card.lc-shadow-deep {
    box-shadow: 0 2.5rem 5rem -1.5rem color-mix(in srgb, var(--lc-ink) 36%, transparent),
                0 .75rem 1.75rem -1.125rem color-mix(in srgb, var(--lc-ink) 22%, transparent);
}
}

.login-card.lc-ic-small .lc-ic { --lc-chip: 1.8rem; font-size: .88rem; }
.login-card.lc-ic-large .lc-ic { --lc-chip: 2.5rem; font-size: 1.25rem; }

.login-card.lc-align-center .lc-top,
.login-card.lc-align-center .lc-title,
.login-card.lc-align-center .lc-sub,
.login-card.lc-align-center .lc-meta { text-align: center; }
.login-card.lc-align-center .lc-sub { margin-left: auto; margin-right: auto; }
.login-card.lc-align-center .lc-brand { justify-content: center; }
.login-card.lc-align-center .lc-code { margin-left: auto; margin-right: auto; }

@container (max-width: 22rem) {
    .login-card { --lc-cell: 2.2em; --lc-pad: 1.15rem; }
}

/* blocks/logo-wall.css */

.logo-grid {
    --lg-cell:   var(--card-bg, var(--page-bg, #fff));
    --lg-ink:    var(--ink, #11131a);
    --lg-line:   var(--line, color-mix(in srgb, var(--ink, #11131a) 12%, transparent));
    --lg-muted:  var(--muted, #6b7280);
    --lg-accent: var(--accent, #4f7cff);
    width: 100%;
}
.logo-grid[data-scheme="dark"] {
    --lg-cell:   var(--card-bg-dark, var(--page-bg, #0f1117));
    --lg-ink:    var(--ink-dark, #e8eaf0);
    --lg-line:   var(--line-dark, rgba(232, 234, 240, 0.14));
    --lg-muted:  var(--muted-dark, #8b93a7);
}

@supports (color: color-mix(in lch, red, blue)) {
.logo-grid[data-scheme="dark"] {
    --lg-line:   var(--line-dark, color-mix(in srgb, #e8eaf0 14%, transparent));
}
}
.lg-eyebrow { margin: 0 0 1.2rem; font: 600 .72rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 600 .72rem/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .18em; text-transform: uppercase; color: var(--lg-muted); }
.lg-align-center { text-align: center; }
.lg-align-center .lg-eyebrow { text-align: center; }

.lg-grid {
    display: grid; grid-gap: 1px; gap: 1px;
    grid-template-columns: repeat(5, 1fr);
    background: var(--lg-line);
    border: 1px solid var(--lg-line);
    border-radius: 1vh;
    border-radius: var(--radius, .875rem); overflow: hidden;
}
.lg-cols-4 .lg-grid { grid-template-columns: repeat(4, 1fr); }
.lg-cols-5 .lg-grid { grid-template-columns: repeat(5, 1fr); }
.lg-cols-6 .lg-grid { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 768px) { .lg-cols-4 .lg-grid, .lg-cols-5 .lg-grid, .lg-cols-6 .lg-grid { grid-template-columns: repeat(2, 1fr); } }

.lg-cell {
    display: flex; align-items: center; justify-content: center; -webkit-text-decoration: none; text-decoration: none;
    padding: max(1.1rem, min(calc(3 * var(--pe-vw)), 2.2rem));
    padding: clamp(1.1rem, calc(3 * var(--pe-vw)), 2.2rem);
    background: var(--lg-cell);
    transition: background .25s;
}
.lg-cell:hover { background: #eaf1f3; }

@supports (color: color-mix(in lch, red, blue)) {
.lg-cell:hover { background: color-mix(in srgb, var(--lg-accent) 6%, var(--lg-cell)); }
}
.lg-mark { font: 600 max(1rem, min(calc(2.2 * var(--pe-vw)), 1.2rem))/1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 max(1rem, min(calc(2.2 * var(--pe-vw)), 1.2rem))/1 var(--font-display, system-ui, sans-serif); font: 600 max(1rem, min(calc(2.2 * var(--pe-vw)), 1.2rem))/1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 clamp(1rem, calc(2.2 * var(--pe-vw)), 1.2rem)/1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 clamp(1rem, calc(2.2 * var(--pe-vw)), 1.2rem)/1 var(--font-display, system-ui, sans-serif); letter-spacing: -.01em; color: var(--lg-muted); transition: color .25s; }
.lg-cell:hover .lg-mark { color: var(--lg-accent); }
.lg-img { max-width: 100%; max-height: 2rem; -o-object-fit: contain; object-fit: contain; filter: grayscale(1); opacity: .65; transition: filter .25s, opacity .25s; }
.lg-cell:hover .lg-img { filter: grayscale(0); opacity: 1; }

/* blocks/logo.css */

.logo {
    --logo-size: 2rem;
    --logo-mark-size: .58em;
    display: inline-flex; flex-direction: column; gap: .42em;
    color: #222;
    color: var(--ink, #0a2540); -webkit-text-decoration: none; text-decoration: none; line-height: 1;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--logo-font, var(--font-display, system-ui));
}
a.logo { cursor: pointer; }
.logo-center { align-items: center; text-align: center; }
.logo-left { align-items: flex-start; text-align: left; }

.logo-lockup { display: inline-flex; align-items: baseline; gap: .42em; }
.logo-mark-before .logo-lockup { flex-direction: row; }
.logo-mark-after .logo-lockup { flex-direction: row-reverse; }

.logo-word {
    font-size: var(--logo-size); font-weight: 700; letter-spacing: -.02em;
    line-height: .92; white-space: nowrap;
}

.logo-sm { --logo-size: max(.95rem, min(calc(2.6 * var(--pe-vw)), 1.15rem)); --logo-size: clamp(.95rem, calc(2.6 * var(--pe-vw)), 1.15rem); letter-spacing: 0; }
.logo-md { --logo-size: max(1.3rem, min(calc(3.4 * var(--pe-vw)), 1.7rem)); --logo-size: clamp(1.3rem, calc(3.4 * var(--pe-vw)), 1.7rem); }
.logo-lg { --logo-size: max(1.9rem, min(calc(5 * var(--pe-vw)), 2.6rem)); --logo-size: clamp(1.9rem, calc(5 * var(--pe-vw)), 2.6rem); }
.logo-xl { --logo-size: max(2.6rem, min(calc(8 * var(--pe-vw)), 4.4rem)); --logo-size: clamp(2.6rem, calc(8 * var(--pe-vw)), 4.4rem); }

.logo-mark { position: relative; flex: none; align-self: center;
    width: var(--logo-mark-size); height: var(--logo-mark-size); }
.logo-mark-dot { border-radius: 50%; background: #007b9a; background: var(--accent, #635bff); }
.logo-mark-ring { border-radius: 50%;
    border: max(.125rem, .14em) solid #007b9a;
    border: max(.125rem, .14em) solid var(--accent, #635bff); background: transparent; }
.logo-mark-asterisk { background: none; color: #007b9a; color: var(--accent, #635bff);
    width: calc(var(--logo-mark-size) * 1.15); height: calc(var(--logo-mark-size) * 1.15); }
.logo-mark-asterisk::before { content: "\2217"; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    display: grid; align-items: center; justify-items: center; place-items: center; font: 900 1.55em/1 'Open Sans', Arial, Helvetica, sans-serif; font: 900 1.55em/1 var(--logo-font, var(--font-display, system-ui)); }

.logo-tagline {
    font-size: max(.62rem, calc(var(--logo-size) * .26));
    font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
    color: #626262;
    color: var(--muted, #425466);
}

a.logo .logo-mark { transition: transform .25s cubic-bezier(.22,1,.36,1); }
a.logo:hover .logo-mark-dot,
a.logo:hover .logo-mark-ring { transform: scale(1.18); }
a.logo:hover .logo-mark-asterisk { transform: rotate(90deg); }

/* blocks/look-card.css */
/* look: card (sites/_core/looks/card.json). Only what the look's knobs expose: the card box (its colour, edge, corners
   and lift, restated by each Style), the frame round a picture, and what the On hover choice does. Every piece is plotted
   on the card's own lattice and carries its own look as data (props.style: font, size in em of the card's type, colour,
   fill, padding, corners), so the pane shows and edits it; no rule here gives a piece its type or surface by its role.

   Knobs arrive as --card-surface / --card-ink / --card-accent / --card-edge / --card-mat / --card-radius / --card-lift /
   --card-type / --card-title-size, plus three BEM modifiers: the Style (look-card--featured …), the hover
   (look-card--flip …) and what the type follows (look-card--page). An empty knob falls back to the Style's own value
   (--card-lift-kind, --card-mat-kind), then the host theme's token.

   The type grows with the card: the card's font-size is a share of its own width (cqi resolves against the plot the card
   sits in) and every piece sizes in em from it. The colours a piece's style reads, which each Style restates:
   --card-ink-color, --card-muted-color, --card-accent-color, --card-on-accent-color, --card-surface-color,
   --card-rule-color, --card-shadow-ink, --card-corner; a filled piece (a badge) --card-fill / --card-on-fill; text on an
   ink-filled piece (an add button) --card-on-ink; a button --card-button-fill / -ink / -edge / -hover-edge.

   Pieces marked __shown-on-hover / __hidden-on-hover trade places when the card is pointed at, focused or tapped (the
   cardGrid behaviour adds .is-revealed on touch), as the On hover choice says (turn over, swap in). A piece's own hover
   and pressed looks are its state styles (style[":hover"], ["@hover"] …). A rule marked REQUEST is what a piece's style
   cannot say yet; it keys on the piece's class until the primitive can. */

.look-card {
    --card-accent-color: var(--card-accent, var(--accent, #3b5bdb));
    --card-on-accent-color: var(--on-accent, var(--accent-ink, #fff));
    --card-surface-color: var(--card-surface, var(--card, var(--paper, #fff)));
    --card-ink-color: var(--card-ink, var(--ink, #16181d));
    --card-muted-color: color-mix(in oklab, var(--card-ink-color) var(--muted-share, 70%), var(--card-surface-color));
    --card-line-color: var(--card-edge, color-mix(in oklab, var(--card-ink-color) 11%, transparent));
    --card-rule-color: color-mix(in oklab, var(--card-ink-color) 13%, transparent);
    --card-shadow-ink: var(--ink, #16181d);
    --card-corner: calc(var(--card-radius, 1) * var(--radius, .75em));
    --card-fill: var(--card-accent-color); --card-on-fill: var(--card-on-accent-color);
    --card-on-ink: var(--card-surface, var(--paper, #fff));
    --card-button-fill: transparent; --card-button-ink: var(--card-ink-color);
    --card-button-edge: color-mix(in oklab, var(--card-ink-color) 22%, transparent); --card-button-hover-edge: var(--card-ink-color);
    /* each card states its style's defaults, so a card inside a card (the flip's faces) never inherits the outer one's */
    --card-lift-kind: 1; --card-mat-kind: .42; --card-hover-lift: 1;
    --card-mat-width: calc(var(--card-mat, var(--card-mat-kind)) * 1em);
    --card-depth: var(--card-lift, var(--card-lift-kind));
    --card-ease: var(--ease-out, cubic-bezier(.2, .7, .2, 1));
    --card-rest-shadow:
        0 calc(var(--card-depth) * .05em) calc(var(--card-depth) * .16em) color-mix(in oklab, var(--card-shadow-ink) calc(var(--card-depth) * 5%), transparent),
        0 calc(var(--card-depth) * .6em) calc(var(--card-depth) * 1.6em) calc(var(--card-depth) * -.5em) color-mix(in oklab, var(--card-shadow-ink) calc(var(--card-depth) * 16%), transparent);
    --card-hover-shadow:
        0 calc(var(--card-depth) * .08em) calc(var(--card-depth) * .24em) color-mix(in oklab, var(--card-shadow-ink) calc(var(--card-depth) * 6%), transparent),
        0 calc(var(--card-depth) * 1.3em) calc(var(--card-depth) * 2.6em) calc(var(--card-depth) * -.9em) color-mix(in oklab, var(--card-shadow-ink) calc(var(--card-depth) * 24%), transparent);

    --card-ring-shadow: 0 0 0 1px var(--card-line-color);

    /* floored here, not by the theme's floor sheet: its CSS parser drops a calc() that holds a container unit */
    font-size: max(calc(1 * 4.6cqi), min(var(--type-min, calc(0 * var(--pe-vw))), 12cqi));
    font-size: max(calc(var(--card-type, 1) * 4.6cqi), min(var(--type-min, calc(0 * var(--pe-vw))), 12cqi));
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif);
    line-height: 1.45;
    color: #222;
    color: var(--card-ink-color);
    background: #fafafa;
    background: var(--card-surface-color);
    border-radius: calc(1 * 1vh);
    border-radius: var(--card-corner);
    box-shadow: 0 0 0 1px rgba(34, 34, 34, 0.11), 0 calc(1 * .05em) calc(1 * .16em) rgba(34, 34, 34, 0.05),
        0 calc(1 * .6em) calc(1 * 1.6em) calc(1 * -.5em) rgba(34, 34, 34, 0.16);
    box-shadow: 0 0 0 1px color-mix(in oklab, #222 11%, transparent), 0 calc(1 * .05em) calc(1 * .16em) color-mix(in oklab, #222 calc(1 * 5%), transparent),
        0 calc(1 * .6em) calc(1 * 1.6em) calc(1 * -.5em) color-mix(in oklab, #222 calc(1 * 16%), transparent);
    box-shadow: var(--card-ring-shadow), var(--card-rest-shadow);
    overflow: hidden;
    isolation: isolate;
    transition: translate .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s cubic-bezier(.2, .7, .2, 1), background-color .3s ease;
    transition: translate .5s var(--card-ease), box-shadow .5s var(--card-ease), background-color .3s ease;
}
/* a card is read: its type keeps the reading floor of a narrow tablet and a phone, in its own lattice too (a box in a box
   turns the floor off, render.php's .plotgrid > .plot > .plotgrid, so this rule outranks it). The floor lifts the card's
   own size, so its pieces (sized in em of it) keep their steps */
.look-card, .plotgrid > .plot > .look-card.plotgrid { --type-min: var(--type-floor, calc(0 * var(--pe-vw))); --type-min-in-box: var(--type-floor, calc(0 * var(--pe-vw))); }
.look-card:where(:hover, :focus-within, .is-revealed) {
    translate: 0 calc(var(--card-hover-lift) * -.28em);
    box-shadow: var(--card-ring-shadow), var(--card-hover-shadow);
}

/* the type follows the site's own scale (a wide panel whose pieces flow): the page's body step */
.look-card--page { font-size: calc(1 * 1.125rem); font-size: calc(var(--card-type, 1) * var(--text-md, var(--fs-body, 1em))); }

/* ── Styles: each one restates the ring, the two shadows and the colours its pieces read ─────────────────── */
.look-card--featured { --card-lift-kind: 2; --card-ring-shadow: 0 0 0 1px var(--card-line-color), inset 0 .3em 0 var(--card-accent-color); }
.look-card--ring {
    --card-surface-color: var(--card-surface, color-mix(in oklab, var(--card-accent-color) 7%, var(--card, var(--paper, #fff))));
    --card-ring-shadow: 0 0 0 .12em var(--card-edge, var(--card-accent-color));
    --card-rest-shadow: 0 calc(var(--card-depth) * 1em) calc(var(--card-depth) * 2.6em) calc(var(--card-depth) * -1em) color-mix(in oklab, var(--card-accent-color) 45%, transparent);
    --card-hover-shadow: 0 calc(var(--card-depth) * 1.4em) calc(var(--card-depth) * 3em) calc(var(--card-depth) * -1em) color-mix(in oklab, var(--card-accent-color) 55%, transparent);
}
.look-card--flooded {
    --card-surface-color: var(--card-surface, var(--card-accent-color));
    --card-ink-color: var(--card-ink, var(--card-on-accent-color));
    --card-muted-color: color-mix(in oklab, var(--card-ink-color) 84%, var(--card-surface-color));
    --card-rule-color: color-mix(in oklab, var(--card-ink-color) 28%, transparent);
    --card-ring-shadow: 0 0 0 1px var(--card-edge, rgba(0,0,0,0));
    --card-ring-shadow: 0 0 0 1px var(--card-edge, #0000);
    /* on the accent, a filled piece turns to the text colour, and text on an ink piece to the theme's ink */
    --card-fill: var(--card-ink-color); --card-on-fill: var(--card-surface-color); --card-on-ink: var(--ink, #16181d);
}
/* the highlighted, ringed and filled Styles fill their buttons */
.look-card.look-card--featured, .look-card.look-card--ring, .look-card.look-card--flooded {
    --card-button-fill: var(--card-fill); --card-button-ink: var(--card-on-fill);
    --card-button-edge: var(--card-fill); --card-button-hover-edge: var(--card-fill);
}
.look-card:is(.look-card--featured, .look-card--ring, .look-card--flooded) {
    --card-button-fill: var(--card-fill); --card-button-ink: var(--card-on-fill);
    --card-button-edge: var(--card-fill); --card-button-hover-edge: var(--card-fill);
}
.look-card--outline {
    --card-surface-color: var(--card-surface, transparent);
    --card-ring-shadow: 0 0 0 1px var(--card-edge, var(--card-rule-color));
    --card-lift-kind: 0;
}
.look-card--outline:where(:hover, :focus-within, .is-revealed) { --card-ring-shadow: 0 0 0 1px var(--card-ink-color); }
.look-card--tinted {
    --card-surface-color: var(--card-surface, var(--surface, color-mix(in oklab, var(--card-ink-color) 5%, var(--paper, #fff))));
    --card-lift-kind: 0;
}
.look-card--tinted:where(:hover, :focus-within, .is-revealed) { --card-ring-shadow: 0 0 0 1px var(--card-accent-color); }
.look-card--bare {
    --card-surface-color: var(--card-surface, transparent); --card-mat-kind: 0; --card-lift-kind: 0;
    --card-ring-shadow: 0 0 0 1px var(--card-edge, rgba(0,0,0,0));
    --card-ring-shadow: 0 0 0 1px var(--card-edge, #0000);
    overflow: visible;
}

/* ── Picture frame: a mat of the card's own colour round the picture, its corner concentric with the card's ─── */
.look-card .imagesingle {
    border: var(--card-mat-width) solid var(--card-surface-color);
    border-radius: var(--card-corner);
    background: color-mix(in oklab, var(--card-ink-color) 6%, var(--card-surface-color));
}
.look-card .imagesingle img { transition: scale .9s var(--card-ease), rotate 1.1s var(--card-ease), opacity .45s ease, filter .6s ease; }
.look-card:where(:hover, :focus-within) .imagesingle img { scale: 1.035; }

/* ── On hover: what the pointer does to the card and to the pieces marked for it ───────────────────────── */
.look-card .look-card__shown-on-hover { opacity: 0; transition: opacity .45s ease, translate .6s var(--card-ease), rotate .8s var(--card-ease), scale .8s var(--card-ease), clip-path .75s cubic-bezier(.65, 0, .25, 1); }
.look-card .look-card__hidden-on-hover { transition: opacity .45s ease, translate .6s var(--card-ease), rotate 1.1s var(--card-ease), scale 1.1s var(--card-ease); }
.look-card:where(:hover, :focus-within, .is-revealed) .look-card__shown-on-hover { opacity: 1; }
.look-card:where(:hover, :focus-within, .is-revealed) .look-card__hidden-on-hover { opacity: 0; }
/* flip: the card turns over; each face is a box with its own surface (a card of its own) */
/* the flip: each face turns on its own and hides at the halfway point, when it is edge on. WebKit ignores
   backface-visibility on these faces (it showed the back mirrored over the front), so visibility does the hiding; the
   easing is symmetric so the turn is edge on exactly at half its time */
.look-card--flip { overflow: visible; }
.look-card--flip .look-card__shown-on-hover, .look-card--flip .look-card__hidden-on-hover {
    opacity: 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform .8s cubic-bezier(.45, 0, .55, 1), visibility 0s linear .4s;
}
.look-card--flip :is(.look-card__shown-on-hover, .look-card__hidden-on-hover) {
    opacity: 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform .8s cubic-bezier(.45, 0, .55, 1), visibility 0s linear .4s;
}
.look-card--flip .look-card__shown-on-hover { transform: perspective(70em) rotateY(-180deg); visibility: hidden; }
.look-card--flip .look-card__hidden-on-hover { transform: perspective(70em) rotateY(0deg); }
.look-card--flip:where(:hover, :focus-within, .is-revealed) .look-card__shown-on-hover { transform: perspective(70em) rotateY(0deg); visibility: visible; }
.look-card--flip:where(:hover, :focus-within, .is-revealed) .look-card__hidden-on-hover { transform: perspective(70em) rotateY(180deg); visibility: hidden; }
/* lean: the picture turns away and backs off while the close-up opens from the centre */
.look-card--lean .look-card__shown-on-hover { opacity: 1; scale: 1.18; clip-path: circle(0% at 50% 50%); }
.look-card--lean:where(:hover, :focus-within, .is-revealed) .look-card__shown-on-hover { scale: 1; clip-path: circle(72% at 50% 50%); }
.look-card--lean:where(:hover, :focus-within, .is-revealed) .look-card__hidden-on-hover { opacity: 1; }
.look-card--lean:where(:hover, :focus-within, .is-revealed) .look-card__hidden-on-hover img { rotate: 38deg; scale: .86; }
/* zoom: the picture comes closer */
.look-card--zoom:where(:hover, :focus-within) .imagesingle img { scale: 1.08; }
/* still, and the reveals that turn or swap the card's own pieces: the card itself does not rise */
.look-card.look-card--still, .look-card.look-card--flip, .look-card.look-card--lean { --card-hover-lift: 0; }
.look-card:is(.look-card--still, .look-card--flip, .look-card--lean) { --card-hover-lift: 0; }

/* a flow box inside a plotted cell (a set of cards, a looper, a card whose pieces flow) takes no page margin of its own:
   render.php restates the page margin on every .flowgrid and .loop (see the report's request) */
.plotgrid > .plot > .look-card-set:not(.does-not-exist), .plotgrid > .plot > .flowgrid.look-card { padding-left: 0; padding-right: 0; }
.plotgrid > .plot > :is(.look-card-set, .flowgrid.look-card) { padding-left: 0; padding-right: 0; }

/* the plans' amounts: the monthly one shows, the yearly one while the switch (behaviour planToggle) is on yearly; a
   behaviour's state, so it outranks the piece's own display */
.look-card [data-period="yearly"]:not(.is-yearly *) { display: none !important; }
.is-yearly .look-card [data-period="monthly"] { display: none !important; }

.look-card :focus-visible { outline: .14em solid var(--card-accent-color); outline-offset: .14em; }

/* ── REQUESTS: what a piece's style cannot say yet, keyed on the piece's class until the primitive can ──── */
/* REQUEST: what a piece's own state style cannot say yet. A run's state (the link's arrow nudges when the link is
   pointed at); a state a behaviour or the card's Style sets (the add button once added, the add button on a filled card) */
.look-card .look-card__link:hover > .text-after { translate: .15em -.15em; }
/* a card copied onto a page before the arrow became the link's own run (strong's test card) keeps its arrow */
.look-card .look-card__link:not(:has(> .text-after))::after { content: "↗"; }
.look-card .look-card__add.is-added { background: var(--card-accent-color) !important; color: var(--card-on-accent-color) !important; }
.look-card--flooded .look-card__add:hover { background: #222 !important; background: var(--ink, #16181d) !important; color: var(--card-ink-color) !important; }

html.respect-reduced-motion .look-card, html.respect-reduced-motion .look-card * { transition-duration: .01s !important; }
/* nothing turns: the flip's faces cross-fade */
html.respect-reduced-motion .look-card--flip .look-card__shown-on-hover, html.respect-reduced-motion .look-card--flip .look-card__hidden-on-hover { transform: none !important; visibility: visible !important; transition: opacity .3s ease !important; }
html.respect-reduced-motion .look-card--flip :is(.look-card__shown-on-hover, .look-card__hidden-on-hover) { transform: none !important; visibility: visible !important; transition: opacity .3s ease !important; }
html.respect-reduced-motion .look-card--flip .look-card__shown-on-hover { opacity: 0; }
html.respect-reduced-motion .look-card--flip:where(:hover, :focus-within, .is-revealed) .look-card__shown-on-hover { opacity: 1; }
html.respect-reduced-motion .look-card--flip:where(:hover, :focus-within, .is-revealed) .look-card__hidden-on-hover { opacity: 0; }

/* blocks/look-chips.css */
/* look: chips (sites/_core/looks/chips.json). The ROW only: the colours every pill reads, how round and how far apart
   the pills are, and the type size they measure their em from. Each pill carries its own padding, type and surface in its
   style, written with these variables: --chips-fill-color, --chips-ink-color, --chips-edge-color, --chips-accent-color,
   --chips-on-accent-color, --chips-corner, --chips-gap-size, --chips-hue-step. Knobs arrive as --chips-fill / --chips-ink
   / --chips-edge / --chips-accent / --chips-round / --chips-gap / --chips-type / --chips-hue-step.

   What the look switches: a pill that is a button or a link gets a darker edge under the pointer, and the chosen pill of
   a filter (aria-pressed="true", set by the filterBar behaviour) takes the accent. */

.look-chips {
    --chips-accent-color: var(--chips-accent, var(--accent, #3b5bdb));
    --chips-on-accent-color: var(--on-accent, var(--accent-ink, #fff));
    --chips-ink-color: var(--chips-ink, currentColor);
    --chips-fill-color: var(--chips-fill, color-mix(in oklab, var(--chips-ink-color) 5%, transparent));
    --chips-edge-color: var(--chips-edge, color-mix(in oklab, var(--chips-ink-color) 11%, transparent));
    --chips-corner: calc(var(--chips-round, 1) * 1.3em);
    --chips-gap-size: calc(var(--chips-gap, 1) * .5em);
    font-size: calc(1 * 1em);
    font-size: calc(var(--chips-type, 1) * 1em);
}

.look-chips button:where(:hover, :focus-visible) { --chips-edge-color: var(--chips-ink-color); }

.look-chips a:where(:hover, :focus-visible) { --chips-edge-color: var(--chips-ink-color); }

.look-chips :is(button, a):where(:hover, :focus-visible) { --chips-edge-color: var(--chips-ink-color); }
.look-chips button:focus-visible { outline: .15em solid rgba(0, 55, 69, 0.45); outline-offset: .15em; }

@supports (color: color-mix(in lch, red, blue)) {
.look-chips button:focus-visible { outline: .15em solid color-mix(in oklab, var(--chips-accent-color) 45%, transparent); }
}
.look-chips a:focus-visible { outline: .15em solid rgba(0, 55, 69, 0.45); outline-offset: .15em; }

@supports (color: color-mix(in lch, red, blue)) {
.look-chips a:focus-visible { outline: .15em solid color-mix(in oklab, var(--chips-accent-color) 45%, transparent); }
}
.look-chips :is(button, a):focus-visible { outline: .15em solid rgba(0, 55, 69, 0.45); outline-offset: .15em; }

@supports (color: color-mix(in lch, red, blue)) {
.look-chips :is(button, a):focus-visible { outline: .15em solid color-mix(in oklab, var(--chips-accent-color) 45%, transparent); }
}
.look-chips [aria-pressed="true"] {
    --chips-fill-color: var(--chips-accent-color);
    --chips-ink-color: var(--chips-on-accent-color);
    --chips-edge-color: var(--chips-accent-color);
}

/* blocks/look-code.css */
/* look: code (sites/_core/looks/code.json). The panel only: its colours, corner, lift and type size. The bar, the file
   name, the language, the copy button and the code are pieces styled as data on themselves, reading
   --code-surface-color / --code-bar-color / --code-ink-color / --code-muted-color / --code-line-color from here.
   Knobs: the style (look-code--light | --dark), --code-radius, --code-lift, --code-type. The dark style reads a site's
   own --code-bg / --code-bg-header / --code-fg / --code-muted / --code-border when it has them. */

.look-code {
    --code-surface-color: var(--paper, #fff);
    --code-ink-color: var(--ink, #16181d);
    --code-bar-color: color-mix(in oklab, var(--code-ink-color) 4%, var(--code-surface-color));
    --code-muted-color: color-mix(in oklab, var(--code-ink-color) var(--muted-share, 70%), var(--code-surface-color));
    --code-line-color: color-mix(in oklab, var(--code-ink-color) 10%, transparent);
    --code-shadow-ink: var(--ink, #16181d);
    /* each panel states its style's lift, so a panel inside a panel never inherits the outer one's */
    --code-lift-kind: 1;
    --code-depth: var(--code-lift, var(--code-lift-kind));
    font-size: calc(1 * 1.125rem);
    font-size: calc(var(--code-type, 1) * var(--text-md, var(--fs-body, 1em)));
    color: #222;
    color: var(--code-ink-color);
    background: #fafafa;
    background: var(--code-surface-color);
    border-radius: calc(1.6 * 1vh);
    border-radius: calc(var(--code-radius, 1.6) * var(--radius, .5em));
    box-shadow:
        0 0 0 1px rgba(34, 34, 34, 0.1),
        0 calc(1 * 1.4em) calc(1 * 3em) calc(1 * -1.1em) rgba(34, 34, 34, 0.2);
    box-shadow:
        0 0 0 1px color-mix(in oklab, #222 10%, transparent),
        0 calc(1 * 1.4em) calc(1 * 3em) calc(1 * -1.1em) color-mix(in oklab, #222 calc(1 * 20%), transparent);
    overflow: hidden;
    isolation: isolate;
}

@supports (color: color-mix(in lch, red, blue)) {
.look-code {
    box-shadow:
        0 0 0 1px var(--code-line-color),
        0 calc(var(--code-depth) * 1.4em) calc(var(--code-depth) * 3em) calc(var(--code-depth) * -1.1em) color-mix(in oklab, var(--code-shadow-ink) calc(var(--code-depth) * 20%), transparent);
}
}
/* a flow box nested in a lattice gets the page margin twice (the general fix waits for the owner): zero it here */
.plotgrid > .plot > .look-code { padding-left: 0; padding-right: 0; }

.look-code--dark {
    --code-surface-color: var(--code-bg, #1a1b26);
    --code-bar-color: var(--code-bg-header, #16161e);
    --code-ink-color: var(--code-fg, #c0caf5);
    --code-muted-color: var(--code-muted, #9aa0b4);
    --code-line-color: var(--code-border, #2a2b3a);
    --code-lift-kind: 0;
}

/* blocks/look-disclosure.css */
/* look: disclosure (sites/_core/looks/disclosure.json). Every piece is plotted and styled as data on itself (its
   props.style); this file carries only the box's type size, what the knobs switch and the opening mechanics.
   Knobs arrive as --disclosure-accent / --disclosure-line / --disclosure-type and the mark modifier
   (look-disclosure--ring | --plus | --arrow | --none). Pieces read --disclosure-accent-color, --disclosure-line-color,
   --disclosure-muted-color in their own style.

   A row that opens is a native <details> (a group, tag details) whose first child is its <summary> (a group, tag
   summary): the browser opens and closes it with no script, and the accordion behaviour keeps one open at a time.
   The mark is drawn on the summary, at its end. Tabs: the tabs behaviour marks the chosen [role=tab] and
   [role=tabpanel] .is-active and slides [data-tab-underline] under it (a line, or a pill behind the tab). */

.look-disclosure {
    --disclosure-accent-color: var(--disclosure-accent, var(--accent, #3b5bdb));
    --disclosure-on-accent-color: var(--on-accent, var(--accent-ink, #fff));
    --disclosure-ink-color: var(--ink, #16181d);
    --disclosure-muted-color: var(--muted, color-mix(in oklab, var(--disclosure-ink-color) var(--muted-share, 70%), transparent));
    --disclosure-line-color: var(--disclosure-line, var(--line, color-mix(in oklab, var(--disclosure-ink-color) 14%, transparent)));
    --disclosure-ease: var(--ease-out, cubic-bezier(.22, 1, .36, 1));
    font-size: calc(1 * 1.125rem);
    font-size: calc(var(--disclosure-type, 1) * var(--text-md, var(--fs-body, 1em)));
    color: #222;
    color: var(--disclosure-ink-color);
}
/* a flow box nested in a lattice gets the page margin twice (the general fix waits for the owner): zero it here */
.plotgrid > .plot > .look-disclosure { padding-left: 0; padding-right: 0; }

/* ── a row that opens ──────────────────────────────────────────────────────────────────────────────────── */
.look-disclosure summary { position: relative; cursor: pointer; list-style: none; }
.look-disclosure summary::-webkit-details-marker { display: none; }
.look-disclosure summary:focus-visible { outline: .12em solid var(--disclosure-accent-color); outline-offset: .2em; }

/* the opening: the content's height eases from 0 where the browser can animate to auto (no script, no measuring) */
.look-disclosure details { interpolate-size: allow-keywords; }
.look-disclosure details::details-content {
    height: 0; overflow-y: clip;
    transition: height .5s var(--disclosure-ease), content-visibility .5s allow-discrete;
}
.look-disclosure details[open]::details-content { height: auto; }

/* the mark: at the summary's end, across its middle (an ornament of the row, not a piece: it takes no cell) */
.look-disclosure summary::after {
    --disclosure-bar-length: 44%;
    --disclosure-stroke: max(1px, .075em);
    content: ""; position: absolute; right: 0; top: 50%; translate: 0 -50%;
    box-sizing: border-box; width: 2.1em; aspect-ratio: 1; border-radius: 50%;
    color: var(--disclosure-accent-color);
    background:
        linear-gradient(currentColor 0, currentColor 0) center / 44% max(1px, .075em) no-repeat,
        linear-gradient(currentColor 0, currentColor 0) center / max(1px, .075em) 44% no-repeat;
    background:
        linear-gradient(currentColor 0, currentColor 0) center / var(--disclosure-bar-length) var(--disclosure-stroke) no-repeat,
        linear-gradient(currentColor 0, currentColor 0) center / var(--disclosure-stroke) var(--disclosure-bar-length) no-repeat;
    background:
        linear-gradient(currentColor 0 0) center / 44% max(1px, .075em) no-repeat,
        linear-gradient(currentColor 0 0) center / max(1px, .075em) 44% no-repeat;
    box-shadow: inset 0 0 0 1px currentColor;
    transition: rotate .5s var(--disclosure-ease), background-color .3s ease, color .3s ease, background-size .35s var(--disclosure-ease);
}

@supports (background: linear-gradient(red 0%, red 0% 1%, red 2%)) {
.look-disclosure summary::after {
    background:
        linear-gradient(currentColor 0 0) center / var(--disclosure-bar-length) var(--disclosure-stroke) no-repeat,
        linear-gradient(currentColor 0 0) center / var(--disclosure-stroke) var(--disclosure-bar-length) no-repeat;
}
}
/* plus in a circle: fills on hover and when open, and turns to a cross */
.look-disclosure summary:hover::after,
.look-disclosure details[open] > summary::after { background-color: var(--disclosure-accent-color); color: var(--disclosure-on-accent-color); box-shadow: inset 0 0 0 1px var(--disclosure-accent-color); }
.look-disclosure details[open] > summary::after { rotate: 45deg; }

/* thin plus: no circle, the upright bar folds away */
.look-disclosure--plus summary::after,
.look-disclosure--plus summary:hover::after,
.look-disclosure--plus details[open] > summary::after {
    --disclosure-bar-length: 100%; --disclosure-stroke: max(1px, .11em);
    width: 1.35em; border-radius: 0; box-shadow: none; background-color: transparent; color: var(--disclosure-accent-color); rotate: none;
}
.look-disclosure--plus details[open] > summary::after { background-size: var(--disclosure-bar-length) var(--disclosure-stroke), var(--disclosure-stroke) 0; }

/* arrow: a chevron that turns over */
.look-disclosure--arrow summary::after,
.look-disclosure--arrow summary:hover::after,
.look-disclosure--arrow details[open] > summary::after {
    width: .62em; border-radius: 0; background: none; box-shadow: none; color: var(--disclosure-accent-color);
    border: solid currentColor; border-width: 0 max(1px, .12em) max(1px, .12em) 0;
    rotate: 45deg; translate: 0 -75%;
}
.look-disclosure--arrow details[open] > summary::after { rotate: 225deg; translate: 0 -25%; }

.look-disclosure--none summary::after { content: none; }

/* ── tabs ──────────────────────────────────────────────────────────────────────────────────────────────── */
/* a tab's own look (its fade, its colour when chosen or pointed at) is its style's states; the look hides the panels */
.look-disclosure [role="tabpanel"]:not(.is-active) { display: none; }
.look-disclosure [role="tab"]:focus-visible { outline: .08em solid var(--disclosure-accent-color); outline-offset: .2em; }

/* blocks/look-form.css */
/* look: form (sites/_core/looks/form.json). The BOX a form sits in: its surface, edge, corners, lift and room, the type
   size every piece measures its em from, and the colours its pieces read. LOOK only: every piece (the title, each field,
   the button, the sent and failed lines) is plotted on the box's own lattice and carries its own type and surface in its
   props.style, so this file never places, sizes or types a piece.

   Knobs: --form-surface / --form-ink / --form-accent / --form-field / --form-field-edge / --form-radius / --form-lift /
   --form-room / --form-type, and the style as a BEM modifier (look-form--tinted …). An empty knob falls back to the
   style's own value, then the theme's token. Pieces read --form-ink-color, --form-muted-color, --form-line-color,
   --form-accent-color, --form-on-accent-color, --form-on-ink-color (what reads on a fill of the text colour: a dark
   button's words), --form-field-color and --form-danger-color. The fields inside start from the look's colours
   (--field-fill, --field-edge, --field-accent inherit from here); a field's own knob wins.

   States: formPost writes data-state (busy / sent / failed) on the form; blocks/states.css shows a piece by its showIn.
   Here only what a state does to the whole box: the button rests while it sends, a piece that appears arrives, a figure
   a behaviour just changed flashes (stayPicker, inquiryCard write is-changed), a piece that reads --form-turn
   straightens once the form is filled (giftCard writes is-filled). */

.look-form, .look-form.plotgrid {
    --form-accent-color: var(--form-accent, var(--form-accent-kind));
    --form-on-accent-color: var(--on-accent, var(--accent-ink, #fff));
    --form-ink-color: var(--form-ink, var(--form-ink-kind));
    --form-on-ink-color: var(--form-surface, var(--form-on-ink-kind));
    --form-muted-color: color-mix(in oklab, var(--form-ink-color) var(--muted-share, 70%), transparent);
    --form-line-color: color-mix(in oklab, var(--form-ink-color) 16%, transparent);
    --form-field-color: var(--form-field, color-mix(in oklab, var(--form-ink-color) 5%, transparent));
    --form-danger-color: var(--danger, color-mix(in oklab, #c2410c 84%, var(--form-ink-color)));
    --form-shadow-ink: var(--ink, #16181d);
    /* each box states its style's defaults, so a form inside a form never inherits the outer one's */
    --form-ink-kind: var(--ink, #16181d);
    --form-accent-kind: var(--accent, #3b5bdb);
    --form-surface-kind: var(--card, var(--paper, #fff));
    --form-on-ink-kind: var(--form-surface-kind);
    --form-ring-shadow: 0 0 0 1px color-mix(in oklab, var(--form-ink-color) 9%, transparent);
    --form-lift-kind: 1;
    --form-room-kind: 2.6em;
    --form-depth: var(--form-lift, var(--form-lift-kind));
    /* the fields inside start from these */
    --field-fill: var(--form-field-color);
    --field-edge: var(--form-field-edge);
    --field-accent: var(--form-accent-color);

    box-sizing: border-box;
    font-size: calc(1 * 1em);
    font-size: calc(var(--form-type, 1) * 1em);
    color: #222;
    color: var(--form-ink-color);
    background: #fafafa;
    background: var(--form-surface, var(--form-surface-kind));
    border-radius: calc(1 * 1vh);
    border-radius: calc(var(--form-radius, 1) * var(--radius, .75em));
    box-shadow:
        0 0 0 1px rgba(34, 34, 34, 0.09),
        0 calc(1 * .06em) calc(1 * .18em) rgba(34, 34, 34, 0.05),
        0 calc(1 * 1em) calc(1 * 2.4em) calc(1 * -.8em) rgba(34, 34, 34, 0.18);
    box-shadow:
        0 0 0 1px color-mix(in oklab, #222 9%, transparent),
        0 calc(1 * .06em) calc(1 * .18em) color-mix(in oklab, #222 calc(1 * 5%), transparent),
        0 calc(1 * 1em) calc(1 * 2.4em) calc(1 * -.8em) color-mix(in oklab, #222 calc(1 * 18%), transparent);
    /* the room follows the type, and never takes more than a share of a narrow box (a phone) */
    padding: calc(1 * min(2.6em, 7cqi));
    padding: calc(var(--form-room, 1) * min(var(--form-room-kind), 7cqi));
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif);
}

@supports (color: color-mix(in lch, red, blue)) {
.look-form, .look-form.plotgrid {
    box-shadow:
        var(--form-ring-shadow),
        0 calc(var(--form-depth) * .06em) calc(var(--form-depth) * .18em) color-mix(in oklab, var(--form-shadow-ink) calc(var(--form-depth) * 5%), transparent),
        0 calc(var(--form-depth) * 1em) calc(var(--form-depth) * 2.4em) calc(var(--form-depth) * -.8em) color-mix(in oklab, var(--form-shadow-ink) calc(var(--form-depth) * 18%), transparent);
}
}

.look-form--tinted, .look-form--tinted.plotgrid {
    --form-surface-kind: var(--surface, color-mix(in oklab, var(--form-ink-color) 5%, var(--paper, #fff)));
    --form-field-color: var(--form-field, var(--paper, #fff));
    --form-ring-shadow: 0 0 0 1px transparent;
    --form-lift-kind: 0;
}
.look-form--dark, .look-form--dark.plotgrid {
    --form-surface-kind: var(--invert-bg, var(--ink, #16181d));
    --form-ink-kind: var(--invert-fg, var(--paper, #fff));
    --form-field-color: var(--form-field, color-mix(in oklab, var(--form-ink-color) 8%, transparent));
    --form-ring-shadow: 0 0 0 1px transparent;
}
/* the accent fills the panel; the text, the fields' lines and a picked pill turn to the colour that reads on it */
.look-form--flooded, .look-form--flooded.plotgrid {
    --form-surface-kind: var(--form-accent, var(--accent, #3b5bdb));
    --form-ink-kind: var(--on-accent, var(--accent-ink, #fff));
    --form-accent-kind: var(--on-accent, var(--accent-ink, #fff));
    --form-on-accent-color: var(--form-surface, var(--form-surface-kind));
    --form-field-color: var(--form-field, transparent);
    --form-field-edge: color-mix(in oklab, var(--form-ink-color) 55%, transparent);
    --form-ring-shadow: 0 0 0 1px transparent;
    --form-lift-kind: 0;
}
.look-form--outline, .look-form--outline.plotgrid {
    --form-surface-kind: transparent;
    --form-on-ink-kind: var(--page-bg, var(--paper, #fff));
    --form-ring-shadow: 0 0 0 1px color-mix(in oklab, var(--form-ink-color) 30%, transparent);
    --form-lift-kind: 0;
}
/* on the page: the colour of the text around it (a form on a coloured band reads without a setting), no room */
.look-form--bare, .look-form--bare.plotgrid {
    --form-surface-kind: transparent;
    --form-on-ink-kind: var(--page-bg, var(--paper, #fff));
    --form-ink-kind: currentColor;
    --form-ring-shadow: 0 0 0 1px transparent;
    --form-lift-kind: 0;
    --form-room-kind: 0em;
}

/* while it sends, the button rests; a piece that appears in a new state arrives */
.look-form[data-state="busy"] button:not(.does-not-exist), .look-form[data-state="busy"] .btn { opacity: .55; pointer-events: none; cursor: progress; }
.look-form[data-state="busy"] :is(button, .btn) { opacity: .55; pointer-events: none; cursor: progress; }
.look-form[data-state="sent"] [data-show-in~="sent"], .look-form[data-state="sent"] [data-show-in~="failed"], .look-form[data-state="failed"] [data-show-in~="sent"], .look-form[data-state="failed"] [data-show-in~="failed"] {
    animation: look-form-arrive .7s cubic-bezier(.16, 1, .3, 1) both;
    animation: look-form-arrive .7s var(--ease-out, cubic-bezier(.16, 1, .3, 1)) both;
}
.look-form:is([data-state="sent"], [data-state="failed"]) :is([data-show-in~="sent"], [data-show-in~="failed"]) {
    animation: look-form-arrive .7s cubic-bezier(.16, 1, .3, 1) both;
    animation: look-form-arrive .7s var(--ease-out, cubic-bezier(.16, 1, .3, 1)) both;
}
@keyframes look-form-arrive { from { opacity: 0; translate: 0 .6em; } }
.look-form .is-changed { animation: look-form-flash .7s cubic-bezier(.4, 0, .2, 1); animation: look-form-flash .7s var(--ease, ease); }
@keyframes look-form-flash { 30% { color: var(--form-accent-color); } }
.look-form.is-filled { --form-turn: 0; }
html.respect-reduced-motion .look-form [data-show-in], html.respect-reduced-motion .look-form .is-changed { animation: none; }
html.respect-reduced-motion .look-form :is([data-show-in], .is-changed) { animation: none; }

/* REQUEST: field.css sets a picked pill's words in var(--on-accent), which is the panel's own ink on a flooded panel
   (white on white). A field knob or variable for them (--field-accent-ink) would let this go; until then the fields of
   a flooded panel read the panel colour there. */
.look-form--flooded .field { --on-accent: var(--form-surface, var(--form-surface-kind)); }

/* REQUEST: blocks/endings.css (the old contact pattern) styles every `.field label` and `.field input` in the kit: the
   field primitive's label and pills turn to .75rem mono caps and its radios get a box. Scope endings.css to `.contact`
   (snippet in the form builder's report) and drop this guard, which only restores field.css inside a form box. */
.look-form .field label.field-label, .look-form .field .field-option:not(does-not-exist) { font: inherit; letter-spacing: normal; text-transform: none; color: inherit; }
.look-form .field :is(label.field-label, .field-option) { font: inherit; letter-spacing: normal; text-transform: none; color: inherit; }
.look-form .field label.field-label { font-size: .8em; line-height: 1.3; color: color-mix(in oklab, currentColor 70%, transparent); }

/* blocks/look-gallery-spread.css */
/* look: gallery-spread (sites/_core/looks/gallery-spread.json). Only what the look's knobs expose and what its
   behaviours switch: the box (its ground and text colour), how every picture in it is coloured (Picture colour), and
   the scroll motion some pieces ask for. Every piece is plotted on
   its box's lattice and carries its own look as data (props.style: font, size, colour, corners, shadow) that reads the
   variables below; no rule here gives a piece its type or surface by its role. A rule marked REQUEST is what a piece's
   style cannot say yet.

   Knobs arrive as --gallery-spread-ground / -ink / -accent / -corners / -lift and the Picture colour modifier
   (look-gallery-spread--mono, --duo). The colours and sizes a piece's style reads: --spread-ink-color,
   --spread-muted-color, --spread-accent-color, --spread-ground-color, --spread-rule-color, --spread-corners (× the
   corner a preset gives a picture), --spread-lift (× its shadow). */

.look-gallery-spread {
    --spread-ground-kind: transparent;   /* a preset states its own starting ground in its box's style */
    --spread-ground-color: var(--gallery-spread-ground, var(--spread-ground-kind));
    --spread-ink-color: var(--gallery-spread-ink, var(--ink, #151513));
    --spread-muted-color: color-mix(in oklab, var(--spread-ink-color) var(--muted-share, 70%), transparent);
    --spread-rule-color: color-mix(in oklab, var(--spread-ink-color) 16%, transparent);
    --spread-accent-color: var(--gallery-spread-accent, var(--accent, #2a2ad9));
    --spread-corners: var(--gallery-spread-corners, 1);
    --spread-lift: var(--gallery-spread-lift, 1);
    color: #222;
    color: var(--spread-ink-color);
    background: transparent;
    background: var(--spread-ground-color);
}

/* ── Picture colour: black and white, or two-tone in the accent; pointed at, a picture is in colour again ── */
.look-gallery-spread .imagesingle img { transition: filter .5s ease, scale .8s cubic-bezier(.4, 0, .2, 1); transition: filter .5s ease, scale .8s var(--ease, ease); }
.look-gallery-spread--mono .imagesingle img { filter: grayscale(1) contrast(1.08); }
.look-gallery-spread--duo .imagesingle { background-color: var(--spread-accent-color); }
.look-gallery-spread--duo .imagesingle img { filter: grayscale(1) contrast(1.2); mix-blend-mode: screen; }
.look-gallery-spread.look-gallery-spread--mono .imagesingle:hover img, .look-gallery-spread.look-gallery-spread--duo .imagesingle:hover img { filter: none; mix-blend-mode: normal; }
.look-gallery-spread:is(.look-gallery-spread--mono, .look-gallery-spread--duo) .imagesingle:hover img { filter: none; mix-blend-mode: normal; }

/* REQUEST (turnDots: the current dot as a pill): the current dot stretches into a short bar */
.look-gallery-spread .turn-dots > button { transition: background-color .3s ease, width .35s cubic-bezier(.2, .7, .3, 1); }
.look-gallery-spread .turn-dots > [aria-current="true"] { width: calc(var(--dot) * 2.6); border-radius: 99em; }

/* ── Scroll motion. REQUEST (a piece that moves with the scroll): a piece marked __drifts travels against the page by
   its --drift (a depth: + slower, − faster) as it crosses the screen, a picture marked __opens unmasks as it enters,
   a picture marked __pans drifts inside its crop. Firefox runs them through the polyfill layout.twig loads there. ── */
html:not(.respect-reduced-motion) .look-gallery-spread .look-gallery-spread__drifts { animation: look-gallery-spread-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
html:not(.respect-reduced-motion) .look-gallery-spread .look-gallery-spread__opens { animation: look-gallery-spread-open linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
html:not(.respect-reduced-motion) .look-gallery-spread .look-gallery-spread__pans img { animation: look-gallery-spread-pan linear both; animation-timeline: view(); animation-range: cover; }
@keyframes look-gallery-spread-drift { from { translate: 0 calc(0 * (14 * var(--pe-vw))); translate: 0 calc(var(--drift, 0) * (14 * var(--pe-vw))); translate: 0 calc(0 * calc(14 * var(--pe-vw))); translate: 0 calc(var(--drift, 0) * calc(14 * var(--pe-vw))); } to { translate: 0 calc(0 * (-14 * var(--pe-vw))); translate: 0 calc(var(--drift, 0) * (-14 * var(--pe-vw))); translate: 0 calc(0 * calc(-14 * var(--pe-vw))); translate: 0 calc(var(--drift, 0) * calc(-14 * var(--pe-vw))); } }
@keyframes look-gallery-spread-open { from { clip-path: inset(18% 0 0 0); scale: .92; } to { clip-path: inset(0 0 0 0); scale: 1; } }
@keyframes look-gallery-spread-pan { from { transform: translateY(-6%) scale(1.14); } to { transform: translateY(6%) scale(1.14); } }

/* REQUEST (a box's own shape on the phone): a box whose rows share its height keeps its desktop proportion on a phone,
   where its captions need more height than its width gives; a preset states a taller phone shape as --spread-phone-shape */
@media (max-width: 768px) {
    .flowgrid > .plot > .look-gallery-spread.plotgrid[data-rows] { aspect-ratio: var(--spread-phone-shape, var(--grid-columns) / var(--grid-rows)); }
}

/* blocks/look-gallery.css */
/* look: gallery (sites/_core/looks/gallery.json). The SET only: the box the pictures sit in (its surface, room and
   corners, restated by each Style), the space between the pictures, the type size every piece measures its em from,
   and what the On hover choice does to a picture and its neighbours. Every piece (the picture, the number, the caption,
   the frame round a video) carries its own type, colour, corner and shadow in its style and reads the values below:
   --gallery-ink-color, --gallery-muted-color, --gallery-line-color, --gallery-accent-color, --gallery-ground-color
   (behind a picture while it loads), --gallery-corner, and for a picture's frame --gallery-mat, --gallery-frame-color,
   --gallery-shadow. Knobs arrive as --gallery-ink / --gallery-accent / --gallery-radius / --gallery-gap / --gallery-type,
   the Style as look-gallery--<kind>, the hover as look-gallery--<hover>. A Style sets defaults (--gallery-*-kind); the
   base rule states them too, so a gallery inside a gallery never inherits the outer one's.

   An item is a direct child of a looper inside the set (or of the set itself when it is the looper). What a piece does
   while its item is pointed at (a caption rising, a zoom mark showing) is the piece's own "@hover" style. A shot marked
   [data-zoom] in a [data-lightbox] set opens in the kit's lightbox, which walks the set with arrows. */

.look-gallery, .look-gallery.plotgrid {
    --gallery-ink-kind: currentColor;
    --gallery-surface-kind: transparent;
    --gallery-room-kind: 0;
    --gallery-mat-kind: 0em;
    --gallery-shadow-kind: none;
    --gallery-dim: .32;

    --gallery-ink-color: var(--gallery-ink, var(--gallery-ink-kind));
    --gallery-muted-color: color-mix(in oklab, var(--gallery-ink-color) var(--muted-share, 70%), transparent);
    --gallery-line-color: color-mix(in oklab, var(--gallery-ink-color) 15%, transparent);
    --gallery-accent-color: var(--gallery-accent, var(--accent, #b4532a));
    --gallery-ground-color: color-mix(in oklab, var(--gallery-ink-color) 7%, transparent);
    --gallery-frame-color: var(--card, var(--paper, #fff));
    --gallery-corner: calc(var(--gallery-radius, 1) * var(--radius, .6em));
    --gallery-mat: var(--gallery-mat-kind);
    --gallery-shadow: var(--gallery-shadow-kind);
    --gallery-ease: var(--ease-out, cubic-bezier(.2, .7, .2, 1));
    --gallery-room: calc(var(--gallery-room-kind) * min(3.6em, 6cqi));
    --gallery-space: calc(var(--gallery-gap, 1) * 1.8cqi);

    font-size: calc(1 * 1em);

    font-size: calc(var(--gallery-type, 1) * 1em);
    color: currentColor;
    color: var(--gallery-ink-color);
    background: transparent;
    background: var(--gallery-surface-kind);
    border-radius: calc(0 * (1 * 1vh) * 2);
    border-radius: calc(0 * calc(1 * 1vh) * 2);
    border-radius: calc(var(--gallery-room-kind) * var(--gallery-corner) * 2);
    /* the room follows the Style; with none, the set takes no page margin of its own (a nested lattice restates it) */
    padding: calc(0 * min(3.6em, 6cqi));
    padding: var(--gallery-room);
    box-sizing: border-box;
}
/* a lattice or looper inside the set is laid in the set's own width: never the page margin again */
.look-gallery .plotgrid { padding-left: 0; padding-right: 0; }
.plotgrid > .plot > .look-gallery { padding-left: var(--gallery-room); padding-right: var(--gallery-room); }

/* --gallery-space is a length resolved on the set (a share of the set's width, times the knob) and inherited as that
   length, so a looper in a narrow column keeps the set's space */
@property --gallery-space { syntax: "<length>"; inherits: true; initial-value: 0px; }

/* the space between the pictures, times the knob; a looper whose items carry captions sets a taller gap below
   (--gallery-row-gap in its style). Across it is a share of the width only: a flow lattice repeats it between every one
   of its columns, so a floor in em would push a 24-column row past a phone's width. A looper laid on a grid of its own
   (layout grid) keeps that grid's gutter; two classes and more outrank a flow lattice's own gap. */
.look-gallery.loop:not(.plotgrid:not(.flowgrid)), .look-gallery .loop:not(.plotgrid:not(.flowgrid)) {
    -moz-column-gap: var(--gallery-space);
         column-gap: var(--gallery-space);
    row-gap: max(calc(var(--gallery-space) * 1), calc(1 * 1 * .6em));
    row-gap: max(calc(var(--gallery-space) * var(--gallery-row-gap, 1)), calc(var(--gallery-gap, 1) * var(--gallery-row-gap, 1) * .6em));
}

/* ── Styles ─────────────────────────────────────────────────────────────────────────────────────────── */
/* each picture in a paper frame with a hairline and a soft shadow */
.look-gallery--framed, .look-gallery--framed.plotgrid {
    --gallery-mat-kind: .5em;
    --gallery-ground-color: var(--gallery-frame-color);   /* behind a framed picture is its paper mat */
    --gallery-shadow-kind: var(--shadow-card,
        0 0 0 1px var(--gallery-line-color),
        0 .08em .2em color-mix(in oklab, var(--ink, #16181d) 6%, transparent),
        0 1em 2.2em -1.1em color-mix(in oklab, var(--ink, #16181d) 34%, transparent));
}
/* the whole set on a faint tint of the text colour, with room round it */
.look-gallery--panel, .look-gallery--panel.plotgrid {
    --gallery-surface-kind: color-mix(in oklab, var(--gallery-ink-color) 5%, transparent);
    --gallery-room-kind: 1;
}
/* the whole set on the theme's ink, the words turned to its paper */
.look-gallery--dark, .look-gallery--dark.plotgrid {
    --gallery-ink-kind: var(--paper, #fff);
    --gallery-surface-kind: var(--ink, #111);
    --gallery-frame-color: color-mix(in oklab, var(--paper, #fff) 10%, var(--ink, #111));
    --gallery-room-kind: 1;
}

/* ── On hover: an item is a direct child of a looper in the set (or of the set, when the set is the looper) ── */
.look-gallery.loop > *, .look-gallery .loop > * { transition: opacity .5s ease, filter .5s ease, translate .6s var(--gallery-ease); }
:is(.look-gallery.loop, .look-gallery .loop) > * { transition: opacity .5s ease, filter .5s ease, translate .6s var(--gallery-ease); }
.look-gallery .imagesingle, .look-gallery .videosingle { transition: box-shadow .5s var(--gallery-ease); }
.look-gallery :is(.imagesingle, .videosingle) { transition: box-shadow .5s var(--gallery-ease); }
.look-gallery :is(.imagesingle img) { transition: scale 1s var(--gallery-ease), filter .7s ease, opacity .45s ease; }
.look-gallery :is(.videosingle video) { transition: scale 1s var(--gallery-ease), filter .7s ease, opacity .45s ease; }
.look-gallery :is(.imagesingle img, .videosingle video) { transition: scale 1s var(--gallery-ease), filter .7s ease, opacity .45s ease; }
.look-gallery [data-zoom] { cursor: zoom-in; }
.look-gallery [data-zoom]:focus-visible { outline: .14em solid var(--gallery-accent-color); outline-offset: .3em; }

/* the others dim: the looper fades back round the one pointed at, which comes a touch closer. Asked of each item (one
   pointed at after it, or before it): a :has() on the looper with the items below it made every element added anywhere
   on any page restyle the whole page (20 ms). A browser without :has() dims none, as before */
.look-gallery--spotlight.loop > :not(:hover):not(:focus-within):has(~ :is(:hover, :focus-within)) {
    opacity: var(--gallery-dim); filter: saturate(.35);
}
.look-gallery--spotlight .loop > :not(:hover):not(:focus-within):has(~ :is(:hover, :focus-within)) {
    opacity: var(--gallery-dim); filter: saturate(.35);
}
:is(.look-gallery--spotlight.loop, .look-gallery--spotlight .loop) > :not(:hover):not(:focus-within):has(~ :is(:hover, :focus-within)) {
    opacity: var(--gallery-dim); filter: saturate(.35);
}
@supports selector(:has(*)) {
    .look-gallery--spotlight.loop > :hover ~ :not(:hover):not(:focus-within) {
        opacity: var(--gallery-dim); filter: saturate(.35);
    }
    .look-gallery--spotlight.loop > :focus-within ~ :not(:hover):not(:focus-within) {
        opacity: var(--gallery-dim); filter: saturate(.35);
    }
    .look-gallery--spotlight .loop > :hover ~ :not(:hover):not(:focus-within) {
        opacity: var(--gallery-dim); filter: saturate(.35);
    }
    .look-gallery--spotlight .loop > :focus-within ~ :not(:hover):not(:focus-within) {
        opacity: var(--gallery-dim); filter: saturate(.35);
    }
    :is(.look-gallery--spotlight.loop, .look-gallery--spotlight .loop) > :is(:hover, :focus-within) ~ :not(:hover):not(:focus-within) {
        opacity: var(--gallery-dim); filter: saturate(.35);
    }
}
.look-gallery--spotlight.loop > :hover :is(.imagesingle img) { scale: 1.03; }
.look-gallery--spotlight.loop > :hover :is(.videosingle video) { scale: 1.03; }
.look-gallery--spotlight.loop > :focus-within :is(.imagesingle img) { scale: 1.03; }
.look-gallery--spotlight.loop > :focus-within :is(.videosingle video) { scale: 1.03; }
.look-gallery--spotlight .loop > :hover :is(.imagesingle img) { scale: 1.03; }
.look-gallery--spotlight .loop > :hover :is(.videosingle video) { scale: 1.03; }
.look-gallery--spotlight .loop > :focus-within :is(.imagesingle img) { scale: 1.03; }
.look-gallery--spotlight .loop > :focus-within :is(.videosingle video) { scale: 1.03; }
:is(.look-gallery--spotlight.loop, .look-gallery--spotlight .loop) > :is(:hover, :focus-within) :is(.imagesingle img, .videosingle video) { scale: 1.03; }
/* the picture comes closer inside its frame */
.look-gallery--zoom.loop > :hover :is(.imagesingle img) { scale: 1.07; }
.look-gallery--zoom.loop > :hover :is(.videosingle video) { scale: 1.07; }
.look-gallery--zoom.loop > :focus-within :is(.imagesingle img) { scale: 1.07; }
.look-gallery--zoom.loop > :focus-within :is(.videosingle video) { scale: 1.07; }
.look-gallery--zoom .loop > :hover :is(.imagesingle img) { scale: 1.07; }
.look-gallery--zoom .loop > :hover :is(.videosingle video) { scale: 1.07; }
.look-gallery--zoom .loop > :focus-within :is(.imagesingle img) { scale: 1.07; }
.look-gallery--zoom .loop > :focus-within :is(.videosingle video) { scale: 1.07; }
:is(.look-gallery--zoom.loop, .look-gallery--zoom .loop) > :is(:hover, :focus-within) :is(.imagesingle img, .videosingle video) { scale: 1.07; }
/* black and white until pointed at */
.look-gallery--colour :is(.imagesingle img) { filter: grayscale(1) contrast(1.04); }
.look-gallery--colour :is(.videosingle video) { filter: grayscale(1) contrast(1.04); }
.look-gallery--colour :is(.imagesingle img, .videosingle video) { filter: grayscale(1) contrast(1.04); }
.look-gallery--colour.loop > :hover :is(.imagesingle img) { filter: none; scale: 1.04; }
.look-gallery--colour.loop > :hover :is(.videosingle video) { filter: none; scale: 1.04; }
.look-gallery--colour.loop > :focus-within :is(.imagesingle img) { filter: none; scale: 1.04; }
.look-gallery--colour.loop > :focus-within :is(.videosingle video) { filter: none; scale: 1.04; }
.look-gallery--colour .loop > :hover :is(.imagesingle img) { filter: none; scale: 1.04; }
.look-gallery--colour .loop > :hover :is(.videosingle video) { filter: none; scale: 1.04; }
.look-gallery--colour .loop > :focus-within :is(.imagesingle img) { filter: none; scale: 1.04; }
.look-gallery--colour .loop > :focus-within :is(.videosingle video) { filter: none; scale: 1.04; }
:is(.look-gallery--colour.loop, .look-gallery--colour .loop) > :is(:hover, :focus-within) :is(.imagesingle img, .videosingle video) { filter: none; scale: 1.04; }
/* the picture rises with a deeper shadow */
.look-gallery--lift.loop > :focus-within {
    translate: 0 -.25em;
    --gallery-shadow:
        0 .125em .3em color-mix(in oklab, var(--ink, #16181d) 10%, transparent),
        0 2.1em 4.1em -1.5em color-mix(in oklab, var(--ink, #16181d) 50%, transparent);
}
.look-gallery--lift .loop > :focus-within {
    translate: 0 -.25em;
    --gallery-shadow:
        0 .125em .3em color-mix(in oklab, var(--ink, #16181d) 10%, transparent),
        0 2.1em 4.1em -1.5em color-mix(in oklab, var(--ink, #16181d) 50%, transparent);
}
.look-gallery--lift.loop > :hover, .look-gallery--lift .loop > :hover {
    translate: 0 -.25em;
    --gallery-shadow:
        0 .125em .3em color-mix(in oklab, var(--ink, #16181d) 10%, transparent),
        0 2.1em 4.1em -1.5em color-mix(in oklab, var(--ink, #16181d) 50%, transparent);
}
:is(.look-gallery--lift.loop, .look-gallery--lift .loop) > :is(:hover, :focus-within) {
    translate: 0 -.25em;
    --gallery-shadow:
        0 .125em .3em color-mix(in oklab, var(--ink, #16181d) 10%, transparent),
        0 2.1em 4.1em -1.5em color-mix(in oklab, var(--ink, #16181d) 50%, transparent);
}
.look-gallery--lift.loop > :hover :is(.imagesingle img) { scale: 1.04; }
.look-gallery--lift.loop > :hover :is(.videosingle video) { scale: 1.04; }
.look-gallery--lift.loop > :focus-within :is(.imagesingle img) { scale: 1.04; }
.look-gallery--lift.loop > :focus-within :is(.videosingle video) { scale: 1.04; }
.look-gallery--lift .loop > :hover :is(.imagesingle img) { scale: 1.04; }
.look-gallery--lift .loop > :hover :is(.videosingle video) { scale: 1.04; }
.look-gallery--lift .loop > :focus-within :is(.imagesingle img) { scale: 1.04; }
.look-gallery--lift .loop > :focus-within :is(.videosingle video) { scale: 1.04; }
:is(.look-gallery--lift.loop, .look-gallery--lift .loop) > :is(:hover, :focus-within) :is(.imagesingle img, .videosingle video) { scale: 1.04; }

html.respect-reduced-motion .look-gallery, html.respect-reduced-motion .look-gallery * { transition-duration: .01s !important; }

/* ── REQUESTS with no stopgap here (the presets say them as data on their pieces, and wait for the primitive) ─────
   REQUEST: a box whose height follows its picture, with pieces plotted over the picture (a wall tile's caption and
     zoom mark): now the tile is a one-cell grid in its style and each piece names that cell (grid-area) and its corner.
   REQUEST: a flow plot's own width on the phone (a video wall's tall clips two a row, its wide ones across; a brick wall
     restacked): phoneColumns gives every item the same width, so both stay one a row or scale as a whole.
   REQUEST: a video that plays only while it is pointed at (the video wall's hover to play): every video piece plays in
     view. */

/* ── A board you drag (panZoom): on a phone or a narrow tablet the behaviour steps aside (its fallback class) and the
   board scrolls both ways under a finger instead ── */
.look-gallery[data-panzoom-viewport] { overflow: clip; }
.look-gallery[data-panzoom-viewport].pe-panzoom-fallback { overflow: auto; }
.look-gallery.pe-panzoom-panning { cursor: grabbing; }
.look-gallery[data-panzoom-viewport]:not(.pe-panzoom-fallback) { cursor: grab; }

/* blocks/look-glass.css */
/* look: glass (sites/_core/looks/glass.json). A layer that turns the box it sits in to glass: it fills that box behind
   its pieces (its corners follow the box's) and frosts what shows through, with a light tint and a lit rim. With the
   liquidGlass behavior on the same piece, Chromium also bends the backdrop at the rim (--glass-lens, the filter the
   behavior writes); every other browser keeps the frost.
   Knobs: --glass-blur (em) · --glass-saturate · --glass-tint (a colour) · --glass-tint-amount (%) · --glass-rim (0..1, how
   bright the lit edge)
   It is the box's ground wherever it sits among the box's pieces: z-index -1 in a box isolated as its own stacking
   context, so it paints over the box's fill and under every sibling, whatever its place in the stacking order. */
:has(> .look-glass) { isolation: isolate; }
.look-glass {
    position: absolute !important; top: 0; right: 0; bottom: 0; left: 0; z-index: -1 !important;
    border-radius: inherit; pointer-events: none;
    -webkit-backdrop-filter:   blur(calc(1 * 1em)) saturate(1.6);
            backdrop-filter:   blur(calc(1 * 1em)) saturate(1.6);
    -webkit-backdrop-filter: var(--glass-lens, ) blur(calc(var(--glass-blur, 1) * 1em)) saturate(var(--glass-saturate, 1.6));
            backdrop-filter: var(--glass-lens, ) blur(calc(var(--glass-blur, 1) * 1em)) saturate(var(--glass-saturate, 1.6));
    background: rgba(255, 255, 255, .12);
    background: color-mix(in srgb, #fff calc(12 * 1%), transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, calc(.6)), inset 0 -1px 0 rgba(0, 0, 0, calc(.6 / 6)),
        0 .5em 1.5em -.75em rgba(0, 0, 0, .25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, calc(var(--glass-rim, .6))), inset 0 -1px 0 rgba(0, 0, 0, calc(var(--glass-rim, .6) / 6)),
        0 .5em 1.5em -.75em rgba(0, 0, 0, .25);
}

@supports (color: color-mix(in lch, red, blue)) {
.look-glass {
    background: color-mix(in srgb, var(--glass-tint, #fff) calc(var(--glass-tint-amount, 12) * 1%), transparent);
}
}

/* blocks/look-index.css */
/* look: index (sites/_core/looks/index.json). The BOX a list of links sits in, and what the row in play switches. LOOK
   only: every piece (a number, a title, a line of facts, an arrow, a picture) is plotted on its box's lattice and carries
   its own type and surface in its props.style, reading the colours below, and its own looks while its row is in play
   (state styles); this file never places, sizes or types one.

   Knobs: --index-surface / --index-ink / --index-accent / --index-dim / --index-radius / --index-type, the style as a
   BEM modifier (look-index--panel, look-index--dark). Pieces read --index-ink-color, --index-muted-color,
   --index-line-color, --index-accent-color, --index-on-accent-color, --index-rest-color (a row out of play) and
   --index-radius-size. A run beside a text (an arrow, a mark) or a looper that fans its pictures by their place reads
   --index-row-lit (0 or 1), which its row or looper sets in its own state style.

   States: hoverIndex marks the row in play is-active (a row's ":chosen", its pieces' "@chosen"), pageNavigator marks
   the entry of the part being read aria-current and gives each entry --stop-progress, its reading line's width. */

.look-index, .look-index.plotgrid {
    --index-ink-kind: var(--ink, #16181d);
    --index-surface-kind: transparent;
    --index-room-kind: 0em;
    --index-lift-kind: 0;
    --index-ink-color: var(--index-ink, var(--index-ink-kind));
    --index-accent-color: var(--index-accent, var(--accent, #3b5bdb));
    --index-on-accent-color: var(--on-accent, var(--accent-ink, #fff));
    --index-muted-color: color-mix(in oklab, var(--index-ink-color) var(--muted-share, 70%), transparent);
    --index-line-color: color-mix(in oklab, var(--index-ink-color) 16%, transparent);
    --index-rest-color: color-mix(in oklab, var(--index-ink-color) calc(100% - var(--index-dim, 55) * 1%), transparent);
    --index-radius-size: calc(var(--index-radius, 0) * var(--radius, .5em));
    --loop-line-color: var(--index-line-color);
    /* hover-index.css gives its plate an aspect: here the plate's plot is its size */
    --hidx-aspect: auto;
    --hidx-plate-bg: color-mix(in oklab, var(--index-ink-color) 6%, transparent);
    --hidx-dim: var(--index-rest-color);
    --hidx-shift: .4cqi;

    box-sizing: border-box;
    font-size: calc(1 * 1em);
    font-size: calc(var(--index-type, 1) * 1em);
    color: #222;
    color: var(--index-ink-color);
    background: transparent;
    background: var(--index-surface, var(--index-surface-kind));
    border-radius: calc(0 * 1vh);
    border-radius: calc(var(--index-lift-kind) * var(--radius, .75em));
    padding: min(0em, 6cqi);
    padding: min(var(--index-room-kind), 6cqi);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif);
}
.look-index--panel, .look-index--panel.plotgrid {
    --index-surface-kind: var(--card, var(--paper, #fff));
    --index-room-kind: 2.4em;
    --index-lift-kind: 1;
    box-shadow: 0 0 0 1px rgba(3, 3, 3, 0.09),
        0 1em 2.6em -1.4em rgba(7, 7, 7, 0.22);
}

@supports (color: color-mix(in lch, red, blue)) {
.look-index--panel, .look-index--panel.plotgrid {
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--index-ink-color) 9%, transparent),
        0 1em 2.6em -1.4em color-mix(in oklab, #222 22%, transparent);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--index-ink-color) 9%, transparent),
        0 1em 2.6em -1.4em color-mix(in oklab, var(--ink, #16181d) 22%, transparent);
}
}
.look-index--dark, .look-index--dark.plotgrid {
    --index-surface-kind: var(--invert-bg, var(--ink, #16181d));
    --index-ink-kind: var(--invert-fg, var(--paper, #fff));
    /* the accent lifted toward the light text, so it reads on the dark ground */
    --index-accent-color: var(--index-accent, color-mix(in oklab, var(--accent, #3b5bdb) 62%, var(--index-ink-color)));
    --index-room-kind: 2.4em;
}

/* its small labels keep the reading floor of a narrow tablet and a phone, in its own boxes too (a box in a box turns the
   floor off, render.php's .plotgrid > .plot > .plotgrid, so this rule outranks it) */
.look-index, .plotgrid > .plot > .look-index.plotgrid { --type-min: var(--type-floor, calc(0 * var(--pe-vw))); --type-min-in-box: var(--type-floor, calc(0 * var(--pe-vw))); }

/* a nested looper or flow box gets the page margin twice (brief §6): the boxes inside the look sit on its edge */
.look-index:not(.does-not-exist) > .plot > .flowgrid, .look-index .plotgrid > .plot > .flowgrid { padding-left: 0; padding-right: 0; }
:is(.look-index, .look-index .plotgrid) > .plot > .flowgrid { padding-left: 0; padding-right: 0; }

/* the row in play is the pieces' own state styles (":chosen" on a row hoverIndex or pageNavigator marks, "@hover"
   on the pieces of a person pointed at or tapped); the keyboard's ring shows on a row in the accent */
.look-index [data-hidx-item]:focus-visible { outline: .125em solid var(--index-accent-color); outline-offset: .3em; }
.look-index [data-nav-target]:focus-visible { outline: .125em solid var(--index-accent-color); outline-offset: .3em; }
.look-index [data-index-hover]:focus-visible { outline: .125em solid var(--index-accent-color); outline-offset: .3em; }
.look-index :is([data-hidx-item], [data-nav-target], [data-index-hover]):focus-visible { outline: .125em solid var(--index-accent-color); outline-offset: .3em; }

/* the plate: the picture of the row in play wipes in over the last one (its frame comes to the front by its own
   ":chosen" style), and settles; the one it covers stays until the wipe is done */
.look-index [data-hidx-frame] { opacity: 0; transition: opacity .3s linear .8s; }
.look-index [data-hidx-frame].is-active {
    opacity: 1; transition: none;
    animation: look-index-wipe .8s cubic-bezier(.4, 0, .2, 1) both;
    animation: look-index-wipe .8s var(--ease, cubic-bezier(.2, .7, .15, 1)) both;
}
.look-index [data-hidx-frame].is-active img { animation: look-index-settle 1.44s cubic-bezier(.4, 0, .2, 1) both; animation: look-index-settle 1.44s var(--ease, cubic-bezier(.2, .7, .15, 1)) both; }
@keyframes look-index-wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes look-index-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
html.respect-reduced-motion .look-index :is(.is-active[data-hidx-frame] img) { animation: none; }
html.respect-reduced-motion .look-index .is-active[data-hidx-frame]:not(does-not-exist) { animation: none; }
html.respect-reduced-motion .look-index :is([data-hidx-frame].is-active, [data-hidx-frame].is-active img) { animation: none; }

/* a person pointed at or tapped comes to the front, so what it lifts or fans out covers the rows after it */
.look-index .plot:has(> [data-index-hover]:is(:hover, :focus-within)) { z-index: 3; }

/* blocks/look-long-read.css */
/* look: long-read (sites/_core/looks/long-read.json). The box's type size and colours, and what its knobs switch:
   the columns (--long-read-columns, read by the text's own style), the rule (--long-read-rule) and the big first letter
   (look-long-read--big | --plain). The kicker, title, byline, text, margin notes and footnotes are pieces styled as data
   on themselves. The two rules on the text's inner paragraphs stand in until a piece's style can reach them (see the
   component's report: a REQUEST). */

.look-long-read {
    --long-read-accent-color: var(--accent, #c2410c);
    --long-read-ink-color: var(--ink, #16140f);
    --long-read-muted-color: var(--muted, color-mix(in oklab, var(--long-read-ink-color) var(--muted-share, 70%), transparent));
    --long-read-rule-color: var(--long-read-rule, var(--rule, var(--line, color-mix(in oklab, var(--long-read-ink-color) 16%, transparent))));
    font-size: calc(1 * 1.125rem);
    font-size: calc(var(--long-read-type, 1) * var(--text-md, var(--fs-body, 1em)));
    color: #222;
    color: var(--long-read-ink-color);
}
/* a flow box nested in a lattice gets the page margin twice (the general fix waits for the owner): zero it here */
.plotgrid > .plot > .look-long-read { padding-left: 0; padding-right: 0; }

.look-long-read [data-type="text"] > p { margin: 0 0 1.1em; text-wrap: pretty; }
.look-long-read [data-type="text"] > p:last-child { margin-bottom: 0; }

.look-long-read--big [data-type="text"] > p:first-child { page-break-after: avoid; -moz-column-break-after: avoid; break-after: avoid; }
.look-long-read--big [data-type="text"] > p:first-child::first-letter {
    float: left; padding: .06em .12em 0 0;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, serif); font-weight: 600; font-size: 3.6em; line-height: .72;
    color: var(--long-read-accent-color);
}

/* blocks/look-note.css */
/* look: note (sites/_core/looks/note.json). The box only: its tint, hairline, coloured edge, corner, padding and type
   size. The icon, title and text are pieces styled as data on themselves, reading --note-accent-color /
   --note-on-accent-color / --note-text-color from here. Knobs: the kind (look-note--note | --tip | --warning | --danger |
   --info), --note-accent, --note-fill, --note-type. A site sets a kind's own colours with --callout-<kind>-bg /
   --callout-<kind>-accent / --callout-<kind>-text; without them each kind derives its tint and title colour from its
   accent. */

.look-note {
    --note-kind-accent: var(--callout-note-accent, var(--accent, #3b5bdb));
    --note-kind-fill: var(--callout-note-bg, var(--note-wash));
    --note-kind-text: var(--callout-note-text, var(--note-deep));
    --note-accent-color: var(--note-accent, var(--note-kind-accent));
    --note-wash: color-mix(in oklab, var(--note-accent-color) 10%, var(--paper, #fff));
    --note-deep: color-mix(in oklab, var(--note-accent-color) 72%, var(--ink, #16181d));
    --note-text-color: var(--note-kind-text);
    --note-on-accent-color: #fff;
    font-size: calc(1 * 1.125rem);
    font-size: calc(var(--note-type, 1) * var(--text-md, var(--fs-body, 1em)));
    color: #222;
    color: var(--ink, #16181d);
    background: rgb(229, 237, 240);
    background: color-mix(in oklab, #007b9a 10%, #fafafa);
    background: var(--note-fill, var(--note-kind-fill));
    border: 1px solid rgba(5, 5, 5, 0.14);
    border: 1px solid var(--line, rgba(4, 4, 4, 0.12));
    border-left: .19em solid #007b9a;
    border-left: .19em solid var(--note-accent-color);
    border-radius: 1vh;
    border-radius: var(--radius-md, var(--radius, .6em));
}

@supports (color: color-mix(in lch, red, blue)) {
.look-note {
    border: 1px solid var(--line, color-mix(in oklab, var(--ink, #16181d) 12%, transparent));
}
}
/* the box's own air (two classes: it outranks the lattice's page margin) */
.plotgrid.look-note { padding: .95em 1.15em; }

.look-note--tip { --note-kind-accent: var(--callout-tip-accent, #1f9d57); --note-kind-fill: var(--callout-tip-bg, var(--note-wash)); --note-kind-text: var(--callout-tip-text, var(--note-deep)); }
.look-note--warning { --note-kind-accent: var(--callout-warning-accent, #d89614); --note-kind-fill: var(--callout-warning-bg, var(--note-wash)); --note-kind-text: var(--callout-warning-text, var(--note-deep)); }
.look-note--danger { --note-kind-accent: var(--callout-danger-accent, #da3b36); --note-kind-fill: var(--callout-danger-bg, var(--note-wash)); --note-kind-text: var(--callout-danger-text, var(--note-deep)); }
.look-note--info { --note-kind-accent: var(--callout-info-accent, #7a4fe0); --note-kind-fill: var(--callout-info-bg, var(--note-wash)); --note-kind-text: var(--callout-info-text, var(--note-deep)); }

/* blocks/look-pagenav.css */
/* look: pagenav (sites/_core/looks/pagenav.json). The BOX a page navigator's stops sit in. It lays out the run of stops
   (the looper marked data-nav-track) and places the pointer (data-nav-pointer) from the numbers behaviors/pageNavigator.js
   writes; every piece (a tick, a name, a fill, the pointer's line and head) carries its own look in its props.style.

   Knobs: --pagenav-surface / --pagenav-ink / --pagenav-accent / --pagenav-length / --pagenav-fade / --pagenav-ticks /
   --pagenav-dim / --pagenav-type, and as BEM modifiers the style (--page, --panel, --dark), which way the stops run
   (--down, --across), their spacing (--fit, --even, --length) and what moves (--pointer, --stops). Pieces read
   --pagenav-ink-color, --pagenav-muted-color, --pagenav-line-color, --pagenav-accent-color and --pagenav-rest-color (a stop
   out of play), and from the behavior --stop-progress (on a stop) and --nav-at (on the box). */

/* a page of one part has nowhere to steer: a navigator on every page shows only where there are two stops or more */
.look-pagenav:not(:has([data-nav-target] ~ [data-nav-target])) { display: none; }
/* its empty band never catches a tap meant for what is under it (a corner button, a card); its stops and track do */
.look-pagenav { pointer-events: none; }
.look-pagenav a:not(.does-not-exist), .look-pagenav button:not(.does-not-exist), .look-pagenav [data-nav-track] { pointer-events: auto; }
.look-pagenav :is(a, button, [data-nav-track]) { pointer-events: auto; }
.look-pagenav {
    --pagenav-ink-kind: var(--ink, #16181d);
    --pagenav-surface-kind: transparent;
    --pagenav-room-kind: 0em;
}
/* a stop reading what is behind it (barInk on the track, inkAttr data-nav-ink) takes light or dark ink, and its shades
   are worked out again from it */
.look-pagenav [data-nav-ink="light"] { --pagenav-ink: var(--bar-ink-light, var(--invert-fg, #fff)); }
.look-pagenav [data-nav-ink="dark"] { --pagenav-ink: var(--bar-ink-dark, var(--ink, #16181d)); }
.look-pagenav, .look-pagenav [data-nav-ink] {
    --pagenav-ink-color: var(--pagenav-ink, var(--pagenav-ink-kind));
    --pagenav-accent-color: var(--pagenav-accent, var(--accent, #d4322a));
    --pagenav-muted-color: color-mix(in oklab, var(--pagenav-ink-color) var(--muted-share, 70%), transparent);
    --pagenav-line-color: color-mix(in oklab, var(--pagenav-ink-color) 30%, transparent);
    --pagenav-rest-color: color-mix(in oklab, var(--pagenav-ink-color) calc(100% - var(--pagenav-dim, 45) * 1%), transparent);
    --pagenav-fade-size: calc(var(--pagenav-fade, 0) * 1%);
    --pagenav-run: calc(var(--pagenav-length, 100) * 1%);
}
.look-pagenav {
    box-sizing: border-box;
    overflow: hidden;
    font-size: calc(1 * 1em);
    font-size: calc(var(--pagenav-type, 1) * 1em);
    color: var(--pagenav-ink-color);
    background: var(--pagenav-surface, var(--pagenav-surface-kind));
    padding: var(--pagenav-room-kind);
}
/* the run's edges fade on the run itself: a mask on the box would leave a layer of its own (a background blur) nothing
   behind it to blur */
.look-pagenav [data-nav-track] {
    -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--pagenav-fade-size), black calc(100% - var(--pagenav-fade-size)), transparent);
            mask-image: linear-gradient(to bottom, transparent, black var(--pagenav-fade-size), black calc(100% - var(--pagenav-fade-size)), transparent);
    -webkit-mask-image: linear-gradient(var(--pagenav-fade-to, to bottom), transparent, black var(--pagenav-fade-size), black calc(100% - var(--pagenav-fade-size)), transparent);
            mask-image: linear-gradient(var(--pagenav-fade-to, to bottom), transparent, black var(--pagenav-fade-size), black calc(100% - var(--pagenav-fade-size)), transparent);
}
.look-pagenav--across { --pagenav-fade-to: to right; }
.look-pagenav--panel {
    --pagenav-surface-kind: var(--card, var(--paper, #fff));
    --pagenav-room-kind: 1.2em;
    border-radius: 1vh;
    border-radius: var(--radius, .75em);
    box-shadow: 0 0 0 1px rgba(22, 22, 23, 0.09),
        0 1em 2.6em -1.4em rgba(7, 7, 7, 0.22);
}

@supports (color: color-mix(in lch, red, blue)) {
.look-pagenav--panel {
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--pagenav-ink-color) 9%, transparent),
        0 1em 2.6em -1.4em color-mix(in oklab, #222 22%, transparent);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--pagenav-ink-color) 9%, transparent),
        0 1em 2.6em -1.4em color-mix(in oklab, var(--ink, #16181d) 22%, transparent);
}
}
.look-pagenav--dark {
    --pagenav-surface-kind: var(--invert-bg, var(--ink, #16181d));
    --pagenav-ink-kind: var(--invert-fg, var(--paper, #fff));
    --pagenav-room-kind: 1.2em;
}

/* the track (data-nav-track) holds the looper of stops (data-nav-stops) and the pointer: the stops share its length,
   the pointer stands where the reader is along it */
.look-pagenav [data-nav-track] { position: relative; box-sizing: border-box; }
.look-pagenav--across [data-nav-track] { width: var(--pagenav-run); height: 100%; }
.look-pagenav--down:not(.look-pagenav--fit) [data-nav-track] { height: var(--pagenav-run); }
.look-pagenav [data-nav-stops] { display: flex; flex-direction: column; height: 100%; margin: 0; padding: 0; list-style: none; }
.look-pagenav--across [data-nav-stops] { flex-direction: row; }
.look-pagenav--fit [data-nav-stops] { height: auto; }
.look-pagenav [data-nav-target] { flex: none; min-width: 0; min-height: 0; color: inherit; -webkit-text-decoration: none; text-decoration: none; }
.look-pagenav--even [data-nav-target] { flex: 1 1 0; }
.look-pagenav--length [data-nav-target] { flex: 1 1 0; flex: var(--stop-share, 1) 1 0; }
.look-pagenav [data-nav-target]:focus-visible { outline: .125em solid var(--pagenav-accent-color); outline-offset: .2em; }
.look-pagenav [data-nav-pointer] { position: absolute; z-index: 2; pointer-events: none; }
.look-pagenav--across [data-nav-pointer] { top: 0; bottom: 0; left: calc(0 * 100%); left: calc(var(--nav-at, 0) * 100%); }
.look-pagenav--down [data-nav-pointer] { left: 0; right: 0; top: calc(0 * 100%); top: calc(var(--nav-at, 0) * 100%); }

/* the stops moving: the track slides so the reader's place along it stays in the middle of the box, under the pointer */
.look-pagenav--stops.look-pagenav--across [data-nav-track] { left: 50%; translate: calc(0 * -100%) 0; translate: calc(var(--nav-at, 0) * -100%) 0; }
.look-pagenav--stops.look-pagenav--down [data-nav-track] { top: 50%; translate: 0 calc(0 * -100%); translate: 0 calc(var(--nav-at, 0) * -100%); }

/* a run across too short for every name (a phone): only the stop in play keeps its name, the rest keep their ticks. The
   track's length is set by the box, never by what it holds, so it can be the container its names are measured in */
.look-pagenav--across [data-nav-track] { container: pagenav-track / inline-size; }
.look-pagenav [data-nav-target] > :not([aria-hidden]) { transition: opacity .3s; }
@container pagenav-track (width < 44em) {
    .look-pagenav [data-nav-target]:not([aria-current]) > :not([aria-hidden]) { opacity: 0; }
}
/* over a surface that asks for an ink (behaviors/barInk.js through pageNavigator), the navigator's ink is that one */
.look-pagenav[data-ink-on="light"] { --pagenav-ink: var(--bar-ink-light, var(--invert-fg, #fff)) !important; }
.look-pagenav[data-ink-on="dark"] { --pagenav-ink: var(--bar-ink-dark, var(--ink, #000)) !important; }

/* blocks/look-price-list.css */
/* look: price-list (sites/_core/looks/price-list.json). The LIST only: the colours its pieces read, the space between
   its rows, the size of its prices and of all its text. Every piece's type, surface and place live in the pieces' own
   style and plot, written with --price-list-accent-color, --price-list-on-accent-color, --price-list-ink-color,
   --price-list-muted-color, --price-list-line-color (the hairlines), --price-list-rule-color (the rule over the rows),
   --price-list-paper-color and --price-list-gap-size. Knobs arrive as --price-list-accent / --price-list-line /
   --price-list-gap / --price-list-price / --price-list-type. A looper's lines between its rows take the hairline. A piece
   pointed at, pressed, or in a row pointed at carries that in its own style (":hover", ":active", "@hover"). */

.look-price-list {
    --price-list-accent-color: var(--price-list-accent, var(--accent, #b3321d));
    --price-list-on-accent-color: var(--on-accent, var(--paper, #fff));
    --price-list-ink-color: var(--ink, currentColor);
    --price-list-muted-color: var(--muted, color-mix(in oklab, currentColor var(--muted-share, 70%), transparent));
    --price-list-line-color: var(--price-list-line, var(--line, color-mix(in oklab, currentColor 16%, transparent)));
    --price-list-rule-color: var(--price-list-line, var(--ink, currentColor));
    --price-list-paper-color: var(--paper, var(--page-bg, #fff));
    --price-list-gap-size: calc(var(--price-list-gap, 1) * 1em);
    --loop-line-color: var(--price-list-line-color);
    color: #222;
    color: var(--price-list-ink-color);
    font-size: calc(1 * 1em);
    font-size: calc(var(--price-list-type, 1) * 1em);
}

/* a row that has run out (its item's "Sold out" toggle: data-sold-out="{{soldOut}}") is struck through, still readable */
.look-price-list [data-sold-out="1"] {
    color: var(--price-list-muted-color);
    -webkit-text-decoration: line-through;
    text-decoration: line-through;
    text-decoration-thickness: from-font;
}

/* ── REQUESTS: what a box or a piece cannot say yet, until the primitive can ──────────────────────────────────── */

/* REQUEST: a flow box's own phone arrangement. On a phone every piece of a flow box goes full width; a row of a price
   list keeps its columns instead (the price beside its name), which the "On a phone" knob switches. Its lattice keeps its tracks too, or the
   pieces' columns land in tracks of no width (a dish's name one letter wide). */
.look-price-list--columns .flowgrid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-columns: repeat(var(--flow-columns, var(--grid-columns, 12)), minmax(0, 1fr)); }
.look-price-list--columns .flowgrid > .plot { grid-column: auto / span 1; grid-column: var(--plot-col, auto) / span var(--plot-w, 1); }

/* REQUEST: a piece's style in a state its behaviour writes as a class: an add button turns dark while its line is being
   added to the basket (cartDrawer's is-added), over its row's pointed-at fill (the button's own "@hover" style). */
.look-price-list .loop [data-cart-add][data-cart-add].is-added {
    background: var(--price-list-ink-color) !important; border-color: var(--price-list-ink-color) !important;
    color: var(--price-list-paper-color) !important;
}

html.respect-reduced-motion .look-price-list, html.respect-reduced-motion .look-price-list * { transition-duration: .01s !important; }

/* blocks/look-quote.css */
/* look: quote (sites/_core/looks/quote.json). The BOX only: its surface, edge, corners and room, and the type size
   every piece measures its em from. Each piece (the mark, the words, the person, the figure) carries its own type and
   colour in its style and reads the colours below: --quote-accent-color, --quote-ink-color, --quote-muted-color,
   --quote-line-color. Knobs arrive as --quote-surface / --quote-ink / --quote-accent / --quote-radius / --quote-room /
   --quote-type, the style as look-quote--<kind>. A style sets defaults (--quote-*-kind) the knobs override; the base
   rule states them too, so a quote inside a quote never inherits the outer one's.

   The text colour defaults to the colour around the box (currentColor), so a quote on a dark band reads without a
   setting; the quieter words, the lines and the soft tint are that colour, thinned. */

/* a quote is read: its type keeps the reading floor of a narrow tablet and a phone, in its own lattice too (a box in a
   box turns the floor off, render.php's .plotgrid > .plot > .plotgrid, so this rule outranks it) */
.look-quote, .plotgrid > .plot > .look-quote.plotgrid { --type-min: var(--type-floor, calc(0 * var(--pe-vw))); --type-min-in-box: var(--type-floor, calc(0 * var(--pe-vw))); }

/* .plotgrid: the lattice rule's own padding (inline in the page, later) must not win over the box's room */
.look-quote, .look-quote.plotgrid {
    --quote-accent-color: var(--quote-accent, var(--accent, #b4532a));
    --quote-ink-color: var(--quote-ink, currentColor);
    --quote-muted-color: color-mix(in oklab, var(--quote-ink-color) var(--muted-share, 70%), transparent);
    --quote-line-color: color-mix(in oklab, var(--quote-ink-color) 18%, transparent);
    --quote-surface-kind: color-mix(in oklab, var(--quote-ink-color) 5%, transparent);
    --quote-shadow-kind: 0 0 0 1px transparent;
    --quote-top-kind: 0;
    --quote-room-block-kind: 3em;
    --quote-room-inline-kind: 3.4em;
    --quote-room-top-kind: 3em;

    font-size: calc(1 * 1em);

    font-size: calc(var(--quote-type, 1) * 1em);
    color: currentColor;
    color: var(--quote-ink-color);
    background: color-mix(in oklab, currentColor 5%, transparent);
    background: var(--quote-surface, var(--quote-surface-kind));
    border-radius: calc(1 * 1vh * 2);
    border-radius: calc(var(--quote-radius, 1) * var(--radius, .75em) * 2);
    border-top: calc(0 * 1px) solid currentColor;
    border-top: calc(var(--quote-top-kind) * 1px) solid var(--quote-ink-color);
    box-shadow: 0 0 0 1px transparent;
    box-shadow: var(--quote-shadow-kind);
    /* the room follows the type, and never takes more than a share of a narrow box (a phone) */
    padding:
        calc(1 * min(3em, 8cqi))
        calc(1 * min(3.4em, 7cqi))
        calc(1 * min(3em, 8cqi));
    padding:
        calc(var(--quote-room, 1) * min(var(--quote-room-top-kind), 8cqi))
        calc(var(--quote-room, 1) * min(var(--quote-room-inline-kind), 7cqi))
        calc(var(--quote-room, 1) * min(var(--quote-room-block-kind), 8cqi));
    box-sizing: border-box;
}

/* a line across the top in the text colour, no fill, no room at the sides */
.look-quote--ruled, .look-quote--ruled.plotgrid {
    --quote-surface-kind: transparent;
    --quote-top-kind: 1;
    --quote-room-inline-kind: 0em;
    --quote-room-top-kind: 2.2em;
    --quote-room-block-kind: 2em;
    border-radius: 0;
}
/* the theme's paper with a faint edge */
.look-quote--plate, .look-quote--plate.plotgrid {
    --quote-surface-kind: var(--card, var(--paper, #fff));
    --quote-shadow-kind: 0 0 0 1px color-mix(in oklab, var(--quote-ink-color) 8%, transparent);
}
/* no fill and no line: the pieces with room above and below only */
.look-quote--plain, .look-quote--plain.plotgrid {
    --quote-surface-kind: transparent;
    --quote-room-inline-kind: 0em;
    --quote-room-top-kind: 2.2em;
    --quote-room-block-kind: 2em;
}

/* a quote box in a flow or a looper keeps its own room: the page margin a nested lattice inherits is not its own */
.plotgrid > .plot > .look-quote-set { padding-left: 0; padding-right: 0; }

/* blocks/look-rail.css */
/* look: rail (sites/_core/looks/rail.json). Only what the look's knobs expose and what its behaviours switch: the rail
   box (its ground, text colour, type), the pinned stage and the travelling track (shelfRail), the running band
   (shelfTicker), and the states the cart writes on a card (added, refused). Every piece is plotted on the
   rail's own lattice, or sits in a track, and carries its own look as data (props.style: font, size in em of the rail's
   type, colour, fill, padding, corners) that reads the variables below; no rule here gives a piece its type or surface
   by its role. A rule marked REQUEST is what a piece's style cannot say yet.

   Knobs arrive as --rail-ground / --rail-ink / --rail-accent / --rail-gap / --rail-corners / --rail-type. A preset
   states its own starting colours as --rail-ground-kind / --rail-ink-kind / --rail-accent-kind in its box's style, so a
   knob left empty falls back to the preset, then to the host theme.

   The colours and sizes a piece's style reads: --rail-ink-color, --rail-muted-color, --rail-accent-color,
   --rail-on-accent-color, --rail-ground-color, --rail-rule-color, --rail-corner, --rail-space (× a piece's own gap).

   Pinned (shelfRail): the box grows by the distance the track travels, the stage holds still for that long, and the
   track moves as you scroll; the behaviour writes data-rail (pinned | still), --rail-distance and --rail-progress
   (0 → 1), which the progress line (--p) and a fading head read. Still (the editor, a site that asks for calm, a
   track too short to travel), the track is a row you swipe. Running (shelfTicker): the band copies its items until it
   is covered twice and runs, pausing off screen, on hover and on focus. */

.look-rail {
    /* each rail states its defaults, so a rail inside a rail never inherits the outer one's */
    --rail-ground-kind: transparent;
    --rail-ink-kind: var(--ink, #1c1917);
    --rail-accent-kind: var(--accent, #bf3b25);
    --rail-ground-color: var(--rail-ground, var(--rail-ground-kind));
    --rail-ink-color: var(--rail-ink, var(--rail-ink-kind));
    --rail-muted-color: color-mix(in oklab, var(--rail-ink-color) 66%, transparent);
    --rail-rule-color: color-mix(in oklab, var(--rail-ink-color) 18%, transparent);
    --rail-accent-color: var(--rail-accent, var(--rail-accent-kind));
    --rail-on-accent-color: var(--on-accent, var(--paper, #fffdf8));
    --rail-corner: calc(var(--rail-corners, 1) * var(--radius, .6em));
    --rail-space: var(--rail-gap, 1);
    font-size: calc(1 * max(1em, 1.05cqi));
    font-size: calc(var(--rail-type, 1) * max(1em, 1.05cqi));
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif);
    line-height: 1.45;
    color: #222;
    color: var(--rail-ink-color);
    background: transparent;
    background: var(--rail-ground-color);
}

/* a rail laid out as a flow box (a swipe row) gets the page margin a nested flow inherits: its edges are its plot's */
.plotgrid > .plot > .look-rail.flowgrid { padding-left: 0; padding-right: 0; }

/* ── Pinned: the box is as tall as the screen plus the travel; its stage holds still while the track travels. Still
   (the editor, a preview, a site that asks for calm, a track too short to travel) it is one screen tall, the same stage
   without the travel, so a phone or a tablet never squeezes it to its desktop proportion ── */
.look-rail.look-rail[data-rail] { width: 100%; height: calc(100svh - 0svh + 0svh); height: calc(100svh - var(--rail-top, 0svh) + var(--rail-distance, 0svh)); }   /* both sizes set: its lattice's proportion no longer applies */
.look-rail.look-rail[data-rail="still"] { --rail-distance: 0svh; }
.look-rail[data-rail="pinned"] > .plot { position: sticky; top: 0svh; top: var(--rail-top, 0svh); height: calc(100svh - 0svh); height: calc(100svh - var(--rail-top, 0svh)); align-self: start; }
.look-rail[data-rail="pinned"] [data-rail-stage] { overflow: clip; overflow-clip-margin: var(--page-margin, calc(0 * var(--pe-vw))); }   /* the cards run on into the page margin */
.look-rail[data-rail="pinned"] [data-rail-track] { will-change: transform; }
/* still (and a swipe row, which never pins): a row you swipe, each card coming to rest at the start */
.look-rail:not([data-rail="pinned"]) [data-rail-track] { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; }
.look-rail:not([data-rail="pinned"]) [data-rail-track] > * { scroll-snap-align: start; }
.look-rail [data-rail-track]::-webkit-scrollbar { display: none; }

/* ── Running: the band travels one copy of its items to the left (or the right) forever ─────────────────── */
@keyframes look-rail-run { to { translate: calc(-1 * 50%) 0; translate: calc(-1 * var(--ticker-distance, 50%)) 0; } }
/* the band that runs is the rail itself or a band inside it (two bands each run on their own) */
.look-rail[data-ticker="running"] [data-ticker-track], .look-rail[data-ticker="paused"] [data-ticker-track], .look-rail [data-ticker="running"] [data-ticker-track], .look-rail [data-ticker="paused"] [data-ticker-track] { animation: look-rail-run 40s linear infinite; animation: look-rail-run var(--ticker-duration, 40s) linear infinite; will-change: translate; }
.look-rail:is([data-ticker="running"], [data-ticker="paused"]) [data-ticker-track],
.look-rail :is([data-ticker="running"], [data-ticker="paused"]) [data-ticker-track] { animation: look-rail-run 40s linear infinite; animation: look-rail-run var(--ticker-duration, 40s) linear infinite; will-change: translate; }
.look-rail [data-ticker-track][data-direction="right"] { animation-direction: reverse; }
.look-rail:focus-within [data-ticker-track] { animation-play-state: paused; }
.look-rail[data-ticker="paused"] [data-ticker-track], .look-rail:hover [data-ticker-track], .look-rail [data-ticker="paused"] [data-ticker-track] { animation-play-state: paused; }
.look-rail:is([data-ticker="paused"], :hover, :focus-within) [data-ticker-track],
.look-rail [data-ticker="paused"] [data-ticker-track] { animation-play-state: paused; }

/* ── On hover: a card's picture comes a little closer ─────────────────────────────────────────────────────── */
.look-rail [data-rail-track] > * .imagesingle img, .look-rail [data-ticker-track] > * .imagesingle img { transition: scale 1.1s cubic-bezier(.16, 1, .3, 1), filter .4s ease, opacity .4s ease; transition: scale 1.1s var(--ease-out, cubic-bezier(.16, 1, .3, 1)), filter .4s ease, opacity .4s ease; }
.look-rail :is([data-rail-track], [data-ticker-track]) > * .imagesingle img { transition: scale 1.1s cubic-bezier(.16, 1, .3, 1), filter .4s ease, opacity .4s ease; transition: scale 1.1s var(--ease-out, cubic-bezier(.16, 1, .3, 1)), filter .4s ease, opacity .4s ease; }
.look-rail [data-rail-track] > :hover .imagesingle img { scale: 1.05; }

/* ── The cart's states on an add button (cartDrawer flashes "added" / "refused" as its data-state). Pointed at, pressed,
   added (its plus gives way to its tick through --rail-plus-shown / --rail-tick-shown), refused, and a sold-out card's
   grey photograph, name and button are the pieces' own styles: they read --rail-photo-<stock> / --rail-name-<stock> /
   --rail-add-<stock> / --rail-turn-<stock> …, which the track's style sets for "out". A refused button shakes by this: */
@keyframes look-rail-no { 25% { translate: -.2em 0; } 50% { translate: .2em 0; } 75% { translate: -.1em 0; } }

html.respect-reduced-motion .look-rail :is([data-rail-track] > *) { transition: none !important; }

html.respect-reduced-motion .look-rail :is([data-rail-track] > * *) { transition: none !important; }

html.respect-reduced-motion .look-rail :is([data-rail-track] > *, [data-rail-track] > * *) { transition: none !important; }

/* blocks/look-section.css */
/* look: section (sites/_core/looks/section.json). A wide piece across the page: a first screen, a closing call, a
   sign-up, a footer, a board of tiles. Only what the look's knobs expose: the ground (its colour, corners and the room
   inside it, restated by each Style), the colours its pieces read, and the size of its running text. Every piece is
   plotted on the section's own lattice and carries its own look as data (props.style: font, size, colour, fill,
   corners), so the pane shows and edits it; no rule here gives a piece its type or surface by its role.

   Knobs arrive as --section-surface / --section-ink / --section-accent / --section-radius / --section-inset /
   --section-type / --section-title-size, plus the Style as a BEM modifier (look-section--dark …). An empty knob falls
   back to the Style's own value, then the host theme's token.

   What a piece's style reads, which each Style restates: --section-ink-color, --section-muted-color,
   --section-accent-color, --section-on-accent-color, --section-surface-color, --section-rule-color,
   --section-corner; a filled button --section-button-fill / --section-button-ink; the room inside the ground
   --section-pad (the box's own style reads it). Running text sizes in em of the site's body size (this box's
   font-size); a headline in cqi of its own plot times --section-title-size, so it fills the columns it is given. */

.look-section {
    --section-ink-color: var(--section-ink, var(--ink, #16181d));
    --section-surface-color: var(--section-surface, transparent);
    --section-accent-color: var(--section-accent, var(--accent, #3b5bdb));
    --section-on-accent-color: var(--on-accent, var(--accent-ink, #fff));
    --section-muted-color: color-mix(in oklab, var(--section-ink-color) var(--muted-share, 70%), transparent);
    --section-rule-color: color-mix(in oklab, var(--section-ink-color) 16%, transparent);
    --section-corner: calc(var(--section-radius, 1) * var(--radius, .75em));
    --section-button-fill: var(--section-accent-color); --section-button-ink: var(--section-on-accent-color);
    /* each section states its style's defaults, so a section inside a section never inherits the outer one's */
    --section-inset-kind: 0;
    --section-pad: calc(var(--section-inset, var(--section-inset-kind)) * 4cqi);
    --section-ease: var(--ease-out, cubic-bezier(.2, .7, .2, 1));

    font-size: calc(1 * 1.125rem);

    font-size: calc(var(--section-type, 1) * var(--text-md, var(--fs-body, calc(1.15 * var(--pe-vw)))));
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif);
    line-height: 1.5;
    color: #222;
    color: var(--section-ink-color);
    background: transparent;
    background: var(--section-surface-color);
    border-radius: calc(1 * 1vh);
    border-radius: var(--section-corner);
}

/* ── Styles: each one restates the ground and the colours its pieces read ─────────────────────────────── */
.look-section--panel {
    --section-surface-color: var(--section-surface, var(--card, var(--paper, #fff)));
    --section-inset-kind: 1;
    box-shadow: 0 0 0 1px var(--section-rule-color);
}
.look-section--tint {
    --section-surface-color: var(--section-surface, var(--surface, color-mix(in oklab, var(--section-ink-color) 5%, var(--paper, #fff))));
    --section-inset-kind: 1;
}
.look-section--dark {
    --section-ink-color: var(--section-ink, var(--invert-fg, #f4f6fb));
    --section-surface-color: var(--section-surface, var(--invert-bg, #0d0f14));
    --section-inset-kind: 1;
    /* on the dark ground the main button is light */
    --section-button-fill: var(--section-ink-color); --section-button-ink: var(--section-surface-color);
}
.look-section--accent {
    --section-surface-color: var(--section-surface, var(--section-accent, var(--accent, #3b5bdb)));
    --section-ink-color: var(--section-ink, var(--on-accent, var(--accent-ink, #fff)));
    /* on the accent the coloured word takes the theme's second colour, and the main button turns light */
    --section-accent-color: var(--accent-2, var(--section-ink-color));
    --section-inset-kind: 1;
    --section-button-fill: var(--section-ink-color); --section-button-ink: var(--section-surface-color);
}

/* a section is the ground of its own lattice: its pieces are what is plotted, the box does not clip them unless it
   has a ground */
.look-section.look-section--panel, .look-section.look-section--tint, .look-section.look-section--dark, .look-section.look-section--accent { overflow: clip; overflow-clip-margin: 0; }
.look-section:is(.look-section--panel, .look-section--tint, .look-section--dark, .look-section--accent) { overflow: clip; overflow-clip-margin: 0; }

.look-section :focus-visible { outline: .14em solid var(--section-accent-color); outline-offset: .14em; }

/* a flow box inside a plotted cell (a looper of columns or tiles) takes no page margin of its own: render.php restates
   the page margin on every .flowgrid and .loop (the card's request) */
.plotgrid > .plot > .flowgrid.look-section, .plotgrid > .plot > .look-section-set:not(.does-not-exist) { padding-left: 0; padding-right: 0; }
.plotgrid > .plot > :is(.flowgrid.look-section, .look-section-set) { padding-left: 0; padding-right: 0; }

/* blocks/look-sentence.css */
/* look: sentence (sites/_core/looks/sentence.json). One sentence with pictures set into its line: a looper over its
   own boxes, each box a part (a picture and some words, or only words) that never breaks across lines. Every piece is
   styled as data on itself; this file carries the sentence's size (--sentence-type), the pictures' shape
   (look-sentence--pill | --frame | --round → --sentence-picture-w / -h / -radius, read by each picture's style) and
   the reveal (look-sentence--light: CSS scroll-driven, no script, reversible; each part a step after the one before). */

.look-sentence {
    --sentence-picture-w: 1.75em;
    --sentence-picture-h: .78em;
    --sentence-picture-radius: 99em;
    font-size: calc(1 * 4.6cqi);
    font-size: calc(var(--sentence-type, 1) * var(--text-xl, 4.6cqi));
}
/* a looper nested in a lattice gets the page margin twice (the general fix waits for the owner): zero it here */
.plotgrid > .plot > .look-sentence { padding-left: 0; padding-right: 0; }

.look-sentence--frame { --sentence-picture-w: 1.3em; --sentence-picture-h: .86em; --sentence-picture-radius: .06em; }
.look-sentence--round { --sentence-picture-w: .9em; --sentence-picture-h: .9em; }

.look-sentence--light > * {
    animation: sentence-light linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 30%;
}
.look-sentence--light .imagesingle {
    animation: sentence-open linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 34%;
}
/* each part lights a little after the one before: plain ranges per part, which the Firefox scroll-timeline polyfill
   can parse (it cannot read a calc() with a var() in a range) */
.look-sentence--light > :nth-child(2) { animation-range: entry 24% cover 34%; }
.look-sentence--light > :nth-child(2) .imagesingle { animation-range: entry 24% cover 38%; }
.look-sentence--light > :nth-child(3) { animation-range: entry 28% cover 38%; }
.look-sentence--light > :nth-child(3) .imagesingle { animation-range: entry 28% cover 42%; }
.look-sentence--light > :nth-child(4) { animation-range: entry 32% cover 42%; }
.look-sentence--light > :nth-child(4) .imagesingle { animation-range: entry 32% cover 46%; }
.look-sentence--light > :nth-child(5) { animation-range: entry 36% cover 46%; }
.look-sentence--light > :nth-child(5) .imagesingle { animation-range: entry 36% cover 50%; }
.look-sentence--light > :nth-child(6) { animation-range: entry 40% cover 50%; }
.look-sentence--light > :nth-child(6) .imagesingle { animation-range: entry 40% cover 54%; }
.look-sentence--light > :nth-child(7) { animation-range: entry 44% cover 54%; }
.look-sentence--light > :nth-child(7) .imagesingle { animation-range: entry 44% cover 58%; }
.look-sentence--light > :nth-child(8) { animation-range: entry 48% cover 58%; }
.look-sentence--light > :nth-child(8) .imagesingle { animation-range: entry 48% cover 62%; }
.look-sentence--light .imagesingle img { animation: sentence-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
@keyframes sentence-light { from { opacity: .14; transform: translateY(.18em); } to { opacity: 1; transform: none; } }
@keyframes sentence-open { from { clip-path: inset(0 50% 0 50% round var(--sentence-picture-radius)); } to { clip-path: inset(0 0 0 0 round var(--sentence-picture-radius)); } }
@keyframes sentence-settle { from { transform: scale(1.4); } to { transform: scale(1); } }

/* blocks/look-shop.css */
/* look: shop (sites/_core/looks/shop.json). The box a product, a basket or a buy bar sits in: its surface, corners and
   lift, the ground behind the product's picture and the colours its pieces read. LOOK only: every piece is plotted on its
   box's own lattice and carries its own type and surface in props.style, so this file never places, sizes or types a
   piece. The box's type size and inset are data on the box too (font-size in cqi × --shop-type, padding × --shop-inset-kind).

   Knobs: --shop-surface / --shop-ink / --shop-accent / --shop-plate / --shop-radius / --shop-lift / --shop-type, and the
   style as a BEM modifier (look-shop--panel …). An empty knob falls back to the style's own value, then the theme's token.
   Pieces read --shop-ink-color, --shop-muted-color, --shop-line-color, --shop-rule-color, --shop-accent-color,
   --shop-on-accent-color, --shop-well-color, --shop-plate-color, --shop-corner, the stock colours --shop-<stock>-color and
   the state numbers --shop-chosen / --shop-hover (0 or 1, set below). */

.look-shop {
    --shop-accent-color: var(--shop-accent, var(--accent, #3b5bdb));
    --shop-on-accent-color: var(--on-accent, var(--accent-ink, #fff));
    --shop-ink-color: var(--shop-ink, var(--ink, #16181d));
    --shop-surface-color: var(--shop-surface, transparent);
    --shop-paper-color: var(--paper, #fff);
    --shop-muted-color: color-mix(in oklab, var(--shop-ink-color) var(--muted-share, 70%), transparent);
    --shop-line-color: color-mix(in oklab, var(--shop-ink-color) 15%, transparent);
    --shop-rule-color: color-mix(in oklab, var(--shop-ink-color) 40%, transparent);
    --shop-well-color: color-mix(in oklab, var(--shop-ink-color) 7%, transparent);
    --shop-plate-color: var(--shop-plate, color-mix(in oklab, var(--shop-accent-color) 18%, var(--shop-paper-color)));
    --shop-corner: calc(var(--shop-radius, 1) * var(--radius, .75em));
    --shop-shadow-ink: var(--ink, #16181d);
    /* the stock line of a size: low in the accent, gone struck through (a piece reads var(--shop-{{stock}}-color, …)) */
    --shop-low-color: var(--shop-accent-color);
    --shop-out-color: color-mix(in oklab, var(--shop-ink-color) 45%, transparent);
    --shop-out-strike: line-through;
    /* each box states its style's defaults, so a shop inside a shop never inherits the outer one's */
    --shop-panel-on: 0; --shop-lift-kind: 0; --shop-inset-kind: 0;
    --shop-depth: calc(var(--shop-lift, var(--shop-lift-kind)) * var(--shop-panel-on));

    color: #222;

    color: var(--shop-ink-color);
    background: transparent;
    background: var(--shop-surface-color);
    border-radius: calc(1 * 1vh);
    border-radius: var(--shop-corner);
    box-shadow:
        0 calc((0 * 0) * .05em) calc((0 * 0) * .16em) rgba(0, 0, 0, 0),
        0 calc((0 * 0) * .8em) calc((0 * 0) * 2em) calc((0 * 0) * -.6em) rgba(0, 0, 0, 0);
    box-shadow:
        0 calc(calc(0 * 0) * .05em) calc(calc(0 * 0) * .16em) rgba(0, 0, 0, 0),
        0 calc(calc(0 * 0) * .8em) calc(calc(0 * 0) * 2em) calc(calc(0 * 0) * -.6em) rgba(0, 0, 0, 0);
    box-shadow:
        0 calc(calc(0 * 0) * .05em) calc(calc(0 * 0) * .16em) color-mix(in oklab, #222 calc(calc(0 * 0) * 5%), transparent),
        0 calc(calc(0 * 0) * .8em) calc(calc(0 * 0) * 2em) calc(calc(0 * 0) * -.6em) color-mix(in oklab, #222 calc(calc(0 * 0) * 16%), transparent);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif);
    font-feature-settings: "lnum";
    font-variant-numeric: lining-nums;
}

@supports (color: color-mix(in lch, red, blue)) {
.look-shop {
    box-shadow:
        0 calc(var(--shop-depth) * .05em) calc(var(--shop-depth) * .16em) color-mix(in oklab, var(--shop-shadow-ink) calc(var(--shop-depth) * 5%), transparent),
        0 calc(var(--shop-depth) * .8em) calc(var(--shop-depth) * 2em) calc(var(--shop-depth) * -.6em) color-mix(in oklab, var(--shop-shadow-ink) calc(var(--shop-depth) * 16%), transparent);
}
}

.look-shop--panel {
    --shop-surface-color: var(--shop-surface, var(--card, var(--paper, #fff)));
    --shop-panel-on: 1; --shop-lift-kind: 1; --shop-inset-kind: 1;
}
.look-shop--tinted {
    --shop-surface-color: var(--shop-surface, var(--surface, color-mix(in oklab, var(--shop-ink-color) 5%, var(--paper, #fff))));
    --shop-plate-color: var(--shop-plate, var(--shop-paper-color));
    --shop-panel-on: 1; --shop-inset-kind: 1;
}
.look-shop--dark {
    --shop-surface-color: var(--shop-surface, var(--invert-bg, var(--ink, #16181d)));
    --shop-ink-color: var(--shop-ink, var(--invert-fg, var(--paper, #fff)));
    --shop-paper-color: var(--invert-bg, var(--ink, #16181d));
    --shop-muted-color: color-mix(in oklab, var(--shop-ink-color) 70%, transparent);
    --shop-line-color: color-mix(in oklab, var(--shop-ink-color) 22%, transparent);
    --shop-well-color: color-mix(in oklab, var(--shop-ink-color) 10%, transparent);
    --shop-plate-color: var(--shop-plate, color-mix(in oklab, var(--shop-accent-color) 30%, var(--shop-surface-color)));
    --shop-shadow-ink: #000;
    --shop-panel-on: 1; --shop-inset-kind: 1;
}

/* The order is delivered or picked up (knob fulfilment, a basket's setting): a piece marked data-fulfil shows only in its
   own way, with its cell, so a flow closes up; cartDrawer turns off the other way's fields so they never block the order.
   (!important: a piece's inline display.) */
.look-shop--delivery [data-fulfil="pickup"], .look-shop--pickup [data-fulfil="delivery"] { display: none !important; }
.look-shop--delivery .plot:has(> [data-fulfil="pickup"]), .look-shop--pickup .plot:has(> [data-fulfil="delivery"]) { display: none !important; }

/* a looper or flow box nested in a lattice gets the page margin again (render.php restates it on every .flowgrid); a
   box's own inset is its padding (data), so the margin is zeroed here until the general fix lands */
.plotgrid > .plot > .look-shop.flowgrid,
.look-shop.plotgrid > .plot > .flowgrid,
.look-shop .plotgrid > .plot > .flowgrid { padding-left: 0; padding-right: 0; }

/* ── states a piece reads as numbers (0 / 1) in its own style ─────────────────────────────────────────────────────
   REQUEST: styles when its box is pointed at or chosen (a size box, a pickup time, the buy button). The pieces' own
   ":hover" / "@chosen" styles cannot take these over yet: a basket line and a pickup time are clones of a blueprint
   (cartDrawer drops their uid, which a state style is keyed on), a size box is chosen by the radio inside it
   (label:has(input:checked)) and an add button by cartDrawer's is-added. */
.look-shop label:hover, .look-shop button:hover, .look-shop a:hover, .look-shop label:has(input:focus-visible) { --shop-hover: 1; }
.look-shop :is(label, button, a):hover, .look-shop label:has(input:focus-visible) { --shop-hover: 1; }
.look-shop label:has(input:checked), .look-shop .is-added { --shop-chosen: 1; }
.look-shop label:has(input:focus-visible) { outline: .125em solid var(--shop-accent-color); outline-offset: .2em; }

/* REQUEST: a piece that stays in view while its box scrolls past (sticky). Stopgap: attrs data-stays on the piece, and
   its cell sticks while the box is wider than a phone. */
.look-shop.plotgrid > .plot:has(> [data-stays]) { position: sticky; top: 6.5em; align-self: start; }
@container (width < 48em) { .look-shop.plotgrid > .plot:has(> [data-stays]) { position: static; } }

/* ── pinned to the screen: the drawer, its scrim, the buy bar ─────────────────────────────────────────────────────
   REQUEST: a box pinned to the screen (a side, the bottom edge, the whole screen), drawn outside every cell so no
   cell's containment or stacking context traps it, shown while its box's behaviour holds it open (cartDrawer: is-open)
   or once the page has scrolled (buyBar: is-shown), sliding in from its edge. Stopgap: attrs data-pinned = right |
   bottom | cover; the cell holding it gives up its containment (a contained cell is the fixed box's containing block).
   In a component's own preview (body.pv, nothing to scroll) the buy bar sits in its cell, where it can be seen and picked. */
.plot:has(> [data-pinned]), .plot:has(> .look-shop > [data-pinned]) { container-type: normal; z-index: 900 !important; }
.look-shop[data-pinned], .look-shop > [data-pinned] { position: fixed; z-index: 900 !important; }
/* on the live page the behaviour lifts a pinned piece into the top layer (pe.util.pinToScreen, blocks/pinned.css) */
/* the page's scrolling content is a stacking context of its own (#smooth-wrapper), under the site's top bar: while a
   basket is open (cartDrawer writes pe-cart-open on the page) it rises over the bar, so the drawer and its shade cover
   the bar too and the drawer's close button can be reached */
html.pe-cart-open #smooth-wrapper { z-index: 1000; }
.look-shop > [data-pinned="cover"] {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.look-shop > [data-pinned="right"] {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto; translate: 104% 0; visibility: hidden;
    transition: translate .5s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .5s;
}
/* open: by its behaviour (is-open), or shown open in the studio (its State row's "open" writes data-state) */
.look-shop.is-open > [data-pinned="cover"], .look-shop[data-state="open"] > [data-pinned="cover"] { opacity: 1; pointer-events: auto; }
:is(.look-shop.is-open, .look-shop[data-state="open"]) > [data-pinned="cover"] { opacity: 1; pointer-events: auto; }
.look-shop.is-open > [data-pinned="right"], .look-shop[data-state="open"] > [data-pinned="right"] { translate: 0 0; visibility: visible; transition: translate .5s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
:is(.look-shop.is-open, .look-shop[data-state="open"]) > [data-pinned="right"] { translate: 0 0; visibility: visible; transition: translate .5s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.look-shop[data-pinned="bottom"] {
    bottom: 2.2vh; left: 50%; translate: -50% 140%; opacity: 0; visibility: hidden;
    transition: opacity .4s cubic-bezier(.2, .7, .2, 1), translate .5s cubic-bezier(.2, .7, .2, 1), visibility .4s;
}
.look-shop[data-pinned="bottom"].is-shown { translate: -50% 0; opacity: 1; visibility: visible; }
.pv .look-shop[data-pinned="bottom"] { position: relative; left: auto; bottom: auto; translate: none; opacity: 1; visibility: visible; }
/* REQUEST: a style per tier (the buy bar spans the phone's width, its name left and its button right) */
@media (max-width: 39.999em) { .look-shop[data-pinned="bottom"] { width: calc(94 * var(--pe-vw)); justify-content: space-between; } }

/* REQUEST: a reveal a behaviour plays (the badge pops on every add) and a box's steps that slide as its behaviour moves
   on (basket → delivery details). Stopgap: the cart's is-empty / is-popped / is-checkout on the drawer. */
.look-shop [data-cart-count] { transition: opacity .25s ease, scale .25s ease; }
.look-shop.is-empty [data-cart-count] { opacity: 0; scale: .4; }
.look-shop.is-popped [data-cart-count] { animation: look-shop-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes look-shop-pop { 40% { scale: 1.35; } }
.look-shop .plot:has(> [data-cart-step]) { pointer-events: none; }
.look-shop [data-cart-step] { pointer-events: auto; transition: translate .45s cubic-bezier(.2, .8, .2, 1), opacity .3s ease; }
.look-shop [data-cart-step="checkout"] { translate: 100% 0; opacity: 0; visibility: hidden; }
.look-shop.is-checkout [data-cart-step="basket"] { translate: -24% 0; opacity: 0; pointer-events: none; }
.look-shop.is-checkout [data-cart-step="checkout"] { translate: 0 0; opacity: 1; visibility: visible; }
/* REQUEST: a meter that eases to a new value when its figure changes (the free-delivery bar as the basket fills). */
.look-shop [data-cart-progress] .meter-fill { transition: width .6s cubic-bezier(.2, .8, .2, 1); }
/* REQUEST (field): a number field without the browser's own arrows, for one flanked by − and + buttons (WebKit keeps
   them under appearance: textfield, which the quantity field sets in its style.control) */
.look-shop input[type="number"]::-webkit-inner-spin-button, .look-shop input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* REQUEST: a picture piece a behaviour fills (a basket line's thumbnail is written by cartDrawer as an <img>). */
.look-shop [data-line="image"] img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
html.respect-reduced-motion .look-shop [data-pinned], html.respect-reduced-motion .look-shop[data-pinned],
html.respect-reduced-motion .look-shop [data-cart-step], html.respect-reduced-motion .look-shop [data-cart-progress] .meter-fill { transition-duration: .01s; }
html.respect-reduced-motion .look-shop.is-popped [data-cart-count] { animation: none; }

/* blocks/look-showcase.css */
/* look: showcase (sites/_core/looks/showcase.json). The GROUND one screenshot, clip or picture stands on, and the dress
   the window or frame on it reads. LOOK only: every piece (the window, its bar and address, the picture, a pin, a note, a
   play button, a caption) is plotted on its box's lattice and carries its own type and surface in its props.style,
   reading the colours below; this file never places, sizes or types one.

   Knobs: --showcase-surface / --showcase-ink / --showcase-accent / --showcase-radius / --showcase-lift / --showcase-type,
   the ground as a BEM modifier (look-showcase--stage, --tinted, --dark, --bare). Pieces read --showcase-ink-color,
   --showcase-muted-color, --showcase-line-color, --showcase-accent-color, --showcase-on-accent-color,
   --showcase-radius-size, --showcase-shadow (the window's or frame's lift), --showcase-window-color and
   --showcase-chrome-color (a window's body and bar, in the theme's card colours whatever the ground).

   States: annotatedShot marks a pin is-active / is-dim and flips its note by data-edge / data-vedge; videoPlayer writes
   vp-playing / vp-unmuted on its box. */

.look-showcase, .look-showcase.plotgrid {
    --showcase-surface-kind: transparent;
    --showcase-ink-kind: var(--ink, #16181d);
    --showcase-lift-kind: 1;
    --showcase-ground-round-kind: 0;
    --showcase-ink-color: var(--showcase-ink, var(--showcase-ink-kind));
    --showcase-muted-color: color-mix(in oklab, var(--showcase-ink-color) var(--muted-share, 70%), transparent);
    --showcase-line-color: color-mix(in oklab, var(--showcase-ink-color) 16%, transparent);
    --showcase-accent-color: var(--showcase-accent, var(--accent, #3b5bdb));
    --showcase-on-accent-color: var(--on-accent, var(--accent-ink, #fff));
    --showcase-ground-color: var(--showcase-surface, var(--showcase-surface-kind));
    --showcase-radius-size: calc(var(--showcase-radius, 1) * var(--radius, .75em));
    --showcase-shadow-ink: var(--ink, #16181d);
    --showcase-depth: var(--showcase-lift, var(--showcase-lift-kind));
    --showcase-shadow:
        0 calc(var(--showcase-depth) * .08em) calc(var(--showcase-depth) * .25em) color-mix(in oklab, var(--showcase-shadow-ink) calc(var(--showcase-depth) * 7%), transparent),
        0 calc(var(--showcase-depth) * 1.6em) calc(var(--showcase-depth) * 3.4em) calc(var(--showcase-depth) * -1em) color-mix(in oklab, var(--showcase-shadow-ink) calc(var(--showcase-depth) * 26%), transparent);
    --showcase-window-color: var(--card, var(--paper, #fff));
    --showcase-window-ink: var(--ink, #16181d);
    --showcase-chrome-color: color-mix(in oklab, var(--showcase-window-color) 92%, var(--showcase-window-ink));

    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    padding: 0;   /* a lattice's page margin never reaches a box dropped on the page (brief §6) */
    font-size: calc(1 * 1em);
    font-size: calc(var(--showcase-type, 1) * 1em);
    color: #222;
    color: var(--showcase-ink-color);
    background: transparent;
    background: var(--showcase-ground-color);
    border-radius: calc(0 * (1 * 1vh) * 1.6);
    border-radius: calc(0 * calc(1 * 1vh) * 1.6);
    border-radius: calc(var(--showcase-ground-round-kind) * var(--showcase-radius-size) * 1.6);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif);
}
/* the accent as a field, lit from below, with the box's own columns drawn faintly on it and fading down */
.look-showcase--stage, .look-showcase--stage.plotgrid {
    --showcase-surface-kind: var(--showcase-accent-color);
    --showcase-ink-kind: var(--on-accent, var(--accent-ink, #fff));
    --showcase-ground-round-kind: 1;
    overflow: hidden;
    background:
        radial-gradient(70% 60% at 50% 104%, rgba(87, 87, 87, 0.34), transparent 72%),
        radial-gradient(120% 90% at 50% -10%, rgba(0, 0, 0, 0.22), transparent 70%),
        var(--showcase-ground-color);
}

@supports (color: color-mix(in lch, red, blue)) {
.look-showcase--stage, .look-showcase--stage.plotgrid {
    background:
        radial-gradient(70% 60% at 50% 104%, color-mix(in oklab, var(--showcase-ground-color), #fff 34%), transparent 72%),
        radial-gradient(120% 90% at 50% -10%, color-mix(in oklab, var(--showcase-ground-color), #000 22%), transparent 70%),
        var(--showcase-ground-color);
}
}
.look-showcase--stage::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to right, rgba(5, 5, 5, 0.14) 1px, transparent 1px) 0 0 / calc(100% / 12) 100%;
            -webkit-mask-image: linear-gradient(#000, transparent 78%);
                    mask-image: linear-gradient(#000, transparent 78%);
}

@supports (color: color-mix(in lch, red, blue)) {
.look-showcase--stage::before {
    background: linear-gradient(to right, color-mix(in oklab, var(--showcase-ink-color) 14%, transparent) 1px, transparent 1px) 0 0 / calc(100% / 12) 100%;
}
}
.look-showcase--tinted, .look-showcase--tinted.plotgrid {
    --showcase-surface-kind: color-mix(in oklab, var(--showcase-accent-color) 9%, var(--paper, #fff));
    --showcase-ground-round-kind: 1;
    --showcase-lift-kind: .75;
    overflow: hidden;
}
.look-showcase--dark, .look-showcase--dark.plotgrid {
    --showcase-surface-kind: var(--invert-bg, var(--ink, #16181d));
    --showcase-ink-kind: var(--invert-fg, var(--paper, #fff));
    --showcase-shadow-ink: #000;
    --showcase-ground-round-kind: 1;
    overflow: hidden;
}
.look-showcase--bare, .look-showcase--bare.plotgrid { --showcase-surface-kind: transparent; }

/* a nested looper or flow box gets the page margin twice (brief §6) */
.look-showcase:not(.does-not-exist) > .plot > .flowgrid, .look-showcase .plotgrid > .plot > .flowgrid { padding-left: 0; padding-right: 0; }
:is(.look-showcase, .look-showcase .plotgrid) > .plot > .flowgrid { padding-left: 0; padding-right: 0; }

/* ── pins with notes (annotatedShot) ─────────────────────────────────────────────────────────────────────────────── */
/* pointing at a pin or its row lifts it and dims the others; a pin keeps a slow pulse until one is pointed at */
.look-showcase [data-pin] { cursor: pointer; transition: opacity .25s ease; -webkit-tap-highlight-color: transparent; }
.look-showcase [data-pin].is-dim { opacity: .35; }
.look-showcase .plot:has(> [data-pin]:is( .is-active,:hover, :focus-visible)) { z-index: 5; }
.look-showcase .plot:has(> [data-pin]:is(:hover, :focus-visible, .is-active)) { z-index: 5; }
.look-showcase [data-pin]:focus-visible [data-pin-number] { scale: 1.18; }
.look-showcase [data-pin]:hover [data-pin-number], .look-showcase .is-active[data-pin] [data-pin-number] { scale: 1.18; }
.look-showcase [data-pin]:is(:hover, :focus-visible, .is-active) [data-pin-number] { scale: 1.18; }
.look-showcase [data-pin-number] { transition: scale .25s cubic-bezier(.2, .8, .2, 1); }
.look-showcase [data-pin-number]::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    border-radius: 50%;
    background: rgba(0, 47, 59, 0.38);
    animation: look-showcase-pulse 2.4s ease-out infinite;
}

@supports (color: color-mix(in lch, red, blue)) {
.look-showcase [data-pin-number]::before {
    background: color-mix(in oklab, var(--showcase-accent-color) 38%, transparent);
}
}
.look-showcase.is-touched [data-pin-number]::before { animation: none; opacity: 0; }
html.respect-reduced-motion .look-showcase [data-pin-number]::before { animation: none; opacity: 0; }
@keyframes look-showcase-pulse {
    0% { transform: scale(.7); opacity: .7; }
    70%, 100% { transform: scale(2.1); opacity: 0; }
}
/* REQUEST: a piece that floats beside the piece it belongs to (a note over its pin) and turns inward near an edge. Until
   then the note's own style floats it over its pin, reading --pin-note-left / -right / -top / -bottom / -shift, which the
   flip below sets from the attributes annotatedShot writes; its tail (the line to the pin) is drawn here, as a piece
   cannot have a pointer. */
.look-showcase [data-pin][data-edge="left"] { --pin-note-left: 0; --pin-note-shift: 0; }
.look-showcase [data-pin][data-edge="right"] { --pin-note-left: auto; --pin-note-right: 0; --pin-note-shift: 0; }
.look-showcase [data-pin][data-vedge="bottom"] { --pin-note-bottom: auto; --pin-note-top: calc(100% + .55em); }
.look-showcase [data-pin-card]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: .125em;
    height: .6em;
    translate: -50% 0;
    background: inherit;
}
.look-showcase [data-pin][data-edge="left"] [data-pin-card]::after { left: 1.05em; }
.look-showcase [data-pin][data-edge="right"] [data-pin-card]::after { left: auto; right: 1.05em; translate: 50% 0; }
.look-showcase [data-pin][data-vedge="bottom"] [data-pin-card]::after { top: auto; bottom: 100%; }
.look-showcase [data-pin-row] { cursor: pointer; outline: none; transition: border-color .2s ease, background-color .2s ease, translate .2s ease; }
.look-showcase [data-pin-row]:focus-visible {
    border-color: var(--showcase-accent-color);
    background-color: color-mix(in oklab, var(--showcase-accent-color) 8%, #fafafa);
    translate: 0 -.06em;
}

@supports (color: color-mix(in lch, red, blue)) {
.look-showcase [data-pin-row]:focus-visible {
    background-color: color-mix(in oklab, var(--showcase-accent-color) 8%, var(--paper, #fff));
}
}
.look-showcase [data-pin-row]:hover, .look-showcase .is-active[data-pin-row] {
    border-color: var(--showcase-accent-color);
    background-color: color-mix(in oklab, var(--showcase-accent-color) 8%, #fafafa);
    translate: 0 -.06em;
}

@supports (color: color-mix(in lch, red, blue)) {
.look-showcase [data-pin-row]:hover, .look-showcase .is-active[data-pin-row] {
    background-color: color-mix(in oklab, var(--showcase-accent-color) 8%, var(--paper, #fff));
}
}
.look-showcase [data-pin-row]:is(:hover, :focus-visible, .is-active) {
    border-color: var(--showcase-accent-color);
    background-color: color-mix(in oklab, var(--showcase-accent-color) 8%, #fafafa);
    translate: 0 -.06em;
}

@supports (color: color-mix(in lch, red, blue)) {
.look-showcase [data-pin-row]:is(:hover, :focus-visible, .is-active) {
    background-color: color-mix(in oklab, var(--showcase-accent-color) 8%, var(--paper, #fff));
}
}

/* ── the player (videoPlayer) ────────────────────────────────────────────────────────────────────────────────────── */
/* the big play button gives way once it plays; the sound button shows while it plays; the toggle swaps its icon */
.look-showcase [data-vp-play] { transition: opacity .25s ease, scale .25s ease; }
.look-showcase [data-vp-stage]:hover [data-vp-play] { scale: 1.06; }
.look-showcase.vp-playing [data-vp-play] { opacity: 0; scale: .8; pointer-events: none; }
.look-showcase [data-vp-sound] { opacity: 0; transition: opacity .25s ease; }
.look-showcase.vp-playing [data-vp-sound], .look-showcase.vp-unmuted [data-vp-sound] { opacity: 1; }
.look-showcase:is(.vp-playing, .vp-unmuted) [data-vp-sound] { opacity: 1; }
.look-showcase [data-vp-toggle] .vp-pause,
.look-showcase.vp-playing [data-vp-toggle] .vp-play,
.look-showcase [data-vp-sound] .vp-on,
.look-showcase.vp-unmuted [data-vp-sound] .vp-off { display: none; }
.look-showcase.vp-playing [data-vp-toggle] .vp-pause,
.look-showcase.vp-unmuted [data-vp-sound] .vp-on { display: inline; }
.look-showcase [data-vp-track] { cursor: pointer; transition: scale .15s ease; }
.look-showcase [data-vp-track]:focus-visible { scale: 1 1.6; outline: none; }
.look-showcase [data-vp-track]:hover { scale: 1 1.6; outline: none; }
.look-showcase [data-vp-track]:is(:hover, :focus-visible) { scale: 1 1.6; outline: none; }
.look-showcase [data-vp-stage] { cursor: pointer; }

/* on a phone the notes would cover the shot: a pin's note shows once it is tapped (the legend under the shot has them all) */
@media (max-width: 768px) {
    .look-showcase [data-pin]:not(.is-active) { --pin-note-display: none; }
}

/* REQUEST: a video piece that waits for a click and plays with its sound (a `plays` setting). The kit video piece plays
   muted on its own as it scrolls in; the player preset passes videoPlayer `waits: true`, which takes the piece's
   autoplay off before the engine starts it. */
/* REQUEST: a piece shown by its box's state (playing / paused, sound on / off) the way showIn reads data-state: the
   player's icons swap on the classes videoPlayer writes (vp-playing, vp-unmuted), keyed on classes inside the buttons. */
/* REQUEST: pins and their legend rows from ONE list (a linked view): the pins are the shot's own boxes and the legend
   a looper over the same titles and notes, so a note is written twice. */
/* REQUEST: the 3D canvas piece in a model-viewer mode (turns on its own, follows a drag or the scroll, a still picture
   over it until ready): until then the 3D model preset holds the old model3d type unchanged. */

/* blocks/look-stat.css */
/* look: stat (sites/_core/looks/stat.json). The box a figure or a set of figures sits in: its surface, edge, corners and
   lift, and the colours its pieces read. LOOK only: every piece is plotted on its box's own lattice and carries its own
   type and surface in props.style, so this file never places, sizes or types a piece. The box's type size and inset are
   data on the box too (font-size in cqi × --stat-type, padding × --stat-inset-kind).

   Knobs: --stat-surface / --stat-ink / --stat-accent / --stat-radius / --stat-lift / --stat-type / --stat-figure, and the
   style as a BEM modifier (look-stat--tinted …). An empty knob falls back to the style's own value, then the theme's token.
   Pieces read --stat-ink-color, --stat-muted-color, --stat-accent-color, --stat-line-color, --stat-rule-color and the
   trend colours --stat-up-color / --stat-down-color. */

.look-stat {
    --stat-accent-color: var(--stat-accent, var(--accent, #3b5bdb));
    --stat-surface-color: var(--stat-surface, var(--card, var(--paper, #fff)));
    --stat-ink-color: var(--stat-ink, var(--ink, #16181d));
    --stat-muted-color: color-mix(in oklab, var(--stat-ink-color) var(--muted-share, 70%), transparent);
    --stat-line-color: color-mix(in oklab, var(--stat-ink-color) 14%, transparent);
    --stat-rule-color: color-mix(in oklab, var(--stat-ink-color) 38%, transparent);
    --stat-up-color: var(--up, color-mix(in oklab, #15803d 82%, var(--stat-ink-color)));
    --stat-down-color: var(--down, color-mix(in oklab, #b91c1c 86%, var(--stat-ink-color)));
    --stat-shadow-ink: var(--ink, #16181d);
    /* each box states its style's defaults, so a stat inside a stat never inherits the outer one's */
    --stat-lift-kind: 1; --stat-inset-kind: 1;
    --stat-edge-color: var(--stat-line-color);
    --stat-depth: var(--stat-lift, var(--stat-lift-kind));

    color: #222;

    color: var(--stat-ink-color);
    background: #fafafa;
    background: var(--stat-surface-color);
    border-radius: calc(1 * 1vh);
    border-radius: calc(var(--stat-radius, 1) * var(--radius, .75em));
    /* the edge is a border, so the Surface pane's border (none, a width, a colour) is the one that shows */
    border: 1px solid rgba(34, 34, 34, 0.14);
    border: 1px solid color-mix(in oklab, #222 14%, transparent);
    border: 1px solid var(--stat-edge-color);
    box-shadow:
        0 calc(1 * .05em) calc(1 * .16em) rgba(34, 34, 34, 0.05),
        0 calc(1 * .7em) calc(1 * 1.8em) calc(1 * -.6em) rgba(34, 34, 34, 0.16);
    box-shadow:
        0 calc(1 * .05em) calc(1 * .16em) color-mix(in oklab, #222 calc(1 * 5%), transparent),
        0 calc(1 * .7em) calc(1 * 1.8em) calc(1 * -.6em) color-mix(in oklab, #222 calc(1 * 16%), transparent);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif);
    font-feature-settings: "lnum";
    font-variant-numeric: lining-nums;
}

@supports (color: color-mix(in lch, red, blue)) {
.look-stat {
    box-shadow:
        0 calc(var(--stat-depth) * .05em) calc(var(--stat-depth) * .16em) color-mix(in oklab, var(--stat-shadow-ink) calc(var(--stat-depth) * 5%), transparent),
        0 calc(var(--stat-depth) * .7em) calc(var(--stat-depth) * 1.8em) calc(var(--stat-depth) * -.6em) color-mix(in oklab, var(--stat-shadow-ink) calc(var(--stat-depth) * 16%), transparent);
}
}

.look-stat--tinted {
    --stat-surface-color: var(--stat-surface, var(--surface, color-mix(in oklab, var(--stat-ink-color) 5%, var(--paper, #fff))));
    --stat-edge-color: transparent;
    --stat-lift-kind: 0;
}
.look-stat--dark {
    --stat-surface-color: var(--stat-surface, var(--invert-bg, var(--ink, #16181d)));
    --stat-ink-color: var(--stat-ink, var(--invert-fg, var(--paper, #fff)));
    --stat-muted-color: color-mix(in oklab, var(--stat-ink-color) 70%, transparent);
    --stat-line-color: color-mix(in oklab, var(--stat-ink-color) 20%, transparent);
    --stat-edge-color: transparent;
}
/* the accent fills the panel, and the marks on it turn to the text colour */
.look-stat--flooded {
    --stat-surface-color: var(--stat-surface, var(--stat-accent, var(--accent, #3b5bdb)));
    --stat-ink-color: var(--stat-ink, var(--on-accent, var(--accent-ink, #fff)));
    --stat-accent-color: var(--stat-ink-color);
    --stat-muted-color: color-mix(in oklab, var(--stat-ink-color) 78%, transparent);
    --stat-line-color: color-mix(in oklab, var(--stat-ink-color) 30%, transparent);
    --stat-edge-color: transparent;
    --stat-lift-kind: 0;
}
.look-stat--outline {
    --stat-surface-color: var(--stat-surface, transparent);
    --stat-edge-color: var(--stat-rule-color);
    --stat-lift-kind: 0;
}
.look-stat--bare {
    --stat-surface-color: var(--stat-surface, transparent);
    --stat-edge-color: transparent;
    --stat-lift-kind: 0; --stat-inset-kind: 0;
}

/* its small labels keep the reading floor of a narrow tablet and a phone, in its own boxes too (a box in a box turns the
   floor off, render.php's .plotgrid > .plot > .plotgrid, so this rule outranks it) */
.look-stat, .plotgrid > .plot > .look-stat.plotgrid { --type-min: var(--type-floor, calc(0 * var(--pe-vw))); --type-min-in-box: var(--type-floor, calc(0 * var(--pe-vw))); }

/* a looper or flow box nested in a lattice gets the page margin again (render.php restates it on every .flowgrid);
   the box's own inset is its padding (data), so the margin is zeroed here until the general fix lands */
.plotgrid > .plot > .look-stat.flowgrid { padding-left: 0; padding-right: 0; }

/* blocks/look-steps.css */
/* look: steps (sites/_core/looks/steps.json). The RUN only: the colours its pieces read, the space between the steps and
   the type size they measure their em from. The spine, the discs, the dots and every piece's type live in the pieces'
   own style, written with --steps-accent-color, --steps-line-color, --steps-disc-color, --steps-on-disc-color,
   --steps-ink-color, --steps-muted-color, --steps-paper-color and --steps-gap-size. Knobs arrive as --steps-accent /
   --steps-line / --steps-disc / --steps-gap / --steps-type. */

.look-steps {
    --steps-accent-color: var(--steps-accent, var(--accent, #3b5bdb));
    --steps-ink-color: currentColor;
    --steps-muted-color: var(--muted, color-mix(in oklab, currentColor var(--muted-share, 70%), transparent));
    /* the spine reads on any ground: a thinned text colour, not the page's hairline token */
    --steps-line-color: var(--steps-line, color-mix(in oklab, currentColor 20%, transparent));
    --steps-paper-color: var(--paper, var(--page-bg, #fff));
    --steps-disc-color: var(--steps-disc, var(--ink, #16181d));
    --steps-on-disc-color: var(--paper, var(--page-bg, #fff));
    --steps-gap-size: calc(var(--steps-gap, 1) * 2.6em);
    font-size: calc(1 * 1em);
    font-size: calc(var(--steps-type, 1) * 1em);
}

/* blocks/look-story.css */
/* look: story (sites/_core/looks/story.json). A story told while you scroll. LOOK only: every piece is plotted on its
   box's own lattice and carries its own type, surface and motion in props.style, so this file never places, sizes or
   types a piece. It gives the box its ground and colours, pins its stage, and publishes the numbers the pieces move by.

   The box is the scroll track; its child box marked data-story-stage holds still on the screen (flavorStory pins it:
   data-story="pinned" on the box, --story-count, and --story-progress 0 → 1 through the track). Its chapters are the
   items of the loopers marked data-story-list: each item is past, current or next (data-state), and publishes that as
   three numbers a piece's own style reads (0 or 1): --story-on (current), --story-past, --story-next. A piece comes in
   and leaves by its own style: "opacity": "var(--story-on, 1)", a clip-path or a translate multiplied by --story-next
   and --story-past, and a transition. Out of a story (the editor, script off) they read 1 / 0 / 0: every piece rests
   in its current pose. The same three numbers follow a schedule (scheduleNow's rows: before / during / after).
   The items of a looper take four ground colours in turn: --story-turn-ground, --story-turn-ink, --story-turn-hot.

   A site with a fixed top bar sets --story-top (or --rail-top): the stage pins under it and is that much shorter.

   Pinned, the box also sets --story-pinned: 1, so a piece can take its scroll room (a step as tall as a chapter's scroll).

   Knobs: --story-surface / --story-ink / --story-accent / --story-type / --story-step (scroll per chapter, % of the
   screen) / --story-pace (hand-over time, times the usual), and the ground as a BEM modifier (look-story--accent …).
   Pieces read --story-ground-color, --story-ink-color, --story-muted-color, --story-line-color, --story-accent-color. */

.look-story {
    --story-ground-color: var(--story-surface, var(--page-bg, var(--paper, #fff)));
    --story-ink-color: var(--story-ink, var(--ink, #16181d));
    --story-accent-color: var(--story-accent, var(--accent, #c2410c));
    --story-muted-color: color-mix(in oklab, var(--story-ink-color) var(--muted-share, 70%), transparent);
    --story-line-color: color-mix(in oklab, var(--story-ink-color) 18%, transparent);
    /* where a pinned stage stops under a site's fixed top bar (a site sets --story-top, or its rails' --rail-top) */
    --story-offset: var(--story-top, var(--rail-top, 0svh));
    background: #f9f9f9;
    background: var(--story-ground-color);
    color: #222;
    color: var(--story-ink-color);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif);
}
.look-story--accent {
    --story-ground-color: var(--story-surface, var(--accent, #c2410c));
    --story-ink-color: var(--story-ink, var(--on-accent, #fff8ee));
    --story-accent-color: var(--story-accent, var(--story-ink-color));
    --story-muted-color: color-mix(in oklab, var(--story-ink-color) 80%, transparent);
    --story-line-color: color-mix(in oklab, var(--story-ink-color) 30%, transparent);
}
.look-story--spark {
    --story-ground-color: var(--story-surface, var(--spark, #e8a93a));
    --story-ink-color: var(--story-ink, var(--on-spark, var(--ink, #16181d)));
    --story-accent-color: var(--story-accent, var(--story-ink-color));
    --story-muted-color: color-mix(in oklab, var(--story-ink-color) 76%, transparent);
}
.look-story--dark {
    --story-ground-color: var(--story-surface, var(--invert-bg, var(--ink, #16181d)));
    --story-ink-color: var(--story-ink, var(--invert-fg, var(--paper, #fff)));
    --story-accent-color: var(--story-accent, var(--spark, var(--accent, #e8a93a)));
    --story-muted-color: color-mix(in oklab, var(--story-ink-color) 70%, transparent);
    --story-line-color: color-mix(in oklab, var(--story-ink-color) 24%, transparent);
}

/* a looper or flow box nested in a lattice gets the page margin again; the story bleeds to its plot's edges */
.plotgrid > .plot > .look-story.flowgrid { padding-left: 0; padding-right: 0; }

/* pinned: the box is as long as its chapters' scroll plus one screen, its one row runs the whole length, and the
   stage's cell sticks to the top of the screen for all of it */
/* REQUEST: a box setting "holds still while you scroll" (Stage A: a box pinned to the screen, with its scroll length),
   so a stage pins without these two rules; until then the look pins the box flavorStory marks */
.look-story[data-story="pinned"] {
    height: calc(3 * 80 * 1svh + 100svh);
    height: calc(var(--story-count, 3) * var(--story-step, 80) * 1svh + 100svh);
    grid-template-rows: minmax(0, 1fr);
}
.look-story[data-story="pinned"] > .plot:has(> [data-story-stage]) { position: sticky; top: var(--story-offset); }
/* a story on a lattice of drawn rows (a grid section, a box): its rows are a floor, never a clip, so the track pushes
   what follows down instead of running over it */
.plotgrid:has(> .plot > .look-story[data-story="pinned"]) { grid-auto-rows: minmax(var(--plot-cell), auto); }
/* a ?c= preview never scrolls (render.php previewSurfaceCss): the story shows its first frame at the stage's own height */
.pv .look-story[data-story="pinned"] { height: auto; }
/* pinned, a piece can read --story-pinned (1) to take its scroll room: a step as tall as the scroll per chapter */
.look-story[data-story="pinned"] { --story-pinned: 1; }
.pv .look-story[data-story="pinned"] { --story-pinned: 0; }

/* a stage beside its text (the text scrolls, the stage holds still): pinned, the text and the stage share the one row.
   On a phone they lie one over the other: the stage fills the screen behind and the text passes over it, on cards a
   piece reads as --story-card (its fill), --story-card-room (its room), --story-card-corner, --story-card-blur */
@media (max-width: 768px) {
    body:not(.pv) .look-story[data-story="pinned"] > .plot { grid-row: 1; grid-column: 1 / -1; }   /* the stage comes first: the text lies over it by order; a preview shows them one after the other */
    body:not(.pv) .look-story[data-story="pinned"]:has(> .plot + .plot) {
        --story-card: color-mix(in oklab, var(--story-ground-color) 88%, transparent);
        --story-card-room: 1.3em;
        --story-card-corner: calc(var(--radius, .75em) * 1.2);
        --story-card-blur: blur(.8em);
    }
}

/* a chapter's state as numbers its pieces move by, for motion that is a calc of them (a clip that opens by --story-local,
   a word that rises by --story-next). A piece that only changes pose per state says it with its own state styles
   instead ("@next": {…}, "@past": {…}, its resting style the current pose), as the text beside pictures does.
   REQUEST: the looper's turn mode "by scroll" (Stage A): flavorStory's `lists` option turns a slideshow looper by the
   scroll until the looper can do it itself. */
.look-story [data-state="current"], .look-story [data-state="during"] { --story-on: 1; --story-past: 0; --story-next: 0; }
.look-story :is([data-state="current"], [data-state="during"]) { --story-on: 1; --story-past: 0; --story-next: 0; }
.look-story [data-state="past"], .look-story [data-state="after"] { --story-on: 0; --story-past: 1; --story-next: 0; }
.look-story :is([data-state="past"], [data-state="after"]) { --story-on: 0; --story-past: 1; --story-next: 0; }
.look-story [data-state="next"], .look-story [data-state="before"] { --story-on: 0; --story-past: 0; --story-next: 1; }
.look-story :is([data-state="next"], [data-state="before"]) { --story-on: 0; --story-past: 0; --story-next: 1; }

/* a chapter's piece with no motion of its own crossfades (its own opacity and transition in its style win) */
.look-story [data-story-list] > * > .plot > * {
    opacity: 1;
    opacity: var(--story-on, 1);
    transition: opacity calc(.5s * 1) ease calc(1 * .3s * 1);
    transition: opacity calc(.5s * var(--story-pace, 1)) ease calc(var(--story-on, 1) * .3s * var(--story-pace, 1));
}
/* a chapter's slideshow turn: the one coming in shows at once (its pieces bring themselves in), the one leaving
   stays for the hand-over, under the next, while its pieces leave */
.look-story[data-story="pinned"] [data-story-list].is-played > * { transition: opacity 0s linear calc(1.3s * 1); transition: opacity 0s linear calc(1.3s * var(--story-pace, 1)); }
.look-story[data-story="pinned"] [data-story-list].is-played > .is-active { transition-delay: 0s; }

/* a chapter list marked "pile" (data-story-list="pile") keeps the chapters already told on show, one over the other;
   scrolling back, the one handed back has already closed by the scroll, so it goes at once */
.look-story[data-story="pinned"] [data-story-list~="pile"].is-played > [data-state="past"] { opacity: 1; }
.look-story[data-story="pinned"] [data-story-list~="pile"].is-played > [data-state="next"] { transition-delay: 0s; }

/* the items of a looper take four grounds in turn: the page, the accent, the second colour, the dark */
.look-story .loop > * {
    --story-turn-ground: var(--card, var(--paper, #fff)); --story-turn-ink: var(--ink, #16181d); --story-turn-hot: var(--accent, #1f45d6);
}
.look-story .loop > :nth-child(4n + 2) { --story-turn-ground: var(--accent, #1f45d6); --story-turn-ink: var(--on-accent, #fbf7ee); --story-turn-hot: var(--spark, #ffd45e); }
.look-story .loop > :nth-child(4n + 3) { --story-turn-ground: var(--spark, #ffd45e); --story-turn-ink: var(--on-spark, var(--ink, #16181d)); --story-turn-hot: var(--accent, #1f45d6); }
.look-story .loop > :nth-child(4n + 4) { --story-turn-ground: var(--invert-bg, var(--ink, #16181d)); --story-turn-ink: var(--invert-fg, var(--page-bg, #fbf7ee)); --story-turn-hot: var(--spark, #ffd45e); }

/* a halo that breathes, for a "now" mark: a piece's style names it ("animation": "look-story-pulse 2.4s ease-in-out infinite") */
@keyframes look-story-pulse {
    0%, 100% { box-shadow: 0 0 0 .2em color-mix(in oklab, currentColor 30%, transparent); }

@supports (color: color-mix(in lch, red, blue)) {
0%, 100% { box-shadow: 0 0 0 .2em var(--story-pulse-color, color-mix(in oklab, currentColor 30%, transparent)); }
}
    55% { box-shadow: 0 0 0 .7em transparent; }
}

/* a site that opts in to reduced motion: the hand-overs land at once, nothing breathes */
html.respect-reduced-motion .look-story * { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }

/* blocks/look-table.css */
/* look: table (sites/_core/looks/table.json). The box a table sits in: its surface, edge, corners and lift, and the
   colours its pieces read. LOOK only: every row is a box whose pieces are plotted on its own columns and carry their own
   type and colour in props.style, so this file never places, sizes or types a piece. The box's type size, its inset
   (× --table-inset-kind) and the space between rows (× --table-row-space) are data on the boxes.

   Knobs: --table-surface / --table-ink / --table-accent / --table-line / --table-radius / --table-lift / --table-type /
   --table-row-space, and as BEM modifiers the style (look-table--card …) and the rows' settings (--across, --stripes,
   --headline-first, --accent-last), which set variables on a row that its pieces read. An empty knob falls back to the
   style's own value, then the theme's token. Pieces read --table-ink-color, --table-muted-color, --table-faint-color,
   --table-accent-color, --table-accent-text-color, --table-on-accent-color, --table-surface-color, --table-tint-color,
   --table-line-color, --table-rule-color; a row's --table-row-ink, --table-row-fill, --table-lead (its main figure's
   size, × its own) and --table-cell-align (the side a value reads from); and the state colours --table-good-color /
   --table-warn-color / --table-bad-color / --table-quiet-color (a row names its tone as data:
   "color": "var(--table-{{tone}}-color)"). A looper's lines take the table's line colour. A row under the pointer is
   the row's own ":hover" style.

   A rule marked REQUEST is what a piece's style cannot say yet: a row's look in a state its behaviour writes as a class
   or an attribute other than data-state (on now, past, today, open, a queue's wait) and a cell by its own value. Each
   only switches variables the pieces' own styles read (--table-row-ink, --table-row-muted, --table-row-fill,
   --table-row-weight, --table-row-mark, --table-state-color). */

/* the inset a table's rows and caption share: set once on the box (in em of its type), read as a length by every piece */
@property --table-inset { syntax: "<length>"; inherits: true; initial-value: 0; }

.look-table {
    --table-accent-color: var(--table-accent, var(--accent, #3b5bdb));
    /* small text in the accent (a tag, a note) takes the theme's legible accent where it has one */
    --table-accent-text-color: var(--table-accent, var(--accent-text, var(--table-accent-color)));
    --table-on-accent-color: var(--on-accent, var(--accent-ink, #fff));
    --table-surface-color: var(--table-surface, transparent);
    --table-ink-color: var(--table-ink, var(--ink, #16181d));
    --table-muted-color: color-mix(in oklab, var(--table-ink-color) var(--muted-share, 70%), transparent);
    --table-faint-color: color-mix(in oklab, var(--table-ink-color) 34%, transparent);
    --table-line-color: var(--table-line, var(--line, color-mix(in oklab, var(--table-ink-color) 14%, transparent)));
    --table-rule-color: var(--table-line, var(--table-ink-color));
    --table-tint-color: color-mix(in oklab, var(--table-ink-color) 4.5%, transparent);
    --table-good-color: var(--ok-ink, var(--ok, color-mix(in oklab, #15803d 84%, var(--table-ink-color))));
    --table-warn-color: var(--warn-ink, var(--warn, color-mix(in oklab, #b45309 88%, var(--table-ink-color))));
    --table-bad-color: var(--fail-ink, color-mix(in oklab, #c2410c 88%, var(--table-ink-color)));
    --table-quiet-color: var(--table-muted-color);
    --table-shadow-ink: var(--ink, #16181d);
    /* each box states its style's defaults, so a table inside a table never inherits the outer one's */
    --table-lift-kind: 0; --table-inset-kind: 0;
    --table-ring-shadow: 0 0 0 1px transparent;
    --table-depth: var(--table-lift, var(--table-lift-kind));
    --loop-line-color: var(--table-line-color);

    color: #222;

    color: var(--table-ink-color);
    background: transparent;
    background: var(--table-surface-color);
    border-radius: calc(1 * 1vh);
    border-radius: calc(var(--table-radius, 1) * var(--radius, .75em));
    box-shadow:
        0 0 0 1px transparent,
        0 calc(0 * .05em) calc(0 * .16em) rgba(0, 0, 0, 0),
        0 calc(0 * .8em) calc(0 * 2em) calc(0 * -.7em) rgba(0, 0, 0, 0);
    box-shadow:
        0 0 0 1px transparent,
        0 calc(0 * .05em) calc(0 * .16em) color-mix(in oklab, #222 calc(0 * 5%), transparent),
        0 calc(0 * .8em) calc(0 * 2em) calc(0 * -.7em) color-mix(in oklab, #222 calc(0 * 14%), transparent);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif);
    font-feature-settings: lining-nums tabular-nums;
    font-variant-numeric: lining-nums tabular-nums;
}

@supports (color: color-mix(in lch, red, blue)) {
.look-table {
    box-shadow:
        var(--table-ring-shadow),
        0 calc(var(--table-depth) * .05em) calc(var(--table-depth) * .16em) color-mix(in oklab, var(--table-shadow-ink) calc(var(--table-depth) * 5%), transparent),
        0 calc(var(--table-depth) * .8em) calc(var(--table-depth) * 2em) calc(var(--table-depth) * -.7em) color-mix(in oklab, var(--table-shadow-ink) calc(var(--table-depth) * 14%), transparent);
}
}

.look-table--card {
    --table-surface-color: var(--table-surface, var(--card, var(--paper, #fff)));
    --table-ring-shadow: 0 0 0 1px var(--table-line-color);
    --table-lift-kind: 1; --table-inset-kind: 1;
}
.look-table--tinted {
    --table-surface-color: var(--table-surface, var(--surface, color-mix(in oklab, var(--table-ink-color) 5%, var(--paper, #fff))));
    --table-inset-kind: 1;
}
.look-table--dark {
    --table-surface-color: var(--table-surface, var(--invert-bg, var(--ink, #16181d)));
    --table-ink-color: var(--table-ink, var(--invert-fg, var(--paper, #fff)));
    --table-muted-color: color-mix(in oklab, var(--table-ink-color) 66%, transparent);
    --table-line-color: var(--table-line, color-mix(in oklab, var(--table-ink-color) 20%, transparent));
    --table-tint-color: color-mix(in oklab, var(--table-ink-color) 7%, transparent);
    --table-good-color: color-mix(in oklab, #4ade80 70%, var(--table-ink-color));
    --table-warn-color: color-mix(in oklab, #fbbf24 72%, var(--table-ink-color));
    --table-bad-color: color-mix(in oklab, #fb923c 76%, var(--table-ink-color));
    --table-inset-kind: 1;
}
.look-table--outline {
    --table-ring-shadow: 0 0 0 1px var(--table-line-color);
    --table-inset-kind: 1;
}

/* the rows' settings. Stripes: every other row of the innermost looper on the tint, the lines gone. Headline first: the
   first row's main figure set large. Accent last: the last row in the accent. */
@supports selector(:has(*)) {   /* a browser that cannot find the innermost rows keeps the lines */
    .look-table--stripes { --loop-line-color: transparent; }
    .look-table--stripes .loop > .plot:nth-child(even):not(:has(.loop)) { --table-row-fill: var(--table-tint-color); }
    /* every row takes its fill on its own box, whether or not its preset paints it (a row that does paints the same). A
       cell holds its one piece, so the piece is asked: a :has() on the cell with the piece below it made every element
       added anywhere on any page restyle the whole page (20 ms) */
    .look-table--stripes .loop > .plot > :not(.loop):not(:has(.loop)) { background-color: transparent; background-color: var(--table-row-fill, transparent); }
}
.look-table--headline-first .loop > .plot:first-child { --table-lead: 1.8; }
.look-table--accent-last .loop > .plot:last-child { --table-row-ink: var(--table-accent-color); }

/* Rows run side by side: the looper sets its rows in as many columns as fit (two on a phone), each row's pieces one over
   the other, read from the left, a line up between the rows in place of the line across.
   REQUEST: a knob that sets a looper's own columns and lines and a box's own arrangement; until then this re-places what
   the looper's and the row's plots place. */
.look-table--across { --table-cell-align: left; --table-across-gap: 2.4em; }
.look-table--across .loop.flowgrid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5em), 1fr)); -moz-column-gap: var(--table-across-gap); column-gap: var(--table-across-gap); --loop-gap: var(--table-across-gap); }
.look-table--across .loop > .plot .flowgrid > .plot { grid-column: 1 / -1; }
.look-table--across .loop-lines--rows > * + *::before { top: 0; bottom: 0; right: auto; left: calc(var(--loop-gap) / -2); translate: -50% 0; border-top-width: 0; border-left-width: 1px; }

/* a looper or flow box nested in a lattice gets the page margin again (render.php restates it on every .flowgrid); the
   box's inset is its padding (data), so the margin is zeroed here until the general fix lands */
.plotgrid > .plot > .look-table.flowgrid { padding-left: 0; padding-right: 0; }

/* REQUEST: a piece's own looping animation. A live dot (a text piece marked data-pulse: its run before, drawn as a dot by
   its own style) breathes; an opening-hours box pulses it only while open */
@keyframes table-pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 74, 92, 0.6); }

@supports (color: color-mix(in lch, red, blue)) {
0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--table-open-color, var(--table-accent-color)) 60%, transparent); }
}
    100% { box-shadow: 0 0 0 .7em transparent; }
}
.look-table [data-pulse] > .text-before { animation: table-pulse 2.4s ease-out infinite; }
.look-table[data-open]:not([data-open="open"]) [data-pulse] > .text-before { animation: none; }
html.respect-reduced-motion .look-table [data-pulse] > .text-before { animation: none; }

/* REQUEST: a piece's style in a state its box's behaviour writes. The pieces read these variables in their own style. */
/* the opening hours (behaviour openNowHours): today's row, and the dot's colour while open or closing soon */
.look-table .is-today { --table-row-ink: var(--table-ink-color); --table-row-weight: 650; --table-row-mark: color-mix(in oklab, var(--table-accent-color) 70%, transparent); }
.look-table[data-open="open"] { --table-open-color: var(--spark, var(--table-accent-color)); }
.look-table[data-open="soon"] { --table-open-color: var(--table-accent-color); }
/* a day's schedule (behaviour scheduleNow): past rows dim, the row on now takes the accent (or, on a board, turns into
   an accent plate), the next one's rule turns strong; between rows drawn by the looper, the lines round the row on now
   turn accent */
.look-table .is-past { --table-row-ink: var(--table-muted-color); --table-row-muted: var(--table-muted-color); --table-row-fade: .62; }
.look-table .is-now {
    --table-row-ink: var(--table-accent-color); --table-row-lit: var(--table-accent-color);
    --table-row-plate: var(--table-accent-color); --table-row-on-plate: var(--table-on-accent-color); --table-row-rule: transparent;
}
.look-table .is-next { --table-row-rule: var(--table-ink-color); --table-row-next: 1; }
.look-table .plot:has(> .is-now) + .plot > * { --table-row-rule: transparent; }
.look-table .loop-lines > :has(> .is-now)::before, .look-table .loop-lines > :has(> .is-now) + *::before { border-color: var(--table-accent-color); }
/* a live strip's "on now" tag fades before the first row starts and after the last one ends */
.look-table[data-state="before"], .look-table[data-state="after"] { --table-now-fade: .45; }
/* a queue (behaviour leadTime): its rule coloured by how far out the next start is; a closed one fades its date */
.look-table [data-lead-state="soon"] { --table-state-color: var(--live, var(--table-good-color)); }
.look-table [data-lead-state="open"] { --table-state-color: var(--table-accent-color); }
.look-table [data-lead-state="busy"] { --table-state-color: var(--table-warn-color); }
.look-table [data-lead-state="closed"] { --table-state-fade: .45; }

/* REQUEST: a piece's style by its own value. A cell that carries its value (data-value) reads a tick in the accent and a
   dash faint, as a comparison grid marks what is in and out */
.look-table [data-value="\2713"] { --table-cell-ink: var(--table-accent-color); --table-cell-weight: 700; }
.look-table [data-value="\2014"] { --table-cell-ink: var(--table-faint-color); }

/* blocks/lookbook.css */

.lookbook { container-type: inline-size; width: 100%; }

.lookbook .lb-head { margin-bottom: max(1.6rem, min(4cqi, 3rem)); margin-bottom: clamp(1.6rem, 4cqi, 3rem); }
.lookbook .lb-eyebrow {
    margin: 0 0 .8rem;
    font: 500 max(.7rem, min(.85cqi, .9rem))/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 max(.7rem, min(.85cqi, .9rem))/1 var(--font-mono, var(--font-display, system-ui));
    font: 500 max(.7rem, min(.85cqi, .9rem))/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 clamp(.7rem, .85cqi, .9rem)/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 clamp(.7rem, .85cqi, .9rem)/1 var(--font-mono, var(--font-display, system-ui));
    letter-spacing: .28em; text-transform: uppercase;
    color: #007b9a;
    color: var(--accent, #8a6f53);
}
.lookbook .lb-title {
    margin: 0;
    font: 400 max(1.8rem, min(5cqi, 4rem))/1.02 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 max(1.8rem, min(5cqi, 4rem))/1.02 var(--font-display, Georgia, serif);
    font: 400 max(1.8rem, min(5cqi, 4rem))/1.02 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 clamp(1.8rem, 5cqi, 4rem)/1.02 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 clamp(1.8rem, 5cqi, 4rem)/1.02 var(--font-display, Georgia, serif);
    letter-spacing: -.015em; color: #222; color: var(--ink, #20180f);
    text-wrap: balance;
}

.lookbook .lb-track {
    display: flex;
    align-items: flex-end;
    gap: max(1.2rem, min(3cqi, 3rem));
    gap: clamp(1.2rem, 3cqi, 3rem);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 1rem;
    margin: 0 calc(-1 * 0px);
    margin: 0 calc(-1 * var(--lb-edge, 0px));
    scrollbar-width: thin;
}
.lookbook .lb-item {
    flex: 0 0 auto;
    width: max(13rem, min(26cqi, 22rem));
    width: clamp(13rem, 26cqi, 22rem);
    scroll-snap-align: start;
}
.lookbook .lb-item:nth-child(even) { margin-bottom: max(1rem, min(3cqi, 3rem)); margin-bottom: clamp(1rem, 3cqi, 3rem); }

.lookbook .lb-plate {
    margin: 0 0 max(.9rem, min(2cqi, 1.4rem));
    margin: 0 0 clamp(.9rem, 2cqi, 1.4rem);
    aspect-ratio: 3 / 4;
    background: rgb(241, 241, 241);
    background: color-mix(in srgb, #222 4%, #fafafa);
    border-radius: calc(1vh * 1.6);
    border-radius: var(--r-lg, var(--radius, .5rem));
    overflow: hidden;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

@supports (color: color-mix(in lch, red, blue)) {
.lookbook .lb-plate {
    background: var(--surface, color-mix(in srgb, var(--accent, #8a6f53) 9%, var(--paper, #f4ede1)));
}
}
.lookbook .lb-item:nth-child(odd) .lb-plate { aspect-ratio: 3 / 4.4; }
.lookbook .lb-item:hover .lb-plate { transform: translateY(-.6rem); }
.lookbook .lb-plate img,
.lookbook .lb-plate picture { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

.lookbook .lb-name {
    margin: 0 0 .35rem;
    font: 500 max(1.05rem, min(1.8cqi, 1.45rem))/1.1 'Open Sans', Arial, Helvetica, sans-serif;
    font: 500 max(1.05rem, min(1.8cqi, 1.45rem))/1.1 var(--font-display, Georgia, serif);
    font: 500 max(1.05rem, min(1.8cqi, 1.45rem))/1.1 'Open Sans', Arial, Helvetica, sans-serif;
    font: 500 clamp(1.05rem, 1.8cqi, 1.45rem)/1.1 'Open Sans', Arial, Helvetica, sans-serif;
    font: 500 clamp(1.05rem, 1.8cqi, 1.45rem)/1.1 var(--font-display, Georgia, serif);
    letter-spacing: -.01em; color: #222; color: var(--ink, #20180f);
}
.lookbook .lb-meta {
    margin: 0;
    display: flex; justify-content: space-between; gap: 1rem;
    font: 500 max(.66rem, min(.85cqi, .8rem))/1.3 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 max(.66rem, min(.85cqi, .8rem))/1.3 var(--font-mono, var(--font-display, system-ui));
    font: 500 max(.66rem, min(.85cqi, .8rem))/1.3 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 clamp(.66rem, .85cqi, .8rem)/1.3 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 clamp(.66rem, .85cqi, .8rem)/1.3 var(--font-mono, var(--font-display, system-ui));
    letter-spacing: .12em; text-transform: uppercase;
    color: #626262;
    color: var(--muted, #6b5d4d);
}

/* blocks/loop.css */
/* loop — a box that repeats its content once per item (registry `loop`). Plain: the members flow as the box lays them
   out. A slideshow (`slideshow`, behavior playInTurn): the members stack, one shows at a time, cross-fading; --p on the member on show.
   A deck (`stack: deck`): the members pile up like cards, the one on show on top. A formation of the box
   (blocks/formation.css) takes over once its shape begins: every stack's move is times --stack-weight and its order and
   transitions hold only --at-rest (both 1 at rest, 0 in the shape), and every card is shown (--stack-shown). */
.loop.is-played { position: relative; --loop-fade: .6s; }
.loop.is-played > * {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; opacity: 0; opacity: var(--stack-shown, 0);
    transition: opacity calc(var(--loop-fade) * 1) ease;
    transition: opacity calc(var(--loop-fade) * var(--at-rest, 1)) ease;
}
.loop.is-played > .is-active, .loop.is-played:not(.is-live) > :first-child { opacity: 1; }
/* only the row on show takes the pointer: the others are stacked, transparent, and would swallow every click and drag
   (!important: the engine forces pointer events on everything inside a sticky layer). In a formation (blocks/formation.css)
   every card is solid and in its own place, so each takes its own clicks */
.loop.is-played:not([data-in-formation]) > :not(.is-active), .loop.is-played:not([data-in-formation]) > :not(.is-active) * { pointer-events: none !important; }
.loop.is-played:not(.is-live) > :first-child { pointer-events: auto !important; }

/* a deck: every card stays in the pile, each one behind a step up and smaller (--depth from playInTurn, 0 = on top); a
   turn brings the next card to the top and sends the last one to the back. --deck-step / --deck-shrink / --deck-fade
   shape the pile */
.loop.is-played.is-deck > * {
    --deck-step: 5%;
    --deck-shrink: .06;
    --deck-fade: .3;
    --deck-depth: calc(var(--depth, 0) * var(--stack-weight, 1));
    opacity: max(calc(1 - (0 * 1) * .3), 0);
    opacity: max(calc(1 - calc(0 * 1) * .3), 0);
    opacity: max(calc(1 - var(--deck-depth) * var(--deck-fade)), var(--stack-shown, 0));
    translate: 0 calc((0 * 1) * -1 * 5%);
    translate: 0 calc(calc(0 * 1) * -1 * 5%);
    translate: 0 calc(var(--deck-depth) * -1 * var(--deck-step));
    scale: calc(1 - (0 * 1) * .06);
    scale: calc(1 - calc(0 * 1) * .06);
    scale: calc(1 - var(--deck-depth) * var(--deck-shrink));
    /* the pile's order beats the page order the render writes inline */
    z-index: calc((50 - 0) * 1 + 0 * (1 - 1)) !important;
    z-index: calc((50 - var(--depth, 0)) * var(--at-rest, 1) + var(--formation-z, 0) * (1 - var(--at-rest, 1))) !important;
    transition: translate calc(.7s * 1) cubic-bezier(.2, .8, .2, 1), scale calc(.7s * 1) cubic-bezier(.2, .8, .2, 1), opacity calc(.45s * 1) ease;
    transition: translate calc(.7s * var(--at-rest, 1)) cubic-bezier(.2, .8, .2, 1), scale calc(.7s * var(--at-rest, 1)) cubic-bezier(.2, .8, .2, 1), opacity calc(.45s * var(--at-rest, 1)) ease;
}

/* lines between a looper's items, none before the first (knobs lines / lineThickness / lineColor): rows = a line across
   above each item (a list going down), columns = a line up the left of each (a row going across). The line sits in the
   middle of the gap between two items; in a flow of several columns, use a box's edge instead. */
.loop-lines { --loop-gap: var(--grid-gutter, 1em); }
.loop-lines.wraprow { --loop-gap: var(--row-gap, 1.25rem); }
.loop-lines > * + * { position: relative; }
.loop-lines > * + *::before {
    content: ''; position: absolute; pointer-events: none;
    border: 0 solid color-mix(in oklab, currentColor 18%, transparent);
}

@supports (color: color-mix(in lch, red, blue)) {
.loop-lines > * + *::before {
    border: 0 solid var(--loop-line-color, color-mix(in oklab, currentColor 18%, transparent));
}
}
.loop-lines--rows > * + *::before { left: 0; right: 0; top: calc(var(--loop-gap) / -2); translate: 0 -50%; border-top-width: calc(1 * 1px); border-top-width: calc(var(--loop-line, 1) * 1px); }
.loop-lines--columns > * + *::before { top: 0; bottom: 0; left: calc(var(--loop-gap) / -2); translate: -50% 0; border-left-width: calc(1 * 1px); border-left-width: calc(var(--loop-line, 1) * 1px); }

/* slide along: every member sits in the track at its place from the one on show (--offset from playInTurn, the shorter
   way round), and the track slides to the next; a member wrapping round the far side jumps instead (data-turn-jump) */
.loop.is-played.is-slide { overflow: clip; touch-action: pan-y; }   /* a sideways swipe turns it, never scrolls the page */
.loop.is-played.is-slide > * {
    opacity: 1; translate: calc(0 * 1 * 100%) 0; translate: calc(var(--offset, 0) * var(--stack-weight, 1) * 100%) 0;
    transition: translate calc(.7s * 1) cubic-bezier(.2, .8, .2, 1);
    transition: translate calc(.7s * var(--at-rest, 1)) cubic-bezier(.2, .8, .2, 1);
}
.loop.is-played.is-slide:not(.is-live) > :not(:first-child) { translate: calc(1 * 100%) 0; translate: calc(var(--stack-weight, 1) * 100%) 0; }
.loop.is-played.is-slide > [data-turn-jump] { transition: none; }

/* cards (toss · cover · rise): --offset < 0 is a card already gone by, > 0 one still to come. The card on show lies on
   top; a card wrapping round the far side jumps unseen (data-turn-jump). The resting page shows the first card */
.loop.is-played.is-toss > *, .loop.is-played.is-cover > *, .loop.is-played.is-rise > * {
    --gone: calc(min(var(--offset, 0), 0) * var(--stack-weight, 1));
    --ahead: calc(max(var(--offset, 0), 0) * var(--stack-weight, 1));
    --card-ease: cubic-bezier(.3, .7, .2, 1);
    --card-fade: .15s;   /* a card to come is solid the moment it moves */
    --card-fade-ease: ease;
    --card-turn: calc(.8s * var(--at-rest, 1));
    opacity: 1;
    transition: translate calc(.8s * 1) cubic-bezier(.3, .7, .2, 1), rotate calc(.8s * 1) cubic-bezier(.3, .7, .2, 1), scale calc(.8s * 1) cubic-bezier(.3, .7, .2, 1), opacity calc(.15s * 1) ease, filter calc(.8s * 1) ease;
    transition: translate var(--card-turn) var(--card-ease), rotate var(--card-turn) var(--card-ease), scale var(--card-turn) var(--card-ease), opacity calc(var(--card-fade) * var(--at-rest, 1)) var(--card-fade-ease), filter var(--card-turn) ease;
}
.loop.is-played:is(.is-toss, .is-cover, .is-rise) > * {
    --gone: calc(min(var(--offset, 0), 0) * var(--stack-weight, 1));
    --ahead: calc(max(var(--offset, 0), 0) * var(--stack-weight, 1));
    --card-ease: cubic-bezier(.3, .7, .2, 1);
    --card-fade: .15s;   /* a card to come is solid the moment it moves */
    --card-fade-ease: ease;
    --card-turn: calc(.8s * var(--at-rest, 1));
    opacity: 1;
    transition: translate calc(.8s * 1) cubic-bezier(.3, .7, .2, 1), rotate calc(.8s * 1) cubic-bezier(.3, .7, .2, 1), scale calc(.8s * 1) cubic-bezier(.3, .7, .2, 1), opacity calc(.15s * 1) ease, filter calc(.8s * 1) ease;
    transition: translate var(--card-turn) var(--card-ease), rotate var(--card-turn) var(--card-ease), scale var(--card-turn) var(--card-ease), opacity calc(var(--card-fade) * var(--at-rest, 1)) var(--card-fade-ease), filter var(--card-turn) ease;
}
.loop.is-played.is-toss > [data-turn-jump], .loop.is-played.is-cover > [data-turn-jump], .loop.is-played.is-rise > [data-turn-jump] { transition: none; }
.loop.is-played:is(.is-toss, .is-cover, .is-rise) > [data-turn-jump] { transition: none; }
.loop.is-played.is-toss:not(.is-live) > :not(:first-child) { opacity: 0; opacity: var(--stack-shown, 0); }
.loop.is-played.is-cover:not(.is-live) > :not(:first-child) { opacity: 0; opacity: var(--stack-shown, 0); }
.loop.is-played.is-rise:not(.is-live) > :not(:first-child) { opacity: 0; opacity: var(--stack-shown, 0); }
.loop.is-played:is(.is-toss, .is-cover, .is-rise):not(.is-live) > :not(:first-child) { opacity: 0; opacity: var(--stack-shown, 0); }

/* toss: the cards to come wait in a pile under the one on show, each a step lower and smaller; a turn throws the top one
   off to the side, tilted. --toss-to (-1 left · 1 right) */
.loop.is-played.is-toss > * {
    --toss-to: -1;
    /* the thrown card flies over the pile */
    z-index: calc((50 - 0) * 1 + 0 * (1 - 1)) !important;
    z-index: calc((50 - var(--offset, 0)) * var(--at-rest, 1) + var(--formation-z, 0) * (1 - var(--at-rest, 1))) !important;
    --card-fade: .8s;   /* the thrown card stays solid until it is nearly gone */
    --card-fade-ease: cubic-bezier(.8, 0, 1, 1);
    opacity: max(clamp(0, 1 + var(--gone), 1), 0);
    opacity: max(clamp(0, 1 + var(--gone), 1), var(--stack-shown, 0));
    translate: calc(var(--gone) * -1 * -115%) calc(var(--ahead) * 4%);
    translate: calc(var(--gone) * var(--toss-to) * -115%) calc(var(--ahead) * 4%);
    rotate: calc(var(--gone) * -1 * -14deg);
    rotate: calc(var(--gone) * var(--toss-to) * -14deg);
    scale: calc(1 - var(--ahead) * .05);
}

/* cover: the next card slides in from the side over the last one, which sinks back and darkens under it. --cover-from
   (1 right · -1 left) */
.loop.is-played.is-cover > * {
    --cover-from: 1;
    z-index: calc((50 + 0) * 1 + 0 * (1 - 1)) !important;
    z-index: calc((50 + var(--offset, 0)) * var(--at-rest, 1) + var(--formation-z, 0) * (1 - var(--at-rest, 1))) !important;
    opacity: max(clamp(0, 1 - var(--ahead), 1), 0);
    opacity: max(clamp(0, 1 - var(--ahead), 1), var(--stack-shown, 0));
    translate: calc(var(--ahead) * 1 * 105%) 0;
    translate: calc(var(--ahead) * var(--cover-from) * 105%) 0;
    scale: calc(1 + var(--gone) * .08);
    filter: brightness(calc(1 + var(--gone) * .35));
}

/* rise: the next card rises from below, tilted back a little, over the last one, which sinks back and darkens */
.loop.is-played.is-rise > * {
    z-index: calc((50 + 0) * 1 + 0 * (1 - 1)) !important;
    z-index: calc((50 + var(--offset, 0)) * var(--at-rest, 1) + var(--formation-z, 0) * (1 - var(--at-rest, 1))) !important;
    opacity: max(clamp(0, 1 - var(--ahead), 1), 0);
    opacity: max(clamp(0, 1 - var(--ahead), 1), var(--stack-shown, 0));
    translate: 0 calc(var(--ahead) * 110%);
    rotate: calc(var(--ahead) * 6deg);
    scale: calc(1 + var(--gone) * .08);
    filter: brightness(calc(1 + var(--gone) * .35));
}

/* blocks/masonry.css */

.masonry-gallery {
    --mg-rule: var(--rule, var(--line, #d6d0c4));
    --mg-paper: var(--paper, var(--surface, #f4f1ea));
    --mg-panel: var(--panel, var(--ink, #16140f));
    --mg-panel-fg: var(--panel-fg, var(--paper, #f4f1ea));
    --mg-gap: var(--gap, max(.9rem, min(1.6cqi, 1.6rem)));
    --mg-gap: var(--gap, clamp(.9rem, 1.6cqi, 1.6rem));
    --mg-radius: var(--radius, 0);
    width: 100%;
}

.masonry-gallery .mg-head {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, serif); font-weight: 600;
    font-size: max(1.8rem, min(calc(4 * var(--pe-vw)), 3.2rem));
    font-size: clamp(1.8rem, calc(4 * var(--pe-vw)), 3.2rem); letter-spacing: -.02em; color: #222; color: var(--ink, #16140f);
    margin: 0 0 max(1.6rem, min(4vh, 2.8rem));
    margin: 0 0 clamp(1.6rem, 4vh, 2.8rem);
}
.masonry-gallery .mg-head .accent { color: #007b9a; color: var(--accent, #ff4d18); font-style: italic; }

.masonry-gallery .mg-flow { -moz-column-gap: var(--mg-gap); column-gap: var(--mg-gap); }
.masonry-gallery .mg-cols-2 { -moz-columns: 2; columns: 2; }
.masonry-gallery .mg-cols-3 { -moz-columns: 3; columns: 3; }
.masonry-gallery .mg-cols-4 { -moz-columns: 4; columns: 4; }

.masonry-gallery .mg-plate {
    page-break-inside: avoid;
    -moz-column-break-inside: avoid;
         break-inside: avoid; margin: 0 0 var(--mg-gap);
    border: 1px solid var(--mg-rule); border-radius: var(--mg-radius);
    background: var(--mg-paper); overflow: hidden;
}
.masonry-gallery .mg-plate img { display: block; width: 100%; height: auto; }
.masonry-gallery .mg-plate--tall img { aspect-ratio: 3 / 4; height: auto; -o-object-fit: cover; object-fit: cover; }

.masonry-gallery .mg-cap {
    display: block; padding: .7rem .9rem;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, ui-monospace); font-size: .72rem; font-size: var(--folio-size, .72rem);
    letter-spacing: .1em; text-transform: uppercase; color: #626262; color: var(--muted, #6f6a5e);
}

.masonry-gallery .mg-plate--ink {
    background: var(--mg-panel); border-color: var(--mg-panel);
    padding: max(1.4rem, min(2.4cqi, 2.2rem));
    padding: clamp(1.4rem, 2.4cqi, 2.2rem); display: flow-root;
}
.masonry-gallery .mg-quote {
    margin: 0 0 1.2rem; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif);
    font-size: 1.4rem; line-height: 1.2; font-style: italic; color: var(--mg-panel-fg);
}
.masonry-gallery .mg-cap--inv { padding: 0; color: #007b9a; color: var(--accent, #ff4d18); }

@media (max-width: 900px) {
    .masonry-gallery .mg-cols-3, .masonry-gallery .mg-cols-4 { -moz-columns: 2; columns: 2; }
}
@media (max-width: 768px) {
    .masonry-gallery .mg-flow { -moz-columns: 1; columns: 1; }
}

/* blocks/masthead.css */

.masthead {
    --mh-ink: var(--ink, #0c0c0c);
    --mh-accent: var(--accent, var(--brand-red, #e10600));
    --mh-paper: var(--paper, var(--surface, var(--page-bg, #efe9dd)));
    --mh-muted: var(--muted, #6f6a5f);
    --mh-radius: var(--radius, 0);
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    grid-gap: max(2rem, min(calc(5 * var(--pe-vw)), 5rem));
    grid-gap: clamp(2rem, calc(5 * var(--pe-vw)), 5rem);
    gap: max(2rem, min(calc(5 * var(--pe-vw)), 5rem));
    gap: clamp(2rem, calc(5 * var(--pe-vw)), 5rem);
    min-height: 70vh;
    padding: max(2.5rem, min(calc(6 * var(--pe-vw)), 6rem));
    padding: clamp(2.5rem, calc(6 * var(--pe-vw)), 6rem);
    background: #fafafa;
    background: var(--mh-paper);
    color: #222;
    color: var(--mh-ink);
    overflow: hidden;
    width: 100%;
}
.masthead[data-scheme="dark"] {
    --mh-ink: var(--ink-dark, #f2efe6);
    --mh-paper: var(--paper-dark, var(--surface-dark, var(--page-bg, #14130f)));
    --mh-muted: var(--muted-dark, #9b948a);
}

.masthead .mh-eyebrow {
    margin: 0 0 max(1.4rem, min(calc(4 * var(--pe-vw)), 3rem));
    margin: 0 0 clamp(1.4rem, calc(4 * var(--pe-vw)), 3rem);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, ui-monospace);
    font-weight: 700; font-size: max(.7rem, min(calc(1.1 * var(--pe-vw)), .9rem)); font-size: clamp(.7rem, calc(1.1 * var(--pe-vw)), .9rem);
    letter-spacing: .34em; text-transform: uppercase; color: var(--mh-accent);
}
.masthead .mh-mark {
    margin: 0;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, 'Arial Narrow', Impact, sans-serif);
    font-weight: 400; font-size: max(3.5rem, min(calc(11 * var(--pe-vw)), 9rem)); font-size: clamp(3.5rem, calc(11 * var(--pe-vw)), 9rem);
    line-height: .9; letter-spacing: -.005em; text-transform: uppercase;
    color: var(--mh-ink);
}
.masthead .mh-mark .accent { color: var(--mh-accent); }
.masthead .mh-sub {
    margin: max(1.2rem, min(calc(3 * var(--pe-vw)), 2rem)) 0 0;
    margin: clamp(1.2rem, calc(3 * var(--pe-vw)), 2rem) 0 0; max-width: 42ch;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, ui-monospace);
    font-size: max(.85rem, min(calc(1.3 * var(--pe-vw)), 1.05rem));
    font-size: clamp(.85rem, calc(1.3 * var(--pe-vw)), 1.05rem); line-height: 1.6; color: var(--mh-ink);
}
.masthead .mh-sub .accent { color: var(--mh-accent); }

.masthead .mh-emblem {
    position: relative; justify-self: center;
    width: min(calc(34 * var(--pe-vw)), 26.25rem); aspect-ratio: 1; max-width: 100%;
}
.masthead .mh-bar {
    position: absolute; left: -12%; top: 44%; width: 64%; height: 14%;
    background: var(--mh-ink); border-radius: var(--mh-radius);
}
.masthead .mh-disc {
    position: absolute; right: 0; top: 18%; width: 56%; aspect-ratio: 1;
    background: var(--mh-ink); border-radius: 50%;
}
.masthead .mh-wedge {
    position: absolute; left: 4%; top: 26%; width: 64%; height: 48%;
    background: var(--mh-accent);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.masthead.mh-emblem-bar  .mh-disc,
.masthead.mh-emblem-bar  .mh-wedge { display: none; }
.masthead.mh-emblem-bar  .mh-bar { top: 43%; height: 14%; width: 100%; left: 0; }
.masthead.mh-emblem-disc .mh-wedge,
.masthead.mh-emblem-disc .mh-bar { display: none; }
.masthead.mh-emblem-disc .mh-disc { right: auto; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 70%; }

.masthead .mh-cue {
    position: absolute; right: max(2.5rem, min(calc(6 * var(--pe-vw)), 6rem)); right: clamp(2.5rem, calc(6 * var(--pe-vw)), 6rem); bottom: max(1.4rem, min(calc(4 * var(--pe-vw)), 2.5rem)); bottom: clamp(1.4rem, calc(4 * var(--pe-vw)), 2.5rem); margin: 0;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, ui-monospace); font-size: .72rem;
    letter-spacing: .26em; text-transform: uppercase; color: var(--mh-muted);
}

@media (max-width: 768px) {
    .masthead {
        grid-template-columns: 1fr; min-height: 0; gap: 2.5rem;
        padding: max(2rem, min(calc(9 * var(--pe-vw)), 3.5rem)) calc(6 * var(--pe-vw));
        padding: clamp(2rem, calc(9 * var(--pe-vw)), 3.5rem) calc(6 * var(--pe-vw));
    }
    .masthead .mh-emblem { order: -1; width: min(calc(60 * var(--pe-vw)), 17.5rem); justify-self: start; }
    .masthead .mh-mark { font-size: max(3rem, min(calc(18 * var(--pe-vw)), 6rem)); font-size: clamp(3rem, calc(18 * var(--pe-vw)), 6rem); }
    .masthead .mh-cue { position: static; margin-top: 2rem; }
}

/* blocks/media-missing.css */
/* A picture or video whose file is not there (image.twig, video.twig: is-missing on error), or that has none yet
   (is-empty: the "Add image" drop zone): a visitor sees nothing. The editor's canvas draws both as an empty frame
   instead (frame-load.js), so the piece can still be found and filled. */
.imagesingle.is-missing, .imagesingle.is-empty, .videosingle.is-missing, .videosingle.is-empty { display: none !important; }
:is(.imagesingle, .videosingle):is(.is-missing, .is-empty) { display: none !important; }   /* over a theme's own display for its pictures */

/* blocks/menu-list.css */

:where(.menu-list) {
    --ml-ink: var(--ink, #0a0a0a);
    --ml-muted: var(--muted, #6b6b6b);
    --ml-line: var(--line, #e3e3e3);
    --ml-accent: var(--accent, #635bff);
    --ml-hot: var(--ember, var(--accent, #635bff));
    --ml-row-pad: .95em;
    --ml-price-col: 5em;
    width: 100%; margin: 0;
    color: #222;
    color: var(--ml-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif);
}
:where(.menu-list.ml-rule-none) { --ml-line: transparent; }
:where(.menu-list.ml-rule-strong) { --ml-line: var(--rule-strong, var(--ink, #0a0a0a)); }

:where(.menu-list .ml-head) { margin: 0 0 1.1em; padding-bottom: .9em; border-bottom: 1px solid var(--ml-ink); }
:where(.menu-list .ml-course) {
    margin: 0;
    color: var(--ml-ink);
    font-size: .82em; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; line-height: 1.3;
}
:where(.menu-list .ml-note) { margin: .55em 0 0; max-width: 46em; color: var(--ml-muted); font-size: .95em; line-height: 1.45; }
:where(.menu-list .ml-menu-price), :where(.menu-list .ml-pairing) { display: none; }

:where(.menu-list .ml-rows) { list-style: none; margin: 0; padding: 0; }
:where(.menu-list .ml-row) {
    position: relative;
    padding: var(--ml-row-pad) var(--ml-price-col) var(--ml-row-pad) 0;
    border-top: 1px solid var(--ml-line);
}
:where(.menu-list .ml-row:first-child) { border-top: 0; padding-top: 0; }
:where(.menu-list .ml-row:last-child) { padding-bottom: 0; }
:where(.menu-list .ml-name) {
    display: block;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, serif); font-weight: 400;
    font-size: 1.35em; line-height: 1.12; letter-spacing: -.01em;
    text-wrap: balance;
}
:where(.menu-list .ml-price) {
    position: absolute; right: 0; top: var(--ml-row-pad);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, serif); font-weight: 400;
    font-size: 1.35em; line-height: 1.12; letter-spacing: -.01em;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    text-align: right;
}
:where(.menu-list .ml-row:first-child .ml-price) { top: 0; }
:where(.menu-list.ml-price-light .ml-price) { color: var(--ml-muted); font-size: 1.1em; line-height: 1.4; }
:where(.menu-list .ml-provenance) {
    display: inline; margin-top: .35em;
    color: var(--ml-muted);
    font-size: 1em; line-height: 1.45;
}
:where(.menu-list .ml-allergens) {
    display: inline-block; margin-left: .6em; vertical-align: .08em;
    color: var(--ml-muted);
    font-size: .74em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
}

:where(.menu-list .ml-sold-1 .ml-name) { -webkit-text-decoration: line-through; text-decoration: line-through; text-decoration-thickness: from-font; color: var(--ml-muted); }
:where(.menu-list .ml-sold-1 .ml-price) { color: var(--ml-muted); -webkit-text-decoration: line-through; text-decoration: line-through; text-decoration-thickness: from-font; }

:where(.menu-list .ml-key) { margin: 1.4em 0 0; color: var(--ml-muted); font-size: .82em; letter-spacing: .04em; line-height: 1.5; }

:where(.menu-list.ml-mode-menu .ml-price) { display: none; }
:where(.menu-list.ml-mode-menu .ml-row) { padding-right: 0; }
:where(.menu-list.ml-mode-menu .ml-head) { position: relative; padding-right: 7em; }
:where(.menu-list.ml-mode-menu .ml-menu-price) {
    display: block; position: absolute; right: 0; top: -.25em; margin: 0;
    color: var(--ml-hot);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, serif); font-weight: 400;
    font-size: 2.6em; line-height: 1; letter-spacing: -.02em;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
:where(.menu-list.ml-mode-menu .ml-pairing) { display: block; margin: .55em 0 0; color: var(--ml-ink); font-size: .95em; line-height: 1.45; }

:where(.menu-list.ml-tone-dark) {
    --ml-ink: var(--invert-fg, #f3ede1);
    --ml-muted: color-mix(in srgb, var(--invert-fg, #f3ede1) 62%, transparent);
    --ml-line: color-mix(in srgb, var(--invert-fg, #f3ede1) 18%, transparent);
}

:where(.menu-list.ml-align-center .ml-head) { text-align: center; }

@container (max-width: 14em) {
    :where(.menu-list .ml-row) { padding-right: 0; }
    :where(.menu-list .ml-price) { position: static; display: block; margin-top: .2em; text-align: left; }
}

:where(.menu-list .ml-add), :where(.menu-list .ml-thumb) { display: none; }
:where(.menu-list.ml-order-1 .ml-row) {
    padding-right: calc(2.6em + var(--ml-price-col) + .4em);
    padding-right: calc(var(--ml-add, 2.6em) + var(--ml-price-col) + .4em);
}
:where(.menu-list.ml-order-1 .ml-price) { right: calc(2.6em + .9em); right: calc(var(--ml-add, 2.6em) + .9em); }
:where(.menu-list.ml-order-1 .ml-add) {
    display: block; position: absolute; right: 0; top: calc(var(--ml-row-pad) - .55em);
    width: 2.6em;
    width: var(--ml-add, 2.6em); height: 2.6em; height: var(--ml-add, 2.6em); margin: 0; padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;
    border: 1px solid rgba(8, 8, 8, 0.24); border-radius: 99em;
    background: transparent; color: var(--ml-ink);
    font: 600 1em/1 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 1em/1 var(--font-text, system-ui, sans-serif);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s cubic-bezier(.3, 1.4, .5, 1);
}

@supports (color: color-mix(in lch, red, blue)) {
:where(.menu-list.ml-order-1 .ml-add) {
    border: 1px solid color-mix(in srgb, var(--ml-ink) 24%, transparent);
}
}
:where(.menu-list.ml-order-1 .ml-row:first-child .ml-add) { top: -.55em; }
:where(.menu-list .ml-add-icon), :where(.menu-list .ml-added-icon) { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font-size: 1.05em; line-height: 1; transition: opacity .2s ease, scale .25s ease; }
:where(.menu-list .ml-added-icon) { opacity: 0; scale: .4; }
:where(.menu-list .ml-sold-label) { display: none; }
:where(.menu-list .ml-row:hover .ml-add), :where(.menu-list .ml-add:focus-visible) { background: var(--ml-accent); border-color: var(--ml-accent); color: rgb(240, 251, 255); color: color(display-p3 0.94504 0.9821 1); color: oklch(from #007b9a clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h); color: var(--on-accent, var(--paper, #fff)); }
:where(.menu-list .ml-add:hover) { transform: scale(1.08); }
:where(.menu-list .ml-add:active) { transform: scale(.92); }
:where(.menu-list .ml-add:focus-visible) { outline: .125rem solid var(--ml-accent); outline-offset: .1875rem; }
:where(.menu-list .ml-add.is-added) { background: var(--ml-ink); border-color: var(--ml-ink); color: #fafafa; color: var(--paper, #fff); }
:where(.menu-list .ml-add.is-added .ml-add-icon) { opacity: 0; scale: .4; }
:where(.menu-list .ml-add.is-added .ml-added-icon) { opacity: 1; scale: 1; }

:where(.menu-list.ml-order-1 .ml-row:has(> .ml-thumb)) { padding-left: calc(4.6em + 1.1em); padding-left: calc(var(--ml-thumb, 4.6em) + 1.1em); min-height: calc(4.6em + 2 * var(--ml-row-pad)); min-height: calc(var(--ml-thumb, 4.6em) + 2 * var(--ml-row-pad)); }
.menu-list.ml-order-1 .ml-thumb {
    display: block; position: absolute; left: 0; top: var(--ml-row-pad); width: 4.6em; width: var(--ml-thumb, 4.6em); aspect-ratio: 1; margin: 0; overflow: hidden;
    border-radius: calc(1vh * 1.5);
    border-radius: calc(var(--radius, .4em) * 1.5); background: rgb(241, 241, 241); background: color-mix(in srgb, #222 4%, #fafafa); background: var(--surface, var(--ml-line));
}
.menu-list .ml-row:first-child .ml-thumb { top: 0; }
:where(.menu-list .ml-thumb img), :where(.menu-list .ml-thumb picture) { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: scale .6s cubic-bezier(.2, .7, .2, 1), filter .3s ease; }
:where(.menu-list .ml-row:hover .ml-thumb img) { scale: 1.08; }
:where(.menu-list.ml-thumbs-round .ml-thumb) { border-radius: 50%; }
.menu-list.ml-thumbs-none .ml-thumb { display: none; }
:where(.menu-list.ml-thumbs-none .ml-row:has(> .ml-thumb)) { padding-left: 0; min-height: 0; }

:where(.menu-list.ml-order-1 .ml-sold-1) { padding-right: calc(var(--ml-price-col) + 6.6em); }
:where(.menu-list .ml-sold-1 .ml-thumb img) { filter: grayscale(1); opacity: .55; }
:where(.menu-list.ml-order-1 .ml-sold-1 .ml-provenance) { opacity: .75; }
:where(.menu-list .ml-sold-1 .ml-add), :where(.menu-list .ml-row.ml-sold-1:hover .ml-add) {
    width: auto; padding: 0 .95em; cursor: default; border-color: transparent; transform: none;
    background: rgba(2, 2, 2, 0.07); color: var(--ml-muted);
}

@supports (color: color-mix(in lch, red, blue)) {
:where(.menu-list .ml-sold-1 .ml-add), :where(.menu-list .ml-row.ml-sold-1:hover .ml-add) {
    background: color-mix(in srgb, var(--ml-ink) 7%, transparent);
}
}
:where(.menu-list .ml-sold-1 .ml-add-icon), :where(.menu-list .ml-sold-1 .ml-added-icon) { display: none; }
:where(.menu-list .ml-sold-1 .ml-sold-label) { display: inline; font-size: .74em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
:where(.menu-list.ml-order-1 .ml-sold-1 .ml-price) { right: 7.4em; }

@container (max-width: 22em) {
    :where(.menu-list.ml-order-1 .ml-row) { padding-right: calc(2.6em + .8em); padding-right: calc(var(--ml-add, 2.6em) + .8em); }
    :where(.menu-list.ml-order-1 .ml-price) { position: static; display: block; margin-top: .25em; text-align: left; }
    :where(.menu-list.ml-order-1 .ml-sold-1 .ml-add) { position: static; display: inline-block; height: 2.2em; margin-top: .6em; }
}
html.respect-reduced-motion :where(.menu-list .ml-add), html.respect-reduced-motion :where(.menu-list .ml-thumb img) { transition: none; }


/* blocks/meter.css */
/* meter — a value as a bar, a ruler, a line, a ring, stars or dots (components/meter.twig). Knobs, each a registry prop with a cssVar:
   --meter-fill (the filled part, default the accent) · --meter-track (how strong the empty part is, in % of the text
   colour) · --meter-track-color (the empty part's own colour, over that) · --meter-thickness (the bar's or the ring's
   line, in tenths of the text size) · --meter-length (a bar's, a line's or a ruler's length, in % of its place). --meter-value (0 to 1) comes
   from the value; --meter-shown (0 to 1) is how much of it is drawn, which the fillIn reveal moves from 0. */
.meter {
    --meter-on: var(--meter-fill, var(--accent, currentColor));
    --meter-off: var(--meter-track-color, color-mix(in oklab, currentColor calc(var(--meter-track, 15) * 1%), transparent));
    --meter-drawn: calc(var(--meter-value, 0) * var(--meter-shown, 1));
    display: flex; align-items: center; min-width: 0; height: 100%;
}

.meter-track { position: relative; display: block; overflow: hidden; }
/* a bar's and a line's ends are the piece's own corners: round by default (half the thickness), the Corners control
   reshapes them, the track takes them */
.meter--bar, .meter--line { border-radius: calc(4 * .05em); border-radius: calc(var(--meter-thickness, 4) * .05em); }
.meter--bar.meter--square, .meter--line.meter--square { border-radius: 0; }
.meter--bar .meter-track {
    width: calc(100 * 1%);
    width: calc(var(--meter-length, 100) * 1%); height: calc(4 * .1em); height: calc(var(--meter-thickness, 4) * .1em); max-height: 100%;
    border-radius: inherit; background: var(--meter-off);
}
.meter--bar .meter-fill { position: absolute; top: 0; right: auto; bottom: 0; left: 0; width: calc(var(--meter-drawn) * 100%); border-radius: inherit; background: var(--meter-on); }
.meter--upright { justify-content: center; align-items: stretch; min-height: 3em; }
.meter--upright .meter-track { width: calc(4 * .1em); width: calc(var(--meter-thickness, 4) * .1em); max-width: 100%; height: auto; max-height: none; }
.meter--upright .meter-fill { top: auto; right: 0; bottom: 0; left: 0; width: auto; height: calc(var(--meter-drawn) * 100%); }

/* the line: a rule the whole length in the fill colour (the value is not drawn) */
.meter--line .meter-track {
    width: calc(100 * 1%);
    width: calc(var(--meter-length, 100) * 1%); height: calc(4 * .1em); height: calc(var(--meter-thickness, 4) * .1em); max-height: 100%;
    border-radius: inherit; background: var(--meter-on);
}
.meter--line .meter-fill { display: none; }

/* the ruler: a hairline in the text colour with a mark at every 1/count of it and four finer ones between, the value
   drawn over its start in the fill colour */
.meter--ruler { align-items: stretch; }
.meter--ruler .meter-track {
    --meter-mark: color-mix(in oklab, currentColor calc(var(--meter-track, 15) * 2.5%), transparent);
    width: calc(100 * 1%);
    width: calc(var(--meter-length, 100) * 1%); height: 100%;
    background:
        linear-gradient(currentColor, currentColor) 0 0 / 100% .07em no-repeat,
        linear-gradient(color-mix(in oklab, currentColor calc(15 * 2.5%), transparent), color-mix(in oklab, currentColor calc(15 * 2.5%), transparent)) 100% 0 / .07em 46% no-repeat,
        repeating-linear-gradient(to right, color-mix(in oklab, currentColor calc(15 * 2.5%), transparent) 0,color-mix(in oklab, currentColor calc(15 * 2.5%), transparent) .07em, transparent .07em calc(100% / 5)) 0 0 / 100% 46% no-repeat,
        repeating-linear-gradient(to right, var(--meter-off) 0,var(--meter-off) .07em, transparent .07em calc(100% / (5 * 5))) 0 0 / 100% 24% no-repeat;
}

@supports (background: repeating-linear-gradient(red 0%, red 0% 1%, red 2%)) {
.meter--ruler .meter-track {
    background:
        linear-gradient(currentColor, currentColor) 0 0 / 100% .07em no-repeat,
        linear-gradient(var(--meter-mark), var(--meter-mark)) 100% 0 / .07em 46% no-repeat,
        repeating-linear-gradient(to right, var(--meter-mark) 0,var(--meter-mark) .07em, transparent .07em calc(100% / var(--meter-count, 5))) 0 0 / 100% 46% no-repeat,
        repeating-linear-gradient(to right, var(--meter-off) 0,var(--meter-off) .07em, transparent .07em calc(100% / (var(--meter-count, 5) * 5))) 0 0 / 100% 24% no-repeat;
}
}

@supports (background: repeating-linear-gradient(red 0%, red 0% 1%, red 2%)) and (color: color-mix(in lch, red, blue)) {
.meter--ruler .meter-track {
    background:
        linear-gradient(currentColor, currentColor) 0 0 / 100% .07em no-repeat,
        linear-gradient(color-mix(in oklab, currentColor calc(15 * 2.5%), transparent), color-mix(in oklab, currentColor calc(15 * 2.5%), transparent)) 100% 0 / .07em 46% no-repeat,
        repeating-linear-gradient(to right, color-mix(in oklab, currentColor calc(15 * 2.5%), transparent) 0 .07em, transparent .07em calc(100% / 5)) 0 0 / 100% 46% no-repeat,
        repeating-linear-gradient(to right, var(--meter-off) 0 .07em, transparent .07em calc(100% / (5 * 5))) 0 0 / 100% 24% no-repeat;
}
}

@supports (background: repeating-linear-gradient(red 0%, red 0% 1%, red 2%)) {
.meter--ruler .meter-track {
    background:
        linear-gradient(currentColor, currentColor) 0 0 / 100% .07em no-repeat,
        linear-gradient(var(--meter-mark), var(--meter-mark)) 100% 0 / .07em 46% no-repeat,
        repeating-linear-gradient(to right, var(--meter-mark) 0 .07em, transparent .07em calc(100% / var(--meter-count, 5))) 0 0 / 100% 46% no-repeat,
        repeating-linear-gradient(to right, var(--meter-off) 0 .07em, transparent .07em calc(100% / (var(--meter-count, 5) * 5))) 0 0 / 100% 24% no-repeat;
}
}
.meter--ruler .meter-fill {
    position: absolute; top: 0; right: auto; bottom: auto; left: 0; width: calc(var(--meter-drawn) * 100%);
    height: calc(4 * .045em);
    height: calc(var(--meter-thickness, 4) * .045em); background: var(--meter-on);
}

/* the ring: a circle of radius 50 shrunk so its line stays inside the box whatever its thickness. Its lengths are in
   px, which in the ring's own 100-unit box are units of it (Firefox drops a unitless calc() in stroke-width). */
.meter--ring { justify-content: center; }
.meter-ring { display: block; width: 100%; height: 100%; rotate: -90deg; }
.meter-ring circle {
    fill: none; stroke-width: calc(4 * 2px); stroke-width: calc(var(--meter-thickness, 4) * 2px);
    scale: calc(100 / (100 + 4 * 2));
    scale: calc(100 / (100 + var(--meter-thickness, 4) * 2)); transform-origin: 50% 50%;
}
.meter-ring .meter-track { stroke: var(--meter-off); }
.meter-ring .meter-fill { stroke: var(--meter-on); stroke-linecap: round; stroke-dasharray: calc(var(--meter-drawn) * 100px) 100px; }
.meter--square .meter-ring .meter-fill { stroke-linecap: butt; }

/* stars and dots: mark i fills by how much of the value reaches past it (--i) */
.meter-marks { display: block; width: 100%; height: 100%; }
.meter-marks .meter-track { fill: var(--meter-off); }
.meter-marks .meter-fill {
    fill: var(--meter-on);
    clip-path: inset(0 calc((1 - clamp(0, 0 * 1 - 0, 1)) * 100%) 0 0);
    clip-path: inset(0 calc((1 - clamp(0, var(--meter-marks, 0) * var(--meter-shown, 1) - var(--i, 0), 1)) * 100%) 0 0);
}

/* blocks/metric-tiles.css */

.metric-tiles {
    --mt-ink: var(--ink, #0a0a0a);
    --mt-muted: var(--muted, #6b6b6b);
    --mt-line: var(--line, #e3e3e3);
    --mt-paper: var(--paper, #fff);
    --mt-up: var(--up-ink, var(--up, #15803d));
    --mt-down: var(--down-ink, var(--down, #b91c1c));
    --mt-fig: 2.6cqi;
    width: 100%; margin: 0; color: #222; color: var(--mt-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif);
}
.metric-tiles.mt-fig-large { --mt-fig: 3.6cqi; }

.metric-tiles .mt-eyebrow {
    margin: 0 0 1.2cqi; color: var(--mt-muted);
    font: 500 max(calc(.82 * var(--pe-vw)), .9cqi)/1.2 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 max(calc(.82 * var(--pe-vw)), .9cqi)/1.2 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase;
}
.metric-tiles.mt-align-center .mt-eyebrow { text-align: center; }

.metric-tiles .mt-row { margin: 0; --row-item: 10cqi; --row-gap: 0; }
.metric-tiles .mt-tile { position: relative; margin: 0; padding: 1.2cqi 1.6cqi 1.2cqi 1.6cqi; }
.metric-tiles .mt-tile:first-child { padding-left: 0; }
.metric-tiles .mt-tile + .mt-tile { border-left: 1px solid var(--mt-line); }
.metric-tiles.mt-tone-ruled .mt-row { border-top: 1px solid var(--mt-line); border-bottom: 1px solid var(--mt-line); }
.metric-tiles.mt-tone-cards .mt-row { --row-gap: 1.2cqi; }
.metric-tiles.mt-tone-cards .mt-tile { padding: 1.4cqi 1.6cqi; border-radius: 1cqi; background: var(--mt-paper); box-shadow: 0 0 0 1px var(--mt-line); }
.metric-tiles.mt-tone-cards .mt-tile + .mt-tile { border-left: 0; }
.metric-tiles.mt-tone-cards .mt-tile:first-child { padding-left: 1.6cqi; }
.metric-tiles.mt-align-center .mt-tile { text-align: center; }

.metric-tiles .mt-label { margin: 0 0 .55em; color: var(--mt-muted); font: 500 max(calc(.82 * var(--pe-vw)), .9cqi)/1.2 'Open Sans', Arial, Helvetica, sans-serif; font: 500 max(calc(.82 * var(--pe-vw)), .9cqi)/1.2 var(--font-text, system-ui, sans-serif); letter-spacing: .01em; }
.metric-tiles .mt-figure { margin: 0; line-height: 1; }
.metric-tiles .mt-value { display: inline-block; font-size: var(--mt-fig); font-weight: 600; letter-spacing: -.03em; line-height: 1; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.metric-tiles .mt-unit { display: inline-block; margin-left: .3em; color: var(--mt-muted); font: 500 max(calc(.82 * var(--pe-vw)), .95cqi)/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 500 max(calc(.82 * var(--pe-vw)), .95cqi)/1 var(--font-mono, monospace); letter-spacing: .02em; vertical-align: baseline; }
.metric-tiles .mt-delta { margin: .55em 0 0; color: var(--mt-muted); font: 500 max(calc(.82 * var(--pe-vw)), .9cqi)/1.2 ui-monospace, 'SF Mono', Menlo, monospace; font: 500 max(calc(.82 * var(--pe-vw)), .9cqi)/1.2 var(--font-mono, monospace); letter-spacing: .01em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.metric-tiles .mt-trend-up { color: var(--mt-up); }
.metric-tiles .mt-trend-down { color: var(--mt-down); }

.metric-tiles .mt-spark { --row-flow: row nowrap; --row-item: 0; --row-gap: .22cqi; height: 2.2cqi; margin: 1cqi 0 0; }
.metric-tiles .mt-bar {
    margin-top: auto; height: calc(50 * 1%); height: calc(var(--v, 50) * 1%); min-height: .2cqi;
    border-radius: .12cqi .12cqi 0 0;
    background: #007b9a;
    background: var(--mt-spark, var(--accent, #635bff)); opacity: .45;
}
.metric-tiles .mt-bar:last-child { opacity: 1; }
.metric-tiles.mt-spark-false .mt-spark, .metric-tiles.mt-spark- .mt-spark { display: none; }
.metric-tiles.mt-align-center .mt-spark { margin-left: auto; margin-right: auto; width: 70%; }

@container (max-width: 30rem) {
    .metric-tiles { --mt-fig: 7cqi; }
    .metric-tiles .mt-row { --row-flow: row wrap; --row-item: 40%; --row-gap: 4cqi 0; }
    .metric-tiles .mt-tile { padding: 3cqi 4cqi 3cqi 0; }
    .metric-tiles .mt-tile + .mt-tile { border-left: 0; }
    .metric-tiles .mt-tile:nth-child(even) { border-left: 1px solid var(--mt-line); padding-left: 4cqi; }
    .metric-tiles .mt-label, .metric-tiles .mt-delta, .metric-tiles .mt-unit, .metric-tiles .mt-eyebrow { font-size: 3.35cqi; }
    .metric-tiles .mt-spark { height: 6cqi; --row-gap: .6cqi; }
}

/* blocks/model3d.css */

.m3d-tile {
    position: relative;
    border-radius: calc(1vh * 1.6);
    border-radius: var(--r-lg, var(--radius, .875rem));
    overflow: hidden;
}

.m3d-stage {
    --m3d-paper: var(--paper, #fff);
    --m3d-line: var(--line, color-mix(in srgb, var(--ink, #0a2540) 10%, transparent));
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 13.75rem;
    border-radius: calc(1vh * 1.6);
    border-radius: var(--r-lg, var(--radius, .875rem));
    overflow: hidden;
    background: #fafafa;
    background: var(--m3d-paper);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, ui-monospace, monospace);
    isolation: isolate;
}
.m3d-tile > .m3d-stage { border-radius: inherit; }

.m3d-canvas {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.m3d-ground-surface::before,
.m3d-ground-gradient::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
}
.m3d-ground-gradient::before {
    background: radial-gradient(60% 55% at 50% 42%,
        rgba(0, 11, 14, 0.09),
        transparent 70%);
    background: radial-gradient(60% 55% at 50% 42%,
        color-mix(in srgb, #007b9a 9%, transparent),
        transparent 70%);
}

@supports (color: color-mix(in lch, red, blue)) {
.m3d-ground-gradient::before {
    background: radial-gradient(60% 55% at 50% 42%,
        color-mix(in srgb, var(--accent, #635bff) 9%, transparent),
        transparent 70%);
}
}
.m3d-ground-surface::before {
    background:
        radial-gradient(38% 9% at 50% 84%, rgba(7, 7, 7, 0.22), transparent 75%),
        linear-gradient(to bottom, transparent 55%, rgba(2, 2, 2, 0.05) 100%);
    background:
        radial-gradient(38% 9% at 50% var(--m3d-floor, 84%), rgba(7, 7, 7, 0.22), transparent 75%),
        linear-gradient(to bottom, transparent 55%, rgba(2, 2, 2, 0.05) 100%);
    background:
        radial-gradient(38% 9% at 50% 84%, color-mix(in srgb, #222 22%, transparent), transparent 75%),
        linear-gradient(to bottom, transparent 55%, color-mix(in srgb, #222 5%, transparent) 100%);
}

@supports (color: color-mix(in lch, red, blue)) {
.m3d-ground-surface::before {
    background:
        radial-gradient(38% 9% at 50% var(--m3d-floor, 84%), color-mix(in srgb, var(--ink, #0a2540) 22%, transparent), transparent 75%),
        linear-gradient(to bottom, transparent 55%, color-mix(in srgb, var(--ink, #0a2540) 5%, transparent) 100%);
}
}

.m3d-poster {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    transition: opacity .6s ease;
    pointer-events: none;
}
.m3d-ready .m3d-poster { opacity: 0; }

.m3d-label,
.m3d-hint {
    position: absolute;
    z-index: 3;
    font-size: .72em;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #626262;
    color: var(--muted, rgba(20, 20, 20, 0.6));
    pointer-events: none;
}

@supports (color: color-mix(in lch, red, blue)) {
.m3d-label,
.m3d-hint {
    color: var(--muted, color-mix(in srgb, var(--ink, #0a2540) 60%, transparent));
}
}
.m3d-label { top: 1em; left: 1.1em; }
.m3d-hint {
    bottom: 1em;
    right: 1.1em;
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: .35em .7em;
    border: 1px solid var(--m3d-line);
    border-radius: 62.4375rem;
    background: color-mix(in srgb, var(--m3d-paper) 70%, transparent);
    -webkit-backdrop-filter: blur(.375rem);
            backdrop-filter: blur(.375rem);
    opacity: .85;
    transition: opacity .3s ease;
}
.m3d-grabbing .m3d-hint { opacity: 0; }

.m3d-grab { cursor: grab; touch-action: pan-y; }
.m3d-grabbing { cursor: grabbing; }

.m3d-fallback { background: color-mix(in srgb, var(--m3d-paper) 92%, #222); }

@supports (color: color-mix(in lch, red, blue)) {
.m3d-fallback { background: color-mix(in srgb, var(--m3d-paper) 92%, var(--ink, #0a2540)); }
}

/* blocks/not-found.css */
.not-found {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    text-align: center;
    padding: calc(8 * var(--pe-vw));
    color: #222;
    color: var(--ink, #111);
    background: #f9f9f9;
    background: var(--page-bg, #fff);
}
.not-found .nf-code {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, var(--font-text, serif));
    font-weight: 600;
    font-size: max(4rem, min(calc(18 * var(--pe-vw)), 11rem));
    font-size: clamp(4rem, calc(18 * var(--pe-vw)), 11rem);
    line-height: 0.9;
    letter-spacing: -0.02em;
}
.not-found .nf-msg {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif);
    font-size: max(1rem, min(calc(2.4 * var(--pe-vw)), 1.35rem));
    font-size: clamp(1rem, calc(2.4 * var(--pe-vw)), 1.35rem);
    opacity: 0.75;
}
.not-found .nf-home a {
    display: inline-block;
    margin-top: 0.8rem;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif);
    font-size: 1rem;
    font-weight: 600;
    color: #007b9a;
    color: var(--accent, var(--ink, #111));
    -webkit-text-decoration: none;
    text-decoration: none;
    border-bottom: .125rem solid currentColor;
    padding-bottom: .125rem;
}
.not-found .nf-home a:hover { opacity: 0.7; }

/* blocks/open-now-hours.css */

.open-now-hours {
    --onh-ink: var(--ink, #151316);
    --onh-muted: var(--muted, #5f5a60);
    --onh-line: var(--line, #d9d4cd);
    --onh-accent: var(--accent-text, var(--accent, #5a3dc8));
    --onh-open: var(--spark, var(--accent, #5a3dc8));
    margin: 0; color: #222; color: var(--onh-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, 'Helvetica Neue', Arial, sans-serif); font-size: 1.125rem; font-size: var(--text-md, 1rem); line-height: 1.45;
}
.open-now-hours.onh-tone-dark {
    --onh-ink: var(--invert-fg, #efede9); --onh-muted: color-mix(in srgb, var(--invert-fg, #efede9) 64%, transparent);
    --onh-line: color-mix(in srgb, var(--invert-fg, #efede9) 18%, transparent); --onh-accent: var(--accent, #b7a3f6);
}
.open-now-hours :where(h2, p, ol, li) { margin: 0; padding: 0; }
.open-now-hours .onh-eyebrow { color: var(--onh-muted); font-size: 0.75rem; font-size: var(--text-xs, .78rem); font-weight: 560; letter-spacing: .12em; text-transform: uppercase; }
.open-now-hours .onh-title { margin-top: .5em; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 400; font-size: 3rem; font-size: var(--text-xl, 3rem); line-height: 1; letter-spacing: -.015em; text-wrap: balance; }

.open-now-hours .onh-state { margin-top: 1.1em; font-size: 1.4rem; font-size: var(--text-lg, 1.4rem); line-height: 1.25; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; text-wrap: balance; }
.open-now-hours.onh-size-large .onh-state { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-size: 2.6rem; font-size: var(--text-xl, 2.6rem); line-height: 1.02; letter-spacing: -.01em; }
.open-now-hours .onh-dot {
    position: relative; display: inline-block; width: .5em; height: .5em; margin-right: .55em; vertical-align: .12em;
    border-radius: 50%; background: var(--onh-muted); box-shadow: 0 0 0 1px rgba(8, 8, 8, 0.25);
}

@supports (color: color-mix(in lch, red, blue)) {
.open-now-hours .onh-dot { box-shadow: 0 0 0 1px color-mix(in srgb, var(--onh-ink) 25%, transparent);
}
}
.open-now-hours[data-open="open"] .onh-dot { background: var(--onh-open); animation: onh-pulse 2.4s ease-out infinite; }
.open-now-hours[data-open="soon"] .onh-dot { background: #007b9a; background: var(--accent, #b7a3f6); }
@keyframes onh-pulse { 0% { box-shadow: 0 0 0 1px rgba(8, 8, 8, 0.25), 0 0 0 0 rgba(0, 86, 108, 0.7); }

@supports (color: color-mix(in lch, red, blue)) {
0% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--onh-ink) 25%, transparent), 0 0 0 0 color-mix(in srgb, var(--onh-open) 70%, transparent); }
} 100% { box-shadow: 0 0 0 1px rgba(8, 8, 8, 0.25), 0 0 0 .7em transparent; }

@supports (color: color-mix(in lch, red, blue)) {
100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--onh-ink) 25%, transparent), 0 0 0 .7em transparent; }
} }
html.respect-reduced-motion .open-now-hours .onh-dot { animation: none; }

.open-now-hours .onh-hold { display: none; }
.open-now-hours.onh-held-1 .onh-hold {
    display: block; margin-top: .7em;
    color: var(--onh-muted);
    font-size: 0.875rem;
    font-size: var(--text-sm, 1rem); line-height: 1.35; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.open-now-hours .onh-hold-label { color: var(--onh-ink); font-weight: 600; }
.open-now-hours .onh-hold-dot {
    display: inline-block; width: .5em; height: .5em; margin-right: .55em; vertical-align: .12em;
    border-radius: 50% 50% 22% 22%; background: var(--onh-muted);
    box-shadow: 0 0 0 1px rgba(8, 8, 8, 0.25);
}

@supports (color: color-mix(in lch, red, blue)) {
.open-now-hours .onh-hold-dot {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--onh-ink) 25%, transparent);
}
}
.open-now-hours[data-hold="held"] .onh-hold-dot { background: #007b9a; background: var(--signal, var(--accent, #b7a3f6)); }
.open-now-hours[data-hold="held"] .onh-hold [data-hold-state] { color: var(--signal, var(--onh-ink)); font-weight: 560; }
.open-now-hours[data-hold="gone"] .onh-hold-label { color: var(--onh-muted); font-weight: 500; }

.open-now-hours .onh-days { margin-top: 2.2em; list-style: none; border-top: 1px solid var(--onh-ink); }
.open-now-hours .onh-day { padding: .8em 0; border-bottom: 1px solid var(--onh-line); color: var(--onh-muted); transition: color .2s ease; }
.open-now-hours.onh-rule-none .onh-days, .open-now-hours.onh-rule-none .onh-day { border: 0; }
.open-now-hours .onh-day-name { color: var(--onh-ink); }
.open-now-hours .onh-day-note { margin-left: .8em; color: var(--onh-accent); font-size: 0.75rem; font-size: var(--text-xs, .78rem); font-weight: 560; letter-spacing: .12em; text-transform: uppercase; }
.open-now-hours .onh-day-hours { float: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.open-now-hours .onh-day.is-today { color: var(--onh-ink); }
.open-now-hours .onh-day.is-today :where(.onh-day-name, .onh-day-hours) { font-weight: 650; }
.open-now-hours .onh-day.is-today .onh-day-name { box-shadow: inset 0 -.32em 0 rgba(0, 86, 108, 0.7); box-shadow: inset 0 -.32em 0 color-mix(in srgb, #007b9a 70%, transparent); }

@supports (color: color-mix(in lch, red, blue)) {
.open-now-hours .onh-day.is-today .onh-day-name { box-shadow: inset 0 -.32em 0 color-mix(in srgb, var(--accent, #b7a3f6) 70%, transparent); }
}
.open-now-hours .onh-note { margin-top: 1.2em; max-width: 44ch; color: var(--onh-muted); text-wrap: pretty; }
.open-now-hours.onh-align-center { text-align: center; }
.open-now-hours.onh-align-center .onh-day { text-align: left; }

/* blocks/option-group.css */

.optgroup {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-gap: 0.5rem;
    grid-gap: var(--opt-gap, 0.5rem);
    gap: 0.5rem;
    gap: var(--opt-gap, 0.5rem);
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    grid-template-columns: repeat(auto-fit, minmax(var(--opt-min, 13.5rem), 1fr));
}
.optgroup--discs { --opt-min: 8.4rem; }

.optgroup .opt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.22rem;
    padding: 0.95rem 1.05rem 1.05rem;
    cursor: pointer;
    background: #fafafa;
    background: var(--card, var(--panel, #eeece6));
    border: 1px solid transparent;
    border-radius: 1vh;
    border-radius: var(--radius, .125rem);
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;
    transition: background 0.4s cubic-bezier(.4, 0, .2, 1), border-color 0.4s cubic-bezier(.4, 0, .2, 1), transform 0.4s cubic-bezier(.4, 0, .2, 1), box-shadow 0.4s cubic-bezier(.4, 0, .2, 1);
    transition: background 0.4s var(--ease, ease), border-color 0.4s var(--ease, ease), transform 0.4s var(--ease, ease), box-shadow 0.4s var(--ease, ease);
}
.optgroup .opt::after {
    content: "";
    position: absolute;
    top: 0.95rem;
    right: 1rem;
    width: .5rem;
    height: .5rem;
    background: #007b9a;
    background: var(--accent, #a83214);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.35s cubic-bezier(.4, 0, .2, 1), transform 0.35s cubic-bezier(.4, 0, .2, 1);
    transition: opacity 0.35s var(--ease, ease), transform 0.35s var(--ease, ease);
}
@media (hover: hover) {
    .optgroup .opt:hover { background: #f9f9f9; background: var(--page-bg, #fff); transform: translateY(-.125rem); box-shadow: 0 1px 0 rgba(5, 5, 5, 0.14); box-shadow: 0 1px 0 var(--rule, rgba(0, 0, 0, .16)); }
}
.optgroup .opt:focus-visible { outline: .125rem solid #007b9a; outline: .125rem solid var(--accent, #a83214); outline-offset: .1875rem; }
.optgroup .opt.is-selected {
    background: #f9f9f9;
    background: var(--page-bg, #fff);
    border-color: #007b9a;
    border-color: var(--accent, #a83214);
    box-shadow: inset 0 0 0 1px #007b9a;
    box-shadow: inset 0 0 0 1px var(--accent, #a83214);
    transform: none;
}
.optgroup .opt.is-selected::after { opacity: 1; transform: scale(1); }

.opt-title { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-size: 1.24rem; line-height: 1.15; color: #222; color: var(--ink, #111); }
.opt-sub   { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-style: italic; font-size: 0.95rem; color: #494949; color: var(--body, #333); }
.opt-meta  { margin-top: 0.4rem; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 0.7rem; letter-spacing: 0.005em;
             color: #626262;
             color: var(--muted, #666); }

.opt-disc {
    display: block;
    width: calc(1 * 3.4rem);
    width: calc(var(--d, 1) * var(--opt-disc, 3.4rem));
    height: calc(1 * 3.4rem);
    height: calc(var(--d, 1) * var(--opt-disc, 3.4rem));
    margin-bottom: 0.5rem;
    border-radius: 50%;
    background: #222;
    background: var(--ink, #111);
    transition: transform 0.5s cubic-bezier(.4, 0, .2, 1);
    transition: transform 0.5s var(--ease, ease);
}
.optgroup .opt.is-selected .opt-disc { background: #007b9a; background: var(--accent, #a83214); }
.opt-swatch {
    display: block;
    width: 100%;
    height: 2.1rem;
    margin-bottom: 0.55rem;
    border-radius: 1vh;
    border-radius: var(--radius, .125rem);
    box-shadow: inset 0 0 0 1px rgba(5, 5, 5, 0.14);
    box-shadow: inset 0 0 0 1px var(--rule, rgba(0, 0, 0, .16));
}

.spec-live {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 0.86em;
    letter-spacing: 0.01em;
    color: #007b9a;
    color: var(--accent, #a83214);
    white-space: nowrap;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.is-changed { animation: cfg-flash 0.7s cubic-bezier(.4, 0, .2, 1); animation: cfg-flash 0.7s var(--ease, ease); }
@keyframes cfg-flash {
    0%   { background: rgba(0, 123, 154, 0.22); background: color-mix(in srgb, #007b9a calc(22% * 1), transparent); }

@supports (color: color-mix(in lch, red, blue)) {
0%   { background: color-mix(in srgb, var(--accent, #a83214) calc(22% * var(--opt-tint, 1)), transparent); }
}
    100% { background: transparent; }
}

.cfg-btn {
    display: inline-block;
    padding: 0.78rem 1.35rem;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    -webkit-text-decoration: none;
    text-decoration: none;
    border-radius: 1vh;
    border-radius: var(--radius, .125rem);
    cursor: pointer;
    background: #007b9a;
    background: var(--accent, #a83214);
    color: rgb(240, 251, 255);
    color: color(display-p3 0.94504 0.9821 1);
    color: oklch(from #007b9a clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h);
    color: var(--accent-ink, #fff);
    border: 1px solid #007b9a;
    border: 1px solid var(--accent, #a83214);
    transition: background 0.3s cubic-bezier(.4, 0, .2, 1), color 0.3s cubic-bezier(.4, 0, .2, 1), border-color 0.3s cubic-bezier(.4, 0, .2, 1);
    transition: background 0.3s var(--ease, ease), color 0.3s var(--ease, ease), border-color 0.3s var(--ease, ease);
}
.cfg-btn:hover { background: #222; background: var(--ink, #111); border-color: #222; border-color: var(--ink, #111); }
.cfg-btn--ghost { background: transparent; color: #222; color: var(--ink, #111); border-color: rgba(12, 12, 12, 0.34); border-color: var(--rule-strong, rgba(0, 0, 0, .34)); }
.cfg-btn--ghost:hover { background: transparent; border-color: #007b9a; border-color: var(--accent, #a83214); color: #007b9a; color: var(--accent, #a83214); }
.cfg-btn:focus-visible { outline: .125rem solid #007b9a; outline: .125rem solid var(--accent, #a83214); outline-offset: .1875rem; }
.cfg-btn.is-done { background: #222; background: var(--ink, #111); border-color: #222; border-color: var(--ink, #111); color: rgb(240, 251, 255); color: color(display-p3 0.94504 0.9821 1); color: oklch(from #007b9a clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h); color: var(--accent-ink, #fff); }

.cfg-live {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .optgroup { grid-template-columns: 1fr 1fr; gap: 0.4rem; }
    .optgroup--discs { grid-template-columns: 1fr 1fr; }
    .optgroup .opt { padding: 0.8rem 0.85rem 0.9rem; }
    .opt-title { font-size: 1.08rem; }
    .opt-disc { --opt-disc: 2.6rem; }
}

/* blocks/package-list.css */

.package-list {
    --pkl-ink: var(--ink, #151513);
    --pkl-muted: var(--muted, #65625b);
    --pkl-line: var(--line, #d8d5cd);
    --pkl-accent: var(--accent, #b3321d);
    --pkl-pad: 1.9em;
    width: 100%; margin: 0;
    color: #222;
    color: var(--pkl-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, 'Helvetica Neue', Arial, sans-serif);
}
.package-list.pkl-density-compact { --pkl-pad: 1.15em; }
.package-list.pkl-rule-strong { --pkl-line: var(--rule-strong, var(--ink, #151513)); }
.package-list.pkl-rule-none { --pkl-line: transparent; }

.package-list .pkl-head { margin: 0 0 2.4em; }
.package-list .pkl-eyebrow {
    margin: 0;
    color: var(--pkl-muted);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, 'SFMono-Regular', Menlo, monospace); font-size: .82em; line-height: 1.4; letter-spacing: .01em;
}
.package-list .pkl-title {
    margin: .55em 0 0 -.04em; max-width: 18em;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, 'Helvetica Neue', Arial, sans-serif); font-weight: 400;
    font-size: 2.6em; line-height: 1.02; letter-spacing: -.03em; text-wrap: balance;
}
.package-list.pkl-align-center .pkl-head { text-align: center; }
.package-list.pkl-align-center .pkl-title { margin-left: auto; margin-right: auto; }

.package-list .pkl-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pkl-ink); }
.package-list .pkl-row { --row-gap: 1.2em 2.4em; padding: var(--pkl-pad) 0; margin: 0; border-bottom: 1px solid var(--pkl-line); align-items: baseline; }
.package-list .pkl-row:last-child { border-bottom-color: var(--pkl-line); }
.package-list .pkl-row > .pkl-what { --row-item: 12em; flex-grow: 1; position: relative; padding-left: 2.6em; }
.package-list .pkl-row > .pkl-detail { --row-item: 17em; flex-grow: 1.8; }
.package-list .pkl-row > .pkl-cost { --row-item: 7em; flex-grow: 0; text-align: right; }

.package-list .pkl-n {
    position: absolute; left: 0; top: .5em;
    color: var(--pkl-muted);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, 'SFMono-Regular', Menlo, monospace); font-size: .82em; line-height: 1; letter-spacing: .02em;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.package-list .pkl-name {
    margin: 0 0 0 -.03em;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, 'Helvetica Neue', Arial, sans-serif); font-weight: 400;
    font-size: 1.85em; line-height: 1.05; letter-spacing: -.025em; text-wrap: balance;
}
.package-list .pkl-unit {
    margin: .7em 0 0;
    color: var(--pkl-muted);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, 'SFMono-Regular', Menlo, monospace); font-size: .82em; line-height: 1.45; letter-spacing: .01em;
}
.package-list .pkl-summary { margin: 0; max-width: 30em; font-size: 1em; line-height: 1.5; text-wrap: pretty; }
.package-list .pkl-includes { margin: .9em 0 0; padding: 0 0 0 1.4em; list-style-type: '—  '; color: var(--pkl-muted); }
.package-list .pkl-include { margin: 0; padding: .12em 0; font-size: 1em; line-height: 1.45; }
.package-list .pkl-include::marker { color: var(--marker-color, var(--pkl-muted)); }
.package-list.pkl-includes- .pkl-includes, .package-list.pkl-includes-false .pkl-includes { display: none; }

.package-list .pkl-from {
    display: block; margin: 0 0 .35em;
    color: var(--pkl-muted);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, 'SFMono-Regular', Menlo, monospace); font-size: .82em; line-height: 1; letter-spacing: .01em;
}
.package-list .pkl-price {
    display: block;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, 'Helvetica Neue', Arial, sans-serif); font-weight: 400;
    font-size: 1.85em; line-height: 1.05; letter-spacing: -.02em;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.package-list .pkl-note { margin: .6em 0 0; color: var(--pkl-muted); font-size: .9em; line-height: 1.4; }
.package-list .pkl-foot { margin: 1.5em 0 0; max-width: 60em; color: var(--pkl-muted); font-size: .92em; line-height: 1.5; }

.package-list.pkl-density-compact .pkl-name, .package-list.pkl-density-compact .pkl-price { font-size: 1.5em; }
.package-list.pkl-density-compact .pkl-includes { display: none; }

@container (max-width: 30rem) {
    .package-list .pkl-row > .pkl-what, .package-list .pkl-row > .pkl-detail, .package-list .pkl-row > .pkl-cost { --row-item: auto; }

    .package-list .pkl-row > .pkl-cost { text-align: left; }
    .package-list .pkl-row { --row-gap: .9em; }
}

.package-list .pkl-pick { display: none; }
.package-list.pkl-choose-1 .pkl-pick {
    position: relative; display: inline-block; margin: 1em 0 0; padding: .62em 1.15em .66em .72em;
    border: 1px solid var(--pkl-line); border-radius: 99em; cursor: pointer; white-space: nowrap;
    font-size: .88em; font-weight: 500; line-height: 1; letter-spacing: .01em; color: var(--pkl-ink);
    transition: background-color .25s cubic-bezier(.4, 0, .2, 1), border-color .25s cubic-bezier(.4, 0, .2, 1), color .25s cubic-bezier(.4, 0, .2, 1);
    transition: background-color .25s var(--ease, ease), border-color .25s var(--ease, ease), color .25s var(--ease, ease);
}
.package-list .pkl-pick-box { position: relative; display: inline-block; width: 1.15em; height: 1.15em; margin-right: .55em; vertical-align: -.22em; border: 1px solid currentColor; border-radius: 50%; }
.package-list .pkl-pick-box input { position: absolute; top: -.5em; right: -.5em; bottom: -.5em; left: -.5em; width: calc(100% + 1em); height: calc(100% + 1em); margin: 0; opacity: 0; cursor: pointer; }
.package-list .pkl-pick-box .bi { position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-size: .8em; line-height: 1.45; text-align: center; opacity: 0; transform: scale(.4); transition: opacity .2s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1); transition: opacity .2s var(--ease, ease), transform .3s var(--ease, ease); }
.package-list .pkl-picked-text { display: none; }
.package-list .pkl-pick:hover { border-color: var(--pkl-ink); }
.package-list .pkl-pick:has(input:focus-visible) { outline: .125rem solid var(--pkl-accent); outline-offset: .2em; }
.package-list .pkl-pick:has(input:checked) { border-color: var(--pkl-accent); background: var(--pkl-accent); color: rgb(240, 251, 255); color: color(display-p3 0.94504 0.9821 1); color: oklch(from #007b9a clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h); color: var(--on-accent, #fff); }
.package-list .pkl-pick:has(input:checked) .pkl-pick-box { background: rgb(240, 251, 255); background: color(display-p3 0.94504 0.9821 1); background: oklch(from #007b9a clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h); background: var(--spark, var(--on-accent, #fff)); border-color: transparent; color: var(--pkl-accent); }
.package-list .pkl-pick:has(input:checked) .bi { opacity: 1; transform: none; }
.package-list .pkl-pick:has(input:checked) .pkl-pick-text { display: none; }
.package-list .pkl-pick:has(input:checked) .pkl-picked-text { display: inline; }
.package-list.pkl-choose-1 .pkl-row { position: relative; padding-left: 1.1em; padding-right: 1.1em; transition: background-color .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s cubic-bezier(.4, 0, .2, 1); transition: background-color .35s var(--ease, ease), box-shadow .35s var(--ease, ease); }
.package-list.pkl-choose-1 .pkl-row:has(input:checked) {
    background: rgba(0, 7, 9, 0.06);
    box-shadow: inset .22em 0 0 var(--pkl-accent);
}

@supports (color: color-mix(in lch, red, blue)) {
.package-list.pkl-choose-1 .pkl-row:has(input:checked) {
    background: color-mix(in srgb, var(--pkl-accent) 6%, transparent);
}
}
.package-list.pkl-choose-1 .pkl-row:has(input:checked) .pkl-n { color: var(--pkl-accent); }
@container (max-width: 30rem) { .package-list.pkl-choose-1 .pkl-pick { margin-top: .6em; } }

/* blocks/parts-exploder.css */

.px-pin-num {
    fill: rgb(240, 251, 255);
    fill: color(display-p3 0.94504 0.9821 1);
    fill: oklch(from #007b9a clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h);
    fill: var(--px-pin-ink, var(--accent-ink, #0c1216));
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, 'SF Mono', Menlo, monospace);
    font-size: calc(30 * 1px);
    font-size: calc(var(--px-num-u, 30) * 1px); font-weight: 600;
}
.px-pin-disc { fill: #007b9a; fill: var(--px-pin, var(--accent, #3fe0a6)); stroke: none; }
.px-leader { fill: none; stroke: rgba(12, 12, 12, 0.34); stroke: var(--px-leader, var(--rule-strong, rgba(120, 134, 143, .55))); stroke-width: 1; stroke-width: var(--w-dim, 1); vector-effect: non-scaling-stroke; }
.px-home { fill: none; stroke: rgba(12, 12, 12, 0.34); stroke: var(--px-leader, var(--rule-strong, rgba(120, 134, 143, .55))); stroke-width: 1; stroke-width: var(--w-dim, 1); stroke-dasharray: 8 10; vector-effect: non-scaling-stroke; }

[data-parts-exploder] [data-part] { cursor: pointer; }

/* blocks/phone-menu.css */
/* phone menu — a box that folds behind one button on a phone (behaviors/phoneMenu.js). The button takes the bar's font
   and colour; the open sheet is the theme's page ground under the bar, its links full-width rows on the theme's line.
   The sheet's layout rules carry !important because the box's resting layout is its inline style (a row of links).
   Knobs (on the box or the bar): --phone-menu-size (the sheet's type, default 1.2em) · --phone-menu-dim (the shade over
   the page below the sheet) · --phone-menu-pad (the sheet's padding at its sides, default the page margin). */

/* the kit's button: a quiet pill, three bars that turn into a cross while open (an owner's button piece keeps its own look) */
[data-phone-menu-toggle="auto"] {
    display: inline-flex; align-items: center; gap: .6em; flex: none;
    margin: 0; padding: .55em 1.05em; line-height: 1.1;
    font: inherit; font-weight: 500; color: inherit; background: none; cursor: pointer;
    border: 1px solid color-mix(in oklab, currentColor 28%, transparent); border-radius: 99em;
    -webkit-tap-highlight-color: transparent;
    position: relative; z-index: 1;   /* the bar's last piece: over a layer of the bar's own (a background blur) */
}
[data-phone-menu-toggle][hidden] { display: none; }
/* the bar's last piece: pushed to its far end, in a flex bar or a grid bar's last column */
[data-phone-menu-toggle="auto"]:last-child { margin-left: auto; grid-column: -2; grid-row: 1; justify-self: end; align-self: center; }
[data-phone-menu-toggle="auto"]:hover, [data-phone-menu-toggle="auto"][aria-expanded="true"] { border-color: currentColor; }
[data-phone-menu-toggle]:focus-visible { outline: .14em solid #007b9a; outline: .14em solid var(--accent, currentColor); outline-offset: .18em; }
[data-phone-menu-bars] { position: relative; width: 1.05em; height: .72em; }
[data-phone-menu-bars]::before, [data-phone-menu-bars]::after {
    content: ""; position: absolute; left: 0; right: 0; height: .11em; border-radius: .1em; background: currentColor;
}
[data-phone-menu-bars]::before { top: 0; box-shadow: 0 .305em 0 currentColor; }
[data-phone-menu-bars]::after { bottom: 0; }
[aria-expanded="true"] > [data-phone-menu-bars]::before { top: .305em; box-shadow: none; transform: rotate(45deg); }
[aria-expanded="true"] > [data-phone-menu-bars]::after { bottom: .305em; transform: rotate(-45deg); }
html:not(.respect-reduced-motion) [data-phone-menu-bars]::before,
html:not(.respect-reduced-motion) [data-phone-menu-bars]::after { transition: transform .22s cubic-bezier(.4, 0, .2, 1), top .22s, bottom .22s; transition: transform .22s var(--ease, ease-out), top .22s, bottom .22s; }

/* folded and closed: out of the bar (the popover attribute is only there while the box folds) */
[data-phone-menu][popover]:not(:popover-open) { display: none !important; }

/* open: the sheet, full width under the bar */
[data-phone-menu]:popover-open {
    position: fixed !important; top: 0 !important; top: var(--phone-menu-top, 0) !important; right: 0 !important; bottom: auto !important; left: 0 !important;
    width: auto !important; height: auto !important; max-height: calc(100dvh - 0) !important; max-height: calc(100dvh - var(--phone-menu-top, 0)) !important;
    margin: 0 !important; align-self: normal !important; justify-self: normal !important; place-self: normal !important; overflow: auto !important; overscroll-behavior: contain;
    display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
    align-items: stretch !important; justify-content: flex-start !important; gap: 1.1em !important;
    padding: .4em var(--phone-menu-pad, var(--page-margin, calc(5 * var(--pe-vw)))) 1.8em !important; box-sizing: border-box !important;
    font-size: 1.2em !important;
    font-size: var(--phone-menu-size, 1.2em) !important; white-space: normal !important;
    background: #f9f9f9 !important;
    background: var(--page-bg, Canvas) !important; color: #222 !important; color: var(--ink, CanvasText) !important;
    border: 0 !important; border-bottom: 1px solid rgba(5, 5, 5, 0.14) !important;
    box-shadow: 0 1.2em 2.4em -1em rgba(12, 12, 12, 0.35);
    box-shadow: var(--shadow-lift, 0 1.2em 2.4em -1em rgba(12, 12, 12, 0.35));
    box-shadow: 0 1.2em 2.4em -1em color-mix(in oklab, #222 35%, transparent);
}

@supports (color: color-mix(in lch, red, blue)) {
[data-phone-menu]:popover-open { border-bottom: 1px solid var(--line, color-mix(in oklab, currentColor 14%, transparent)) !important;
    box-shadow: var(--shadow-lift, 0 1.2em 2.4em -1em color-mix(in oklab, var(--ink, black) 35%, transparent));
}
}
/* the page below the sheet dims; the bar above it stays as it is */
[data-phone-menu]:popover-open::backdrop {
    background: linear-gradient(transparent 0,
        rgba(11, 11, 11, 0.32) 0);
    background: linear-gradient(transparent var(--phone-menu-top, 0),
        var(--phone-menu-dim, rgba(11, 11, 11, 0.32)) var(--phone-menu-top, 0));
    background: linear-gradient(transparent 0,
        color-mix(in oklab, #222 32%, transparent) 0);
}

@supports (color: color-mix(in lch, red, blue)) {
[data-phone-menu]:popover-open::backdrop {
    background: linear-gradient(transparent var(--phone-menu-top, 0),
        var(--phone-menu-dim, color-mix(in oklab, var(--ink, black) 32%, transparent)) var(--phone-menu-top, 0));
}
}
html:not(.respect-reduced-motion) [data-phone-menu]:popover-open { animation: phone-menu-in .24s ease-out; animation: phone-menu-in .24s var(--ease-out, ease-out); }
@keyframes phone-menu-in { from { opacity: 0; transform: translateY(-.6em); } }

/* every row inside stands up: a nav, a list or a cluster becomes a column of full-width rows */
[data-phone-menu]:popover-open nav:has(> a, > li, > button, > div):not(.member-account *) {
    display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
    align-items: stretch !important; gap: .7em !important; flex: none !important;
    overflow: visible !important; white-space: normal !important; font-size: inherit !important;
}
[data-phone-menu]:popover-open ul:has(> a, > li, > button, > div):not(.member-account *) {
    display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
    align-items: stretch !important; gap: .7em !important; flex: none !important;
    overflow: visible !important; white-space: normal !important; font-size: inherit !important;
}
[data-phone-menu]:popover-open ol:has(> a, > li, > button, > div):not(.member-account *) {
    display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
    align-items: stretch !important; gap: .7em !important; flex: none !important;
    overflow: visible !important; white-space: normal !important; font-size: inherit !important;
}
[data-phone-menu]:popover-open div:has(> a, > li, > button, > div):not(.member-account *) {
    display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
    align-items: stretch !important; gap: .7em !important; flex: none !important;
    overflow: visible !important; white-space: normal !important; font-size: inherit !important;
}
[data-phone-menu]:popover-open :is(nav, ul, ol, div):has(> a, > li, > button, > div):not(.member-account *) {
    display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
    align-items: stretch !important; gap: .7em !important; flex: none !important;
    overflow: visible !important; white-space: normal !important; font-size: inherit !important;
}
[data-phone-menu]:popover-open nav { gap: 0 !important; }
[data-phone-menu]:popover-open ul { gap: 0 !important; }
[data-phone-menu]:popover-open ol { gap: 0 !important; }
[data-phone-menu]:popover-open :is(nav, ul, ol) { gap: 0 !important; }
[data-phone-menu]:popover-open nav a {
    display: block; padding: .8em 0 !important; font-size: inherit !important;
    border-bottom: 1px solid rgba(5, 5, 5, 0.14);
}

@supports (color: color-mix(in lch, red, blue)) {
[data-phone-menu]:popover-open nav a {
    border-bottom: 1px solid var(--line, color-mix(in oklab, currentColor 14%, transparent));
}
}
[data-phone-menu]:popover-open nav li {
    display: block; padding: .8em 0 !important; font-size: inherit !important;
    border-bottom: 1px solid rgba(5, 5, 5, 0.14);
}

@supports (color: color-mix(in lch, red, blue)) {
[data-phone-menu]:popover-open nav li {
    border-bottom: 1px solid var(--line, color-mix(in oklab, currentColor 14%, transparent));
}
}
[data-phone-menu]:popover-open ul a {
    display: block; padding: .8em 0 !important; font-size: inherit !important;
    border-bottom: 1px solid rgba(5, 5, 5, 0.14);
}

@supports (color: color-mix(in lch, red, blue)) {
[data-phone-menu]:popover-open ul a {
    border-bottom: 1px solid var(--line, color-mix(in oklab, currentColor 14%, transparent));
}
}
[data-phone-menu]:popover-open ul li {
    display: block; padding: .8em 0 !important; font-size: inherit !important;
    border-bottom: 1px solid rgba(5, 5, 5, 0.14);
}

@supports (color: color-mix(in lch, red, blue)) {
[data-phone-menu]:popover-open ul li {
    border-bottom: 1px solid var(--line, color-mix(in oklab, currentColor 14%, transparent));
}
}
[data-phone-menu]:popover-open ol a {
    display: block; padding: .8em 0 !important; font-size: inherit !important;
    border-bottom: 1px solid rgba(5, 5, 5, 0.14);
}

@supports (color: color-mix(in lch, red, blue)) {
[data-phone-menu]:popover-open ol a {
    border-bottom: 1px solid var(--line, color-mix(in oklab, currentColor 14%, transparent));
}
}
[data-phone-menu]:popover-open ol li {
    display: block; padding: .8em 0 !important; font-size: inherit !important;
    border-bottom: 1px solid rgba(5, 5, 5, 0.14);
}

@supports (color: color-mix(in lch, red, blue)) {
[data-phone-menu]:popover-open ol li {
    border-bottom: 1px solid var(--line, color-mix(in oklab, currentColor 14%, transparent));
}
}
[data-phone-menu]:popover-open :is(nav, ul, ol) :is(a, li) {
    display: block; padding: .8em 0 !important; font-size: inherit !important;
    border-bottom: 1px solid rgba(5, 5, 5, 0.14);
}

@supports (color: color-mix(in lch, red, blue)) {
[data-phone-menu]:popover-open :is(nav, ul, ol) :is(a, li) {
    border-bottom: 1px solid var(--line, color-mix(in oklab, currentColor 14%, transparent));
}
}
[data-phone-menu]:popover-open nav li > a { padding: 0 !important; border: 0; }
[data-phone-menu]:popover-open ul li > a { padding: 0 !important; border: 0; }
[data-phone-menu]:popover-open ol li > a { padding: 0 !important; border: 0; }
[data-phone-menu]:popover-open :is(nav, ul, ol) li > a { padding: 0 !important; border: 0; }
[data-phone-menu]:popover-open [aria-current="page"] { color: #007b9a !important; color: var(--accent, currentColor) !important; }
/* a call button or a login pill: full width, centred, a thumb's height */
[data-phone-menu]:popover-open .btn {
    display: flex !important; justify-content: center; width: auto !important; max-width: none !important;
    padding: .85em 1.2em !important; margin: 0 !important; text-align: center;
}
[data-phone-menu]:popover-open .button {
    display: flex !important; justify-content: center; width: auto !important; max-width: none !important;
    padding: .85em 1.2em !important; margin: 0 !important; text-align: center;
}
[data-phone-menu]:popover-open .account-login {
    display: flex !important; justify-content: center; width: auto !important; max-width: none !important;
    padding: .85em 1.2em !important; margin: 0 !important; text-align: center;
}
[data-phone-menu]:popover-open :is(.btn, .button, .account-login) {
    display: flex !important; justify-content: center; width: auto !important; max-width: none !important;
    padding: .85em 1.2em !important; margin: 0 !important; text-align: center;
}
[data-phone-menu]:popover-open [data-hide-on~="mobile"] { display: flex !important; }

/* blocks/photo-story.css */

.photo-story {
    --ps-ink: var(--ink, #0a0a0a);
    --ps-muted: var(--muted, #6b6b6b);
    --ps-line: var(--line, #e3e3e3);
    --ps-paper: var(--paper, #fff);
    --ps-gap: 4cqi;
    --ps-wide: 60%;
    --ps-narrow: 36%;
    --ps-drop: 4cqi;
    width: 100%; margin: 0;
    color: #222;
    color: var(--ps-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif);
}

.photo-story .ps-eyebrow {
    margin: 0 0 2.2cqi;
    color: var(--ps-muted);
    font-size: .78em; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2;
}
.photo-story.ps-align-center .ps-eyebrow { text-align: center; }
.photo-story.ps-align-right .ps-eyebrow { text-align: right; }

.photo-story .ps-river { --row-gap: calc(var(--ps-gap) + var(--ps-drop) + 2cqi) var(--ps-gap); --row-item: 0; align-items: flex-start; }

.photo-story .ps-item { position: relative; margin: 0; --row-item: var(--ps-wide); --ps-ar: 3 / 2; }
.photo-story.ps-river .ps-item:nth-child(4n+2), .photo-story.ps-river .ps-item:nth-child(4n+3) { --row-item: var(--ps-narrow); --ps-ar: 3 / 4; translate: 0 var(--ps-drop); }
.photo-story.ps-river .ps-item:nth-child(4n+3) { order: 0; }
.photo-story.ps-river .ps-item:last-child:nth-child(odd) { --row-item: 100%; --ps-ar: 2 / 1; translate: none; }
.photo-story.ps-pairs .ps-river { --row-gap: var(--ps-gap); }
.photo-story.ps-pairs .ps-item { --row-item: 48%; --ps-ar: 4 / 3; }
.photo-story.ps-column .ps-item { --row-item: 100%; --ps-ar: 3 / 2; }
.photo-story.ps-column .ps-river { --row-flow: column nowrap; --row-gap: var(--ps-gap); }

.photo-story.ps-size-medium { --ps-wide: 52%; --ps-narrow: 30%; --ps-gap: 6cqi; }
.photo-story.ps-size-large { --ps-wide: 60%; --ps-narrow: 36%; --ps-gap: 4cqi; }
.photo-story.ps-size-full { --ps-wide: 62%; --ps-narrow: 36%; --ps-gap: 2cqi; }

.photo-story .ps-shot {
    width: 100%; aspect-ratio: var(--ps-ar); margin: 0; overflow: hidden;
    border-radius: calc(0.4 * 1cqi);
    border-radius: calc(var(--ps-radius, 0.4) * 1cqi);
    background: var(--ps-line);
    box-shadow: 0 0 0 1px rgba(3, 3, 3, 0.09),
                0 .2cqi .5cqi rgba(3, 3, 3, 0.08),
                0 1.4cqi 3cqi -1cqi rgba(7, 7, 7, 0.22);
    transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s cubic-bezier(.2, .7, .2, 1);
}

@supports (color: color-mix(in lch, red, blue)) {
.photo-story .ps-shot {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ps-ink) 9%, transparent),
                0 .2cqi .5cqi color-mix(in srgb, var(--ps-ink) 8%, transparent),
                0 1.4cqi 3cqi -1cqi color-mix(in srgb, var(--ps-ink) 22%, transparent);
}
}
.photo-story .ps-shot img, .photo-story .ps-shot picture { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

.photo-story .ps-cap { margin: 1.2cqi 0 0; padding-right: 8%; }
.photo-story .ps-caption {
    display: block;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, serif); font-style: italic; font-weight: 400;
    font-size: 1.15em; line-height: 1.3; letter-spacing: -.005em;
    text-wrap: pretty;
}
.photo-story .ps-when {
    display: block; margin-top: .5em;
    color: var(--ps-muted);
    font-size: .78em; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2;
}
.photo-story.ps-captions-hidden .ps-cap { display: none; }
.photo-story.ps-captions-hover .ps-cap { opacity: 0; transition: opacity .35s ease; }
.photo-story.ps-captions-hover .ps-item:hover .ps-cap { opacity: 1; }

.photo-story.ps-hover-lift .ps-item:hover .ps-shot {
    transform: translateY(-.6cqi);
    box-shadow: 0 0 0 1px rgba(3, 3, 3, 0.09),
                0 .4cqi .9cqi rgba(3, 3, 3, 0.1),
                0 2.4cqi 4.8cqi -1.2cqi rgba(10, 10, 10, 0.3);
}

@supports (color: color-mix(in lch, red, blue)) {
.photo-story.ps-hover-lift .ps-item:hover .ps-shot {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ps-ink) 9%, transparent),
                0 .4cqi .9cqi color-mix(in srgb, var(--ps-ink) 10%, transparent),
                0 2.4cqi 4.8cqi -1.2cqi color-mix(in srgb, var(--ps-ink) 30%, transparent);
}
}
.photo-story.ps-hover-fade .ps-item:hover .ps-shot { opacity: .82; }

@container (max-width: 34em) {
    .photo-story .ps-item { --row-item: 100%; translate: none; }
    .photo-story .ps-item:nth-child(n) { --ps-ar: 4 / 3; translate: none; }
}

/* blocks/pick-board.css */
/* pick-board — the look of components/pickBoard.twig. Canonical tokens only; em inside, the cell owns the outer size. */

.pick-board {
    --pk-ink: var(--ink, #1a1a1a);
    --pk-muted: var(--muted, #6b6b6b);
    --pk-line: var(--line, color-mix(in srgb, var(--pk-ink) 16%, transparent));
    --pk-paper: var(--paper, var(--card-bg, #fff));
    --pk-surface: var(--surface, color-mix(in srgb, var(--pk-ink) 4%, transparent));
    --pk-accent: var(--accent, #2a44dc);
    --pk-on-accent: var(--on-accent, #fff);
    --pk-radius: var(--radius, 0.2em);
    color: #222;
    color: var(--pk-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, inherit);
    display: grid;
    grid-gap: 1.6em;
    gap: 1.6em;
}
.pick-board[data-scheme="dark"] {
    --pk-ink: var(--invert-fg, #f2f2f2);
    --pk-paper: var(--invert-bg, #17171a);
    --pk-surface: color-mix(in srgb, var(--pk-ink) 8%, transparent);
    --pk-line: color-mix(in srgb, var(--pk-ink) 22%, transparent);
}

.pk-head { display: grid; grid-gap: 0.35em; gap: 0.35em; }
.pk-eyebrow {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.72em; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--pk-muted); margin: 0;
}
.pk-title { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, inherit); margin: 0; line-height: 1.05; text-wrap: balance; }
.pk-intro { margin: 0; color: var(--pk-muted); max-width: 88ch; font-size: 0.92em; line-height: 1.5; }
.pk-intro b { color: var(--pk-ink); font-weight: 600; }

.pk-controls {
    display: grid; grid-gap: 1.4em; gap: 1.4em;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: start;
    padding: 1.1em 1.2em;
    background: var(--pk-surface);
    border: 0.06em solid var(--pk-line);
    border-radius: var(--pk-radius);
}
.pk-legend {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.7em; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--pk-muted); margin: 0 0 0.9em;
    display: flex; justify-content: space-between; align-items: center; gap: 1em;
}
.pk-weights { display: grid; grid-gap: 0.5em; gap: 0.5em; }
.pk-weight { display: grid; grid-template-columns: minmax(7em, 1fr) minmax(5em, 1.2fr) 1.6em; grid-gap: 0.7em; gap: 0.7em; align-items: center; }
.pk-wname { display: grid; line-height: 1.2; font-size: 0.9em; }
.pk-wname i { font-style: normal; font-size: 0.76em; color: var(--pk-muted); }
.pk-weight input[type="range"] { width: 100%; accent-color: var(--pk-accent); margin: 0; }
.pk-weight output {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.85em;
    text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--pk-muted);
}
.pk-clear {
    font: inherit; font-size: 1em; letter-spacing: inherit; text-transform: inherit;
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--pk-accent); -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 0.2em;
}

.pk-bays { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 0.6em; gap: 0.6em; }
.pk-bay {
    min-height: 7.5em; padding: 0.4em;
    border: 0.09em dashed var(--pk-line); border-radius: var(--pk-radius);
    display: grid; align-content: start; grid-gap: 0.4em; gap: 0.4em;
    transition: border-color 0.2s, background 0.2s;
}
.pk-bay:not(.is-empty) { border-style: solid; background: var(--pk-paper); }
.pk-bay:has(.sortable-ghost) { border-color: var(--pk-accent); }
.pk-bay-hint {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.68em; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--pk-muted); align-self: center; justify-self: center; text-align: center;
}
.pk-bay:not(.is-empty) .pk-bay-hint { display: none; }
.pk-bay .pk-card { cursor: pointer; }
.pk-bay .pk-bars, .pk-bay .pk-note, .pk-bay .pk-details { display: none; }

.pk-summary { margin: 0.9em 0 0; display: flex; flex-wrap: wrap; gap: 0.35em 0.9em; align-items: baseline; }
.pk-summary:empty { display: none; }
.pk-summary [data-pick-combined] {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, inherit); font-size: 1.9em; line-height: 1;
    color: var(--pk-accent); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.pk-summary [data-pick-avg] { display: grid; font-size: 0.74em; }
.pk-summary [data-pick-avg] i { font-style: normal; color: var(--pk-muted); }
.pk-summary [data-pick-avg] b { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

.pk-filters { display: flex; flex-wrap: wrap; gap: 0.4em; align-items: center; }
.pk-chip {
    font: inherit; font-size: 0.82em; cursor: pointer;
    padding: 0.28em 0.75em; border-radius: 2em;
    border: 0.07em solid var(--pk-line); background: transparent; color: var(--pk-ink);
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.pk-chip:hover { border-color: var(--pk-accent); }
.pk-chip.is-on { background: var(--pk-accent); border-color: var(--pk-accent); color: var(--pk-on-accent); }
.pk-tools { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.6em; align-items: center; font-size: 0.82em; }
.pk-search, .pk-sort select {
    font: inherit; color: var(--pk-ink); background: var(--pk-paper);
    border: 0.07em solid var(--pk-line); border-radius: var(--pk-radius); padding: 0.25em 0.5em;
}
.pk-search { min-width: 9em; }
.pk-sort { color: var(--pk-muted); display: inline-flex; gap: 0.4em; align-items: center; }
.pk-count { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-family: var(--font-mono, ui-monospace, monospace); color: var(--pk-muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

.pk-deck {
    display: grid; grid-gap: 0.7em; gap: 0.7em;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17em), 1fr));
}
.pk-card {
    display: grid; grid-gap: 0.5em; gap: 0.5em; align-content: start;
    padding: 0.8em 0.9em;
    background: var(--pk-paper);
    border: 0.06em solid var(--pk-line);
    border-radius: var(--pk-radius);
    cursor: grab;
    transition: border-color 0.18s, transform 0.18s;
}
.pk-card:hover { border-color: var(--pk-accent); }
.pk-card.is-out { display: none; }
.pk-card-head { display: grid; grid-template-columns: 1.9em 1fr auto; grid-gap: 0.5em; gap: 0.5em; align-items: baseline; }
.pk-rank {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.74em;
    color: var(--pk-muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.pk-name { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, inherit); font-size: 1em; margin: 0; line-height: 1.15; }
.pk-score b {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, inherit); font-size: 1.45em; line-height: 1;
    color: var(--pk-accent); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.pk-card[data-flag] { --pk-accent: var(--pk-muted); }
.pk-flag {
    margin: 0; justify-self: start; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.6em;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--pk-paper); background: var(--pk-ink);
    padding: 0.2em 0.6em; border-radius: 2em;
}
.pk-note { margin: 0; font-size: 0.83em; line-height: 1.45; color: var(--pk-muted); }

.pk-details { font-size: 0.83em; line-height: 1.45; cursor: auto; }
.pk-details summary { cursor: pointer; color: var(--pk-accent); }
.pk-details dl { margin: 0.5em 0 0; display: grid; grid-gap: 0.15em; gap: 0.15em; }
.pk-details dt {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.78em;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--pk-muted); margin-top: 0.5em;
}
.pk-details dd { margin: 0; }

.pk-bars { margin: 0; display: grid; grid-gap: 0.22em; gap: 0.22em; }
.pk-bar { display: grid; grid-template-columns: 3.4em 1fr; grid-gap: 0.5em; gap: 0.5em; align-items: center; }
.pk-bar dt {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.64em;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--pk-muted);
}
.pk-bar dd { margin: 0; display: grid; grid-template-columns: 1fr 1.2em; grid-gap: 0.4em; gap: 0.4em; align-items: center; }
.pk-bar-track { height: 0.4em; background: rgba(3, 3, 3, 0.1); border-radius: 1em; overflow: hidden; }

@supports (color: color-mix(in lch, red, blue)) {
.pk-bar-track { background: color-mix(in srgb, var(--pk-ink) 10%, transparent); }
}
.pk-bar-track i { display: block; height: 100%; background: var(--pk-accent); border-radius: inherit; }
.pk-bar dd b { font-size: 0.7em; color: var(--pk-muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; text-align: right; }

.pk-card-foot { display: flex; flex-wrap: wrap; gap: 0.4em; align-items: center; justify-content: space-between; }
.pk-meta { font-size: 0.72em; color: var(--pk-muted); }
.pk-ev {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.6em;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.15em 0.5em; border-radius: 2em; border: 0.08em solid currentColor;
}
.pk-ev--sourced { color: var(--pk-accent); }
.pk-ev--partial { color: var(--pk-muted); }
.pk-ev--hunch { color: rgba(15, 15, 15, 0.45); }

@supports (color: color-mix(in lch, red, blue)) {
.pk-ev--hunch { color: color-mix(in srgb, var(--pk-ink) 45%, transparent); }
}

.sortable-ghost { opacity: 0.35; }
.sortable-fallback { cursor: grabbing; }

@media (max-width: 62em) {
    .pk-controls { grid-template-columns: minmax(0, 1fr); }
    .pk-tools { margin-left: 0; width: 100%; }
}
html.respect-reduced-motion .pick-board *, html.respect-reduced-motion .pick-board *::before { transition-duration: 0.01ms !important; }

/* blocks/pinned.css */
/* A piece pinned to the screen (attrs data-pinned: a buy bar, a basket drawer) is lifted into the
   browser's top layer on the live page (pe.util.pinToScreen, the Popover API), out of every cell's containment and the
   stage's transform. The browser's popover frame (margin auto, a border, padding, Canvas colours, its own size, inset 0)
   is not the piece's: at no weight, so the piece's own look and place win. */
:where([data-pinned][popover]) {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto; margin: 0; border: 0; padding: 0; overflow: visible; color: inherit; background-color: transparent; width: auto; height: auto;
}

/* blocks/plan-cards.css */

.plan-cards {
    --pc-ink: var(--ink, #0a0a0a);
    --pc-muted: var(--muted, #6b6b6b);
    --pc-line: var(--line, #e3e3e3);
    --pc-paper: var(--paper, #fff);
    --pc-tint: var(--tint, color-mix(in srgb, var(--ink, #0a0a0a) 4%, var(--paper, #fff)));
    --pc-accent: var(--accent, #635bff);
    --pc-on-accent: var(--accent-ink, #fff);
    --pc-r: calc(var(--pc-radius, 1.4) * 1cqi);
    width: 100%; margin: 0; color: #222; color: var(--pc-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif);
}

.plan-cards .pc-eyebrow {
    margin: 0 0 .9em; color: var(--pc-muted);
    font: 500 max(calc(.82 * var(--pe-vw)), .95cqi)/1.2 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 max(calc(.82 * var(--pe-vw)), .95cqi)/1.2 var(--font-mono, monospace);
    letter-spacing: .08em; text-transform: uppercase;
}
.plan-cards .pc-title {
    margin: 0 0 .55em; max-width: 22ch;
    font-size: max(calc(2.4 * var(--pe-vw)), 3.2cqi); font-weight: 600; line-height: 1.06; letter-spacing: -.02em;
    text-wrap: balance;
}
.plan-cards.pc-align-center .pc-eyebrow, .plan-cards.pc-align-center .pc-title { text-align: center; }
.plan-cards.pc-align-center .pc-title { margin-left: auto; margin-right: auto; }

.plan-cards .pc-toggle {
    --row-flow: row nowrap; --row-item: auto; --row-gap: .25cqi;
    width: -moz-max-content;
    width: max-content; max-width: 100%; margin: 0 0 2.6cqi; padding: .3cqi;
    background: var(--pc-tint); border-radius: 99cqi;
    font-size: max(calc(1.05 * var(--pe-vw)), 1.15cqi);
}
.plan-cards.pc-align-center .pc-toggle { margin-left: auto; margin-right: auto; }
.plan-cards .pc-tab {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none; cursor: pointer; margin: 0;
    padding: .5em 1.15em; border: 0; border-radius: 99cqi;
    background: transparent; color: var(--pc-muted);
    font: 500 1em/1.2 'Open Sans', Arial, Helvetica, sans-serif;
    font: 500 1em/1.2 var(--font-text, system-ui, sans-serif);
    transition: background .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s cubic-bezier(.4, 0, .2, 1);
    transition: background .2s var(--ease, ease), color .2s var(--ease, ease), box-shadow .2s var(--ease, ease);
}
.plan-cards .pc-tab:hover { color: var(--pc-ink); }
.plan-cards .pc-tab.is-active {
    background: var(--pc-paper); color: var(--pc-ink);
    box-shadow: 0 0 0 1px rgba(3, 3, 3, 0.08), 0 .12cqi .3cqi rgba(3, 3, 3, 0.08);
}

@supports (color: color-mix(in lch, red, blue)) {
.plan-cards .pc-tab.is-active {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--pc-ink) 8%, transparent), 0 .12cqi .3cqi color-mix(in srgb, var(--pc-ink) 8%, transparent);
}
}
.plan-cards .pc-tab:focus-visible { outline: .125rem solid var(--pc-accent); outline-offset: .125rem; }
.plan-cards .pc-note {
    align-self: center; padding: 0 .9em 0 .6em;
    color: var(--pc-accent); font: 500 .85em/1.2 ui-monospace, 'SF Mono', Menlo, monospace; font: 500 .85em/1.2 var(--font-mono, monospace); letter-spacing: .02em;
    white-space: nowrap;
}

.plan-cards .pc-row { --row-item: 16cqi; --row-gap: 1.6cqi; align-items: stretch; }

.plan-cards .pc-plan {
    position: relative; margin: 0; padding: 2.2cqi 2cqi 2cqi;
    background: var(--pc-paper); border-radius: var(--pc-r);
    box-shadow: 0 0 0 1px var(--pc-line);
    transition: box-shadow .25s cubic-bezier(.4, 0, .2, 1), transform .25s cubic-bezier(.4, 0, .2, 1);
    transition: box-shadow .25s var(--ease, ease), transform .25s var(--ease, ease);
}
.plan-cards.pc-tone-tinted .pc-plan { background: var(--pc-tint); }
.plan-cards.pc-shadow-soft .pc-plan:hover { transform: translateY(-.2cqi); }
.plan-cards .pc-plan.pc-featured-1 {
    background: var(--pc-paper);
    box-shadow: 0 0 0 1px var(--pc-line),
                inset 0 .25cqi 0 0 var(--pc-accent),
                0 .15cqi .3cqi rgba(2, 2, 2, 0.06),
                0 2.2cqi 4.4cqi -1.2cqi rgba(5, 5, 5, 0.14);
}

@supports (color: color-mix(in lch, red, blue)) {
.plan-cards .pc-plan.pc-featured-1 {
    box-shadow: 0 0 0 1px var(--pc-line),
                inset 0 .25cqi 0 0 var(--pc-accent),
                0 .15cqi .3cqi color-mix(in srgb, var(--pc-ink) 6%, transparent),
                0 2.2cqi 4.4cqi -1.2cqi color-mix(in srgb, var(--pc-ink) 14%, transparent);
}
}

.plan-cards .pc-badge {
    position: absolute; top: 1.35cqi; right: 1.6cqi;
    padding: .35em .7em; border-radius: 99cqi;
    background: color-mix(in srgb, var(--pc-accent) 10%, var(--pc-paper)); color: var(--pc-accent);
    font: 600 max(calc(.82 * var(--pe-vw)), .85cqi)/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 max(calc(.82 * var(--pe-vw)), .85cqi)/1 var(--font-mono, monospace); letter-spacing: .06em; text-transform: uppercase;
}
.plan-cards .pc-badge:empty { padding: 0; background: transparent; }
.plan-cards .pc-name { margin: 0 0 .35em; font-size: max(calc(1.15 * var(--pe-vw)), 1.35cqi); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.plan-cards .pc-blurb { margin: 0 0 1.6em; color: var(--pc-muted); font-size: max(calc(1.05 * var(--pe-vw)), 1.05cqi); line-height: 1.45; min-height: 2.9em; }

.plan-cards .pc-price { margin: 0 0 .2em; line-height: 1; }
.plan-cards .pc-amount {
    font-size: max(calc(2.6 * var(--pe-vw)), 3.4cqi); font-weight: 600; letter-spacing: -.03em; line-height: 1;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums; color: var(--pc-ink);
}
.plan-cards .pc-amount-y { display: none; }
.plan-cards.is-yearly .pc-amount-y { display: inline; }
.plan-cards.is-yearly .pc-amount-m { display: none; }
.plan-cards .pc-period { margin-left: .35em; color: var(--pc-muted); font: 500 max(calc(.82 * var(--pe-vw)), .95cqi)/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 500 max(calc(.82 * var(--pe-vw)), .95cqi)/1 var(--font-mono, monospace); letter-spacing: .02em; }
.plan-cards .pc-billed { margin: .55em 0 0; color: var(--pc-muted); font: 400 max(calc(.82 * var(--pe-vw)), .95cqi)/1.2 ui-monospace, 'SF Mono', Menlo, monospace; font: 400 max(calc(.82 * var(--pe-vw)), .95cqi)/1.2 var(--font-mono, monospace); visibility: hidden; }
.plan-cards.is-yearly .pc-billed { visibility: visible; }

.plan-cards .pc-features { list-style: none; margin: 1.8cqi 0 2cqi; padding: 1.4cqi 0 0; border-top: 1px solid var(--pc-line); }
.plan-cards .pc-feature { margin: 0; padding: .45em 0; font-size: max(calc(1.05 * var(--pe-vw)), 1.05cqi); line-height: 1.4; }
.plan-cards .pc-check { display: inline-block; width: 1.1em; margin-right: .5em; color: var(--pc-accent); font-size: 1em; vertical-align: -.1em; }
.plan-cards .pc-ftext { color: var(--pc-ink); }

.plan-cards .pc-cta {
    display: block; width: 100%; box-sizing: border-box; margin: 0; padding: .8em 1.2em;
    border-radius: calc(var(--pc-r) * .5); text-align: center; -webkit-text-decoration: none; text-decoration: none;
    font: 500 max(calc(1.05 * var(--pe-vw)), 1.1cqi)/1.2 'Open Sans', Arial, Helvetica, sans-serif;
    font: 500 max(calc(1.05 * var(--pe-vw)), 1.1cqi)/1.2 var(--font-text, system-ui, sans-serif); letter-spacing: -.005em;
    color: var(--pc-ink); background: var(--pc-paper); box-shadow: 0 0 0 1px var(--pc-line);
    transition: background .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1);
    transition: background .2s var(--ease, ease), box-shadow .2s var(--ease, ease), color .2s var(--ease, ease);
}
.plan-cards .pc-cta:hover { background: var(--pc-tint); box-shadow: 0 0 0 1px rgba(6, 6, 6, 0.18); }

@supports (color: color-mix(in lch, red, blue)) {
.plan-cards .pc-cta:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--pc-ink) 18%, transparent); }
}
.plan-cards .pc-cta:focus-visible { outline: .125rem solid var(--pc-accent); outline-offset: .125rem; }
.plan-cards .pc-plan.pc-featured-1 .pc-cta {
    background: var(--pc-accent); color: var(--pc-on-accent); box-shadow: none;
}
.plan-cards .pc-plan.pc-featured-1 .pc-cta:hover {
    background: #056f89;
}

@supports (color: color-mix(in lch, red, blue)) {
.plan-cards .pc-plan.pc-featured-1 .pc-cta:hover {
    background: color-mix(in srgb, var(--pc-accent) 86%, var(--pc-ink));
}
}

@container (max-width: 30rem) {
    .plan-cards .pc-plan { padding: 6cqi 5cqi 5cqi; }
    .plan-cards .pc-toggle { --row-flow: row nowrap; padding: .8cqi; margin-bottom: 6cqi; font-size: 3.9cqi; }
    .plan-cards .pc-row { --row-gap: 4cqi; }
    .plan-cards .pc-title { font-size: 8cqi; }
    .plan-cards .pc-amount { font-size: 9cqi; }
    .plan-cards .pc-badge:empty { padding: 0; background: transparent; }
.plan-cards .pc-name { font-size: 4.4cqi; }
    .plan-cards .pc-blurb, .plan-cards .pc-feature, .plan-cards .pc-cta { font-size: 3.9cqi; min-height: 0; }
    .plan-cards .pc-eyebrow, .plan-cards .pc-period, .plan-cards .pc-billed, .plan-cards .pc-badge { font-size: 3.35cqi; }
    .plan-cards .pc-badge { top: 4cqi; right: 4cqi; }
    .plan-cards .pc-features { margin: 4cqi 0 5cqi; padding-top: 3cqi; }
}

/* blocks/portrait-hero.css */

.portrait-hero {
    --ph-ink: var(--ink, #111);
    --ph-muted: var(--muted, #5f5f5f);
    --ph-line: var(--line, #d9d9d9);
    --ph-accent: var(--accent, #2a2ad9);
    --ph-mark: var(--mark, var(--accent-2, #d9f24a));
    --ph-ease: var(--ease, cubic-bezier(.2, .7, .1, 1));
    --ph-t: calc(var(--ph-title, 15.5) * 1cqi);
    --ph-w: calc(var(--ph-portrait, 27) * 1cqi);
    position: relative; margin: 0; color: #222; color: var(--ph-ink); container-type: inline-size;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, 'Helvetica Neue', Arial, sans-serif); font-size: 1.125rem; font-size: var(--text-md, 1rem); line-height: 1.5;
}
.portrait-hero :where(h1, p, dl, dt, dd, figure, figcaption) { margin: 0; }

.portrait-hero .ph-stage { position: relative; min-height: calc(var(--ph-w) * 4 / 3); }
.portrait-hero .ph-eyebrow { max-width: calc(100cqi - var(--ph-w) - 4cqi); margin-bottom: 1.6cqi; color: var(--ph-muted); font-size: 0.75rem; font-size: var(--text-xs, .8rem); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.portrait-hero .ph-title {
    max-width: calc(100cqi - var(--ph-w) - 2.4cqi);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-poster, var(--font-display, sans-serif)); font-stretch: 100%; font-stretch: var(--poster-stretch, 100%); font-weight: 800; font-weight: var(--poster-weight, 800);
    font-size: var(--ph-t); line-height: .8; letter-spacing: -.012em; text-transform: uppercase;
}
.portrait-hero .ph-line { display: block; overflow-x: visible; overflow-y: clip; overflow-clip-margin: .12em; }
.portrait-hero .ph-line-text { display: block; }
.portrait-hero .ph-line-text em {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, serif); font-stretch: 100%; font-style: italic; font-weight: 400;
    font-size: 1.04em; line-height: 0; letter-spacing: -.035em; text-transform: none; color: var(--ph-accent); padding-right: .06em;
}
.portrait-hero.ph-side-left .ph-stage { padding-left: calc(var(--ph-w) + 2.4cqi); }
.portrait-hero.ph-side-left :where(.ph-title, .ph-eyebrow) { max-width: none; }

.portrait-hero .ph-portrait { position: absolute; top: 0; right: 0; width: var(--ph-w); z-index: 1; }
.portrait-hero.ph-side-left .ph-portrait { right: auto; left: 0; }
.portrait-hero .ph-photo { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 1vh; border-radius: var(--radius, 0); background: rgb(241, 241, 241); background: color-mix(in srgb, #222 4%, #fafafa); background: var(--surface, #e6e2d8); }
.portrait-hero .ph-photo :where(picture, img) { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.portrait-hero.ph-grade-mono .ph-photo img { filter: grayscale(1) contrast(1.08); }
.portrait-hero.ph-grade-duo .ph-photo { background: var(--ph-accent); }
.portrait-hero.ph-grade-duo .ph-photo img { filter: grayscale(1) contrast(1.2); mix-blend-mode: screen; }
.portrait-hero .ph-caption { margin-top: .9em; color: var(--ph-muted); font-size: 0.75rem; font-size: var(--text-xs, .8rem); line-height: 1.45; text-wrap: pretty; }

.portrait-hero .ph-tag {
    position: absolute; left: -2.2cqi; bottom: 5.5cqi; z-index: 2; padding: .55em .8em .6em; rotate: -4deg;
    background: #fafafa;
    background: var(--paper, #fff); box-shadow: 0 .8cqi 2cqi -1cqi rgba(14, 14, 14, 0.4);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-poster, var(--font-display, sans-serif)); font-stretch: 100%; font-stretch: var(--poster-stretch, 100%); font-weight: 800; font-weight: var(--poster-weight, 800);
    font-size: 3.6cqi; line-height: 1; text-transform: uppercase; white-space: nowrap;
}

@supports (color: color-mix(in lch, red, blue)) {
.portrait-hero .ph-tag { box-shadow: 0 .8cqi 2cqi -1cqi color-mix(in srgb, var(--ph-ink) 40%, transparent);
}
}
.portrait-hero .ph-was, .portrait-hero .ph-now { display: inline-block; font-feature-settings: "lnum"; font-variant-numeric: lining-nums; -webkit-text-decoration: none; text-decoration: none; }
.portrait-hero .ph-was {
    color: var(--ph-muted); margin-right: .25em;
    background: linear-gradient(to top right, transparent calc(50% - .045em), var(--ph-accent) calc(50% - .045em), var(--ph-accent) calc(50% + .045em), transparent calc(50% + .045em)) no-repeat 0 55% / 100% 100%;
    background: linear-gradient(to top right, transparent calc(50% - .045em), var(--ph-accent) calc(50% - .045em), var(--ph-accent) calc(50% + .045em), transparent calc(50% + .045em)) no-repeat 0 55% / var(--ph-strike, 100%) 100%;
}
.portrait-hero .ph-now { padding-left: .08em; padding-right: .08em; background: linear-gradient(var(--ph-mark), var(--ph-mark)) no-repeat 0 62% / 100% 62%; background: linear-gradient(var(--ph-mark), var(--ph-mark)) no-repeat 0 62% / var(--ph-hl, 100%) 62%; }
.portrait-hero .ph-tag-note { display: block; margin-top: .45em; color: var(--ph-muted); font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-text, sans-serif); font-stretch: 100%; font-weight: 600; font-size: max(0.75rem, .24em); font-size: max(var(--text-xs, .8rem), .24em); letter-spacing: .1em; }

.portrait-hero .ph-foot { --row-gap: 3cqi 5cqi; margin-top: 3.4cqi; align-items: flex-end; }
.portrait-hero .ph-pitch { flex: 1 1 36%; }
.portrait-hero .ph-lead { max-width: 36ch; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-size: 1.4rem; font-size: var(--text-lg, 1.4rem); line-height: 1.28; letter-spacing: -.006em; text-wrap: pretty; }
.portrait-hero .ph-actions { --row-gap: 1em 1.8em; --row-item: auto; --row-flow-narrow: row wrap; align-items: center; margin-top: 1.4em; }
.portrait-hero .ph-actions > * { flex: 0 0 auto; }
.portrait-hero .ph-facts { --row-gap: 0; --row-item: 0; flex: 1 1 54%; border-top: 1px solid var(--ph-ink); }
.portrait-hero .ph-fact { padding: 1.1em 1.4em 0 0; }
.portrait-hero .ph-fact + .ph-fact { padding-left: 1.4em; border-left: 1px solid var(--ph-line); }
.portrait-hero .ph-fact-key { color: var(--ph-muted); font-size: 0.75rem; font-size: var(--text-xs, .8rem); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.portrait-hero .ph-fact-value { margin-top: .35em; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-poster, var(--font-display, sans-serif)); font-stretch: 100%; font-stretch: var(--poster-stretch, 100%); font-weight: 800; font-weight: var(--poster-weight, 800); font-size: 2.6cqi; line-height: .95; text-transform: uppercase; font-feature-settings: "lnum"; font-variant-numeric: lining-nums; }
.portrait-hero .ph-fact-note { margin-top: .5em; color: var(--ph-muted); line-height: 1.4; }

html:not(.respect-reduced-motion) .portrait-hero.ph-motion-1 .ph-line-text { animation: ph-rise 1.1s var(--ph-ease) both; }
html:not(.respect-reduced-motion) .portrait-hero.ph-motion-1 .ph-line:nth-child(2) .ph-line-text { animation-delay: .1s; }
html:not(.respect-reduced-motion) .portrait-hero.ph-motion-1 .ph-line:nth-child(3) .ph-line-text { animation-delay: .2s; }
html:not(.respect-reduced-motion) .portrait-hero.ph-motion-1 .ph-line:nth-child(4) .ph-line-text { animation-delay: .3s; }
html:not(.respect-reduced-motion) .portrait-hero.ph-motion-1 .ph-photo { animation: ph-uncover 1.3s var(--ph-ease) .15s both; }
html:not(.respect-reduced-motion) .portrait-hero.ph-motion-1 .ph-photo img { animation: ph-settle 2s var(--ph-ease) .15s both; }
html:not(.respect-reduced-motion) .portrait-hero.ph-motion-1 .ph-tag { animation: ph-stick .7s cubic-bezier(.3, 1.5, .5, 1) 1s both; }
html:not(.respect-reduced-motion) .portrait-hero.ph-motion-1 .ph-was { animation: ph-strike .45s ease-in 1.5s both; }
html:not(.respect-reduced-motion) .portrait-hero.ph-motion-1 .ph-now { animation: ph-mark .5s ease-out 1.85s both; }
html:not(.respect-reduced-motion) .portrait-hero.ph-motion-1 :where(.ph-eyebrow, .ph-foot) { animation: ph-fade .9s var(--ph-ease) .45s both; }
html:not(.respect-reduced-motion) .portrait-hero.ph-motion-1 .ph-photo picture { animation: ph-drift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
@keyframes ph-rise { from { translate: 0 105%; } }
@keyframes ph-uncover { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ph-settle { from { scale: 1.22; } }
@keyframes ph-stick { from { opacity: 0; scale: 1.5; rotate: 8deg; } }
@keyframes ph-strike { from { --ph-strike: 0%; } }
@keyframes ph-mark { from { --ph-hl: 0%; } }
@keyframes ph-fade { from { opacity: 0; translate: 0 1.2em; } }
@keyframes ph-drift { to { translate: 0 14%; } }
@property --ph-strike { syntax: '<percentage>'; inherits: true; initial-value: 100%; }
@property --ph-hl { syntax: '<percentage>'; inherits: true; initial-value: 100%; }

@container (max-width: 40rem) {
    .portrait-hero { --ph-t: calc(var(--ph-title, 15.5) * 1.3cqi); }
    .portrait-hero .ph-stage, .portrait-hero.ph-side-left .ph-stage { min-height: 0; padding-left: 0; }
    .portrait-hero .ph-title, .portrait-hero .ph-eyebrow { max-width: none; }
    .portrait-hero .ph-portrait, .portrait-hero.ph-side-left .ph-portrait { position: relative; width: 100%; margin-top: 6cqi; }
    .portrait-hero .ph-photo { aspect-ratio: 4 / 5; }
    .portrait-hero .ph-tag { left: 4cqi; bottom: 6cqi; font-size: 10cqi; }
    .portrait-hero .ph-foot { margin-top: 8cqi; }
    .portrait-hero .ph-fact + .ph-fact { padding-left: 0; border-left: 0; }
    .portrait-hero .ph-fact { padding: 1em 0; border-bottom: 1px solid var(--ph-line); }
    .portrait-hero .ph-fact-value { font-size: 9cqi; }
}

/* blocks/pricing.css */

.pricing {
    --pricing-ink:     var(--ink, #11131a);
    --pricing-muted:   var(--muted, #6b7280);
    --pricing-accent:  var(--accent, #4f7cff);
    --pricing-accent-ink: var(--accent-ink, var(--invert-fg, #fff));
    --pricing-surface: var(--card-bg, var(--paper, var(--page-bg, #fff)));
    --pricing-line:    var(--line, color-mix(in srgb, var(--ink, #11131a) 14%, transparent));
    --pricing-radius:  var(--radius, 0.875rem);
    --pricing-gap:     var(--gap, calc(1.6 * var(--pe-vw)));
    --pricing-font-display: var(--font-display, system-ui, sans-serif);
    --pricing-font-text:    var(--font-text, var(--font-display, system-ui, sans-serif));
    --pricing-font-mono:    var(--font-mono, ui-monospace, monospace);
    width: 100%; color: #222; color: var(--pricing-ink);
}
.pricing[data-scheme="dark"] {
    --pricing-ink:     var(--ink-dark, #e9eaee);
    --pricing-muted:   var(--muted-dark, #9aa0ab);
    --pricing-surface: var(--card-bg-dark, var(--paper-dark, #14161c));
    --pricing-line:    var(--line-dark, color-mix(in srgb, var(--ink-dark, #e9eaee) 16%, transparent));
}

.pricing-head { max-width: 46ch; margin: 0 auto max(2rem, min(calc(5 * var(--pe-vw)), 4rem)); margin: 0 auto clamp(2rem, calc(5 * var(--pe-vw)), 4rem); }
.pricing-align-left .pricing-head { margin-left: 0; text-align: left; }
.pricing-align-center .pricing-head { text-align: center; }
.pricing-eyebrow { margin: 0 0 .6rem; font: 600 .72rem/1 var(--pricing-font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--pricing-accent); }
.pricing-title { margin: 0; font: 600 max(1.8rem, min(calc(4.2 * var(--pe-vw)), 3rem))/1.08 var(--pricing-font-display); font: 600 clamp(1.8rem, calc(4.2 * var(--pe-vw)), 3rem)/1.08 var(--pricing-font-display); letter-spacing: -.025em; color: var(--pricing-ink); }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: var(--pricing-gap); gap: var(--pricing-gap); align-items: stretch; }
@media (max-width: 768px) { .pricing-grid { grid-template-columns: 1fr; } }

.pricing-plan {
    display: flex; flex-direction: column; gap: .9rem;
    padding: max(1.4rem, min(calc(2.6 * var(--pe-vw)), 2.2rem));
    padding: clamp(1.4rem, calc(2.6 * var(--pe-vw)), 2.2rem);
    background: var(--pricing-surface); color: var(--pricing-ink);
    border: 1px solid var(--pricing-line);
    border-radius: var(--pricing-radius);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .35s, box-shadow .35s;
}
.pricing-plan:hover { transform: translateY(-.375rem); border-color: var(--pricing-accent); }
.pricing-plan--featured {
    border-color: var(--pricing-accent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--pricing-accent) 9%, var(--pricing-surface)), var(--pricing-surface));
    box-shadow: 0 0 0 1px var(--pricing-accent) inset, 0 1.125rem 3.125rem rgba(0, 27, 34, 0.22);
    transform: scale(1.03);
}

@supports (color: color-mix(in lch, red, blue)) {
.pricing-plan--featured {
    box-shadow: 0 0 0 1px var(--pricing-accent) inset, 0 1.125rem 3.125rem color-mix(in srgb, var(--pricing-accent) 22%, transparent);
}
}
.pricing-plan--featured:hover { transform: scale(1.03) translateY(-.375rem); }

.pricing-plan--single {
    max-width: 26rem; margin-left: auto; margin-right: auto;
    box-shadow: 0 1.125rem 3.125rem rgba(3, 3, 3, 0.08);
}

@supports (color: color-mix(in lch, red, blue)) {
.pricing-plan--single {
    box-shadow: 0 1.125rem 3.125rem color-mix(in srgb, var(--pricing-ink) 8%, transparent);
}
}
.pricing-align-left .pricing-plan--single { margin-left: 0; }

.pricing-badge { align-self: flex-start; font: 600 .625rem/1 var(--pricing-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--pricing-accent); border: 1px solid var(--pricing-accent); border-radius: 62.4375rem; padding: .25rem .5625rem; }
.pricing-name { font: 600 1.1rem/1 var(--pricing-font-display); color: var(--pricing-ink); }
.pricing-price { font: 600 max(2.2rem, min(calc(4 * var(--pe-vw)), 2.8rem))/1 var(--pricing-font-display); font: 600 clamp(2.2rem, calc(4 * var(--pe-vw)), 2.8rem)/1 var(--pricing-font-display); letter-spacing: -.02em; color: var(--pricing-ink); }
.pricing-price small { font: 400 .82rem/1 var(--pricing-font-mono); color: var(--pricing-muted); margin-left: .3ch; }
.pricing-blurb { margin: 0; color: var(--pricing-muted); font: 400 .9rem/1.5 var(--pricing-font-text); }

.pricing-feats { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.pricing-feats li { display: flex; gap: .6rem; align-items: flex-start; font: 400 .9rem/1.4 var(--pricing-font-text); color: var(--pricing-ink); }
.pricing-feats li::before { content: "✓"; color: var(--pricing-accent); font-weight: 700; flex: none; }

.pricing-cta {
    margin-top: auto; display: inline-flex; align-items: center; justify-content: center;
    font: 600 .92rem/1 var(--pricing-font-text); letter-spacing: -.01em; -webkit-text-decoration: none; text-decoration: none;
    padding: .85rem 1.4rem; border-radius: calc(var(--pricing-radius) - .25rem); border: 1px solid transparent;
    transition: transform .2s, box-shadow .2s, background .2s, border-color .2s, color .2s;
}
.pricing-cta--solid { background: var(--pricing-accent); color: var(--pricing-accent-ink); box-shadow: 0 .5rem 1.75rem rgba(0, 37, 46, 0.3); }

@supports (color: color-mix(in lch, red, blue)) {
.pricing-cta--solid { box-shadow: 0 .5rem 1.75rem color-mix(in srgb, var(--pricing-accent) 30%, transparent); }
}
.pricing-cta--solid:hover { transform: translateY(-.125rem); box-shadow: 0 .75rem 2.25rem rgba(0, 47, 59, 0.38); }

@supports (color: color-mix(in lch, red, blue)) {
.pricing-cta--solid:hover { box-shadow: 0 .75rem 2.25rem color-mix(in srgb, var(--pricing-accent) 38%, transparent); }
}
.pricing-cta--ghost { background: rgba(2, 2, 2, 0.05); color: var(--pricing-ink); border-color: var(--pricing-line); }

@supports (color: color-mix(in lch, red, blue)) {
.pricing-cta--ghost { background: color-mix(in srgb, var(--pricing-ink) 5%, transparent); }
}
.pricing-cta--ghost:hover { border-color: var(--pricing-accent); transform: translateY(-.125rem); }

/* blocks/process-steps.css */

.process-steps {
    --ps-accent: var(--accent, #635bff);
    --ps-ink: var(--ink, #0a2540);
    --ps-muted: var(--muted, #425466);
    --ps-line: var(--line, #e3e8ee);
    --ps-paper: var(--paper, #fff);
    --ps-mono: var(--font-mono, var(--font-display, ui-monospace, monospace));
    --ps-marker-size: max(2.4rem, min(calc(5 * var(--pe-vw)), 2.9rem));
    --ps-marker-size: clamp(2.4rem, calc(5 * var(--pe-vw)), 2.9rem);
    --ps-gap: max(1.4rem, min(calc(3.6 * var(--pe-vw)), 2.4rem));
    --ps-gap: clamp(1.4rem, calc(3.6 * var(--pe-vw)), 2.4rem);
    --ps-spine-blend: color-mix(in srgb, var(--ps-accent) 42%, var(--ps-line));
    width: 100%; margin: 0;
    color: #222;
    color: var(--ps-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, system-ui, sans-serif);
}

.process-steps .ps-eyebrow {
    margin: 0 0 max(1.4rem, min(calc(3.4 * var(--pe-vw)), 2.6rem));
    margin: 0 0 clamp(1.4rem, calc(3.4 * var(--pe-vw)), 2.6rem);
    color: var(--ps-accent);
    font: 600 .78rem/1 var(--ps-mono);
    letter-spacing: .16em; text-transform: uppercase;
}

.process-steps .ps-track { list-style: none; margin: 0; padding: 0; }

.process-steps .ps-step { position: relative; }
.process-steps .ps-step > .ps-marker { flex: 0 0 auto; }
.process-steps .ps-step > .ps-body { flex: 1 1 auto; min-width: 0; }

.process-steps .ps-marker { text-align: center; }
.process-steps .ps-icon {
    display: block; margin-left: auto; margin-right: auto;
    width: var(--ps-marker-size); height: var(--ps-marker-size); line-height: var(--ps-marker-size);
    border-radius: 50%; border: .0938rem solid var(--ps-line); background: var(--ps-paper);
    color: var(--ps-accent); font-size: calc(var(--ps-marker-size) * .42);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
.process-steps .ps-num {
    display: block; margin-top: .45rem;
    color: var(--ps-accent); font: 600 .74rem/1 var(--ps-mono); letter-spacing: .08em;
}
.process-steps .ps-step:not(:has(.ps-icon)) .ps-num {
    width: var(--ps-marker-size); height: var(--ps-marker-size); line-height: var(--ps-marker-size);
    margin: 0 auto; border-radius: 50%; border: .0938rem solid var(--ps-line); background: var(--ps-paper);
    font-size: calc(var(--ps-marker-size) * .34); letter-spacing: 0;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.process-steps .ps-step:hover .ps-icon,
.process-steps .ps-step:not(:has(.ps-icon)):hover .ps-num {
    border-color: var(--ps-accent);
    background: color-mix(in srgb, var(--ps-accent) 8%, var(--ps-paper));
    box-shadow: 0 0 0 .25rem rgba(0, 15, 18, 0.12);
}

@supports (color: color-mix(in lch, red, blue)) {
.process-steps .ps-step:hover .ps-icon,
.process-steps .ps-step:not(:has(.ps-icon)):hover .ps-num {
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--ps-accent) 12%, transparent);
}
}

.process-steps .ps-title {
    margin: 0; color: var(--ps-ink);
    font: 600 max(1.05rem, min(calc(1.6 * var(--pe-vw)), 1.3rem))/1.2 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 max(1.05rem, min(calc(1.6 * var(--pe-vw)), 1.3rem))/1.2 var(--font-display, system-ui, sans-serif);
    font: 600 max(1.05rem, min(calc(1.6 * var(--pe-vw)), 1.3rem))/1.2 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 clamp(1.05rem, calc(1.6 * var(--pe-vw)), 1.3rem)/1.2 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 clamp(1.05rem, calc(1.6 * var(--pe-vw)), 1.3rem)/1.2 var(--font-display, system-ui, sans-serif);
    letter-spacing: -.015em; text-wrap: balance;
}
.process-steps .ps-desc {
    margin: .4rem 0 0; max-width: 42ch; color: var(--ps-muted);
    font: 400 max(.86rem, min(calc(1.2 * var(--pe-vw)), .96rem))/1.5 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 max(.86rem, min(calc(1.2 * var(--pe-vw)), .96rem))/1.5 var(--font-text, var(--font-display, system-ui, sans-serif));
    font: 400 max(.86rem, min(calc(1.2 * var(--pe-vw)), .96rem))/1.5 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 clamp(.86rem, calc(1.2 * var(--pe-vw)), .96rem)/1.5 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 clamp(.86rem, calc(1.2 * var(--pe-vw)), .96rem)/1.5 var(--font-text, var(--font-display, system-ui, sans-serif));
    text-wrap: pretty;
}

.process-steps .ps-connector { position: absolute; pointer-events: none; }
.process-steps .ps-step:last-child .ps-connector { display: none; }

.process-steps.ps-vertical .ps-track { --row-flow: column nowrap; --row-gap: var(--ps-gap); }
.process-steps.ps-vertical .ps-step { --row-gap: 1.15rem; align-items: flex-start; }
.process-steps.ps-vertical .ps-body { padding-top: .3rem; }
.process-steps.ps-vertical .ps-connector {
    left: calc(var(--ps-marker-size) / 2);
    top: calc(var(--ps-marker-size) / 2);
    height: calc(100% + var(--ps-gap));
    border-left: calc(2 * 1px) solid var(--ps-spine-color, var(--ps-spine-blend));
    border-left: calc(var(--ps-spine-width, 2) * 1px) solid var(--ps-spine-color, var(--ps-spine-blend));
}

.process-steps.ps-horizontal .ps-track { --row-gap: var(--ps-gap); --row-item: var(--ps-step-min, 10rem); align-items: flex-start; }   /* steps wrap before a word must break */
.process-steps.ps-horizontal .ps-step { --row-flow: column nowrap; --row-gap: .9rem; align-items: center; text-align: center; }
.process-steps.ps-horizontal .ps-desc { max-width: 32ch; margin-left: auto; margin-right: auto; }
.process-steps.ps-horizontal .ps-connector {
    top: calc(var(--ps-marker-size) / 2);
    left: 50%;
    width: calc(100% + var(--ps-gap));
    border-top: calc(2 * 1px) solid var(--ps-spine-color, var(--ps-spine-blend));
    border-top: calc(var(--ps-spine-width, 2) * 1px) solid var(--ps-spine-color, var(--ps-spine-blend));
}

.process-steps.ps-numbered .ps-track { --row-flow: column nowrap; --row-gap: 0; }
.process-steps.ps-numbered .ps-step {
    --row-gap: max(1rem, min(calc(2.4 * var(--pe-vw)), 1.6rem));
    --row-gap: clamp(1rem, calc(2.4 * var(--pe-vw)), 1.6rem); align-items: baseline;
    padding-top: var(--ps-gap);
    padding-bottom: var(--ps-gap); border-top: 1px solid var(--ps-line);
}
.process-steps.ps-numbered .ps-step:first-child { border-top: 0; padding-top: 0; }
.process-steps.ps-numbered .ps-connector { display: none; }
.process-steps.ps-numbered .ps-icon { display: none; }
.process-steps.ps-numbered .ps-marker { flex: 0 0 auto; }
.process-steps.ps-numbered .ps-num {
    width: auto; height: auto; margin: 0; border: 0; background: none; box-shadow: none; border-radius: 0;
    font: 600 max(1.4rem, min(calc(2.6 * var(--pe-vw)), 2rem))/1 var(--ps-mono);
    font: 600 clamp(1.4rem, calc(2.6 * var(--pe-vw)), 2rem)/1 var(--ps-mono);
    letter-spacing: -.01em; color: color-mix(in srgb, var(--ps-accent) 78%, var(--ps-line));
}

.process-steps.ps-ic-small { --ps-marker-size: max(1.9rem, min(calc(4 * var(--pe-vw)), 2.3rem)); --ps-marker-size: clamp(1.9rem, calc(4 * var(--pe-vw)), 2.3rem); }
.process-steps.ps-ic-large { --ps-marker-size: max(3rem, min(calc(6.5 * var(--pe-vw)), 3.7rem)); --ps-marker-size: clamp(3rem, calc(6.5 * var(--pe-vw)), 3.7rem); }

.process-steps.ps-align-center .ps-eyebrow { text-align: center; }
.process-steps.ps-align-center.ps-horizontal .ps-track { justify-content: center; }

@container (max-width: 30rem) {
    .process-steps.ps-horizontal .ps-connector { display: none; }
}

/* blocks/product-detail.css */

.product-detail {
    --pd-ink: var(--ink, #1c1917);
    --pd-muted: var(--muted, #6b6158);
    --pd-line: var(--line, #ddd3c4);
    --pd-paper: var(--paper, #fffdf8);
    --pd-accent: var(--accent, #bf3b25);
    --pd-gap: 4.5em;
    width: 100%; margin: 0;
    color: #222;
    color: var(--pd-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, "Helvetica Neue", Arial, sans-serif);
    font-size: 0.875rem;
    font-size: var(--text-sm, 1em);
}

.product-detail .pd-layout { --row-gap: var(--pd-gap); align-items: flex-start; }
.product-detail .pd-gallery { flex: 1 1 56%; --row-gap: 1em; --row-flow: column nowrap; --row-item: auto; }
.product-detail .pd-info { flex: 1 1 36%; min-width: 0; }
.product-detail.pd-sticky-1 .pd-info { position: sticky; top: 6.5em; top: var(--pd-sticky-top, 6.5em); }

.product-detail.pd-gallery-grid .pd-gallery { --row-flow: row wrap; }
.product-detail.pd-gallery-grid .pd-plate { flex: 0 0 calc(50% - .5em); }
.product-detail.pd-gallery-grid .pd-plate:first-child { flex-basis: 100%; }
.product-detail .pd-plate { position: relative; margin: 0; overflow: hidden; border-radius: calc(1.2 * 1em); border-radius: calc(var(--pd-radius, 1.2) * 1em); background: rgb(241, 241, 241); background: color-mix(in srgb, #222 4%, #fafafa); background: var(--surface, #ece3d3); }
.product-detail .pd-shot { margin: 0; width: 100%; height: 100%; aspect-ratio: 4 / 5; }
.product-detail .pd-shot img, .product-detail .pd-shot picture { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.product-detail .pd-plate-bowl { background: rgb(241, 241, 241); background: color-mix(in srgb, #222 4%, #fafafa); background: var(--pd-plate, var(--surface, #ece3d3)); }
.product-detail .pd-plate-bowl .pd-shot { aspect-ratio: 1 / 1; padding: 11%; }
.product-detail .pd-plate-bowl .pd-shot img { -o-object-fit: contain; object-fit: contain; filter: drop-shadow(0 1.2em 1.4em rgba(7, 7, 7, 0.22)); }

@supports (color: color-mix(in lch, red, blue)) {
.product-detail .pd-plate-bowl .pd-shot img { filter: drop-shadow(0 1.2em 1.4em color-mix(in srgb, var(--pd-ink) 22%, transparent)); }
}
.product-detail .pd-plate-close .pd-shot { aspect-ratio: 1 / 1; }
.product-detail .pd-caption {
    position: absolute; left: 1em; bottom: 1em; margin: 0; padding: .55em .85em .5em; border-radius: 99em;
    background: var(--pd-paper); color: var(--pd-ink);
    font-size: 0.6875rem;
    font-size: var(--text-label, .74em); font-weight: 600; line-height: 1.2; letter-spacing: .06em;
}

.product-detail .pd-info > * { margin: 0; }
.product-detail .pd-origin { color: var(--pd-muted); font-size: 0.6875rem; font-size: var(--text-label, .74em); font-weight: 600; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; }
.product-detail .pd-name {
    margin-top: .3em; margin-left: -.035em;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, serif); font-weight: 400;
    font-size: 2.8em;
    font-size: var(--text-xl, 2.8em); line-height: 1; letter-spacing: -.02em; text-wrap: balance;
}
.product-detail .pd-rating { display: inline-block; margin-top: 1em; color: var(--pd-ink); -webkit-text-decoration: none; text-decoration: none; line-height: 1; }
.product-detail .pd-rating:hover .pd-rating-note { -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: .18em; }
.product-detail .pd-rating-note { margin-left: .55em; color: var(--pd-muted); font-size: 0.875rem; font-size: var(--text-sm, 1em); vertical-align: .1em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.product-detail .pd-stars {
    position: relative; display: inline-block; width: 6.2em; height: 1.1em; vertical-align: -.05em;
    background: rgba(5, 5, 5, 0.16); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M11 .8l3 6.3 6.9.9-5 4.8 1.2 6.8L11 16.3l-6.1 3.3 1.2-6.8-5-4.8 6.9-.9z'/%3E%3C/svg%3E") 0 0 / 1.24em 1.1em repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M11 .8l3 6.3 6.9.9-5 4.8 1.2 6.8L11 16.3l-6.1 3.3 1.2-6.8-5-4.8 6.9-.9z'/%3E%3C/svg%3E") 0 0 / 1.24em 1.1em repeat-x; -webkit-mask: var(--pd-star-mask) 0 0 / 1.24em 1.1em repeat-x; mask: var(--pd-star-mask) 0 0 / 1.24em 1.1em repeat-x;
    --pd-star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M11 .8l3 6.3 6.9.9-5 4.8 1.2 6.8L11 16.3l-6.1 3.3 1.2-6.8-5-4.8 6.9-.9z'/%3E%3C/svg%3E");
}

@supports (color: color-mix(in lch, red, blue)) {
.product-detail .pd-stars {
    background: color-mix(in srgb, var(--pd-ink) 16%, transparent);
}
}
.product-detail .pd-stars-fill { position: absolute; top: 0; right: auto; bottom: 0; left: 0; width: calc(5 / 5 * 100%); width: calc(var(--stars, 5) / 5 * 100%); background: var(--pd-ink); }

.product-detail .pd-prices { margin-top: 1.1em; font-size: 1.4em; font-size: var(--text-lg, 1.4em); font-weight: 600; line-height: 1; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.product-detail .pd-price { display: none; }
.product-detail:not(:has(.pd-radio input:checked)) .pd-price:first-child,
.product-detail:has(.pd-option:nth-child(1) input:checked) .pd-price:nth-child(1),
.product-detail:has(.pd-option:nth-child(2) input:checked) .pd-price:nth-child(2),
.product-detail:has(.pd-option:nth-child(3) input:checked) .pd-price:nth-child(3),
.product-detail:has(.pd-option:nth-child(4) input:checked) .pd-price:nth-child(4),
.product-detail:has(.pd-option:nth-child(5) input:checked) .pd-price:nth-child(5),
.product-detail:has(.pd-option:nth-child(6) input:checked) .pd-price:nth-child(6) { display: inline; }
.product-detail .pd-lead { margin-top: 1.3em; max-width: 44ch; line-height: 1.55; text-wrap: pretty; }

.product-detail .pd-sizes { margin: 2em 0 0; padding: 0; border: 0; min-width: 0; }
.product-detail .pd-label { float: left; width: 100%; margin: 0 0 .9em; padding: 0; color: var(--pd-muted); font-size: 0.6875rem; font-size: var(--text-label, .74em); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.product-detail .pd-options { --row-gap: .6em; --row-item: 0; --row-flow-narrow: row wrap; clear: both; }
.product-detail .pd-option {
    position: relative; cursor: pointer; min-width: 6.5em;
    padding: .95em 1em 1em; border-radius: .7em;
    background: var(--pd-paper); box-shadow: inset 0 0 0 1px var(--pd-line);
    line-height: 1.25; transition: box-shadow .2s ease;
}
.product-detail .pd-option:hover { box-shadow: inset 0 0 0 1px rgba(15, 15, 15, 0.45); }

@supports (color: color-mix(in lch, red, blue)) {
.product-detail .pd-option:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pd-ink) 45%, transparent); }
}
.product-detail .pd-option:has(input:checked) { box-shadow: inset 0 0 0 .125rem var(--pd-ink); }
.product-detail .pd-option:has(input:focus-visible) { outline: .125rem solid var(--pd-accent); outline-offset: .1875rem; }
.product-detail .pd-radio input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; opacity: 0; cursor: pointer; }
.product-detail .pd-option > span:not(.pd-radio) { display: block; }
.product-detail .pd-option-label { font-weight: 700; }
.product-detail .pd-option-note { margin-top: .2em; color: var(--pd-muted); font-size: 0.6875rem; font-size: var(--text-label, .74em); line-height: 1.35; }
.product-detail .pd-option-price { margin-top: .75em; font-weight: 600; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.product-detail .pd-option-stock { margin-top: .2em; color: var(--pd-muted); font-size: 0.6875rem; font-size: var(--text-label, .74em); font-weight: 600; letter-spacing: .02em; }
.product-detail .pd-stock-low .pd-option-stock { color: var(--pd-accent); }
.product-detail .pd-stock-out { cursor: not-allowed; }
.product-detail .pd-stock-out .pd-option-label, .product-detail .pd-stock-out .pd-option-price { color: var(--pd-muted); -webkit-text-decoration: line-through; text-decoration: line-through; text-decoration-thickness: .06em; }

.product-detail .pd-buy { --row-gap: .6em; --row-item: auto; --row-flow-narrow: row nowrap; align-items: stretch; margin-top: 1.4em; }
.product-detail .pd-qty { flex: 0 0 auto; border-radius: 99em; background: rgb(241, 241, 241); background: color-mix(in srgb, #222 4%, #fafafa); background: var(--surface, #ece3d3); white-space: nowrap; }
.product-detail .pd-step {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none; cursor: pointer; width: 2.9em; height: 3.4em; margin: 0; padding: 0; border: 0; border-radius: 99em;
    background: transparent; color: var(--pd-ink); font: 500 1.2em/1 'Open Sans', Arial, Helvetica, sans-serif; font: 500 1.2em/1 var(--font-text, "Helvetica Neue", Arial, sans-serif); vertical-align: middle;
}
.product-detail .pd-step:hover { background: rgba(3, 3, 3, 0.08); }

@supports (color: color-mix(in lch, red, blue)) {
.product-detail .pd-step:hover { background: color-mix(in srgb, var(--pd-ink) 8%, transparent); }
}
.product-detail .pd-step:focus-visible { outline: .125rem solid var(--pd-accent); outline-offset: -.125rem; }
.product-detail .pd-qty-input {
    -webkit-appearance: textfield;
            appearance: textfield; -moz-appearance: textfield; width: 2.2em; margin: 0; padding: 0; border: 0; background: transparent;
    color: var(--pd-ink); font: 700 1em/1 'Open Sans', Arial, Helvetica, sans-serif; font: 700 1em/1 var(--font-text, "Helvetica Neue", Arial, sans-serif); text-align: center; vertical-align: middle; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.product-detail .pd-qty-input::-webkit-inner-spin-button, .product-detail .pd-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.product-detail .pd-add {
    flex: 1 1 auto; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; margin: 0; padding: 0 1.6em; min-height: 3.4em; border: 0; border-radius: 99em;
    background: var(--pd-accent); color: rgb(240, 251, 255); color: color(display-p3 0.94504 0.9821 1); color: oklch(from #007b9a clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h); color: var(--on-accent, #fff8ee);
    font: 700 1em/1 'Open Sans', Arial, Helvetica, sans-serif;
    font: 700 1em/1 var(--font-text, "Helvetica Neue", Arial, sans-serif); letter-spacing: .01em;
    transition: background-color .2s ease, transform .15s ease;
}
.product-detail .pd-add:hover { background: #066b84; }

@supports (color: color-mix(in lch, red, blue)) {
.product-detail .pd-add:hover { background: color-mix(in srgb, var(--pd-accent) 82%, var(--pd-ink)); }
}
.product-detail .pd-add:active { transform: scale(.98); }
.product-detail .pd-add:focus-visible { outline: .125rem solid var(--pd-ink); outline-offset: .1875rem; }
.product-detail .pd-add.is-added { background: var(--pd-ink); }

.product-detail .pd-dispatch { margin-top: 1.1em; color: var(--pd-muted); line-height: 1.45; }
.product-detail .pd-dispatch-icon { margin-right: .5em; color: var(--pd-ink); font-size: 1.1em; vertical-align: -.12em; }

.product-detail .pd-details { margin-top: 2.2em; border-bottom: 1px solid var(--pd-line); }
.product-detail .pd-detail { border-top: 1px solid var(--pd-line); }
.product-detail .pd-detail-title {
    position: relative; cursor: pointer; list-style: none; padding: 1.05em 2em 1.05em 0;
    font-weight: 700; line-height: 1.3;
}
.product-detail .pd-detail-title::-webkit-details-marker { display: none; }
.product-detail .pd-detail-title::after { content: "\f64d"; position: absolute; right: .1em; top: 50%; translate: 0 -50%; font-family: bootstrap-icons; font-weight: 400; transition: rotate .25s ease; }
.product-detail .pd-detail[open] .pd-detail-title::after { rotate: 45deg; }
.product-detail .pd-detail-title:focus-visible { outline: .125rem solid var(--pd-accent); outline-offset: .125rem; }
.product-detail .pd-detail-body { margin: 0 0 1.3em; max-width: 52ch; color: var(--pd-muted); line-height: 1.55; }

.product-detail.pd-tone-paper .pd-option { background: #f9f9f9; background: var(--page-bg, #f4ecdf); }

@container (max-width: 56em) {
    .product-detail { --pd-gap: 2em; }
    .product-detail .pd-layout { --row-flow: column nowrap; --row-item: auto; }
    .product-detail .pd-gallery, .product-detail .pd-info { flex: 0 0 auto; width: 100%; }
    .product-detail .pd-gallery, .product-detail.pd-gallery-grid .pd-gallery { --row-flow: row nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .product-detail .pd-plate, .product-detail.pd-gallery-grid .pd-plate, .product-detail.pd-gallery-grid .pd-plate:first-child { flex: 0 0 84%; scroll-snap-align: start; }
    .product-detail.pd-sticky-1 .pd-info { position: static; }
}

/* blocks/product-drawing.css */

.pd-svg {
    display: block; width: 100%; height: auto; overflow: visible;
    /* a figure (the measure) scales with its drawing, never below the site's type floor; floored before the svg's own
       scale. Its word label keeps scaling: on a small drawing the labels would crowd each other */
    --pd-figure-shown: max(var(--pd-figure-size), var(--type-floor, calc(0 * var(--pe-vw))));
}
.pd-svg * { vector-effect: non-scaling-stroke; }

.pd-svg .pd-fill { stroke: #222; stroke: var(--pd-outline, var(--ink, #111)); stroke-width: 2.4; stroke-width: var(--w-outline, 2.4); stroke-linejoin: round; }
.pd-body   { fill: #fafafa; fill: var(--cw-body, var(--panel, #dde2de)); }
.pd-panel  { fill: rgb(241, 241, 241); fill: color-mix(in srgb, #222 4%, #fafafa); fill: var(--cw-panel, var(--surface, #b9c3c4)); }
.pd-trim   { fill: #222; fill: var(--cw-trim, var(--ink, #2c3941)); }
.pd-tyre   { fill: #222; fill: var(--pd-tyre, var(--ink, #2b3439)); }
.pd-rim    { fill: #626262; fill: var(--pd-rim, var(--muted, #96a3aa)); }
.pd-glass  { fill: rgba(150, 163, 170, .38); fill: var(--pd-glass, rgba(150, 163, 170, .38)); }
.pd-signal { fill: #007b9a; fill: var(--pd-signal, var(--accent, #00a870)); stroke: none; }
.pd-detail { fill: none; stroke: #626262; stroke: var(--pd-detail, var(--muted, #666)); stroke-width: 1.2; stroke-width: var(--w-detail, 1.2); stroke-linecap: round; }
.pd-ground { stroke: #626262; stroke: var(--pd-detail, var(--muted, #666)); stroke-width: 1.2; stroke-width: var(--w-detail, 1.2); }
.pd-ghosted .pd-fill { fill: rgba(120, 130, 140, .22) !important; fill: var(--pd-ghost, rgba(120, 130, 140, .22)) !important; stroke: #626262; stroke: var(--pd-detail, var(--muted, #666)); }
.pd-part { transition: none; }

.pd-dim { fill: none; stroke: #626262; stroke: var(--pd-dim-line, var(--pd-detail, var(--muted, #666))); stroke-width: 1; stroke-width: var(--w-dim, 1); }
.pd-dim-head { fill: #222; fill: var(--pd-dim-ink, var(--pd-outline, var(--ink, #111))); stroke: none; }
.pd-dim-fig {
    fill: #222;
    fill: var(--pd-dim-ink, var(--pd-outline, var(--ink, #111)));
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, 'SF Mono', Menlo, monospace);
    font-size: calc(var(--pd-figure-shown) * var(--pd-unit-scale)); letter-spacing: -.02em;
}
.pd-dim-label {
    fill: #626262;
    fill: var(--pd-dim-ink, var(--pd-detail, var(--muted, #666)));
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-label, var(--font-text, Helvetica, Arial, sans-serif));
    font-size: calc(var(--pd-label-size) * var(--pd-unit-scale));
}

.pd-lam .pd-face { stroke: #222; stroke: var(--pd-outline, var(--ink, #111)); stroke-width: 1; stroke-width: var(--w-detail, 1); stroke-linejoin: round; }
.pd-lam .pd-face:not([fill]) { fill: rgb(241, 241, 241); fill: color-mix(in srgb, #222 4%, #fafafa); fill: var(--pd-lam-device, var(--surface, #c9aa96)); }
.pd-lam-ground .pd-face:not([fill]) { fill: #fafafa; fill: var(--pd-lam-tissue, var(--panel, #e9b9a4)); }
.pd-lam .pd-hatch { stroke: none; }
.pd-hatch-mark { fill: #222; fill: var(--pd-outline, var(--ink, #111)); opacity: .5; }
.pd-hatch-rule { stroke: #222; stroke: var(--pd-outline, var(--ink, #111)); stroke-width: .055; opacity: .42; fill: none; }
.pd-lam { transition: opacity .45s cubic-bezier(.4, 0, .2, 1); transition: opacity .45s var(--ease, cubic-bezier(.22, .61, .36, 1)); }
.pd-lam[data-reached="no"] { opacity: .28; opacity: var(--pd-lam-dim, .28); }
.pd-lam.pd-on .pd-face { stroke: #007b9a; stroke: var(--pd-cursor, var(--accent, #0b6b4f)); stroke-width: calc(1.6 * 1.15); stroke-width: calc(var(--w-outline, 1.6) * 1.15); }
.pd-datum { stroke: #007b9a; stroke: var(--pd-datum, var(--accent, #b5501b)); stroke-width: 1.6; stroke-width: var(--w-outline, 1.6); }
.pd-tick { stroke: #626262; stroke: var(--pd-label-ink, var(--pd-detail, var(--muted, #666))); stroke-width: .75; stroke-width: var(--w-dim, .75); opacity: .75; }
.pd-axis, .pd-leader { stroke: #626262; stroke: var(--pd-label-ink, var(--pd-detail, var(--muted, #666))); stroke-width: .75; stroke-width: var(--w-dim, .75); opacity: .45; }
.pd-fig, .pd-lab {
    fill: #626262;
    fill: var(--pd-label-ink, var(--pd-detail, var(--muted, #666)));
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-label, var(--font-text, Helvetica, Arial, sans-serif));
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.pd-fig { text-anchor: end; font-size: calc(var(--pd-figure-shown) * var(--pd-unit-scale)); }
.pd-lab { text-anchor: start; font-size: calc(var(--pd-label-size) * var(--pd-unit-scale)); }
.pd-lam.pd-on .pd-lab, .pd-lam.pd-on .pd-fig { fill: #007b9a; fill: var(--pd-cursor, var(--accent, #0b6b4f)); font-weight: 600; }
.pd-cursor { stroke: #007b9a; stroke: var(--pd-cursor, var(--accent, #0b6b4f)); stroke-width: 1.6; stroke-width: var(--w-outline, 1.6); }
.pd-cursor-fill { fill: #007b9a; fill: var(--pd-cursor, var(--accent, #0b6b4f)); }
.pd-datum-fig {
    fill: #007b9a;
    fill: var(--pd-datum, var(--accent, #b5501b));
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-label, var(--font-text, Helvetica, Arial, sans-serif));
    font-size: calc(var(--pd-figure-shown) * var(--pd-unit-scale) * .92);
    font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}

html.respect-reduced-motion .pd-lam { transition-duration: .01ms; }

/* blocks/product-grid.css */

.product-grid {
    --pg-ink: var(--ink, #1c1917);
    --pg-muted: var(--muted, #6b6158);
    --pg-line: var(--line, #ddd3c4);
    --pg-paper: var(--paper, #fffdf8);
    --pg-accent: var(--accent, #bf3b25);
    --pg-cols: 4;
    --pg-gap: 1.6em;
    width: 100%; margin: 0;
    color: #222;
    color: var(--pg-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, "Helvetica Neue", Arial, sans-serif);
}

.product-grid .pg-head { margin: 0 0 2.2em; }
.product-grid .pg-head > * { margin: 0; }
.product-grid .pg-eyebrow {
    color: var(--pg-muted); font-size: 0.6875rem; font-size: var(--text-label, .74em); font-weight: 600; line-height: 1.3;
    letter-spacing: .12em; text-transform: uppercase;
}
.product-grid .pg-title {
    margin-top: .25em; margin-left: -.035em;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, serif); font-weight: 400;
    font-size: 2.6em;
    font-size: var(--text-xl, 2.6em); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance;
}
.product-grid .pg-lead { margin-top: .9em; max-width: 46ch; font-size: 1.2em; font-size: var(--text-lg, 1.2em); line-height: 1.42; text-wrap: pretty; }
.product-grid .pg-count {
    margin-top: 1.4em; color: var(--pg-muted); font-size: 0.6875rem; font-size: var(--text-label, .74em); font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.product-grid.pg-align-center .pg-head { text-align: center; }
.product-grid.pg-align-center .pg-lead { margin-left: auto; margin-right: auto; }

.product-grid .pg-chips { --row-gap: .5em; --row-item: auto; --row-flow-narrow: row wrap; margin: 0 0 2em; }
.product-grid.pg-align-center .pg-chips { justify-content: center; }
.product-grid .pg-chip {
    flex: 0 0 auto; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; margin: 0;
    padding: .78em 1.25em; border: 1px solid rgba(7, 7, 7, 0.2); border-radius: 99em;
    background: transparent; color: var(--pg-ink);
    font: 600 0.6875rem/1 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 var(--text-label, .74em)/1 var(--font-text, "Helvetica Neue", Arial, sans-serif); letter-spacing: .1em; text-transform: uppercase;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

@supports (color: color-mix(in lch, red, blue)) {
.product-grid .pg-chip { border: 1px solid color-mix(in srgb, var(--pg-ink) 20%, transparent);
}
}
.product-grid .pg-chip:hover { border-color: var(--pg-ink); }
.product-grid .pg-chip.is-on,
.product-grid .pg-chip[aria-pressed="true"],
.product-grid .pg-chips:not(:has(.is-on)) .pg-chip:first-child { background: var(--pg-ink); border-color: var(--pg-ink); color: var(--pg-paper); }
.product-grid .pg-chip:focus-visible { outline: .125rem solid var(--pg-accent); outline-offset: .1875rem; }

.product-grid .pg-items { --row-gap: var(--pg-gap); --row-flow-narrow: row wrap; list-style: none; margin: 0; padding: 0; }
.product-grid.pg-cols-2 { --pg-cols: 2; }
.product-grid.pg-cols-3 { --pg-cols: 3; }
.product-grid.pg-cols-4 { --pg-cols: 4; }
@container (max-width: 56em) { .product-grid.pg-cols-4, .product-grid.pg-cols-auto { --pg-cols: 3; } }
@container (max-width: 44em) { .product-grid.product-grid { --pg-cols: 2; --pg-gap: 1em; } }
.product-grid .pg-card {
    position: relative; margin: 0;
    flex: 0 0 calc((100% - (var(--pg-cols) - 1) * var(--pg-gap)) / var(--pg-cols));
    padding: .55em .55em 0;
    border-radius: calc(1 * 1em);
    border-radius: calc(var(--pg-radius, 1) * 1em);
    background: var(--pg-paper);
    box-shadow: 0 0 0 1px rgba(2, 2, 2, 0.05);
    transition: box-shadow .35s ease;
}

@supports (color: color-mix(in lch, red, blue)) {
.product-grid .pg-card {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--pg-ink) 5%, transparent);
}
}
.product-grid .pg-card:hover {
    box-shadow: 0 0 0 1px rgba(2, 2, 2, 0.07),
                0 .15em .4em rgba(2, 2, 2, 0.07),
                0 1.4em 2.8em -1.2em rgba(9, 9, 9, 0.26);
}

@supports (color: color-mix(in lch, red, blue)) {
.product-grid .pg-card:hover {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--pg-ink) 7%, transparent),
                0 .15em .4em color-mix(in srgb, var(--pg-ink) 7%, transparent),
                0 1.4em 2.8em -1.2em color-mix(in srgb, var(--pg-ink) 26%, transparent);
}
}
.product-grid.pg-card-bare .pg-card { padding: 0; background: transparent; box-shadow: none; }
.product-grid.pg-card-outline .pg-card { background: transparent; box-shadow: 0 0 0 1px var(--pg-line); }

.product-grid .pg-media {
    position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1;
    border-radius: calc(1 * 1em - .55em);
    border-radius: calc(var(--pg-radius, 1) * 1em - .55em);
    background: rgb(241, 241, 241);
    background: color-mix(in srgb, #222 4%, #fafafa);
    background: var(--pg-plate, var(--pg-well, var(--surface, #ece3d3)));
}
.product-grid.pg-media-portrait .pg-media { aspect-ratio: 4 / 5; }
.product-grid.pg-card-bare .pg-media { border-radius: calc(1 * 1em); border-radius: calc(var(--pg-radius, 1) * 1em); }
.product-grid .pg-shot, .product-grid .pg-shot-hover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; width: 100%; height: 100%; }
.product-grid .pg-shot { padding: 9%; transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .45s ease; }
.product-grid .pg-shot img, .product-grid .pg-shot picture,
.product-grid .pg-shot-hover img, .product-grid .pg-shot-hover picture { display: block; width: 100%; height: 100%; }
.product-grid .pg-shot img { -o-object-fit: contain; object-fit: contain; filter: drop-shadow(0 .5em .7em rgba(5, 5, 5, 0.16)); }

@supports (color: color-mix(in lch, red, blue)) {
.product-grid .pg-shot img { filter: drop-shadow(0 .5em .7em color-mix(in srgb, var(--pg-ink) 16%, transparent)); }
}
.product-grid .pg-shot-hover { opacity: 0; transform: scale(1.06); transition: opacity .45s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.product-grid .pg-shot-hover img { -o-object-fit: cover; object-fit: cover; }
.product-grid.pg-hover-swap .pg-card:hover .pg-shot-hover { opacity: 1; transform: scale(1); }
.product-grid.pg-hover-swap .pg-card:hover .pg-shot { opacity: 0; transform: scale(.92); }
.product-grid.pg-hover-zoom .pg-card:hover .pg-shot { transform: scale(1.06); }
.product-grid.pg-hover-lean .pg-shot { transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.product-grid.pg-hover-lean .pg-shot-hover { opacity: 1; transform: scale(1.18); clip-path: circle(0% at 50% 50%); transition: clip-path .75s cubic-bezier(.65, 0, .25, 1), transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.product-grid.pg-hover-lean .pg-card:hover .pg-shot { transform: rotate(38deg) scale(.86); }
.product-grid.pg-hover-lean .pg-card:hover .pg-shot-hover { transform: scale(1); clip-path: circle(72% at 50% 50%); }
.product-grid.pg-hover-none .pg-shot-hover, .product-grid.pg-hover-zoom .pg-shot-hover { opacity: 0; }
.product-grid .pg-shot-hover.is-empty { visibility: hidden; }

.product-grid .pg-badge {
    position: absolute; top: .9em; left: .9em; z-index: 2;
    padding: .5em .8em .45em; border-radius: 99em;
    background: var(--pg-ink); color: var(--pg-paper);
    font-size: 0.6875rem;
    font-size: var(--text-label, .74em); font-weight: 700; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
}

/* a card is a column: the body takes the height its row gives, so the price line sits at the foot of every card in a
   row whatever the length of the name or the origin above it */
.product-grid .pg-media { flex: none; }
.product-grid .pg-body { padding: 1.05em .6em 1.1em; }
.product-grid .pg-body > * { flex: none; }
.product-grid .pg-body > :nth-last-child(2) { margin-bottom: 1.1em; }
.product-grid.pg-card-bare .pg-body { padding-left: 0; padding-right: 0; }
.product-grid .pg-body > * { margin: 0; }
.product-grid .pg-name {
    display: block; color: var(--pg-ink); -webkit-text-decoration: none; text-decoration: none;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, serif); font-weight: 400;
    font-size: 1.3em;
    font-size: var(--text-lg, 1.3em); line-height: 1.12; letter-spacing: -.01em; text-wrap: balance;
}
.product-grid .pg-name:hover { -webkit-text-decoration: underline; text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .16em; }
.product-grid .pg-name:focus-visible { outline: .125rem solid var(--pg-accent); outline-offset: .1875rem; border-radius: .2em; }
.product-grid .pg-origin { margin-top: .35em; color: var(--pg-muted); font-size: 0.875rem; font-size: var(--text-sm, 1em); line-height: 1.4; }
.product-grid .pg-foot { --row-gap: .5em; --row-item: auto; --row-flow-narrow: row wrap; align-items: center; margin-top: auto; padding-top: .95em; border-top: 1px solid var(--pg-line); }
.product-grid .pg-price { flex: 0 0 auto; margin: 0; font-size: 0.875rem; font-size: var(--text-sm, 1em); font-weight: 700; line-height: 1; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.product-grid .pg-unit { flex: 1 1 auto; margin: 0; color: var(--pg-muted); font-size: 0.875rem; font-size: var(--text-sm, 1em); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.product-grid .pg-add {
    flex: 0 0 auto; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; margin: 0 0 0 auto;
    padding: .62em .95em .62em .78em; border: 0; border-radius: 99em;
    background: var(--pg-ink); color: var(--pg-paper);
    font: 700 0.6875rem/1 'Open Sans', Arial, Helvetica, sans-serif;
    font: 700 var(--text-label, .74em)/1 var(--font-text, "Helvetica Neue", Arial, sans-serif); letter-spacing: .1em; text-transform: uppercase;
    white-space: nowrap; transition: background-color .2s ease, transform .2s ease;
}
.product-grid .pg-add:hover { background: var(--pg-accent); }
.product-grid .pg-add:focus-visible { outline: .125rem solid var(--pg-accent); outline-offset: .1875rem; }
.product-grid .pg-add:active { transform: scale(.96); }
.product-grid .pg-add-icon { margin-right: .4em; font-size: 1.05em; vertical-align: -.08em; }
.product-grid .pg-add.is-added { background: var(--pg-accent); }
.product-grid .pg-add.is-added .pg-add-icon::before { content: "\f633"; }
.product-grid:not(.pg-add-1) .pg-add { display: none; }

@container (max-width: 44em) {
    .product-grid .pg-card { padding: .4em .4em 0; }
    .product-grid .pg-body { padding: .85em .35em .9em; }
    .product-grid .pg-add-label { display: none; }
    .product-grid .pg-add { padding: .62em; }
    .product-grid .pg-add-icon { margin: 0; }
}
html.respect-reduced-motion .product-grid .pg-shot, html.respect-reduced-motion .product-grid .pg-shot-hover { transition: opacity .2s ease; transform: none; }
html.respect-reduced-motion .product-grid.pg-hover-lean .pg-shot-hover { clip-path: none; opacity: 0; }
html.respect-reduced-motion .product-grid.pg-hover-lean .pg-card:hover .pg-shot-hover { opacity: 1; }

/* blocks/project-grid.css */

.project-grid {
    --prg-ink: var(--ink, #151513);
    --prg-muted: var(--muted, #65625b);
    --prg-ground: var(--surface, #e8e6e0);
    --prg-accent: var(--accent, #b3321d);
    --prg-gap: 3.2cqi;
    width: 100%; margin: 0;
    color: #222;
    color: var(--prg-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, 'Helvetica Neue', Arial, sans-serif);
}
.project-grid .prg-eyebrow {
    margin: 0 0 2.2em;
    color: var(--prg-muted);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, 'SFMono-Regular', Menlo, monospace); font-size: .82em; line-height: 1.4; letter-spacing: .01em;
}
.project-grid.prg-align-center .prg-eyebrow { text-align: center; }

.project-grid .prg-tiles { --row-gap: 6cqi var(--prg-gap); align-items: flex-start; margin: 0; padding: 0; }

.project-grid .prg-tile { position: relative; color: var(--prg-ink); -webkit-text-decoration: none; text-decoration: none; --prg-crop: 3 / 2; }
.project-grid .prg-tile:focus-visible { outline: .125rem solid var(--prg-accent); outline-offset: .3em; }
.project-grid .prg-frame { position: relative; overflow: hidden; aspect-ratio: var(--prg-crop); background: var(--prg-ground); }
.project-grid .prg-frame .imagesingle { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; border-radius: 0; }
.project-grid .prg-frame img, .project-grid .prg-frame picture { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.project-grid .prg-second { opacity: 0; transition: opacity .6s cubic-bezier(.4, 0, .2, 1); transition: opacity .6s var(--ease, ease); }
.project-grid.prg-swap-1 .prg-tile:hover .prg-second, .project-grid.prg-swap-1 .prg-tile:focus-visible .prg-second { opacity: 1; }

.project-grid .prg-caption { position: relative; padding: 1em 2.2em 0 0; }
.project-grid.prg-captions-hidden .prg-caption { display: none; }
.project-grid .prg-kicker {
    display: block; margin: 0 0 .45em;
    color: var(--prg-muted);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, 'SFMono-Regular', Menlo, monospace); font-size: .82em; line-height: 1.4; letter-spacing: .01em;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.project-grid .prg-title { display: block; font-size: 1.12em; line-height: 1.35; letter-spacing: -.005em; text-wrap: balance; max-width: 34em; }
.project-grid .prg-arrow {
    position: absolute; right: .2em; bottom: .2em;
    font-size: 1.15em; line-height: 1; color: var(--prg-ink);
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
    transition: transform .45s var(--ease, ease);
}
.project-grid .prg-tile:hover .prg-arrow, .project-grid .prg-tile:focus-visible .prg-arrow { transform: translateX(.3em); }

.project-grid.prg-rhythm-stagger .prg-tile:nth-child(6n+1),
.project-grid.prg-rhythm-stagger .prg-tile:nth-child(6n+4) { --row-item: 56%; --prg-crop: 7 / 5; }
.project-grid.prg-rhythm-stagger .prg-tile:nth-child(6n+2),
.project-grid.prg-rhythm-stagger .prg-tile:nth-child(6n+3) { --row-item: 32%; --prg-crop: 4 / 5; }
.project-grid.prg-rhythm-stagger .prg-tile:nth-child(6n+2) { margin-top: 14cqi; }
.project-grid.prg-rhythm-stagger .prg-tile:nth-child(6n+3) { margin-top: 0; }
.project-grid.prg-rhythm-stagger .prg-tile:nth-child(6n+5),
.project-grid.prg-rhythm-stagger .prg-tile:nth-child(6n) { --row-item: 44%; --prg-crop: 3 / 2; }
.project-grid.prg-rhythm-stagger .prg-tile:nth-child(6n+4) { margin-top: 10cqi; }
.project-grid.prg-rhythm-pairs .prg-tile { --row-item: 40%; --prg-crop: 4 / 5; }
.project-grid.prg-rhythm-trio .prg-tile { --row-item: 27%; --prg-crop: 4 / 5; }
.project-grid.prg-rhythm-rail .prg-tiles { --row-flow: row nowrap; --row-flow-narrow: row nowrap; --row-gap: 0 var(--prg-gap); width: -moz-max-content; width: max-content; }
.project-grid.prg-rhythm-rail .prg-tile { flex: 0 0 auto; width: 30cqi; --prg-crop: 4 / 5; }
.project-grid.prg-rhythm-rail .prg-tile:nth-child(even) { width: 46cqi; --prg-crop: 3 / 2; margin-top: 9cqi; }
.project-grid.prg-rhythm-rail .prg-title { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, 'Helvetica Neue', Arial, sans-serif); font-size: 2em; line-height: 1; letter-spacing: -.03em; }
.project-grid.prg-crop-landscape .prg-tile { --prg-crop: 3 / 2; }
.project-grid.prg-crop-portrait .prg-tile { --prg-crop: 4 / 5; }

@container (max-width: 30rem) {
    .project-grid .prg-tile { --row-item: auto; margin-top: 0; }
    .project-grid .prg-tiles { --row-gap: 12cqi; }
    .project-grid.prg-rhythm-rail .prg-tiles { --row-gap: 0 5cqi; }
    .project-grid.prg-rhythm-rail .prg-tile { width: 74cqi; margin-top: 0; }
    .project-grid.prg-rhythm-rail .prg-tile:nth-child(even) { width: 86cqi; }
}

.project-grid.prg-parallax-1 .prg-frame img {
    animation: prg-drift linear both; animation-timeline: view(); animation-range: cover;
}
@keyframes prg-drift { from { transform: translateY(-7%) scale(1.16); } to { transform: translateY(7%) scale(1.16); } }

.project-grid .prg-frame[data-reveal="develop"][data-reveal-armed] { opacity: 1; transform: none; clip-path: none; }
.project-grid .prg-frame[data-reveal="develop"][data-reveal-armed] > .imagesingle { clip-path: inset(100% 0 0 0); }
.project-grid .prg-frame[data-reveal="develop"][data-reveal-shown] > .imagesingle {
    clip-path: inset(0 0 0 0);
    transition: clip-path 900ms cubic-bezier(.4, 0, .2, 1) calc(0ms + 0 * 0ms);
    transition: clip-path var(--reveal-duration, 900ms) var(--ease, cubic-bezier(.2, .7, .15, 1)) calc(var(--reveal-delay, 0ms) + var(--reveal-i, 0) * var(--reveal-stagger, 0ms));
}

/* blocks/project-sequence.css */

.project-sequence {
    --prs-ink: var(--ink, #151513);
    --prs-muted: var(--muted, #65625b);
    --prs-ground: var(--surface, #e8e6e0);
    --prs-accent: var(--accent, #b3321d);
    --prs-space: 9cqi;
    --prs-gutter: 2.4cqi;
    width: 100%; margin: 0;
    color: #222;
    color: var(--prs-ink);
}
.project-sequence.prs-gap-tight { --prs-space: 3cqi; --prs-gutter: 1cqi; }
.project-sequence .prs-eyebrow {
    margin: 0 0 2.2em;
    color: var(--prs-muted);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, 'SFMono-Regular', Menlo, monospace); font-size: .82em; line-height: 1.4; letter-spacing: .01em;
}
.project-sequence .prs-spreads { margin: 0; }
.project-sequence .prs-spread { --row-gap: var(--prs-gutter); align-items: flex-end; margin: 0; }
.project-sequence .prs-spread + .prs-spread { margin-top: var(--prs-space); }
.project-sequence .prs-spread > .prs-shots { --row-item: 100%; --row-gap: var(--prs-gutter); align-items: flex-start; margin: 0; }
.project-sequence .prs-spread > .prs-note { --row-item: 100%; margin: 0; }

.project-sequence .prs-shot { position: relative; margin: 0; cursor: zoom-in; --prs-crop: 3 / 2; }
.project-sequence .prs-shot:focus-visible { outline: .125rem solid var(--prs-accent); outline-offset: .3em; }
.project-sequence .prs-picture { position: relative; margin: 0; overflow: hidden; aspect-ratio: var(--prs-crop); background: var(--prs-ground); border-radius: 0; }
.project-sequence .prs-picture img, .project-sequence .prs-picture picture { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.project-sequence .prs-caption {
    margin: 0; padding-top: .95em; max-width: 44em;
    color: var(--prs-muted);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, 'SFMono-Regular', Menlo, monospace); font-size: .82em; line-height: 1.45; letter-spacing: .01em;
}
.project-sequence.prs-captions-hidden .prs-caption { display: none; }
.project-sequence .prs-note { max-width: 30em; font-size: 1.12em; line-height: 1.45; color: var(--prs-ink); text-wrap: pretty; }

.project-sequence .prs-full .prs-shot { --prs-crop: 16 / 9; }
.project-sequence.prs-bleed-1 .prs-full > .prs-shots { margin-left: calc(-1 * 0cqi); margin-right: calc(-1 * 0cqi); margin-left: calc(-1 * var(--prs-bleed, 0cqi)); margin-right: calc(-1 * var(--prs-bleed, 0cqi)); }
.project-sequence.prs-bleed-1 .prs-full .prs-caption { padding-left: 0cqi; padding-right: 0cqi; padding-left: var(--prs-bleed, 0cqi); padding-right: var(--prs-bleed, 0cqi); }
.project-sequence .prs-wide > .prs-shots { margin-left: 8.5cqi; margin-right: 8.5cqi; }
.project-sequence .prs-wide .prs-shot { --prs-crop: 3 / 2; }
.project-sequence .prs-pair .prs-shot { --row-item: 40%; --prs-crop: 1 / 1; }
.project-sequence .prs-trio .prs-shot { --row-item: 28%; --prs-crop: 4 / 5; }
.project-sequence .prs-offset > .prs-shots { --row-item: 38%; margin-left: 17cqi; }
.project-sequence .prs-offset .prs-shot { --prs-crop: 4 / 5; }
.project-sequence .prs-offset > .prs-note { --row-item: 28%; padding-bottom: 3.2em; }
.project-sequence .prs-offset > * { flex-grow: 0; }
.project-sequence .prs-spread:not(.prs-offset) > .prs-note { margin-top: 1.4em; margin-left: 8.5cqi; }

@container (max-width: 30rem) {
    .project-sequence .prs-offset > .prs-shots, .project-sequence .prs-offset > .prs-note, .project-sequence .prs-spread > .prs-shots, .project-sequence .prs-spread > .prs-note { --row-item: auto; }

    .project-sequence .prs-offset > .prs-shots, .project-sequence .prs-wide > .prs-shots { margin-left: 0; margin-right: 0; }
    .project-sequence .prs-spread:not(.prs-offset) > .prs-note, .project-sequence .prs-offset > .prs-note { margin: 1.2em 0 0; padding: 0; }
    .project-sequence .prs-pair > .prs-shots, .project-sequence .prs-trio > .prs-shots { --row-flow-narrow: row wrap; }
    .project-sequence .prs-trio .prs-shot { --row-item: 40%; }
    .project-sequence { --prs-space: 12cqi; }
}

.project-sequence .prs-shot[data-reveal="develop"][data-reveal-armed] { opacity: 1; transform: none; clip-path: none; }
.project-sequence .prs-shot[data-reveal="develop"][data-reveal-armed] > .prs-picture { clip-path: inset(100% 0 0 0); }
.project-sequence .prs-shot[data-reveal="develop"][data-reveal-shown] > .prs-picture {
    clip-path: inset(0 0 0 0);
    transition: clip-path 900ms cubic-bezier(.4, 0, .2, 1) calc(0ms + 0 * 0ms);
    transition: clip-path var(--reveal-duration, 900ms) var(--ease, cubic-bezier(.2, .7, .15, 1)) calc(var(--reveal-delay, 0ms) + var(--reveal-i, 0) * var(--reveal-stagger, 0ms));
}

.project-sequence.prs-parallax-1 .prs-picture img {
    animation: prs-drift linear both; animation-timeline: view(); animation-range: cover;
}
@keyframes prs-drift { from { transform: translateY(-6%) scale(1.14); } to { transform: translateY(6%) scale(1.14); } }

/* blocks/pull-quote.css */

.pull-quote {
    --pq-accent: var(--accent, #635bff);
    --pq-ink: var(--ink, #0a0a0a);
    --pq-muted: var(--muted, #6b6b6b);
    --pq-line: var(--line, #e3e3e3);
    --pq-paper: var(--paper, #fff);
    --pq-size: clamp(1.5rem, 1rem + 4cqi, 2.7rem);
    --pq-quote-ink: var(--pq-ink);
    --pq-pad: 0;
    --row-gap: max(1.6rem, min(4cqi, 3rem));
    --row-gap: clamp(1.6rem, 4cqi, 3rem);
    margin: 0;
    padding: 0;
    padding: var(--pq-pad);
    color: #222;
    color: var(--pq-ink);
    line-height: 1.25;
    border-radius: 1vh;
    border-radius: var(--radius, 1rem);
    transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease;
    container-type: inline-size;
}

.pull-quote > .pq-clip,
.pull-quote > .pq-portrait {
    --row-item: 19rem;
    align-self: center;
    overflow: hidden;
    border-radius: calc(1vh * .9);
    border-radius: calc(var(--radius, 1rem) * .9);
    background: color-mix(in srgb, var(--pq-ink) 6%, var(--pq-paper));
    border: 1px solid var(--pq-line);
    box-shadow: 0 1.6rem 3.6rem -1.6rem rgba(12, 12, 12, 0.36);
}

@supports (color: color-mix(in lch, red, blue)) {
.pull-quote > .pq-clip,
.pull-quote > .pq-portrait {
    box-shadow: 0 1.6rem 3.6rem -1.6rem color-mix(in srgb, var(--pq-ink) 36%, transparent);
}
}
.pull-quote > .pq-clip { aspect-ratio: 16 / 10; }
.pull-quote > .pq-portrait { aspect-ratio: 4 / 5; }
.pull-quote > .pq-clip video,
.pull-quote > .pq-portrait img,
.pull-quote > .pq-portrait picture,
.pull-quote > .pq-portrait video { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; margin: 0; }
.pull-quote > .pq-portrait.browser-frame,
.pull-quote > .pq-portrait.phone-frame,
.pull-quote > .pq-portrait.poster-frame { aspect-ratio: auto; background: none; border: 0; box-shadow: none; overflow: visible; }

.pull-quote > .pq-body { --row-item: 24rem; margin: 0; position: relative; }

.pull-quote .pq-label {
    margin: 0 0 max(1rem, min(2.4cqi, 1.5rem));
    margin: 0 0 clamp(1rem, 2.4cqi, 1.5rem);
    font: 600 .72rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 .72rem/1 var(--font-mono, ui-monospace, monospace);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pq-accent);
}

.pull-quote .pq-mark {
    display: none;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, 'Times New Roman', serif);
    color: var(--pq-accent);
    line-height: .5;
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}
.pull-quote.pq-mark-large .pq-mark {
    display: block;
    margin: 0 0 calc(var(--pq-size) * -.4) -.04em;
    font-size: calc(var(--pq-size) * 1.9);
    font-weight: 600;
}

.pull-quote .pq-quote {
    position: relative;
    margin: 0;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, 'Times New Roman', serif);
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.1;
    text-wrap: balance;
    font-size: var(--pq-size);
    color: var(--pq-quote-ink);
}
.pull-quote.pq-mark-hairline .pq-quote {
    border-left: .125rem solid var(--pq-accent);
    padding-left: max(1rem, min(2.4cqi, 1.6rem));
    padding-left: clamp(1rem, 2.4cqi, 1.6rem);
}

.pull-quote .pq-attr {
    margin: max(1.6rem, min(3.4cqi, 2.4rem)) 0 0;
    margin: clamp(1.6rem, 3.4cqi, 2.4rem) 0 0;
    padding-top: max(1rem, min(2cqi, 1.3rem));
    padding-top: clamp(1rem, 2cqi, 1.3rem);
    border-top: 1px solid var(--pq-line);
}
.pull-quote .pq-author {
    display: block;
    font: 600 clamp(.98rem, .9rem + .4cqi, 1.14rem)/1.2 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 clamp(.98rem, .9rem + .4cqi, 1.14rem)/1.2 var(--font-display, system-ui, sans-serif);
    letter-spacing: -.01em;
    color: var(--pq-ink);
}
.pull-quote .pq-role {
    display: block;
    margin-top: .32rem;
    font: 500 .8rem/1.35 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 .8rem/1.35 var(--font-mono, ui-monospace, monospace);
    letter-spacing: .02em;
    color: var(--pq-muted);
}

.pull-quote.pq-size-md { --pq-size: clamp(1.2rem, .9rem + 2.4cqi, 1.75rem); }
.pull-quote.pq-size-lg { --pq-size: clamp(1.5rem, 1rem + 4cqi, 2.7rem); }
.pull-quote.pq-size-xl { --pq-size: clamp(1.9rem, 1.1rem + 5.6cqi, 3.7rem); }

.pull-quote.pq-tone-ink { --pq-quote-ink: var(--pq-ink); }
.pull-quote.pq-tone-muted { --pq-quote-ink: var(--pq-muted); }
.pull-quote.pq-tone-accent { --pq-quote-ink: var(--pq-accent); }

.pull-quote.pq-media-end > .pq-clip,
.pull-quote.pq-media-end > .pq-portrait { order: 2; }

.pull-quote.pq-surface-plain { --pq-pad: 0; }
.pull-quote.pq-surface-card {
    --pq-pad: max(1.6rem, min(4.4cqi, 3.2rem));
    --pq-pad: clamp(1.6rem, 4.4cqi, 3.2rem);
    background: var(--pq-paper);
    border: 1px solid var(--pq-line);
    box-shadow: 0 2rem 4rem -2rem rgba(8, 8, 8, 0.24);
}

@supports (color: color-mix(in lch, red, blue)) {
.pull-quote.pq-surface-card {
    box-shadow: 0 2rem 4rem -2rem color-mix(in srgb, var(--pq-ink) 24%, transparent);
}
}
.pull-quote.pq-surface-card:hover {
    transform: translateY(-.3rem);
    box-shadow: 0 2.8rem 5.2rem -2rem rgba(11, 11, 11, 0.32);
}

@supports (color: color-mix(in lch, red, blue)) {
.pull-quote.pq-surface-card:hover {
    box-shadow: 0 2.8rem 5.2rem -2rem color-mix(in srgb, var(--pq-ink) 32%, transparent);
}
}
.pull-quote.pq-surface-tint {
    --pq-pad: max(1.6rem, min(4.4cqi, 3.2rem));
    --pq-pad: clamp(1.6rem, 4.4cqi, 3.2rem);
    background: color-mix(in srgb, var(--pq-accent) 7%, var(--pq-paper));
    border: 1px solid color-mix(in srgb, var(--pq-accent) 22%, var(--pq-line));
}
.pull-quote.pq-surface-tint .pq-attr { border-top-color: color-mix(in srgb, var(--pq-accent) 30%, var(--pq-line)); }

.pull-quote.pq-align-center > .pq-body { text-align: center; }
.pull-quote.pq-align-center.pq-mark-hairline .pq-quote { border-left: 0; padding-left: 0; }

/* blocks/radar-sweep.css */
:where([data-radar-canvas]) { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; display: block; }
:where(.radar-sweep, [data-radar]) { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
:where([data-radar]:not([data-radar="on"]))::before {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%;
    background:
        repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent calc(50% / 4 - 1px), #626262 calc(50% / 4 - 1px), #626262 calc(50% / 4));
    background:
        repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent calc(50% / var(--rs-rings, 4) - 1px), var(--rs-plate, var(--muted, #8a98ac)) calc(50% / var(--rs-rings, 4) - 1px), var(--rs-plate, var(--muted, #8a98ac)) calc(50% / var(--rs-rings, 4)));
    opacity: 0.28;
    opacity: var(--rs-alpha, 0.28);
    -webkit-mask: radial-gradient(circle at 50% 50%, #000 0, #000 49%, transparent 50%);
            mask: radial-gradient(circle at 50% 50%, #000 0, #000 49%, transparent 50%);
}

/* blocks/reel-spot.css */
.reel-spot {
    --_plate: var(--reel-plate, var(--surface, #111114));
    --_line: var(--reel-line, var(--line, rgba(255, 255, 255, 0.14)));
    --_ink: var(--reel-ink, var(--ink, #f2f2ee));
    --_hot: var(--reel-hot, var(--accent, #d7ff3f));
    --_mono: var(--reel-mono, var(--font-mono, ui-monospace, monospace));
    --_word: var(--reel-word-size, calc(5.6 * var(--pe-vw)));
    --_radius: var(--reel-radius, var(--r-md, calc(0.4 * var(--pe-vw))));
    position: relative; display: grid; grid-template-rows: auto 1fr auto; align-items: center; justify-items: center;
    grid-gap: var(--reel-gap, calc(1 * var(--pe-vw)));
    gap: var(--reel-gap, calc(1 * var(--pe-vw))); overflow: hidden; isolation: isolate; margin: 0;
    aspect-ratio: 4 / 3;
    aspect-ratio: var(--reel-aspect, 4 / 3); padding: var(--reel-pad, calc(2 * var(--pe-vw)));
    background: rgb(241, 241, 241);
    background: color-mix(in srgb, #222 4%, #fafafa);
    background: var(--_plate); border: 1px solid rgba(5, 5, 5, 0.14); border: 1px solid var(--_line); border-radius: var(--_radius);
    color: #222;
    color: var(--_ink);
}
.reel-spot-k, .reel-spot-n { z-index: 2; font-family: var(--_mono); font-size: var(--reel-label-size, calc(0.78 * var(--pe-vw)));
    letter-spacing: 0.08em; text-transform: uppercase; color: #626262; color: var(--reel-muted, var(--muted, #8b8b93)); line-height: 1.3; }
.reel-spot-k { grid-row: 1; justify-self: start; position: relative; }
.reel-spot-k::before { content: "◉ "; color: var(--_hot); }
.reel-spot-n { position: absolute; right: var(--reel-pad, calc(2 * var(--pe-vw))); bottom: var(--reel-pad, calc(2 * var(--pe-vw))); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.reel-spot-n::before { content: "FR "; }
.reel-spot-word { grid-row: 2; position: relative; z-index: 1; margin: 0; text-align: center; max-width: 100%; align-self: center;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--reel-display, var(--font-display, sans-serif)); font-weight: 800; font-weight: var(--reel-word-weight, 800);
    font-size: var(--_word); line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase;
    text-wrap: balance; word-wrap: anywhere; overflow-wrap: anywhere; }
.reel-spot-word.ascii-live { color: transparent; }
.reel-spot .ascii-canvas { display: block; }
.reel-spot-cap { grid-row: 3; position: relative; z-index: 2; justify-self: start; width: 100%; margin: 0;
    font-size: var(--reel-cap-size, calc(0.95 * var(--pe-vw))); color: #626262; color: var(--reel-muted, var(--muted, #8b8b93)); line-height: 1.35;
    padding-right: 6em; text-wrap: pretty; }
.reel-spot .imagesingle, .reel-spot .canvas-tile { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; z-index: 0; border-radius: 0; }
.reel-spot .imagesingle img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.reel-spot .canvas-tile canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100% !important; height: 100% !important; }
.reel-spot--media .reel-spot-word { text-shadow: 0 0.1em 1.2em rgba(0, 0, 0, 0.6); }
.reel-spot .flap-cell, .reel-word .flap-cell { display: inline-block; transition: transform .12s ease, color .12s ease; }
.reel-spot .flap-cell.flapping, .reel-word .flap-cell.flapping { color: var(--_hot); transform: rotateX(28deg); }
.reel-spot .flap-cell.is-space, .reel-word .flap-cell.is-space { width: 0.32em; }
.reel-input { font: inherit; font-family: var(--_mono); font-size: var(--reel-input-size, calc(1.15 * var(--pe-vw))); letter-spacing: 0.06em;
    text-transform: uppercase; color: #222; color: var(--reel-ink, var(--ink, #f2f2ee)); background: transparent; border: 0; outline: 0;
    border-bottom: 1px solid #222;
    border-bottom: 1px solid var(--reel-ink, var(--ink, #f2f2ee)); padding: 0.5em 0; width: 100%; max-width: 30ch; caret-color: var(--_hot); }
.reel-input::-moz-placeholder { color: #626262; color: var(--reel-muted, var(--muted, #8b8b93)); }
.reel-input::placeholder { color: #626262; color: var(--reel-muted, var(--muted, #8b8b93)); }
.reel-input:focus { border-bottom-color: var(--_hot); }
@media (max-width: 1024px) {
    .reel-spot { --_word: var(--reel-word-size-tablet, calc(8 * var(--pe-vw))); }
    .reel-spot-k, .reel-spot-n { font-size: var(--reel-label-size-tablet, calc(1.3 * var(--pe-vw))); }
    .reel-spot-cap { font-size: var(--reel-cap-size-tablet, calc(1.7 * var(--pe-vw))); }
    .reel-input { font-size: var(--reel-input-size-tablet, calc(2.2 * var(--pe-vw))); }
}
@media (max-width: 768px) {
    .reel-spot { --_word: var(--reel-word-size-phone, calc(13 * var(--pe-vw))); padding: var(--reel-pad-phone, calc(4 * var(--pe-vw))); }
    .reel-spot-k, .reel-spot-n { font-size: var(--reel-label-size-phone, calc(2.8 * var(--pe-vw))); }
    .reel-spot-n { right: var(--reel-pad-phone, calc(4 * var(--pe-vw))); bottom: var(--reel-pad-phone, calc(4 * var(--pe-vw))); }
    .reel-spot-cap { font-size: var(--reel-cap-size-phone, calc(3.6 * var(--pe-vw))); padding-right: 5em; }
    .reel-input { font-size: var(--reel-input-size-phone, calc(4.5 * var(--pe-vw))); max-width: none; }
}
html.respect-reduced-motion .reel-spot .flap-cell { transition: none; }

/* blocks/resource-meter.css */
:where(.resource-meter) {
    --rm-fill:  var(--accent, #f0a32e);
    --rm-track: color-mix(in srgb, var(--line, #e0d0b3) 70%, transparent);
    display: grid; grid-gap: .55cqi; gap: .55cqi; container-type: inline-size;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif); color: #222; color: var(--ink, #2a2118);
}
:where(.resource-meter .rm-head) { display: flex; align-items: baseline; justify-content: space-between; gap: 1cqi; }
:where(.resource-meter .rm-label) {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, inherit); font-weight: 600; font-size: 1.125rem; font-size: var(--text-md, 1.1em); letter-spacing: .01em;
}
:where(.resource-meter .rm-value) {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, monospace); font-size: 0.6875rem; font-size: var(--text-label, .8em); font-weight: 500; letter-spacing: .04em;
    color: rgb(240, 251, 255);
    color: color(display-p3 0.94504 0.9821 1);
    color: oklch(from #007b9a clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h);
    color: var(--accent-ink, var(--ink, #2a2118)); background: var(--rm-fill); border-radius: calc(1vh * 0.5); border-radius: var(--r-sm, .4em);
    padding: .18em .55em; min-width: 3.2em; text-align: center; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
:where(.resource-meter .rm-track) {
    position: relative; height: .7cqi; height: var(--rm-height, .7cqi); border-radius: 99em; overflow: hidden;
    background: var(--rm-track); box-shadow: inset 0 1px 0 rgba(0, 0, 0, .06);
}
:where(.resource-meter .rm-fill) {
    position: absolute; top: 0; right: auto; bottom: 0; left: 0; width: calc(0 * 1%); width: calc(var(--meter-pct, 0) * 1%); border-radius: inherit;
    background: linear-gradient(90deg, #066b84, var(--rm-fill));
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .35);
}

@supports (color: color-mix(in lch, red, blue)) {
:where(.resource-meter .rm-fill) {
    background: linear-gradient(90deg, color-mix(in srgb, var(--rm-fill) 82%, #222), var(--rm-fill));
    background: linear-gradient(90deg, color-mix(in srgb, var(--rm-fill) 82%, var(--ink, #000)), var(--rm-fill));
}
}
:where(.resource-meter .rm-note) { font-size: 0.75rem; font-size: var(--text-xs, .8em); color: #626262; color: var(--muted, #6b5a45); }

/* blocks/result-stats.css */

.result-stats {
    --rs-ink: var(--ink, #1c1b1a);
    --rs-muted: var(--muted, #6b655f);
    --rs-line: var(--line, #ddd6cc);
    --rs-well: var(--surface, #e5dfd5);
    --rs-accent: var(--accent, #7a2433);
    margin: 0; color: #222; color: var(--rs-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, 'Helvetica Neue', Arial, sans-serif); font-size: 1.125rem; font-size: var(--text-md, 1rem); line-height: 1.5;
}
.result-stats.rs-tone-dark {
    --rs-ink: var(--invert-fg, #efebe4); --rs-muted: var(--muted-dark, color-mix(in srgb, var(--invert-fg, #efebe4) 66%, transparent));
    --rs-line: color-mix(in srgb, var(--invert-fg, #efebe4) 20%, transparent); --rs-well: color-mix(in srgb, var(--invert-fg, #efebe4) 12%, transparent);
}
.result-stats :where(p, figure, figcaption) { margin: 0; }

.result-stats .rs-head { margin-bottom: 3cqi; }
.result-stats :where(.rs-eyebrow, .rs-bar-label, .rs-source) { font-size: 0.75rem; font-size: var(--text-xs, .78rem); font-weight: 560; letter-spacing: .12em; text-transform: uppercase; line-height: 1.35; }
.result-stats .rs-eyebrow { color: var(--rs-muted); }
.result-stats .rs-title { margin-top: .55em; max-width: 24ch; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 400; font-size: 2.8rem; font-size: var(--text-xl, 2.8rem); line-height: 1.04; letter-spacing: -.014em; text-wrap: balance; }
.result-stats .rs-lead { margin-top: 1em; max-width: 56ch; color: var(--rs-muted); text-wrap: pretty; }
.result-stats.rs-align-center .rs-head { text-align: center; }
.result-stats.rs-align-center :where(.rs-title, .rs-lead) { margin-left: auto; margin-right: auto; }

.result-stats .rs-list { --row-gap: 0; --row-item: 14em; border-top: 1px solid var(--rs-ink); }
.result-stats .rs-item { position: relative; padding: 2.6cqi 2.6cqi 2.6cqi 0; }
.result-stats.rs-arrange-row .rs-item + .rs-item { padding-left: 2.6cqi; border-left: 1px solid var(--rs-line); }
.result-stats .rs-figure {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, serif); font-weight: 400; font-size: 3rem; font-size: var(--text-xl, 3rem);
    line-height: 1; letter-spacing: -.02em; font-feature-settings: lining-nums tabular-nums; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.result-stats .rs-what { margin-top: .8em; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.result-stats .rs-context { margin-top: .45em; max-width: 30ch; color: var(--rs-muted); text-wrap: pretty; }

.result-stats .rs-bars { margin-top: 1.5em; }
.result-stats .rs-bar { margin-top: .75em; }
.result-stats .rs-bar:not(:has(.rs-bar-label)) { display: none; }
.result-stats .rs-bar-label { display: block; color: var(--rs-muted); font-feature-settings: "lnum"; font-variant-numeric: lining-nums; }
.result-stats .rs-bar-after .rs-bar-label { color: var(--rs-ink); }
.result-stats .rs-track { position: relative; display: block; margin-top: .45em; height: calc(.4 * 1em); height: calc(var(--rs-bar-weight, .4) * 1em); background: color-mix(in srgb, var(--rs-well) 55%, transparent); }
.result-stats .rs-fill { position: absolute; top: 0; right: auto; bottom: 0; left: 0; display: block; background: var(--rs-muted); opacity: .45; }
.result-stats .rs-bar-before .rs-fill { width: calc(0 * 1%); width: calc(var(--rs-before, 0) * 1%); }
.result-stats .rs-bar-after .rs-fill { width: calc(0 * 1%); width: calc(var(--rs-after, 0) * 1%); background: var(--rs-accent); opacity: 1; }
.result-stats:not(.rs-bars-1) .rs-bars { display: none; }

.result-stats .rs-source { margin-top: 1.4em; padding-top: .8em; color: var(--rs-muted); background: linear-gradient(var(--rs-line), var(--rs-line)) no-repeat top left / 2.4em .07em; }

.result-stats.rs-arrange-column .rs-list { --row-flow: column nowrap; }
.result-stats.rs-arrange-column .rs-item { padding: 2.6cqi 0; border-bottom: 1px solid var(--rs-line); }

@container (max-width: 40rem) {
    .result-stats .rs-list { --row-flow: column nowrap; --row-item: auto; }
    .result-stats.rs-arrange-row .rs-item + .rs-item { padding-left: 0; border-left: 0; }
    .result-stats .rs-item { padding: 6cqi 0; border-bottom: 1px solid var(--rs-line); }
    .result-stats :where(.rs-figure, .rs-title) { font-size: min(2.4rem, 11cqi); font-size: min(var(--text-xl, 2.4rem), 11cqi); }
}

.result-stats.rs-figure-poster .rs-figure {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-poster, var(--font-display, Georgia, serif)); font-stretch: 100%; font-stretch: var(--poster-stretch, 100%); font-weight: 800; font-weight: var(--poster-weight, 800);
    font-size: min(6rem, 13cqi);
    font-size: min(var(--text-display, 6rem), 13cqi); line-height: .86; letter-spacing: -.01em; text-transform: uppercase;
}
.result-stats.rs-figure-poster .rs-what { margin-top: 1em; font-size: 1.25rem; font-size: var(--text-lg, 1.25rem); line-height: 1.2; }
.result-stats.rs-arrange-grid .rs-list { --row-item: 40%; }
.result-stats.rs-arrange-grid .rs-item { padding: 3.4cqi 3.4cqi 3.4cqi 0; border-bottom: 1px solid var(--rs-line); }
.result-stats.rs-arrange-grid .rs-item:nth-child(even) { padding-left: 3.4cqi; border-left: 1px solid var(--rs-line); }

.result-stats .rs-was {
    display: inline-block; margin-bottom: .2em; color: var(--rs-muted); -webkit-text-decoration: none; text-decoration: none;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-poster, var(--font-display, Georgia, serif)); font-stretch: 100%; font-stretch: var(--poster-stretch, 100%); font-weight: 700; font-weight: var(--poster-weight, 700);
    font-size: calc(2.4rem * .6);
    font-size: calc(var(--text-xl, 2.4rem) * .6); line-height: 1; font-feature-settings: "lnum"; font-variant-numeric: lining-nums;
    background: linear-gradient(to top right, transparent calc(50% - .05em), var(--rs-accent) calc(50% - .05em), var(--rs-accent) calc(50% + .05em), transparent calc(50% + .05em)) no-repeat 0 55% / 100% 100%;
    background: linear-gradient(to top right, transparent calc(50% - .05em), var(--rs-accent) calc(50% - .05em), var(--rs-accent) calc(50% + .05em), transparent calc(50% + .05em)) no-repeat 0 55% / var(--rs-strike, 100%) 100%;
}
.result-stats.rs-tone-dark .rs-was { background-image: linear-gradient(to top right, transparent calc(50% - .05em), #d9f24a calc(50% - .05em), #d9f24a calc(50% + .05em), transparent calc(50% + .05em)); background-image: linear-gradient(to top right, transparent calc(50% - .05em), var(--mark, var(--accent-2, #d9f24a)) calc(50% - .05em), var(--mark, var(--accent-2, #d9f24a)) calc(50% + .05em), transparent calc(50% + .05em)); }
.result-stats .rs-item:has(.rs-was) .rs-figure { display: block; width: -moz-fit-content; width: fit-content; padding-left: .04em; padding-right: .04em; background: linear-gradient(#d9f24a, #d9f24a) no-repeat 0 70% / 100% 44%; background: linear-gradient(var(--mark, var(--accent-2, #d9f24a)), var(--mark, var(--accent-2, #d9f24a))) no-repeat 0 70% / var(--rs-hl, 100%) 44%; }
.result-stats.rs-tone-dark .rs-item:has(.rs-was) .rs-figure { color: #d9f24a; color: var(--mark, var(--accent-2, #d9f24a)); background: none; }
html:not(.respect-reduced-motion) .result-stats .rs-was { animation: rs-strike linear both; animation-timeline: view(); animation-range: entry 60% cover 40%; }
html:not(.respect-reduced-motion) .result-stats .rs-item:has(.rs-was) .rs-figure { animation: rs-mark linear both; animation-timeline: view(); animation-range: entry 90% cover 45%; }
html:not(.respect-reduced-motion) .result-stats.rs-figure-poster .rs-figure { animation: rs-rise linear both, rs-mark linear both; animation-timeline: view(), view(); animation-range: entry 0% entry 100%, entry 90% cover 45%; }
@keyframes rs-strike { from { --rs-strike: 0%; } to { --rs-strike: 100%; } }
@keyframes rs-mark { from { --rs-hl: 0%; } to { --rs-hl: 100%; } }
@keyframes rs-rise { from { opacity: 0; translate: 0 .3em; } to { opacity: 1; translate: 0 0; } }
@property --rs-strike { syntax: '<percentage>'; inherits: true; initial-value: 100%; }
@property --rs-hl { syntax: '<percentage>'; inherits: true; initial-value: 100%; }
@container (max-width: 40rem) {
    .result-stats.rs-arrange-grid .rs-item, .result-stats.rs-arrange-grid .rs-item:nth-child(even) { padding: 7cqi 0; border-left: 0; }
    .result-stats.rs-figure-poster .rs-figure { font-size: 24cqi; }
}

/* blocks/reveal.css */

[data-reveal-armed] { opacity: 0; }
[data-reveal-armed]:not([data-reveal-shown]) { will-change: opacity, transform; }

[data-reveal-armed][data-reveal="up"]    { transform: translate3d(0, .875rem, 0); transform: translate3d(0, var(--reveal-distance, .875rem), 0); }
[data-reveal-armed][data-reveal="down"]  { transform: translate3d(0, calc(.875rem * -1), 0); transform: translate3d(0, calc(var(--reveal-distance, .875rem) * -1), 0); }
[data-reveal-armed][data-reveal="left"]  { transform: translate3d(1.125rem, 0, 0); transform: translate3d(var(--reveal-distance, 1.125rem), 0, 0); }
[data-reveal-armed][data-reveal="right"] { transform: translate3d(calc(1.125rem * -1), 0, 0); transform: translate3d(calc(var(--reveal-distance, 1.125rem) * -1), 0, 0); }
[data-reveal-armed][data-reveal="scale"] { transform: scale(.96); transform: scale(var(--reveal-scale, .96)); transform-origin: 50% 50%; transform-origin: var(--reveal-origin, 50% 50%); }
[data-reveal-armed][data-reveal="blur"]  { filter: blur(.375rem); filter: blur(var(--reveal-blur, .375rem)); }
[data-reveal-armed][data-reveal="rise-blur"] {
    transform: translate3d(0, .875rem, 0);
    transform: translate3d(0, var(--reveal-distance, .875rem), 0);
    filter: blur(.375rem);
    filter: blur(var(--reveal-blur, .375rem));
}
[data-reveal-armed][data-reveal="wipe-up"]   { clip-path: inset(0 0 100% 0); opacity: 1; }
[data-reveal-armed][data-reveal="wipe-down"] { clip-path: inset(100% 0 0 0); opacity: 1; }
[data-reveal-armed][data-reveal="wipe-left"] { clip-path: inset(0 100% 0 0); opacity: 1; }
[data-reveal-armed][data-reveal="wipe-right"]{ clip-path: inset(0 0 0 100%); opacity: 1; }
[data-reveal-armed][data-reveal="mask-up"] {
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, .875rem, 0);
    transform: translate3d(0, var(--reveal-distance, .875rem), 0);
}

[data-reveal-armed][data-reveal-shown] {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
    filter: none;
    transition-property: opacity, transform, clip-path, filter;
    transition-duration: 620ms;
    transition-duration: var(--reveal-duration, 620ms);
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-timing-function: var(--reveal-ease, var(--ease, cubic-bezier(.22, .61, .36, 1)));
    transition-delay: calc(0ms + 0 * 0ms);
    transition-delay: calc(var(--reveal-delay, 0ms) + var(--reveal-i, 0) * var(--reveal-stagger, 0ms));
}

/* blocks/review-list.css */

.review-list {
    --rv-ink: var(--ink, #1c1917);
    --rv-muted: var(--muted, #6b6158);
    --rv-line: var(--line, #ddd3c4);
    --rv-paper: var(--paper, #fffdf8);
    --rv-accent: var(--accent, #bf3b25);
    --rv-gap: 1.2em;
    --rv-star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M11 .8l3 6.3 6.9.9-5 4.8 1.2 6.8L11 16.3l-6.1 3.3 1.2-6.8-5-4.8 6.9-.9z'/%3E%3C/svg%3E");
    width: 100%; margin: 0;
    color: #222;
    color: var(--rv-ink); font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-text, "Helvetica Neue", Arial, sans-serif);
}
.review-list .rv-wrap { --row-gap: 3em; align-items: flex-start; }

.review-list .rv-summary { flex: 0 0 27%; min-width: 14em; }
.review-list .rv-summary > * { margin: 0; }
.review-list .rv-eyebrow { color: var(--rv-muted); font-size: 0.6875rem; font-size: var(--text-label, .74em); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; }
.review-list .rv-title { margin-top: .3em; margin-left: -.03em; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 400; font-size: 2.4em; font-size: var(--text-xl, 2.4em); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
.review-list.rv-layout-split .rv-title { font-size: 1.5em; font-size: var(--text-lg, 1.5em); line-height: 1.1; }
.review-list .rv-score { margin-top: .5em; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-size: 2.4em; font-size: var(--text-xl, 2.4em); line-height: 1; letter-spacing: -.02em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.review-list .rv-count { margin-top: .6em; color: var(--rv-muted); line-height: 1.4; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

.review-list .rv-stars {
    position: relative; display: inline-block; width: 5.6em; height: 1em; vertical-align: middle;
    background: rgba(5, 5, 5, 0.15); -webkit-mask: var(--rv-star-mask) 0 0 / 1.12em 1em repeat-x; mask: var(--rv-star-mask) 0 0 / 1.12em 1em repeat-x;
}

@supports (color: color-mix(in lch, red, blue)) {
.review-list .rv-stars {
    background: color-mix(in srgb, var(--rv-ink) 15%, transparent);
}
}
.review-list .rv-stars-lg { margin-top: .7em; width: 8.4em; height: 1.5em; -webkit-mask-size: 1.68em 1.5em; mask-size: 1.68em 1.5em; }
.review-list .rv-stars-fill { position: absolute; top: 0; right: auto; bottom: 0; left: 0; width: calc(5 / 5 * 100%); width: calc(var(--stars, 5) / 5 * 100%); background: var(--rv-accent); }

.review-list .rv-bars { list-style: none; margin: 1.5em 0 0; padding: 1.2em 0 0; border-top: 1px solid var(--rv-line); }
.review-list .rv-bar { position: relative; padding: .32em 3.2em .32em 4.4em; line-height: 1.2; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.review-list .rv-bar-label { position: absolute; left: 0; top: .32em; color: var(--rv-muted); font-size: 0.6875rem; font-size: var(--text-label, .78em); font-weight: 600; white-space: nowrap; }
.review-list .rv-bar-track { display: block; height: .5em; margin-top: .3em; overflow: hidden; border-radius: 99em; background: rgba(3, 3, 3, 0.09); }

@supports (color: color-mix(in lch, red, blue)) {
.review-list .rv-bar-track { background: color-mix(in srgb, var(--rv-ink) 9%, transparent); }
}
.review-list .rv-bar-fill { display: block; width: calc(0 * 1%); width: calc(var(--pct, 0) * 1%); height: 100%; border-radius: inherit; background: var(--rv-ink); }
.review-list .rv-bar-pct { position: absolute; right: 0; top: .32em; font-size: 0.6875rem; font-size: var(--text-label, .78em); font-weight: 600; }

.review-list .rv-items { --row-gap: var(--rv-gap); --row-flow-narrow: row wrap; flex: 1 1 60%; list-style: none; margin: 0; padding: 0; }
.review-list .rv-card {
    flex: 0 0 calc(50% - var(--rv-gap) / 2);
    padding: 1.6em 1.6em 1.4em; border-radius: calc(1 * 1em); border-radius: calc(var(--rv-radius, 1) * 1em);
    background: var(--rv-paper); box-shadow: 0 0 0 1px rgba(2, 2, 2, 0.05);
}

@supports (color: color-mix(in lch, red, blue)) {
.review-list .rv-card { box-shadow: 0 0 0 1px color-mix(in srgb, var(--rv-ink) 5%, transparent);
}
}
.review-list.rv-tone-paper .rv-card { background: #f9f9f9; background: var(--page-bg, #f4ecdf); }
.review-list .rv-card > * { margin: 0; }
.review-list .rv-card-title { margin-top: .9em; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 400; font-size: 1.3em; font-size: var(--text-lg, 1.3em); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.review-list .rv-card-body { margin-top: .6em; line-height: 1.55; text-wrap: pretty; }
.review-list .rv-meta { margin-top: 1.3em; padding-top: 1em; border-top: 1px solid var(--rv-line); }
.review-list .rv-meta > * { margin: 0; }
.review-list .rv-name { display: inline; font-weight: 700; }
.review-list .rv-place { display: inline; margin-left: .45em; color: var(--rv-muted); }
.review-list .rv-product { margin-top: .25em; color: var(--rv-muted); font-size: 0.6875rem; font-size: var(--text-label, .78em); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.review-list .rv-verified { margin-top: .5em; color: var(--rv-muted); font-size: 0.6875rem; font-size: var(--text-label, .78em); line-height: 1.3; }
.review-list .rv-verified-icon { margin-right: .35em; color: var(--rv-ink); }
.review-list .rv-date { margin-left: .6em; padding-left: .6em; border-left: 1px solid var(--rv-line); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

.review-list.rv-layout-stacked .rv-summary { flex-basis: 100%; }
.review-list.rv-layout-stacked .rv-bars { max-width: 26em; }
.review-list.rv-layout-stacked .rv-card { flex-basis: calc((100% - 2 * var(--rv-gap)) / 3); }
.review-list.rv-align-center .rv-summary { text-align: center; }

@container (max-width: 58em) {
    .review-list .rv-wrap { --row-flow: column nowrap; --row-gap: 2em; }
    .review-list .rv-summary, .review-list .rv-items { flex-basis: auto; width: 100%; }
    .review-list.rv-layout-stacked .rv-card { flex-basis: calc(50% - var(--rv-gap) / 2); }
}
@container (max-width: 36em) {
    .review-list .rv-card, .review-list.rv-layout-stacked .rv-card { flex-basis: 100%; }
}

/* blocks/ring.css */
.ring {
    --ring-ac: var(--accent, #635bff);
    --ring-tint: var(--ink, #0a2540);
    --ring-c1: var(--ring-ac);
    --ring-c2: color-mix(in oklab, var(--ring-ac) 78%, var(--ring-tint));
    --ring-c3: color-mix(in oklab, var(--ring-ac) 54%, var(--ring-tint));
    --ring-c4: color-mix(in oklab, var(--ring-ac) 33%, var(--ring-tint));
    --ring-c5: color-mix(in oklab, var(--ring-ac) 17%, var(--ring-tint));
    --ring-size: max(8rem, min(26cqi, 11rem));
    --ring-size: clamp(8rem, 26cqi, 11rem);
    --ring-hole: 56%;
    position: relative; width: -moz-max-content; width: max-content; display: grid; align-items: center; justify-items: center; place-items: center;
}
.ring-disc {
    width: var(--ring-size); aspect-ratio: 1; border-radius: 50%; grid-area: 1 / 1;
    background: conic-gradient(from -90deg, var(--ring-stops));
            -webkit-mask: radial-gradient(farthest-side, transparent var(--ring-hole), #000 calc(var(--ring-hole) + 1%));
                    mask: radial-gradient(farthest-side, transparent var(--ring-hole), #000 calc(var(--ring-hole) + 1%));
}
.ring-hole { grid-area: 1 / 1; display: grid; align-content: center; justify-content: center; place-content: center; text-align: center; z-index: 1; }
.ring-hole-val {
    display: block; font: 600 max(1.6rem, min(6cqi, 2.2rem))/1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 max(1.6rem, min(6cqi, 2.2rem))/1 var(--font-display, system-ui); font: 600 max(1.6rem, min(6cqi, 2.2rem))/1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 clamp(1.6rem, 6cqi, 2.2rem)/1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 clamp(1.6rem, 6cqi, 2.2rem)/1 var(--font-display, system-ui);
    letter-spacing: -.03em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: #222; color: var(--ink, #0a2540);
}
.ring-hole-lab {
    display: block; margin-top: .3rem; max-width: 7em;
    font: 400 max(.68rem, min(1.6cqi, .8rem))/1.25 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 max(.68rem, min(1.6cqi, .8rem))/1.25 var(--font-display, system-ui);
    font: 400 max(.68rem, min(1.6cqi, .8rem))/1.25 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 clamp(.68rem, 1.6cqi, .8rem)/1.25 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 clamp(.68rem, 1.6cqi, .8rem)/1.25 var(--font-display, system-ui); color: #626262; color: var(--muted, #425466);
}
.ring-pct { font-size: .62em; font-weight: 600; opacity: .7; margin-left: .06em; }

/* blocks/role-breakdown.css */

.role-breakdown {
    --rb-ac: var(--accent, #635bff);
    --rb-ink: var(--ink, #0a2540);
    --rb-muted: var(--muted, #6b6b6b);
    --rb-line: var(--line, #e3e8ee);
    --rb-paper: var(--paper, #fff);
    --rb-c1: var(--rb-ac);
    --rb-c2: color-mix(in oklab, var(--rb-ac) 76%, var(--rb-ink));
    --rb-c3: color-mix(in oklab, var(--rb-ac) 52%, var(--rb-ink));
    --rb-c4: color-mix(in oklab, var(--rb-ac) 33%, var(--rb-ink));
    --rb-c5: color-mix(in oklab, var(--rb-ac) 18%, var(--rb-ink));
    --rb-c6: color-mix(in oklab, var(--rb-ac) 9%, var(--rb-ink));
    --rb-track: color-mix(in srgb, var(--rb-muted) 12%, transparent);
    --rb-hair: color-mix(in srgb, var(--rb-line) 65%, transparent);
    --rb-bar-h: calc(var(--rb-thickness, 1.1) * .55em);
    --rb-radius: var(--r-pill, 62.4375em);
    width: 100%; margin: 0;
    color: #222;
    color: var(--rb-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, var(--font-display, system-ui, sans-serif));
}

.role-breakdown.rb-ramp-mono {
    --rb-c1: var(--rb-ink);
    --rb-c2: color-mix(in oklab, var(--rb-ink) 80%, var(--rb-muted));
    --rb-c3: color-mix(in oklab, var(--rb-ink) 60%, var(--rb-muted));
    --rb-c4: color-mix(in oklab, var(--rb-ink) 42%, var(--rb-muted));
    --rb-c5: color-mix(in oklab, var(--rb-ink) 26%, var(--rb-muted));
    --rb-c6: color-mix(in oklab, var(--rb-ink) 14%, var(--rb-muted));
}

.role-breakdown .rb-eyebrow {
    margin: 0 0 max(1.1em, min(3cqi, 1.7em));
    margin: 0 0 clamp(1.1em, 3cqi, 1.7em);
    color: var(--rb-ac);
    font: 600 .72em/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 .72em/1 var(--font-mono, var(--font-display, ui-monospace, monospace));
    letter-spacing: .15em; text-transform: uppercase;
}
.role-breakdown.rb-align-center .rb-eyebrow { text-align: center; }

.role-breakdown .rb-rows {
    --row-flow: column nowrap; --row-item: auto;
    --row-gap: max(1.15em, min(3.2cqi, 1.6em));
    --row-gap: clamp(1.15em, 3.2cqi, 1.6em);
    list-style: none; padding: 0; margin: 0;
}

.role-breakdown .rb-row:nth-child(1) { --rb-c: var(--rb-c1); }
.role-breakdown .rb-row:nth-child(2) { --rb-c: var(--rb-c2); }
.role-breakdown .rb-row:nth-child(3) { --rb-c: var(--rb-c3); }
.role-breakdown .rb-row:nth-child(4) { --rb-c: var(--rb-c4); }
.role-breakdown .rb-row:nth-child(5) { --rb-c: var(--rb-c5); }
.role-breakdown .rb-row:nth-child(6) { --rb-c: var(--rb-c6); }

.role-breakdown .rb-row {
    --row-flow: row wrap; --row-item: auto;
    --row-gap: max(.4em, min(1.4cqi, .6em));
    --row-gap: clamp(.4em, 1.4cqi, .6em);
    align-items: baseline; margin: 0;
}
.role-breakdown .rb-label {
    order: 1; flex: 0 1 auto;
    color: var(--rb-ink); font-weight: 500; line-height: 1.3;
    font-size: max(.92em, min(2.2cqi, 1.02em));
    font-size: clamp(.92em, 2.2cqi, 1.02em); letter-spacing: -.005em;
}
.role-breakdown .rb-val {
    order: 2; flex: 0 0 auto; margin-left: auto; padding-left: .75em;
    color: var(--rb-c, var(--rb-c1));
    font: 500 max(1.4em, min(3.6cqi, 1.9em))/1 'Open Sans', Arial, Helvetica, sans-serif;
    font: 500 max(1.4em, min(3.6cqi, 1.9em))/1 var(--font-display, var(--font-text, system-ui, sans-serif));
    font: 500 max(1.4em, min(3.6cqi, 1.9em))/1 'Open Sans', Arial, Helvetica, sans-serif;
    font: 500 clamp(1.4em, 3.6cqi, 1.9em)/1 'Open Sans', Arial, Helvetica, sans-serif;
    font: 500 clamp(1.4em, 3.6cqi, 1.9em)/1 var(--font-display, var(--font-text, system-ui, sans-serif));
    letter-spacing: -.02em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.role-breakdown .rb-row:nth-child(1) .rb-label { font-weight: 600; color: var(--rb-ink); }

.role-breakdown .rb-track {
    order: 3; flex: 0 0 100%; position: relative; display: block;
    height: var(--rb-bar-h); margin: 0; overflow: hidden;
    border-radius: var(--rb-radius);
    background: var(--rb-track);
    box-shadow: inset 0 0 0 1px var(--rb-hair);
}
.role-breakdown .rb-fill {
    display: block; position: absolute; left: 0; top: 0; bottom: 0;
    width: calc(0 * 1%);
    width: calc(var(--pct, 0) * 1%); min-width: calc(var(--rb-bar-h));
    border-radius: var(--rb-radius);
    background: linear-gradient(180deg, color-mix(in srgb, var(--rb-paper) 16%, var(--rb-c, var(--rb-c1))), var(--rb-c, var(--rb-c1)));
    transition: width .55s cubic-bezier(.2, .7, .2, 1);
}

.role-breakdown:not(.rb-pct-1) .rb-val { display: none; }

.role-breakdown .rb-ring { margin: 0 auto max(1.2em, min(3.4cqi, 1.9em)) 0; margin: 0 auto clamp(1.2em, 3.4cqi, 1.9em) 0; }
.role-breakdown:not(.rb-variant-donut) .rb-ring { display: none; }
.role-breakdown.rb-align-center .rb-ring { margin-left: auto; margin-right: auto; }
.role-breakdown.rb-variant-donut .rb-rows { --row-gap: max(.55em, min(1.8cqi, .85em)); --row-gap: clamp(.55em, 1.8cqi, .85em); max-width: min(100%, 23em); }
.role-breakdown.rb-align-center.rb-variant-donut .rb-rows { margin-left: auto; margin-right: auto; }
.role-breakdown.rb-variant-donut .rb-row {
    --row-flow: row nowrap; --row-gap: max(.5em, min(1.6cqi, .75em)); --row-gap: clamp(.5em, 1.6cqi, .75em); align-items: center;
}
.role-breakdown.rb-variant-donut .rb-fill { display: none; }
.role-breakdown.rb-variant-donut .rb-track {
    order: 0; flex: 0 0 auto; width: .7em; height: .7em; min-width: 0;
    border-radius: calc(var(--rb-bar-h) * .35);
    background: var(--rb-c, var(--rb-c1)); box-shadow: none;
}
.role-breakdown.rb-variant-donut .rb-label {
    order: 1; flex: 0 1 auto;
    font-size: max(.86em, min(2cqi, .96em));
    font-size: clamp(.86em, 2cqi, .96em); font-weight: 500; color: var(--rb-ink);
}
.role-breakdown.rb-variant-donut .rb-row:nth-child(1) .rb-label { font-weight: 500; }
.role-breakdown.rb-variant-donut .rb-val {
    order: 2; margin-left: auto; padding-left: .5em;
    font: 600 max(.82em, min(1.9cqi, .92em))/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 max(.82em, min(1.9cqi, .92em))/1 var(--font-mono, var(--font-display, ui-monospace, monospace));
    font: 600 max(.82em, min(1.9cqi, .92em))/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 clamp(.82em, 1.9cqi, .92em)/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 clamp(.82em, 1.9cqi, .92em)/1 var(--font-mono, var(--font-display, ui-monospace, monospace));
    letter-spacing: 0; color: var(--rb-muted);
}

.role-breakdown.rb-variant-columns .rb-rows {
    --row-flow: row nowrap; --row-item: 0; --row-gap: max(.7em, min(2.4cqi, 1.4em)); --row-gap: clamp(.7em, 2.4cqi, 1.4em);
    align-items: flex-end; height: max(9em, min(24cqi, 12em)); height: clamp(9em, 24cqi, 12em);
}
.role-breakdown.rb-variant-columns .rb-row {
    --row-flow: column nowrap; --row-item: auto; align-items: center; height: 100%; text-align: center;
}
.role-breakdown.rb-variant-columns .rb-val {
    order: 1; margin: 0 0 .55em; padding: 0;
    font-size: max(1em, min(2.8cqi, 1.35em));
    font-size: clamp(1em, 2.8cqi, 1.35em);
}
.role-breakdown.rb-variant-columns .rb-track {
    order: 2; flex: 1 1 auto; width: 100%; max-width: calc(1.1 * 3em); max-width: calc(var(--rb-thickness, 1.1) * 3em);
    height: auto; min-width: 0; border-radius: .45em .45em 0 0;
}
.role-breakdown.rb-variant-columns .rb-fill {
    top: auto; bottom: 0; left: 0; right: 0; width: auto;
    height: calc(0 * 1%);
    height: calc(var(--pct, 0) * 1%); min-width: 0; min-height: .5em;
    border-radius: .45em .45em 0 0;
    background: linear-gradient(0deg, var(--rb-c, var(--rb-c1)), color-mix(in srgb, var(--rb-paper) 16%, var(--rb-c, var(--rb-c1))));
    transition: height .55s cubic-bezier(.2, .7, .2, 1);
}
.role-breakdown.rb-variant-columns .rb-label {
    order: 3; flex: 0 0 auto; margin-top: .6em;
    color: var(--rb-muted); font-size: max(.78em, min(1.9cqi, .9em)); font-size: clamp(.78em, 1.9cqi, .9em); font-weight: 500;
}
.role-breakdown.rb-variant-columns .rb-row:nth-child(1) .rb-label { color: var(--rb-muted); }

@container (max-width: 30em) {
    .role-breakdown.rb-variant-bar .rb-row { --row-flow: row wrap; }
    .role-breakdown.rb-variant-bar .rb-val { font-size: max(1.3em, min(8cqi, 1.6em)); font-size: clamp(1.3em, 8cqi, 1.6em); }
}
@container (max-width: 26em) {
    .role-breakdown.rb-variant-columns .rb-rows { --row-flow: column nowrap; --row-item: auto; height: auto; align-items: stretch; }
    .role-breakdown.rb-variant-columns .rb-row { --row-flow: row wrap; align-items: baseline; height: auto; text-align: left; }
    .role-breakdown.rb-variant-columns .rb-val { order: 2; margin: 0 0 0 auto; padding-left: .75em; font-size: max(1.3em, min(8cqi, 1.6em)); font-size: clamp(1.3em, 8cqi, 1.6em); }
    .role-breakdown.rb-variant-columns .rb-label { order: 1; margin: 0; color: var(--rb-ink); font-weight: 500; }
    .role-breakdown.rb-variant-columns .rb-track { order: 3; flex: 0 0 100%; width: auto; max-width: none; height: var(--rb-bar-h); border-radius: var(--rb-radius); }
    .role-breakdown.rb-variant-columns .rb-fill { top: 0; bottom: 0; left: 0; right: auto; width: calc(0 * 1%); width: calc(var(--pct, 0) * 1%); height: auto; min-height: 0; border-radius: var(--rb-radius); }
}

/* blocks/rsvp-card.css */

:where(.rsvp-card) {
    --rc-ink: var(--ink, #0a0a0a);
    --rc-muted: var(--muted, #6b6b6b);
    --rc-line: var(--line, #e3e3e3);
    --rc-paper: var(--paper, #fff);
    --rc-surface: var(--surface, color-mix(in srgb, var(--ink, #0a0a0a) 5%, var(--paper, #fff)));
    --rc-accent: var(--accent, #635bff);
    --rc-on-accent: var(--on-accent, #fff);
    --rc-radius: 1;
    position: relative;
    width: 100%; margin: 0;
    padding: 2.4em 2.4em 2.2em;
    color: #222;
    color: var(--rc-ink);
    background: #fafafa;
    background: var(--rc-paper);
    border-radius: calc(1 * 1em);
    border-radius: calc(var(--rc-radius, 1) * 1em);
    box-shadow: 0 0 0 1px rgba(5, 5, 5, 0.14);
    box-shadow: 0 0 0 1px var(--rc-line);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif);
}
:where(.rsvp-card.rc-shadow-soft) {
    box-shadow: 0 0 0 1px var(--rc-line),
                0 1px .125rem rgba(2, 2, 2, 0.06),
                0 1.2em 2.6em -1em rgba(7, 7, 7, 0.22);
}

@supports (color: color-mix(in lch, red, blue)) {
:where(.rsvp-card.rc-shadow-soft) {
    box-shadow: 0 0 0 1px var(--rc-line),
                0 1px .125rem color-mix(in srgb, var(--rc-ink) 6%, transparent),
                0 1.2em 2.6em -1em color-mix(in srgb, var(--rc-ink) 22%, transparent);
}
}
:where(.rsvp-card.rc-shadow-deep) {
    box-shadow: 0 0 0 1px var(--rc-line),
                0 1px .125rem rgba(3, 3, 3, 0.08),
                0 2.4em 4.6em -1.4em rgba(12, 12, 12, 0.36);
}

@supports (color: color-mix(in lch, red, blue)) {
:where(.rsvp-card.rc-shadow-deep) {
    box-shadow: 0 0 0 1px var(--rc-line),
                0 1px .125rem color-mix(in srgb, var(--rc-ink) 8%, transparent),
                0 2.4em 4.6em -1.4em color-mix(in srgb, var(--rc-ink) 36%, transparent);
}
}

:where(.rsvp-card .rc-head) { margin-bottom: 1.8em; }
:where(.rsvp-card .rc-title) {
    margin: 0;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, serif); font-weight: 400;
    font-size: 2.1em; line-height: 1.02; letter-spacing: -.015em;
}
:where(.rsvp-card .rc-deadline) {
    margin: .9em 0 0;
    color: var(--rc-muted);
    font-size: .78em; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3;
}

:where(.rsvp-card .rc-hp) { position: absolute; left: calc(-200 * var(--pe-vw)); top: 0; width: .1em; height: .1em; overflow: hidden; }

:where(.rsvp-card .rc-fields) { --row-gap: 1.2em; --row-item: 12em; margin-bottom: 1.2em; }
:where(.rsvp-card .rc-field) { display: block; }
:where(.rsvp-card .rc-field-wide) { flex-basis: 100%; }
:where(.rsvp-card .rc-label) {
    display: block; margin-bottom: .55em;
    color: var(--rc-muted);
    font-size: .78em; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2;
}
:where(.rsvp-card .rc-input) {
    display: block; width: 100%;
    padding: .85em 1em;
    font: inherit; font-size: 1em; line-height: 1.3;
    color: var(--rc-ink);
    background: var(--rc-surface);
    border: 1px solid transparent;
    border-radius: calc(1 * .4em);
    border-radius: calc(var(--rc-radius, 1) * .4em);
    box-shadow: inset 0 1px 0 rgba(2, 2, 2, 0.05);
    outline: none;
    transition: border-color .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s cubic-bezier(.4, 0, .2, 1), background .2s cubic-bezier(.4, 0, .2, 1);
    transition: border-color .2s var(--ease, ease), box-shadow .2s var(--ease, ease), background .2s var(--ease, ease);
}

@supports (color: color-mix(in lch, red, blue)) {
:where(.rsvp-card .rc-input) {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rc-ink) 5%, transparent);
}
}
:where(.rsvp-card .rc-input:hover) { border-color: var(--rc-line); }
:where(.rsvp-card .rc-input:focus-visible) { border-color: var(--rc-accent); box-shadow: 0 0 0 .125rem rgba(0, 34, 43, 0.28); background: var(--rc-paper); }

@supports (color: color-mix(in lch, red, blue)) {
:where(.rsvp-card .rc-input:focus-visible) { box-shadow: 0 0 0 .125rem color-mix(in srgb, var(--rc-accent) 28%, transparent); }
}
:where(.rsvp-card .rc-textarea) { resize: vertical; min-height: 5.5em; }
:where(.rsvp-card .rc-select) { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; padding-right: 2.6em; }
:where(.rsvp-card .rc-field-select) { display: block; margin-bottom: 1.2em; }

:where(.rsvp-card .rc-choice) { margin: 0 0 1.2em; padding: 0; border: 0; min-width: 0; }
:where(.rsvp-card .rc-choice .rc-label) { padding: 0; float: none; }
:where(.rsvp-card .rc-pills) { --row-gap: .6em; --row-item: 0; }
:where(.rsvp-card .rc-pill) {
    display: block; position: relative; cursor: pointer;
    padding: .85em 1.2em;
    text-align: center; line-height: 1.3;
    border: 1px solid var(--rc-line); border-radius: 99em;
    background: var(--rc-paper);
    transition: background .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1), border-color .2s cubic-bezier(.4, 0, .2, 1);
    transition: background .2s var(--ease, ease), color .2s var(--ease, ease), border-color .2s var(--ease, ease);
}
:where(.rsvp-card .rc-pill:hover) { border-color: var(--rc-ink); }
:where(.rsvp-card .rc-pill input) { position: absolute; opacity: 0; width: .1em; height: .1em; top: 0; right: auto; bottom: auto; left: 0; margin: 0; }
:where(.rsvp-card .rc-pill:has(input:checked)) { background: var(--rc-accent); border-color: var(--rc-accent); color: var(--rc-on-accent); }
:where(.rsvp-card .rc-pill:has(input:focus-visible)) { box-shadow: 0 0 0 .125rem var(--rc-paper), 0 0 0 .25rem var(--rc-accent); }

:where(.rsvp-card .rc-foot) { --row-gap: 1.4em; --row-item: 0; align-items: center; margin-top: 1.8em; }
:where(.rsvp-card .rc-submit) {
    flex: 0 0 auto; cursor: pointer;
    padding: 1em 1.8em;
    font: inherit; font-size: .9em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1;
    color: var(--rc-on-accent);
    background: var(--rc-ink);
    border: 1px solid var(--rc-ink); border-radius: 99em;
    transition: background .2s cubic-bezier(.4, 0, .2, 1), border-color .2s cubic-bezier(.4, 0, .2, 1), transform .2s cubic-bezier(.4, 0, .2, 1);
    transition: background .2s var(--ease, ease), border-color .2s var(--ease, ease), transform .2s var(--ease, ease);
}
:where(.rsvp-card .rc-submit:hover) { background: var(--rc-accent); border-color: var(--rc-accent); transform: none; }
:where(.rsvp-card .rc-submit:focus-visible) { outline: .125rem solid var(--rc-accent); outline-offset: .1875rem; }
:where(.rsvp-card.is-busy .rc-submit) { opacity: .6; pointer-events: none; }
:where(.rsvp-card .rc-footnote) { flex: 1 1 10em; margin: 0; color: var(--rc-muted); font-size: .9em; line-height: 1.45; }

:where(.rsvp-card .rc-error) { display: none; margin: 0 0 1em; color: var(--rc-accent); font-weight: 500; line-height: 1.45; }
:where(.rsvp-card.is-failed .rc-error) { display: block; }
:where(.rsvp-card .rc-success) { display: none; }
:where(.rsvp-card.is-sent .rc-body) { display: none; }
:where(.rsvp-card.is-sent .rc-head .rc-deadline) { display: none; }
:where(.rsvp-card.is-sent .rc-success) { display: block; }
:where(.rsvp-card .rc-success-title) {
    margin: 0;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, serif); font-weight: 400;
    font-size: 1.6em; line-height: 1.1; letter-spacing: -.01em;
    color: var(--rc-accent);
}
:where(.rsvp-card .rc-success-text) { margin: .8em 0 0; color: var(--rc-muted); line-height: 1.5; max-width: 40em; }

:where(.rsvp-card.rc-tone-tint) { --rc-paper: color-mix(in srgb, var(--accent, #635bff) 6%, var(--paper, #fff)); --rc-surface: var(--paper, #fff); }
:where(.rsvp-card.rc-tone-dark) {
    --rc-paper: var(--invert-bg, #0c0e10); --rc-ink: var(--invert-fg, #f3ede1);
    --rc-muted: color-mix(in srgb, var(--invert-fg, #f3ede1) 62%, transparent);
    --rc-line: color-mix(in srgb, var(--invert-fg, #f3ede1) 18%, transparent);
    --rc-surface: color-mix(in srgb, var(--invert-fg, #f3ede1) 8%, transparent);
    --rc-on-accent: var(--invert-bg, #0c0e10);
}
:where(.rsvp-card.rc-tone-dark .rc-submit) { background: #f4f6fb; background: var(--invert-fg, #f3ede1); border-color: #f4f6fb; border-color: var(--invert-fg, #f3ede1); color: #0d0f14; color: var(--invert-bg, #0c0e10); }

:where(.rsvp-card.rc-align-center .rc-head) { text-align: center; }

@container (max-width: 30em) {
    :where(.rsvp-card) { padding: 1.6em 1.3em 1.5em; }
    :where(.rsvp-card .rc-fields), :where(.rsvp-card .rc-pills), :where(.rsvp-card .rc-foot) { --row-item: auto; }
    :where(.rsvp-card .rc-title) { font-size: 1.7em; }
}

/* blocks/scene-travel.css */

:where([data-scene-host]) {
    position: sticky;
    top: 0;
    height: 100svh;
    height: var(--scene-h, 100svh);
    overflow: hidden;
    background: #f9f9f9;
    background: var(--scene-bg, var(--page-bg, #0c0e10));
    isolation: isolate;
}

:where([data-scene-host]) > :where([data-scene], [data-scene-poster], [data-scene-film], [data-scene-veil]) {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}

[data-scene-poster],
[data-scene-film] {
    z-index: 0;
    -o-object-fit: cover;
       object-fit: cover;
}

[data-scene] {
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease;
    transition: opacity var(--scene-fade, 0.5s) ease;
}

[data-scene-live] [data-scene],
[data-scene-live][data-scene] {
    opacity: 1;
}

[data-scene-live] [data-scene-poster],
[data-scene-live] [data-scene-film] {
    opacity: 0;
    transition: opacity 0.5s ease;
    transition: opacity var(--scene-fade, 0.5s) ease;
}

[data-scene-tier='base'] [data-scene] {
    display: none;
}

[data-scene-tier='base'] [data-scene-poster],
[data-scene-tier='base'] [data-scene-film] {
    z-index: 1;
}

[data-scene-progress] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    z-index: 4;
    height: .125rem;
    height: var(--scene-progress-size, .125rem);
    pointer-events: none;
    background: color-mix(in srgb, currentColor 22%, transparent);
    transform-origin: 0 0;
    opacity: 1;
    transition: opacity 0.45s ease 0.25s;
}

@supports (color: color-mix(in lch, red, blue)) {
[data-scene-progress] {
    background: color-mix(in srgb, var(--scene-progress-colour, currentColor) 22%, transparent);
}
}
[data-scene-progress]::after {
    content: '';
    display: block;
    height: 100%;
    background: currentColor;
    background: var(--scene-progress-colour, currentColor);
    transform: scaleX(0);
    transform: scaleX(var(--scene-load, 0));
    transform-origin: 0 0;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-scene-live] [data-scene-progress] { opacity: 0; }

[data-scene-host]::before {
    content: attr(data-scene-stage);
    display: none;
    display: var(--scene-stage-label, none);
    position: absolute;
    z-index: 4;
    bottom: 1.25rem;
    left: 1.25rem;
    top: auto;
    right: auto;
    bottom: var(--scene-stage-inset, 1.25rem);
    left: var(--scene-stage-inset, 1.25rem);
    font: 500 0.75rem/1 ui-monospace, monospace;
    font: var(--scene-stage-font, 500 0.75rem/1 ui-monospace, monospace);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: currentColor;
    color: var(--scene-progress-colour, currentColor);
    opacity: 0.62;
    pointer-events: none;
}
[data-scene-live]::before { content: none; }

html.respect-reduced-motion [data-scene-progress], html.respect-reduced-motion [data-scene-progress]::after { transition: none; }

[data-scene-veil] {
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(85, 85, 85, 0.34) 0%, transparent 30%),
        linear-gradient(to top, rgba(129, 129, 129, 0.52) 0%, transparent 30%),
        linear-gradient(to right, rgba(55, 55, 55, 0.22) 0%, transparent 30%),
        linear-gradient(to left, rgba(55, 55, 55, 0.22) 0%, transparent 30%);
    background:
        linear-gradient(to bottom, rgba(85, 85, 85, 0.34) 0%, transparent var(--scene-veil-reach, 30%)),
        linear-gradient(to top, rgba(129, 129, 129, 0.52) 0%, transparent var(--scene-veil-reach, 30%)),
        linear-gradient(to right, rgba(55, 55, 55, 0.22) 0%, transparent var(--scene-veil-reach, 30%)),
        linear-gradient(to left, rgba(55, 55, 55, 0.22) 0%, transparent var(--scene-veil-reach, 30%));
    background:
        linear-gradient(to bottom, color-mix(in srgb, #f9f9f9 34%, transparent) 0%, transparent 30%),
        linear-gradient(to top, color-mix(in srgb, #f9f9f9 52%, transparent) 0%, transparent 30%),
        linear-gradient(to right, color-mix(in srgb, #f9f9f9 22%, transparent) 0%, transparent 30%),
        linear-gradient(to left, color-mix(in srgb, #f9f9f9 22%, transparent) 0%, transparent 30%);
}

@supports (color: color-mix(in lch, red, blue)) {
[data-scene-veil] {
    background:
        linear-gradient(to bottom, color-mix(in srgb, var(--scene-bg, var(--page-bg, #0c0e10)) var(--scene-veil-top, 34%), transparent) 0%, transparent var(--scene-veil-reach, 30%)),
        linear-gradient(to top, color-mix(in srgb, var(--scene-bg, var(--page-bg, #0c0e10)) var(--scene-veil-bottom, 52%), transparent) 0%, transparent var(--scene-veil-reach, 30%)),
        linear-gradient(to right, color-mix(in srgb, var(--scene-bg, var(--page-bg, #0c0e10)) var(--scene-veil-side, 22%), transparent) 0%, transparent var(--scene-veil-reach, 30%)),
        linear-gradient(to left, color-mix(in srgb, var(--scene-bg, var(--page-bg, #0c0e10)) var(--scene-veil-side, 22%), transparent) 0%, transparent var(--scene-veil-reach, 30%));
}
}

:where([data-scene-host]) ~ * {
    position: relative;
    z-index: 3;
}

[data-scene-rail] {
    position: absolute;
    z-index: 3;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    height: .125rem;
    height: var(--scene-rail-w, .125rem);
    background: rgba(6, 6, 6, 0.18);
    background: color-mix(in srgb, #222 18%, transparent);
}

@supports (color: color-mix(in lch, red, blue)) {
[data-scene-rail] {
    background: color-mix(in srgb, var(--ink, #fff) 18%, transparent);
}
}

[data-scene-rail]::after {
    content: '';
    display: block;
    height: 100%;
    width: calc(0 * 100%);
    width: calc(var(--scene-t, 0) * 100%);
    background: #007b9a;
    background: var(--accent, currentColor);
}

[data-scene][data-scene-drag] {
    cursor: grab;
    touch-action: none;
}

[data-scene-hand] [data-scene][data-scene-drag] {
    cursor: grabbing;
}

.respect-reduced-motion [data-scene] {
    transition: none;
}

:where([data-scene-host][data-scene-scope="page"]) {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    height: 100svh;
}

:where([data-scene-host][data-scene-scope="page"]) > :where([data-scene], [data-scene-poster]) {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

body:has([data-scene-scope="page"]) #smooth-content {
    position: relative;
    z-index: 1;
}

.scene-sun {
    position: absolute; z-index: 5; right: 1rem; bottom: 1rem;
    display: flex; gap: .6rem; align-items: center;
    padding: .5rem .7rem; border-radius: .4rem;
    font: 500 .75rem/1 ui-monospace, monospace; letter-spacing: .04em;
    color: #e8ecf1; background: rgba(12, 14, 18, 0.72); background: rgb(12 14 18 / .72); -webkit-backdrop-filter: blur(.375rem); backdrop-filter: blur(.375rem);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border: 1px solid rgb(255 255 255 / .12);
}
.scene-sun label { display: flex; gap: .5rem; align-items: center; text-transform: uppercase; opacity: .7 }
.scene-sun input { width: 9rem; accent-color: #5B8CFF }
.scene-sun output { min-width: 3.4rem; text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums }
.scene-sun button {
    padding: .25rem .5rem; border-radius: .25rem; cursor: pointer;
    color: inherit; font: inherit; text-transform: uppercase;
    background: rgba(255, 255, 255, 0.08);
    background: rgb(255 255 255 / .08); border: 1px solid rgba(255, 255, 255, 0.14); border: 1px solid rgb(255 255 255 / .14);
}
.scene-sun.is-pinned { border-color: #5B8CFF }
.scene-sun.is-pinned output { color: #8FB2FF }

/* blocks/scroll-product.css */

.scroll-product {
    --spc-paper:   var(--paper, var(--page-bg, #fff));
    --spc-surface: var(--surface, var(--card-bg, #eef0f4));
    --spc-ink:     var(--ink, #0a2540);
    --spc-line:    var(--line, #e3e8ee);
    --spc-accent:  var(--accent, #3b6cff);
}
.scroll-product[data-scheme="dark"] {
    --spc-paper:   var(--paper-dark, var(--page-bg, #0a0c12));
    --spc-surface: var(--surface-dark, var(--card-bg, #1b1f2a));
    --spc-ink:     var(--ink-dark, #e8ecf4);
    --spc-line:    var(--line-dark, rgba(232, 236, 244, 0.14));
}

@supports (color: color-mix(in lch, red, blue)) {
.scroll-product[data-scheme="dark"] {
    --spc-line:    var(--line-dark, color-mix(in srgb, #e8ecf4 14%, transparent));
}
}

.scroll-product { position: relative; height: 300vh; height: var(--sp-height, 300vh); }

.sp-pin {
    position: sticky; top: 0; height: 100vh; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: max(1.5rem, min(5vh, 4rem));
    gap: clamp(1.5rem, 5vh, 4rem); padding: max(2rem, min(6vh, 5rem)) calc(6 * var(--pe-vw)); padding: clamp(2rem, 6vh, 5rem) calc(6 * var(--pe-vw));
    background: var(--spc-paper);
}
.sp-eyebrow { position: absolute; top: max(1.5rem, min(5vh, 4rem)); top: clamp(1.5rem, 5vh, 4rem); margin: 0;
    font: 600 .72rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 .72rem/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .2em; text-transform: uppercase;
    color: var(--spc-accent); }

.sp-media { display: grid; align-items: center; justify-items: center; place-items: center; }
.sp-img {
    display: block; max-width: min(calc(64 * var(--pe-vw)), 45rem); max-height: 64vh; width: auto; height: auto; -o-object-fit: contain; object-fit: contain;
    transform: scale(.72);
    transform: scale(var(--sp-from, .72)); will-change: transform;
    filter: drop-shadow(0 2.5rem 5.625rem rgba(12, 12, 12, 0.35));
}

@supports (color: color-mix(in lch, red, blue)) {
.sp-img {
    filter: drop-shadow(0 2.5rem 5.625rem color-mix(in srgb, var(--spc-ink) 35%, transparent));
}
}
.sp-placeholder {
    width: min(calc(40 * var(--pe-vw)), 23.75rem); aspect-ratio: 3 / 4; border-radius: calc(1vh * 1.6); border-radius: var(--r-lg, var(--radius, 1.75rem));
    background: linear-gradient(150deg, color-mix(in srgb, var(--spc-accent) 30%, var(--spc-surface)),
        var(--spc-surface));
    border: 1px solid var(--spc-line);
}

.sp-caps { position: relative; min-height: 4.5rem; width: 100%; max-width: 40ch; text-align: center; }
.sp-cap {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; opacity: 0; transform: translateY(1.125rem);
    transition: opacity .5s ease, transform .5s ease;
    font: 500 max(1.3rem, min(calc(3.4 * var(--pe-vw)), 2.4rem))/1.15 'Open Sans', Arial, Helvetica, sans-serif;
    font: 500 max(1.3rem, min(calc(3.4 * var(--pe-vw)), 2.4rem))/1.15 var(--font-display, system-ui, sans-serif);
    font: 500 max(1.3rem, min(calc(3.4 * var(--pe-vw)), 2.4rem))/1.15 'Open Sans', Arial, Helvetica, sans-serif;
    font: 500 clamp(1.3rem, calc(3.4 * var(--pe-vw)), 2.4rem)/1.15 'Open Sans', Arial, Helvetica, sans-serif;
    font: 500 clamp(1.3rem, calc(3.4 * var(--pe-vw)), 2.4rem)/1.15 var(--font-display, system-ui, sans-serif);
    letter-spacing: -.02em; color: var(--spc-ink);
}
.sp-cap.is-active { opacity: 1; transform: translateY(0); }


/* blocks/season-calendar.css */

:where(.season-calendar) {
    --sc-ink: var(--ink, #0a0a0a);
    --sc-muted: var(--muted, #6b6b6b);
    --sc-line: var(--line, #e3e3e3);
    --sc-paper: var(--paper, #fff);
    --sc-surface: var(--surface, color-mix(in srgb, var(--ink, #0a0a0a) 5%, var(--paper, #fff)));
    --sc-accent: var(--accent, #635bff);
    --sc-on-accent: var(--on-accent, #fff);
    --sc-cols: 6;
    --sc-gap: .6em;
    width: 100%; margin: 0;
    color: #222;
    color: var(--sc-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif);
}
:where(.season-calendar.sc-cols-3) { --sc-cols: 3; }
:where(.season-calendar.sc-cols-4) { --sc-cols: 4; }
:where(.season-calendar.sc-cols-6) { --sc-cols: 6; }
:where(.season-calendar.sc-cols-12) { --sc-cols: 12; }

:where(.season-calendar .sc-eyebrow) { margin: 0; color: var(--sc-muted); font-size: .78em; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3; }
:where(.season-calendar .sc-title) { margin: .6em 0 0; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 500; font-size: 2.6em; line-height: 1.02; letter-spacing: -.015em; text-wrap: balance; }
:where(.season-calendar .sc-title em) { color: var(--sc-accent); font-style: italic; }
:where(.season-calendar .sc-lead) { margin: .9em 0 0; color: var(--sc-muted); font-size: 1em; line-height: 1.45; max-width: 40em; }

.season-calendar .sc-months { --row-flow: row wrap; --row-flow-narrow: row wrap; --row-gap: var(--sc-gap); --row-item: calc((100% - (var(--sc-cols) - 1) * var(--sc-gap)) / var(--sc-cols)); list-style: none; margin: 1.8em 0 0; padding: 0; }
:where(.season-calendar .sc-month) {
    box-sizing: border-box;
    min-height: 7.2em;
    padding: .9em .9em .8em;
    border-radius: .45em;
    background: var(--sc-paper);
    box-shadow: 0 0 0 1px var(--sc-line);
    color: var(--sc-ink);
    transition: translate .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s cubic-bezier(.4, 0, .2, 1);
    transition: translate .2s var(--ease, ease), box-shadow .2s var(--ease, ease);
}
:where(.season-calendar .sc-month:hover) { translate: 0 -.1em; box-shadow: 0 0 0 1px var(--sc-line), 0 .6em 1.2em -.6em rgba(10, 10, 10, 0.3); }

@supports (color: color-mix(in lch, red, blue)) {
:where(.season-calendar .sc-month:hover) { box-shadow: 0 0 0 1px var(--sc-line), 0 .6em 1.2em -.6em color-mix(in srgb, var(--sc-ink) 30%, transparent); }
}
:where(.season-calendar .sc-month-name) { margin: 0; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 500; font-size: 1.5em; line-height: 1; letter-spacing: -.01em; }
:where(.season-calendar .sc-month-band) { margin: .55em 0 0; font-size: .74em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; color: var(--sc-muted); }
:where(.season-calendar .sc-month-note) { margin: .5em 0 0; font-size: .82em; line-height: 1.35; color: var(--sc-muted); }

:where(.season-calendar .sc-band-low) { background: var(--sc-surface); box-shadow: none; }
:where(.season-calendar .sc-band-high) { background: var(--sc-accent); color: var(--sc-on-accent); box-shadow: none; }
:where(.season-calendar .sc-band-high .sc-month-band), :where(.season-calendar .sc-band-high .sc-month-note) { color: color-mix(in srgb, var(--sc-on-accent) 80%, transparent); }
:where(.season-calendar .sc-band-closed) { background: repeating-linear-gradient(-45deg, transparent 0,transparent .35em, rgba(2, 2, 2, 0.06) .35em, rgba(2, 2, 2, 0.06) .5em), var(--sc-paper); color: var(--sc-muted); box-shadow: 0 0 0 1px var(--sc-line); }

@supports (background: repeating-linear-gradient(red 0%, red 0% 1%, red 2%)) {
:where(.season-calendar .sc-band-closed) { background: repeating-linear-gradient(-45deg, transparent 0 .35em, rgba(2, 2, 2, 0.06) .35em .5em), var(--sc-paper); }
}

@supports (background: repeating-linear-gradient(red 0%, red 0% 1%, red 2%)) and (color: color-mix(in lch, red, blue)) {
:where(.season-calendar .sc-band-closed) { background: repeating-linear-gradient(-45deg, transparent 0 .35em, color-mix(in srgb, var(--sc-ink) 6%, transparent) .35em .5em), var(--sc-paper); }
}
:where(.season-calendar .sc-band-closed .sc-month-name) { color: rgba(15, 15, 15, 0.45); }

@supports (color: color-mix(in lch, red, blue)) {
:where(.season-calendar .sc-band-closed .sc-month-name) { color: color-mix(in srgb, var(--sc-ink) 45%, transparent); }
}

.season-calendar .sc-legend { --row-flow: row wrap; --row-flow-narrow: row wrap; --row-gap: .6em 1.8em; --row-item: auto; list-style: none; margin: 1.4em 0 0; padding: 0; }
:where(.season-calendar .sc-legend-item) { display: block; white-space: nowrap; font-size: .9em; line-height: 1.3; background: none; box-shadow: none; padding: 0; color: var(--sc-ink); }
:where(.season-calendar .sc-swatch) { display: inline-block; vertical-align: -.1em; margin-right: .6em; width: 1em; height: 1em; border-radius: .25em; background: var(--sc-paper); box-shadow: 0 0 0 1px var(--sc-line); }
:where(.season-calendar .sc-band-low .sc-swatch) { background: var(--sc-surface); box-shadow: 0 0 0 1px var(--sc-line); }
:where(.season-calendar .sc-band-high .sc-swatch) { background: var(--sc-accent); box-shadow: none; }
:where(.season-calendar .sc-legend-label) { font-weight: 500; }
:where(.season-calendar .sc-legend-rate) { color: var(--sc-muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; margin-left: .5em; }

:where(.season-calendar.sc-tone-dark) {
    --sc-paper: color-mix(in srgb, var(--invert-fg, #f3ede1) 6%, transparent); --sc-ink: var(--invert-fg, #f3ede1);
    --sc-muted: color-mix(in srgb, var(--invert-fg, #f3ede1) 62%, transparent);
    --sc-line: color-mix(in srgb, var(--invert-fg, #f3ede1) 18%, transparent);
    --sc-surface: color-mix(in srgb, var(--invert-fg, #f3ede1) 12%, transparent);
    --sc-accent: var(--invert-fg, #f3ede1); --sc-on-accent: var(--invert-bg, #0c0e10);
}

:where(.season-calendar.sc-align-center .sc-eyebrow), :where(.season-calendar.sc-align-center .sc-title), :where(.season-calendar.sc-align-center .sc-lead) { text-align: center; margin-left: auto; margin-right: auto; }

@container (max-width: 36em) {
    .season-calendar .sc-months { --sc-cols: 3; }
    :where(.season-calendar .sc-title) { font-size: 2em; }
}

:where(.season-calendar) .sc-days, :where(.season-calendar) .sc-legend-head, :where(.season-calendar) .sc-day-rate { display: none; }
.season-calendar.sc-view-days .sc-months { display: none; }
.season-calendar.sc-view-days .sc-days { display: block; margin: 2em 0 0; }
.season-calendar.sc-view-days .sc-legend-head { display: block; }
.season-calendar.sc-view-days .sc-day-rate { display: inline-block; }

.season-calendar .sc-rail {
    --sc-show: 3; --sc-rail-gap: .9em;
    --row-flow: row nowrap; --row-flow-narrow: row nowrap; --row-gap: var(--sc-rail-gap);
    --row-item: calc((100% - (var(--sc-show) - 1) * var(--sc-rail-gap)) / var(--sc-show));
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0; padding: 0 0 .2em;
}
.season-calendar .sc-rail::-webkit-scrollbar { display: none; }
.season-calendar .sc-rail > .sc-plate { flex-shrink: 0; }
@container (max-width: 64em) { .season-calendar .sc-rail { --sc-show: 2.15; } }
@container (max-width: 36em) { .season-calendar .sc-rail { --sc-show: 1.12; } }

:where(.season-calendar .sc-plate) {
    box-sizing: border-box; flex-shrink: 0; scroll-snap-align: start;
    margin: 0; padding: 1.3em 1.2em 1.1em;
    border-radius: calc(.6 * 1em);
    border-radius: calc(var(--sc-radius, .6) * 1em);
    background: var(--sc-paper); box-shadow: 0 0 0 1px var(--sc-line);
    color: var(--sc-ink);
    transition: background-color .5s cubic-bezier(.4, 0, .2, 1), color .5s cubic-bezier(.4, 0, .2, 1);
    transition: background-color .5s var(--ease, ease), color .5s var(--ease, ease);
}
:where(.season-calendar .sc-plate.sc-band-low) { background: var(--sc-surface); box-shadow: none; }
:where(.season-calendar .sc-plate.sc-band-mid) { background: color-mix(in srgb, var(--sc-accent) 16%, var(--sc-paper)); box-shadow: none; }
:where(.season-calendar .sc-plate.sc-band-high) { background: var(--sc-accent); color: var(--sc-on-accent); box-shadow: none; }
:where(.season-calendar .sc-plate.sc-band-closed) { background: repeating-linear-gradient(-45deg, transparent 0,transparent .35em, rgba(2, 2, 2, 0.06) .35em, rgba(2, 2, 2, 0.06) .5em), var(--sc-paper); color: var(--sc-muted); }

@supports (background: repeating-linear-gradient(red 0%, red 0% 1%, red 2%)) {
:where(.season-calendar .sc-plate.sc-band-closed) { background: repeating-linear-gradient(-45deg, transparent 0 .35em, rgba(2, 2, 2, 0.06) .35em .5em), var(--sc-paper); }
}

@supports (background: repeating-linear-gradient(red 0%, red 0% 1%, red 2%)) and (color: color-mix(in lch, red, blue)) {
:where(.season-calendar .sc-plate.sc-band-closed) { background: repeating-linear-gradient(-45deg, transparent 0 .35em, color-mix(in srgb, var(--sc-ink) 6%, transparent) .35em .5em), var(--sc-paper); }
}
:where(.season-calendar .sc-plate-name) { margin: 0 0 .9em; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-style: italic; font-weight: 300; font-size: 1.9em; line-height: 1; letter-spacing: -.015em; }
:where(.season-calendar .sc-plate-name small) { margin-left: .45em; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-text, system-ui, sans-serif); font-style: normal; font-weight: 500; font-size: .36em; letter-spacing: .14em; text-transform: uppercase; vertical-align: .5em; opacity: .7; }
:where(.season-calendar .sc-plate-week) { margin: 0 0 .35em; font-size: .7em; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; opacity: .62; white-space: nowrap; }
:where(.season-calendar .sc-plate-week span) { display: inline-block; width: calc(100% / 7); text-align: center; }
:where(.season-calendar .sc-plate-days) { margin: 0; font-size: .95em; line-height: 0; }

:where(.season-calendar .sc-day) { position: relative; display: inline-block; width: calc(100% / 7); aspect-ratio: 1; margin: 0; cursor: pointer; line-height: 1; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent; }
:where(.season-calendar .sc-day input) { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
:where(.season-calendar .sc-day span) {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 2.2em; height: 2.2em; max-width: 92%; max-height: 92%;
    border-radius: 50%; line-height: 2.2em; text-align: center; pointer-events: none;
    transition: background-color .25s cubic-bezier(.4, 0, .2, 1), color .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s cubic-bezier(.4, 0, .2, 1);
    transition: background-color .25s var(--ease, ease), color .25s var(--ease, ease), box-shadow .25s var(--ease, ease);
}
:where(.season-calendar .sc-day.is-blank) { cursor: default; }
:where(.season-calendar .sc-day.is-saturday span) { font-weight: 600; }
:where(.season-calendar .sc-day:hover span) { box-shadow: inset 0 0 0 1px currentColor; }
/* the day's number is the input's sibling: a :has() on the day with the number below it made every element added
   anywhere on any page restyle the whole page */
:where(.season-calendar .sc-day > input:focus-visible ~ span, .season-calendar .sc-day > span:has(~ input:focus-visible)) { box-shadow: 0 0 0 .125rem var(--sc-accent); }
:where(.season-calendar .sc-day > input:checked ~ span, .season-calendar .sc-day > span:has(~ input:checked)) { background: var(--sc-accent); color: var(--sc-on-accent); box-shadow: none; }
:where(.season-calendar .sc-day.is-booked) { cursor: not-allowed; }
:where(.season-calendar .sc-day.is-booked span) { -webkit-text-decoration: line-through; text-decoration: line-through; text-decoration-thickness: .07em; opacity: .42; box-shadow: none; }
:where(.season-calendar .sc-day.is-off) { cursor: default; }
:where(.season-calendar .sc-day.is-off span) { opacity: .22; box-shadow: none; }
:where(.season-calendar .sc-plate.sc-band-high .sc-day > input:checked ~ span, .season-calendar .sc-plate.sc-band-high .sc-day > span:has(~ input:checked)) { background: var(--spark, var(--sc-on-accent)); color: var(--sc-ink); }
:where(.season-calendar .sc-plate.sc-band-high .sc-day > input:focus-visible ~ span, .season-calendar .sc-plate.sc-band-high .sc-day > span:has(~ input:focus-visible)) { box-shadow: 0 0 0 .125rem var(--spark, var(--sc-on-accent)); }

.season-calendar .sc-rail-foot { --row-gap: .5em; --row-flow-narrow: row nowrap; align-items: center; margin: 1.2em 0 0; }
.season-calendar .sc-rail-foot > .sc-pick { --row-item: auto; flex: 1 1 auto; }
.season-calendar .sc-rail-foot > .sc-step { --row-item: auto; flex: 0 0 auto; }
:where(.season-calendar .sc-pick) { margin: 0; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 300; font-size: 1.45em; line-height: 1.25; letter-spacing: -.01em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; text-wrap: balance; }
:where(.season-calendar .sc-pick b) { font-weight: 500; }
:where(.season-calendar .sc-step) {
    width: 2.8em; height: 2.8em; margin: 0; padding: 0; border: 1px solid var(--sc-line); border-radius: 50%;
    background: transparent; color: var(--sc-ink); font: inherit; font-size: 1em; line-height: 1; cursor: pointer;
    transition: background-color .25s cubic-bezier(.4, 0, .2, 1), border-color .25s cubic-bezier(.4, 0, .2, 1), color .25s cubic-bezier(.4, 0, .2, 1);
    transition: background-color .25s var(--ease, ease), border-color .25s var(--ease, ease), color .25s var(--ease, ease);
}
:where(.season-calendar .sc-step:hover) { border-color: var(--sc-ink); background: var(--sc-ink); color: var(--sc-paper); }
:where(.season-calendar .sc-step:focus-visible) { outline: .125rem solid var(--sc-accent); outline-offset: .2em; }
:where(.season-calendar .sc-step:disabled) { opacity: .35; cursor: default; background: transparent; color: var(--sc-ink); border-color: var(--sc-line); }

.season-calendar.sc-view-days .sc-legend { --row-flow: column nowrap; --row-flow-narrow: column nowrap; --row-gap: 0; margin: .4em 0 0; }
.season-calendar.sc-view-days .sc-legend > .sc-legend-item { --row-item: auto; }
:where(.season-calendar.sc-view-days .sc-legend-head) { margin: 2.2em 0 0; padding: 0 0 .5em 40%; font-size: .72em; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-muted); white-space: nowrap; }
:where(.season-calendar.sc-view-days .sc-kind) { display: inline-block; width: 33.333%; text-align: right; }
:where(.season-calendar.sc-view-days .sc-legend-item) { white-space: nowrap; padding: .75em 0; border-top: 1px solid var(--sc-line); font-size: 1em; }
:where(.season-calendar.sc-view-days .sc-legend-item:last-child) { border-bottom: 1px solid var(--sc-line); }
:where(.season-calendar.sc-view-days .sc-legend-label) { display: inline-block; width: calc(40% - 1.6em); white-space: normal; vertical-align: baseline; }
:where(.season-calendar.sc-view-days .sc-legend-rate) { display: none; }
:where(.season-calendar.sc-view-days .sc-day-rate) { width: 20%; text-align: right; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 300; font-size: 1.3em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
:where(.season-calendar.sc-view-days .sc-legend-item .sc-swatch) { vertical-align: -.05em; }
@container (max-width: 36em) {
    :where(.season-calendar.sc-view-days .sc-legend-head) { padding-left: 34%; }
    :where(.season-calendar.sc-view-days .sc-legend-label) { width: calc(34% - 1.6em); }
    :where(.season-calendar.sc-view-days .sc-day-rate) { width: 22%; font-size: 1.05em; }
}

:where(.season-calendar.sc-view-days.sc-tone-dark .sc-plate) { background: transparent; box-shadow: 0 0 0 1px var(--sc-line); }
:where(.season-calendar.sc-view-days.sc-tone-dark .sc-plate.sc-band-mid) { background: rgba(32, 32, 33, 0.13); background: color-mix(in srgb, #f4f6fb 13%, transparent); box-shadow: none; }

@supports (color: color-mix(in lch, red, blue)) {
:where(.season-calendar.sc-view-days.sc-tone-dark .sc-plate.sc-band-mid) { background: color-mix(in srgb, var(--invert-fg, #f3ede1) 13%, transparent); }
}
:where(.season-calendar.sc-view-days.sc-tone-dark .sc-plate.sc-band-high) { background: #f4f6fb; background: var(--invert-fg, #f3ede1); color: #0d0f14; color: var(--invert-bg, #0c0e10); box-shadow: none; }
:where(.season-calendar.sc-view-days.sc-tone-dark .sc-day > input:checked ~ span, .season-calendar.sc-view-days.sc-tone-dark .sc-day > span:has(~ input:checked)) { background: #f4f6fb; background: var(--spark, var(--invert-fg, #f3ede1)); color: #0d0f14; color: var(--invert-bg, #0c0e10); }
:where(.season-calendar.sc-view-days.sc-tone-dark .sc-plate.sc-band-high .sc-day > input:checked ~ span, .season-calendar.sc-view-days.sc-tone-dark .sc-plate.sc-band-high .sc-day > span:has(~ input:checked)) { background: #007b9a; background: var(--accent, #635bff); color: #f4f6fb; color: var(--invert-fg, #f3ede1); }
:where(.season-calendar.sc-view-days.sc-tone-dark .sc-step:hover) { background: #f4f6fb; background: var(--invert-fg, #f3ede1); color: #0d0f14; color: var(--invert-bg, #0c0e10); }

/* blocks/sections.css */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: var(--gap, calc(2 * var(--pe-vw))); gap: var(--gap, calc(2 * var(--pe-vw))); }
.stat { display: flex; flex-direction: column; gap: .4rem; padding-top: 1rem; border-top: .125rem solid #007b9a; border-top: .125rem solid var(--accent); }
.stat-num { font: 600 max(2.2rem, min(calc(5 * var(--pe-vw)), 3.6rem))/1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 max(2.2rem, min(calc(5 * var(--pe-vw)), 3.6rem))/1 var(--font-display); font: 600 max(2.2rem, min(calc(5 * var(--pe-vw)), 3.6rem))/1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 clamp(2.2rem, calc(5 * var(--pe-vw)), 3.6rem)/1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 clamp(2.2rem, calc(5 * var(--pe-vw)), 3.6rem)/1 var(--font-display); letter-spacing: -.02em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.stat-label { font: 600 .75rem/1.3 ui-monospace, 'SF Mono', Menlo, monospace; font: 600 .75rem/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #626262; color: var(--muted); }
@media (max-width: 768px) { .stats { grid-template-columns: repeat(2, 1fr); } }

.split-row { display: grid; grid-template-columns: 1fr 1fr; grid-gap: max(1.5rem, min(calc(5 * var(--pe-vw)), 4rem)); grid-gap: clamp(1.5rem, calc(5 * var(--pe-vw)), 4rem); gap: max(1.5rem, min(calc(5 * var(--pe-vw)), 4rem)); gap: clamp(1.5rem, calc(5 * var(--pe-vw)), 4rem); align-items: center; margin-bottom: max(2rem, min(calc(6 * var(--pe-vw)), 5rem)); margin-bottom: clamp(2rem, calc(6 * var(--pe-vw)), 5rem); }
.split-row:last-child { margin-bottom: 0; }
.split-row--reverse .split-media { order: 2; }
.split-media .imagesingle { margin: 0; aspect-ratio: 4 / 3; border-radius: 1vh; border-radius: var(--radius, 1vh); overflow: hidden; }
.split-media .imagesingle img, .split-media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.split-text { display: flex; flex-direction: column; gap: .8rem; max-width: 46ch; }
.split-mark { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #007b9a; background: var(--accent); color: #f4f6fb; color: var(--invert-fg, #fff); font: 700 1rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 700 1rem/1 var(--font-mono); }
.split-title { font: 600 max(1.4rem, min(calc(3 * var(--pe-vw)), 2.2rem))/1.1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 max(1.4rem, min(calc(3 * var(--pe-vw)), 2.2rem))/1.1 var(--font-display); font: 600 max(1.4rem, min(calc(3 * var(--pe-vw)), 2.2rem))/1.1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 clamp(1.4rem, calc(3 * var(--pe-vw)), 2.2rem)/1.1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 clamp(1.4rem, calc(3 * var(--pe-vw)), 2.2rem)/1.1 var(--font-display); letter-spacing: -.01em; }
.split-body { color: #626262; color: var(--muted); font: 400 1rem/1.6 'Open Sans', Arial, Helvetica, sans-serif; font: 400 1rem/1.6 var(--font-text); }
.split-link { font: 600 .9rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 600 .9rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: #222; color: var(--ink); -webkit-text-decoration: none; text-decoration: none; border-bottom: .125rem solid #007b9a; border-bottom: .125rem solid var(--accent); padding-bottom: .1875rem; align-self: flex-start; }
@media (max-width: 768px) { .split-row { grid-template-columns: 1fr; } .split-row--reverse .split-media { order: 0; } }

.logo-wall { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 1px; gap: 1px; background: rgba(5, 5, 5, 0.14); background: var(--line, rgba(4, 4, 4, 0.12)); border: 1px solid rgba(5, 5, 5, 0.14); border: 1px solid var(--line, rgba(4, 4, 4, 0.12)); }

@supports (color: color-mix(in lch, red, blue)) {
.logo-wall { background: var(--line, color-mix(in srgb, var(--ink) 12%, transparent)); border: 1px solid var(--line, color-mix(in srgb, var(--ink) 12%, transparent)); }
}
.logo-cell { display: flex; align-items: center; justify-content: center; padding: max(1.2rem, min(calc(3 * var(--pe-vw)), 2.4rem)); padding: clamp(1.2rem, calc(3 * var(--pe-vw)), 2.4rem); background: #f9f9f9; background: var(--page-bg); font: 600 1.1rem/1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 1.1rem/1 var(--font-display); color: #626262; color: var(--muted); transition: color .25s, background .25s; }
.logo-cell:hover { color: #007b9a; color: var(--accent); }
@media (max-width: 768px) { .logo-wall { grid-template-columns: repeat(2, 1fr); } }
.marquee-strip { overflow: hidden; white-space: nowrap; padding: 1rem 0; border-top: 1px solid rgba(5, 5, 5, 0.14); border-bottom: 1px solid rgba(5, 5, 5, 0.14); border-top: 1px solid var(--line, rgba(4, 4, 4, 0.12)); border-bottom: 1px solid var(--line, rgba(4, 4, 4, 0.12)); margin-top: var(--gap, calc(2 * var(--pe-vw))); font: 600 max(1.2rem, min(calc(3 * var(--pe-vw)), 2rem))/1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 max(1.2rem, min(calc(3 * var(--pe-vw)), 2rem))/1 var(--font-display); font: 600 max(1.2rem, min(calc(3 * var(--pe-vw)), 2rem))/1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 clamp(1.2rem, calc(3 * var(--pe-vw)), 2rem)/1 'Open Sans', Arial, Helvetica, sans-serif; font: 600 clamp(1.2rem, calc(3 * var(--pe-vw)), 2rem)/1 var(--font-display); color: #222; color: var(--ink); }

@supports (color: color-mix(in lch, red, blue)) {
.marquee-strip { border-top: 1px solid var(--line, color-mix(in srgb, var(--ink) 12%, transparent)); border-bottom: 1px solid var(--line, color-mix(in srgb, var(--ink) 12%, transparent)); }
}

.pullquote { max-width: 22ch; font: 500 max(1.8rem, min(calc(4.5 * var(--pe-vw)), 3.4rem))/1.18 'Open Sans', Arial, Helvetica, sans-serif; font: 500 max(1.8rem, min(calc(4.5 * var(--pe-vw)), 3.4rem))/1.18 var(--font-display); font: 500 max(1.8rem, min(calc(4.5 * var(--pe-vw)), 3.4rem))/1.18 'Open Sans', Arial, Helvetica, sans-serif; font: 500 clamp(1.8rem, calc(4.5 * var(--pe-vw)), 3.4rem)/1.18 'Open Sans', Arial, Helvetica, sans-serif; font: 500 clamp(1.8rem, calc(4.5 * var(--pe-vw)), 3.4rem)/1.18 var(--font-display); letter-spacing: -.01em; }
.pullquote::before { content: "“"; color: #007b9a; color: var(--accent); }
.pullquote-by { margin-top: 1.4rem; font: 600 .8125rem/1.4 ui-monospace, 'SF Mono', Menlo, monospace; font: 600 .8125rem/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: #626262; color: var(--muted); }

@media (max-width: 768px) {
    html:not(.tier-desktop) .section[data-section].plotgrid.stack-narrow { display: flex; flex-direction: column; gap: var(--stack-gap, calc(4 * var(--pe-vw))); height: auto; min-height: 0; padding: var(--stack-pad, calc(8 * var(--pe-vw))) 0; }
    html:not(.tier-desktop) .section[data-section].plotgrid.stack-narrow > .plot { position: static; transform: none; margin: 0 var(--page-margin, var(--grid-margin, calc(4 * var(--pe-vw)))); width: auto; height: auto; }
    html:not(.tier-desktop) .section[data-section].plotgrid.stack-narrow > .layer-sticky { position: static; height: auto; }
    /* a hand-placed (free) piece joins the stack in its order: left absolute it lay over the stacked pieces */
    html:not(.tier-desktop) .section[data-section].plotgrid.stack-narrow > .free { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; margin: 0 var(--page-margin, var(--grid-margin, calc(4 * var(--pe-vw)))) !important; width: auto !important; height: auto !important; }
}

/* blocks/service-offers.css */

.service-offers {
    --svo-ink: var(--ink, #1c1b1a);
    --svo-muted: var(--muted, #6b655f);
    --svo-line: var(--line, #ddd6cc);
    --svo-plate: var(--paper, #fbfaf7);
    --svo-accent: var(--accent, #7a2433);
    --svo-on-accent: var(--accent-ink, #fbfaf7);
    --svo-r: calc(var(--svo-radius, .8) * 1cqi);
    margin: 0; color: #222; color: var(--svo-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, 'Helvetica Neue', Arial, sans-serif); font-size: 1.125rem; font-size: var(--text-md, 1rem); line-height: 1.5;
}
.service-offers.svo-tone-dark {
    --svo-ink: var(--invert-fg, #efebe4); --svo-muted: color-mix(in srgb, var(--invert-fg, #efebe4) 66%, transparent);
    --svo-line: color-mix(in srgb, var(--invert-fg, #efebe4) 20%, transparent); --svo-plate: color-mix(in srgb, var(--invert-fg, #efebe4) 7%, var(--invert-bg, #1e1b19));
}
.service-offers :where(h2, h3, p, ul, li) { margin: 0; padding: 0; }

.service-offers .svo-head { margin-bottom: 3.6cqi; }
.service-offers :where(.svo-eyebrow, .svo-unit, .svo-badge, .svo-index) {
    font-size: 0.75rem;
    font-size: var(--text-xs, .78rem); font-weight: 560; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3;
}
.service-offers .svo-eyebrow { color: var(--svo-muted); }
.service-offers .svo-title {
    margin-top: .55em; max-width: 22ch; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 400;
    font-size: 2.8rem;
    font-size: var(--text-xl, 2.8rem); line-height: 1.04; letter-spacing: -.014em; text-wrap: balance;
}
.service-offers .svo-note { margin-top: 1em; max-width: 56ch; color: var(--svo-muted); text-wrap: pretty; }
.service-offers.svo-align-center .svo-head { text-align: center; }
.service-offers.svo-align-center :where(.svo-title, .svo-note) { margin-left: auto; margin-right: auto; }

.service-offers .svo-list { --row-gap: 0; }
.service-offers .svo-offer { position: relative; align-items: flex-start; transition: border-color .25s ease; }
.service-offers .svo-meta { --row-gap: .8em; --row-item: auto; --row-flow-narrow: row wrap; align-items: center; }
.service-offers .svo-meta > * { flex: 0 0 auto; }
.service-offers .svo-index { color: var(--svo-muted); }
.service-offers .svo-badge:empty { padding: 0; background: none; }
.service-offers .svo-badge { padding: .4em .65em .35em; border-radius: .3em; color: var(--svo-accent); background: rgba(0, 12, 15, 0.1); }

@supports (color: color-mix(in lch, red, blue)) {
.service-offers .svo-badge { background: color-mix(in srgb, var(--svo-accent) 10%, transparent); }
}
.service-offers .svo-name {
    margin-top: .7em; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 400;
    font-size: 1.5rem;
    font-size: var(--text-lg, 1.5rem); line-height: 1.15; letter-spacing: -.005em; text-wrap: balance;
}
.service-offers .svo-outcome { margin-top: .6em; max-width: 38ch; text-wrap: pretty; }
.service-offers .svo-for { margin-top: .6em; max-width: 38ch; color: var(--svo-muted); }

.service-offers .svo-includes { list-style: none; }
.service-offers .svo-item { position: relative; padding: .62em 0 .62em 1.7em; border-bottom: 1px solid var(--svo-line); line-height: 1.4; }
.service-offers .svo-item:first-child { padding-top: 0; }
.service-offers .svo-item:last-child { border-bottom: 0; }
.service-offers .svo-item-icon { position: absolute; left: 0; top: .95em; color: var(--svo-accent); font-size: .78em; }
.service-offers .svo-item:first-child .svo-item-icon { top: .32em; }
.service-offers:not(.svo-includes-1) .svo-includes { display: none; }

.service-offers .svo-figure { white-space: nowrap; }
.service-offers .svo-amount {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, serif); font-weight: 400; font-size: 2.8rem; font-size: var(--text-xl, 2.8rem);
    line-height: 1; letter-spacing: -.015em; font-feature-settings: lining-nums tabular-nums; font-variant-numeric: lining-nums tabular-nums;
}
.service-offers .svo-unit { margin-left: .6em; color: var(--svo-muted); vertical-align: .35em; }
.service-offers .svo-terms { margin-top: .75em; color: var(--svo-muted); text-wrap: balance; }
.service-offers .svo-cta.btn {
    margin-top: 1.4em; padding: .25em 0; border: 0; border-radius: 0; background: none; color: var(--svo-ink);
    font-size: 1em; font-weight: 560; letter-spacing: 0; text-transform: none; -webkit-text-decoration: underline; text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: .35em;
    transition: color .2s ease, text-underline-offset .2s ease;
}
.service-offers .svo-cta.btn:hover { transform: none; color: var(--svo-accent); text-underline-offset: .5em; }
.service-offers .svo-cta.btn:focus-visible { outline: .125rem solid var(--svo-accent); outline-offset: .25rem; }
.service-offers .svo-featured-1 .svo-cta.btn {
    padding: 1em 1.5em; border-radius: calc(var(--svo-r) * .5); background: var(--svo-accent); color: var(--svo-on-accent);
    -webkit-text-decoration: none;
    text-decoration: none; font-size: 0.75rem; font-size: var(--text-xs, .8rem); font-weight: 620; letter-spacing: .1em; text-transform: uppercase;
}
.service-offers :where(.svo-featured-1) .svo-cta.btn:hover { background: var(--svo-ink); color: var(--svo-plate); }

.service-offers.svo-arrange-rows .svo-list { --row-flow: column nowrap; border-top: 1px solid var(--svo-ink); }
.service-offers.svo-arrange-rows .svo-offer { --row-gap: 4.5cqi; padding: 3.6cqi 0; border-bottom: 1px solid var(--svo-line); }
.service-offers.svo-arrange-rows .svo-main { flex: 1.3 1 0; }
.service-offers.svo-arrange-rows .svo-includes { flex: 1 1 0; padding-top: 2.1em; }
.service-offers.svo-arrange-rows .svo-price { flex: .75 1 0; padding-top: 1.7em; text-align: right; }
.service-offers.svo-arrange-rows .svo-offer:hover { border-bottom-color: var(--svo-ink); }
.service-offers.svo-arrange-rows .svo-offer:where(.svo-featured-1) {
    margin-left: -2.6cqi;
    margin-right: -2.6cqi; padding-left: 2.6cqi; padding-right: 2.6cqi; background: var(--svo-plate); border-radius: var(--svo-r);
    border-bottom-color: transparent; box-shadow: 0 1px 2px rgba(34, 34, 34, 0.08),
                    0 8px 24px -12px rgba(34, 34, 34, 0.18); box-shadow: 0 1px 2px color-mix(in srgb, #222 8%, transparent),
                    0 8px 24px -12px color-mix(in srgb, #222 18%, transparent); box-shadow: var(--shadow-card, 0 1.4cqi 3cqi -1.2cqi rgba(7, 7, 7, 0.2));
}

@supports (color: color-mix(in lch, red, blue)) {
.service-offers.svo-arrange-rows .svo-offer:where(.svo-featured-1) { box-shadow: var(--shadow-card, 0 1.4cqi 3cqi -1.2cqi color-mix(in srgb, var(--svo-ink) 20%, transparent));
}
}
.service-offers.svo-arrange-rows:not(.svo-includes-1) .svo-main { flex-grow: 2.3; }

.service-offers.svo-arrange-cards .svo-list { --row-gap: 2cqi; --row-item: 17em; }
.service-offers.svo-arrange-cards .svo-offer { --row-flow: column nowrap; --row-gap: 0; align-items: stretch; padding: 3.2cqi; border: 1px solid var(--svo-line); border-radius: var(--svo-r); }
.service-offers.svo-arrange-cards .svo-offer > * { --row-item: auto; }
.service-offers.svo-arrange-cards .svo-includes { margin-top: 1.6em; padding-top: 1.2em; border-top: 1px solid var(--svo-line); }
.service-offers.svo-arrange-cards .svo-price { margin-top: auto; padding-top: 1.8em; }
.service-offers.svo-arrange-cards .svo-offer:where(.svo-featured-1) { background: var(--svo-plate); border-color: transparent; box-shadow: 0 2.4cqi 5cqi -1.6cqi rgba(10, 10, 10, 0.28); box-shadow: var(--shadow-lift, 0 2.4cqi 5cqi -1.6cqi rgba(10, 10, 10, 0.28)); }

@supports (color: color-mix(in lch, red, blue)) {
.service-offers.svo-arrange-cards .svo-offer:where(.svo-featured-1) { box-shadow: var(--shadow-lift, 0 2.4cqi 5cqi -1.6cqi color-mix(in srgb, var(--svo-ink) 28%, transparent)); }
}

.service-offers:not(.svo-arrange-menu) :where(.svo-levels, .svo-prices) { display: none; }
.service-offers .svo-duration { margin-top: .35em; color: var(--svo-muted); font-size: 0.75rem; font-size: var(--text-xs, .78rem); font-weight: 560; letter-spacing: .12em; text-transform: uppercase; }
.service-offers.svo-arrange-menu :where(.svo-includes, .svo-terms, .svo-for, .svo-meta) { display: none; }
.service-offers.svo-arrange-menu .svo-levels {
    --row-gap: 0; --row-item: 0; --row-flow-narrow: row nowrap; align-items: flex-end;
    padding: 0 0 .9em calc((100% - 3cqi) * .375 + 3cqi); box-sizing: border-box;
    color: var(--svo-muted); font-size: 0.75rem; font-size: var(--text-xs, .78rem); font-weight: 560; letter-spacing: .12em; text-transform: uppercase; line-height: 1.25;
}
.service-offers.svo-arrange-menu :where(.svo-level-name, .svo-level-price) { flex: 1 1 0; text-align: right; }
.service-offers.svo-arrange-menu .svo-list { --row-flow: column nowrap; border-top: 1px solid var(--svo-ink); }
.service-offers.svo-arrange-menu .svo-offer { --row-gap: 3cqi; align-items: baseline; padding: 1.7cqi 0; border-bottom: 1px solid var(--svo-line); transition: background-color .3s ease; }
.service-offers.svo-arrange-menu .svo-main { flex: 2.4 1 0; }
.service-offers.svo-arrange-menu .svo-name { margin-top: 0; transition: translate .35s cubic-bezier(.2, .7, .2, 1); }
.service-offers.svo-arrange-menu .svo-outcome { margin-top: .35em; max-width: 46ch; color: var(--svo-muted); }
.service-offers.svo-arrange-menu .svo-prices { --row-gap: 0; --row-item: 0; --row-flow-narrow: row nowrap; flex: 4 1 0; }
.service-offers.svo-arrange-menu :where(.svo-level-price, .svo-amount) {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, serif); font-weight: 400; font-size: 1.5rem; font-size: var(--text-lg, 1.5rem); line-height: 1.1;
    letter-spacing: -.01em; font-feature-settings: lining-nums tabular-nums; font-variant-numeric: lining-nums tabular-nums;
}
.service-offers.svo-arrange-menu :where(.svo-prices, .svo-figure) { transition: translate .35s cubic-bezier(.2, .7, .2, 1); }
.service-offers.svo-arrange-menu .svo-price { flex: 4 1 0; padding: 0; text-align: right; }
.service-offers.svo-arrange-menu .svo-offer:has(.svo-prices) .svo-price { position: absolute; top: 0; right: 0; bottom: 0; left: auto; width: 0; }
.service-offers.svo-arrange-menu .svo-offer:has(.svo-prices) .svo-figure { display: none; }
.service-offers.svo-arrange-menu .svo-unit { margin-left: .5em; vertical-align: .2em; }
.service-offers.svo-arrange-menu .svo-cta.btn {
    position: absolute; right: 0; top: 50%; margin: 0; padding: .65em 1em; translate: 1em -50%; opacity: 0;
    border-radius: 99em; background: var(--svo-ink); color: var(--svo-plate); white-space: nowrap; -webkit-text-decoration: none; text-decoration: none;
    font-size: 0.75rem;
    font-size: var(--text-xs, .78rem); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
    transition: opacity .3s ease, translate .35s cubic-bezier(.2, .7, .2, 1);
}
.service-offers.svo-arrange-menu .svo-offer:hover { background: rgba(0, 11, 14, 0.09); }

@supports (color: color-mix(in lch, red, blue)) {
.service-offers.svo-arrange-menu .svo-offer:hover { background: color-mix(in srgb, var(--svo-accent) 9%, transparent); }
}
.service-offers.svo-arrange-menu .svo-offer:hover .svo-name { translate: .35em 0; }
.service-offers.svo-arrange-menu .svo-offer:hover :where(.svo-prices, .svo-figure) { translate: calc(-1 * 7.5em) 0; translate: calc(-1 * var(--svo-cta-room, 7.5em)) 0; }
.service-offers.svo-arrange-menu .svo-offer:hover .svo-cta.btn { opacity: 1; translate: -.6em -50%; }
.service-offers.svo-arrange-menu .svo-cta.btn:hover { background: var(--svo-accent); color: var(--svo-on-accent); }
.service-offers.svo-arrange-menu .svo-offer:where(.svo-featured-1) .svo-name { font-style: italic; }

@container (max-width: 46rem) {
    .service-offers .svo-list { --row-item: auto; }
    .service-offers.svo-arrange-rows .svo-offer { --row-flow: column nowrap; --row-gap: 0; padding-top: 7cqi; padding-bottom: 7cqi; }
    .service-offers.svo-arrange-rows :where(.svo-main, .svo-includes, .svo-price) { flex: 0 0 auto; }
    .service-offers.svo-arrange-rows :where(.svo-includes, .svo-price) { padding-top: 1.4em; text-align: left; }
    .service-offers :where(.svo-title, .svo-amount) { font-size: min(2.4rem, 11cqi); font-size: min(var(--text-xl, 2.4rem), 11cqi); }
    .service-offers.svo-arrange-rows .svo-offer:where(.svo-featured-1) { margin-left: -4cqi; margin-right: -4cqi; padding-left: 4cqi; padding-right: 4cqi; }
    .service-offers.svo-arrange-menu .svo-levels { padding-left: 0; }
    .service-offers.svo-arrange-menu .svo-offer { --row-flow: column nowrap; --row-gap: .7em; align-items: stretch; padding-top: 4.5cqi; padding-bottom: 4.5cqi; }
    .service-offers.svo-arrange-menu :where(.svo-main, .svo-prices, .svo-price) { flex: 0 0 auto; }
    .service-offers.svo-arrange-menu .svo-offer:hover :where(.svo-prices, .svo-figure) { translate: none; }
    .service-offers.svo-arrange-menu .svo-cta.btn { top: 4.5cqi; translate: 0 0; opacity: 1; }
}

/* blocks/shelf-rail.css */

.shelf-rail {
    --srl-bg: transparent;
    --srl-fg: inherit;
    --srl-soft: var(--muted, #6b6158);
    --srl-ratio: .8;
    --srl-edge: var(--page-margin, 6cqi);
    position: relative; margin: 0; background: transparent; background: var(--srl-bg); color: inherit; color: var(--srl-fg);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, "Helvetica Neue", Arial, sans-serif);
}
.shelf-rail.srl-tone-accent { --srl-bg: var(--accent, #bf3b25); --srl-fg: var(--on-accent, #fff8ee); --srl-soft: var(--on-accent, #fff8ee); }
.shelf-rail.srl-tone-spark { --srl-bg: var(--spark, #e8a93a); --srl-fg: var(--on-spark, var(--ink, #1c1917)); --srl-soft: color-mix(in srgb, var(--on-spark, #1c1917) 74%, transparent); }
.shelf-rail.srl-tone-ink { --srl-bg: var(--ink, #1c1917); --srl-fg: var(--paper, #fffdf8); --srl-soft: color-mix(in srgb, var(--paper, #fffdf8) 70%, transparent); }
.shelf-rail.srl-card-square { --srl-ratio: 1; }
.shelf-rail.srl-card-landscape { --srl-ratio: 1.4; }

.shelf-rail.shelf-rail[data-rail="pinned"] { height: calc(100svh - 0px + 0px); height: calc(100svh - var(--rail-top, 0px) + var(--rail-distance, 0px)); }
.shelf-rail[data-rail="pinned"] .srl-stage { position: sticky; top: 0px; top: var(--rail-top, 0px); height: calc(100svh - 0px); height: calc(100svh - var(--rail-top, 0px)); overflow: hidden; }
.shelf-rail .srl-stage { padding-top: max(1.5em, min(4svh, 4em)); padding-bottom: max(1.5em, min(4svh, 4em)); padding-top: max(1.5em, min(4svh, 4em)); padding-top: clamp(1.5em, 4svh, 4em); padding-bottom: max(1.5em, min(4svh, 4em)); padding-bottom: clamp(1.5em, 4svh, 4em); container-type: inline-size; }
.shelf-rail:not([data-rail="pinned"]) .srl-stage { overflow-x: auto; scrollbar-width: thin; }

.shelf-rail .srl-head { position: relative; max-width: 60em; margin: 0 var(--srl-edge) max(1.2em, min(3.5svh, 3em)); margin: 0 var(--srl-edge) clamp(1.2em, 3.5svh, 3em); }
.shelf-rail .srl-head > * { margin: 0; }
.shelf-rail .srl-eyebrow { font-size: 0.6875rem; font-size: var(--text-label, .78em); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--srl-soft); }
.shelf-rail .srl-title { margin-top: .25em; font: 400 max(2.2em, min(6.4cqi, 7.5em))/.92 'Open Sans', Arial, Helvetica, sans-serif; font: 400 max(2.2em, min(6.4cqi, 7.5em))/.92 var(--font-display, Georgia, serif); font: 400 max(2.2em, min(6.4cqi, 7.5em))/.92 'Open Sans', Arial, Helvetica, sans-serif; font: 400 clamp(2.2em, 6.4cqi, 7.5em)/.92 'Open Sans', Arial, Helvetica, sans-serif; font: 400 clamp(2.2em, 6.4cqi, 7.5em)/.92 var(--font-display, Georgia, serif); letter-spacing: -.03em; text-wrap: balance; }
.shelf-rail .srl-lead { margin-top: .7em; max-width: 44ch; font-size: 1.125rem; font-size: var(--text-md, 1em); line-height: 1.5; color: var(--srl-soft); }
.shelf-rail .srl-progress { position: relative; width: min(100%, 24em); height: .16em; margin-top: 1.4em; overflow: hidden; border-radius: 1em; background: color-mix(in srgb, currentColor 16%, transparent); }
.shelf-rail .srl-progress-fill { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: currentColor; transform: scaleX(0); transform: scaleX(var(--rail-progress, 0)); transform-origin: 0 50%; }
.shelf-rail:not([data-rail="pinned"]) .srl-progress { visibility: hidden; }

.shelf-rail .srl-track { --row-gap: max(1em, min(2.2cqi, 2.6em)); --row-gap: clamp(1em, 2.2cqi, 2.6em); --row-flow: row nowrap; --row-flow-narrow: row nowrap; width: -moz-max-content; width: max-content; list-style: none; margin: 0; padding: 0 var(--srl-edge); will-change: transform; }
.shelf-rail .srl-card { --srl-h: calc(var(--srl-card-h, 50) * 1svh); flex: 0 0 auto; width: calc((50 * 1svh) * var(--srl-ratio)); width: calc(calc(50 * 1svh) * var(--srl-ratio)); width: calc(var(--srl-h) * var(--srl-ratio)); max-width: 82cqi; }
.shelf-rail .srl-card > * { margin: 0; }
.shelf-rail .srl-media { position: relative; height: var(--srl-h); max-height: calc(82cqi / var(--srl-ratio)); margin-bottom: 1em; }
.shelf-rail .srl-shot { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; overflow: hidden; border-radius: .6em; border-radius: var(--srl-radius, .6em); background: color-mix(in srgb, currentColor 10%, transparent); }
.shelf-rail .srl-shot img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.4, 0, .2, 1); transition: transform 1.2s var(--ease, cubic-bezier(.2, .8, .2, 1)); }
.shelf-rail .srl-card:hover .srl-shot img { transform: scale(1.05); }
.shelf-rail .srl-badge { position: absolute; right: -6%; bottom: -9%; width: 38%; aspect-ratio: 1; margin: 0; border-radius: 50%; filter: drop-shadow(0 .8em 1em rgba(0, 0, 0, .35)); transition: transform .9s cubic-bezier(.4, 0, .2, 1); transition: transform .9s var(--ease, cubic-bezier(.2, .8, .2, 1)); }
.shelf-rail .srl-badge img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; display: block; }
.shelf-rail .srl-card:hover .srl-badge { transform: rotate(-24deg) scale(1.06); }
.shelf-rail .srl-n { display: block; font-size: 0.6875rem; font-size: var(--text-label, .78em); font-weight: 600; letter-spacing: .12em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--srl-soft); }
.shelf-rail .srl-card-title { margin-top: .3em; font: 400 max(1.4em, min(2.3cqi, 2.4em))/1.02 'Open Sans', Arial, Helvetica, sans-serif; font: 400 max(1.4em, min(2.3cqi, 2.4em))/1.02 var(--font-display, Georgia, serif); font: 400 max(1.4em, min(2.3cqi, 2.4em))/1.02 'Open Sans', Arial, Helvetica, sans-serif; font: 400 clamp(1.4em, 2.3cqi, 2.4em)/1.02 'Open Sans', Arial, Helvetica, sans-serif; font: 400 clamp(1.4em, 2.3cqi, 2.4em)/1.02 var(--font-display, Georgia, serif); letter-spacing: -.02em; }
.shelf-rail .srl-place { margin-top: .45em; font-size: 0.6875rem; font-size: var(--text-label, .78em); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.shelf-rail .srl-body { margin-top: .6em; max-width: 34ch; line-height: 1.45; color: var(--srl-soft); }
.shelf-rail .srl-credit { margin-top: .7em; font-size: 0.6875rem; font-size: var(--text-label, .78em); line-height: 1.4; color: var(--srl-soft); }
@container (min-width: 44em) {
    .shelf-rail[data-rail="pinned"] .srl-head { position: absolute; z-index: 0; left: var(--srl-edge); top: 50%; translate: 0 -50%; width: 27cqi; margin: 0; opacity: calc(1 - 0 * 2.2); opacity: calc(1 - var(--rail-progress, 0) * 2.2); }
    .shelf-rail[data-rail="pinned"] .srl-title { font-size: max(1.8em, min(4.2cqi, 5em)); font-size: clamp(1.8em, 4.2cqi, 5em); }
    .shelf-rail[data-rail="pinned"] .srl-track { position: absolute; z-index: 1; left: 0; top: 50%; translate: 0 -50%; padding-left: calc(var(--srl-edge) + 32cqi); }
}
@container (max-width: 44em) {
    .shelf-rail[data-rail="pinned"] .srl-lead { display: none; }
    .shelf-rail[data-rail="pinned"] .srl-card { --srl-h: 38svh; }
    .shelf-rail[data-rail="pinned"] .srl-body { display: none; }
}
@media (max-height: 47.5em) { .shelf-rail .srl-body { display: none; } }

/* blocks/shelf-ticker.css */

.shelf-ticker {
    --stk-bg: var(--accent, #bf3b25);
    --stk-fg: var(--on-accent, #fff8ee);
    --stk-type: max(1em, min(2.2cqi, 2.6em));
    --stk-type: clamp(1em, 2.2cqi, 2.6em);
    container-type: inline-size;
    position: relative; overflow: hidden; margin: 0; padding: 1.1em 0;
    background: #007b9a;
    background: var(--stk-bg); color: rgb(240, 251, 255); color: color(display-p3 0.94504 0.9821 1); color: oklch(from #007b9a clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h); color: var(--stk-fg);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, "Helvetica Neue", Arial, sans-serif);
}
.shelf-ticker.stk-tone-spark { --stk-bg: var(--spark, #e8a93a); --stk-fg: var(--on-spark, var(--ink, #1c1917)); }
.shelf-ticker.stk-tone-ink { --stk-bg: var(--ink, #1c1917); --stk-fg: var(--paper, #fffdf8); }
.shelf-ticker.stk-tone-paper { --stk-bg: var(--paper, #fffdf8); --stk-fg: var(--ink, #1c1917); border-top: 1px solid rgba(5, 5, 5, 0.14); border-bottom: 1px solid rgba(5, 5, 5, 0.14); border-top: 1px solid var(--line, #ddd3c4); border-bottom: 1px solid var(--line, #ddd3c4); }
.shelf-ticker.stk-size-large { --stk-type: max(1.6em, min(5.4cqi, 6em)); --stk-type: clamp(1.6em, 5.4cqi, 6em); padding: .5em 0; }

.shelf-ticker .stk-items { --row-gap: 0; --row-flow: row nowrap; --row-flow-narrow: row nowrap; width: -moz-max-content; width: max-content; list-style: none; margin: 0; padding: 0; will-change: transform; }
.shelf-ticker .stk-item { --row-gap: .7em; --row-flow: row nowrap; --row-flow-narrow: row nowrap; flex: 0 0 auto; align-items: center; padding-left: 1em; }
.shelf-ticker .stk-item > * { flex: 0 0 auto; }

.shelf-ticker .stk-picture { width: 1.35em; height: 1.35em; margin: 0; border-radius: 50%; overflow: hidden; font-size: var(--stk-type); }
.shelf-ticker .stk-picture img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.shelf-ticker .stk-words > * { margin: 0; }
.shelf-ticker .stk-title { font: 400 var(--stk-type)/1 'Open Sans', Arial, Helvetica, sans-serif; font: 400 var(--stk-type)/1 var(--font-display, Georgia, serif); letter-spacing: -.02em; color: inherit; -webkit-text-decoration: none; text-decoration: none; white-space: nowrap; }
.shelf-ticker a.stk-title:hover { -webkit-text-decoration: underline; text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em; }
.shelf-ticker .stk-note { margin-left: .9em; font-size: max(.72em, calc(var(--stk-type) * .36)); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.shelf-ticker .stk-mark { margin-left: .6em; font-size: calc(var(--stk-type) * .6); opacity: .9; }

.shelf-ticker.stk-look-quote { --stk-type: max(1.05em, min(1.7cqi, 1.6em)); --stk-type: clamp(1.05em, 1.7cqi, 1.6em); padding: 1.4em 0; }
.shelf-ticker.stk-look-quote .stk-item { align-items: flex-start; width: 26em; margin-left: 1em; padding: 1.3em 1.4em; border-radius: .9em; background: color-mix(in srgb, var(--stk-fg) 9%, transparent); white-space: normal; }
.shelf-ticker.stk-look-quote .stk-picture { width: 2.4em; height: 2.4em; font-size: 1em; }
.shelf-ticker.stk-look-quote .stk-title { display: block; white-space: normal; line-height: 1.18; text-wrap: pretty; }
.shelf-ticker.stk-look-quote .stk-note { display: block; margin: .8em 0 0; font-size: .74em; }
.shelf-ticker.stk-look-quote .stk-mark { display: none; }

@keyframes stk-travel { to { transform: translate3d(calc(-1 * 50%), 0, 0); transform: translate3d(calc(-1 * var(--ticker-distance, 50%)), 0, 0); } }
.shelf-ticker[data-ticker="running"] .stk-items,
.shelf-ticker[data-ticker="paused"] .stk-items { animation: stk-travel 40s linear infinite; animation: stk-travel var(--ticker-duration, 40s) linear infinite; }
.shelf-ticker.stk-dir-right .stk-items { animation-direction: reverse; }
.shelf-ticker[data-ticker="paused"] .stk-items,
.shelf-ticker:hover .stk-items,
.shelf-ticker:focus-within .stk-items { animation-play-state: paused; }
.shelf-ticker:not([data-ticker="running"]):not([data-ticker="paused"]) { overflow-x: auto; scrollbar-width: none; }
.shelf-ticker .stk-item:focus-within { outline: .125rem solid currentColor; outline-offset: -.125rem; }

/* blocks/site-bg.css */
/* the site background (layout.twig, a WebGL canvas behind the page). A no-op filter keeps it drawn with the page:
   left alone, Chrome on a Mac hands the canvas to the system as an overlay, which a backdrop-filter over it (a bar's
   background blur) cannot read, so it stays sharp on screen though it blurs in a screenshot */
.site-bg { filter: saturate(1); }

/* blocks/site-footer.css */

.footer-block {
    --fb-ink:    var(--ink, #11131a);
    --fb-muted:  var(--muted, #6b7280);
    --fb-accent: var(--accent, #4f7cff);
    --fb-line:   var(--line, color-mix(in srgb, var(--ink, #11131a) 14%, transparent));
    width: 100%;
    display: grid; grid-template-columns: 1.4fr 3fr; grid-gap: max(2rem, min(calc(5 * var(--pe-vw)), 4rem)); grid-gap: clamp(2rem, calc(5 * var(--pe-vw)), 4rem); gap: max(2rem, min(calc(5 * var(--pe-vw)), 4rem)); gap: clamp(2rem, calc(5 * var(--pe-vw)), 4rem);
    align-items: start;
    padding-top: max(2.5rem, min(5vh, 4rem));
    padding-top: clamp(2.5rem, 5vh, 4rem);
    border-top: 1px solid rgba(5, 5, 5, 0.14);
    border-top: 1px solid var(--fb-line);
}
.footer-block[data-scheme="dark"] {
    --fb-ink:    var(--ink-dark, #e8eaf0);
    --fb-muted:  var(--muted-dark, #8b93a7);
    --fb-line:   var(--line-dark, rgba(232, 234, 240, 0.14));
}

@supports (color: color-mix(in lch, red, blue)) {
.footer-block[data-scheme="dark"] {
    --fb-line:   var(--line-dark, color-mix(in srgb, #e8eaf0 14%, transparent));
}
}

.fb-name { font: 700 1.3rem/1 'Open Sans', Arial, Helvetica, sans-serif; font: 700 1.3rem/1 var(--font-display, system-ui, sans-serif); letter-spacing: -.02em; color: var(--fb-ink); }
.fb-tag { margin: .8rem 0 0; max-width: 28ch; font: 400 .92rem/1.5 'Open Sans', Arial, Helvetica, sans-serif; font: 400 .92rem/1.5 var(--font-text, var(--font-display, system-ui, sans-serif)); color: var(--fb-muted); }

.fb-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); grid-gap: 1.5rem 2rem; gap: 1.5rem 2rem; }
.fb-col { display: flex; flex-direction: column; gap: .6rem; }
.fb-col-head { margin: 0 0 .3rem; font: 600 .72rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 600 .72rem/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--fb-muted); }
.fb-link { font: 400 .92rem/1 'Open Sans', Arial, Helvetica, sans-serif; font: 400 .92rem/1 var(--font-text, var(--font-display, system-ui, sans-serif)); color: rgba(27, 27, 27, 0.78); -webkit-text-decoration: none; text-decoration: none; transition: color .2s; }

@supports (color: color-mix(in lch, red, blue)) {
.fb-link { color: color-mix(in srgb, var(--fb-ink) 78%, transparent); }
}
.fb-link:hover { color: var(--fb-accent); }

.fb-legal {
    grid-column: 1 / -1; margin: max(2rem, min(4vh, 3rem)) 0 0; margin: clamp(2rem, 4vh, 3rem) 0 0; padding-top: 1.5rem;
    border-top: 1px solid var(--fb-line);
    font: 500 .8rem/1.4 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 .8rem/1.4 var(--font-mono, ui-monospace, monospace); letter-spacing: .04em; color: var(--fb-muted);
}

@media (max-width: 768px) { .footer-block { grid-template-columns: 1fr; } .fb-cols { grid-template-columns: repeat(2, 1fr); } }

/* blocks/slot-picker.css */

.slot-picker {
    --sl-ink: var(--ink, #1c1b1a);
    --sl-muted: var(--muted, #6b655f);
    --sl-line: var(--line, #ddd6cc);
    --sl-plate: var(--paper, #fbfaf7);
    --sl-well: var(--page-bg, #f1ede6);
    --sl-accent: var(--accent, #7a2433);
    --sl-on-accent: var(--accent-ink, #fbfaf7);
    --sl-pad: 4.4cqi;
    --sl-r: calc(var(--sl-radius, 1.4) * 1cqi);
    position: relative; margin: 0; padding: 4.4cqi; padding: var(--sl-pad);
    color: #222;
    color: var(--sl-ink); background: #fafafa; background: var(--sl-plate);
    border-radius: calc(1.4 * 1cqi);
    border-radius: var(--sl-r);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, 'Helvetica Neue', Arial, sans-serif);
    font-size: 1.125rem;
    font-size: var(--text-md, 1rem); line-height: 1.45;
}
.slot-picker.sl-shadow-soft { box-shadow: 0 1px 2px rgba(34, 34, 34, 0.08),
                    0 8px 24px -12px rgba(34, 34, 34, 0.18); box-shadow: 0 1px 2px color-mix(in srgb, #222 8%, transparent),
                    0 8px 24px -12px color-mix(in srgb, #222 18%, transparent); box-shadow: var(--shadow-card, 0 0 0 1px rgba(2, 2, 2, 0.07), 0 1.4cqi 3cqi -1.2cqi rgba(7, 7, 7, 0.2)); }

@supports (color: color-mix(in lch, red, blue)) {
.slot-picker.sl-shadow-soft { box-shadow: var(--shadow-card, 0 0 0 1px color-mix(in srgb, var(--sl-ink) 7%, transparent), 0 1.4cqi 3cqi -1.2cqi color-mix(in srgb, var(--sl-ink) 20%, transparent)); }
}
.slot-picker.sl-shadow-deep { box-shadow: 0 0 0 1px rgba(2, 2, 2, 0.07), 0 2.4cqi 5cqi -1.6cqi rgba(10, 10, 10, 0.28); box-shadow: var(--shadow-lift, 0 0 0 1px rgba(2, 2, 2, 0.07), 0 2.4cqi 5cqi -1.6cqi rgba(10, 10, 10, 0.28)); }

@supports (color: color-mix(in lch, red, blue)) {
.slot-picker.sl-shadow-deep { box-shadow: var(--shadow-lift, 0 0 0 1px color-mix(in srgb, var(--sl-ink) 7%, transparent), 0 2.4cqi 5cqi -1.6cqi color-mix(in srgb, var(--sl-ink) 28%, transparent)); }
}
.slot-picker.sl-shadow-none { box-shadow: 0 0 0 1px var(--sl-line); }
.slot-picker.sl-tone-plain { --sl-pad: 0; background: transparent; box-shadow: none; }
.slot-picker.sl-tone-dark {
    --sl-ink: var(--invert-fg, #efebe4); --sl-muted: color-mix(in srgb, var(--invert-fg, #efebe4) 66%, transparent);
    --sl-line: color-mix(in srgb, var(--invert-fg, #efebe4) 20%, transparent); --sl-plate: var(--invert-bg, #1e1b19);
    --sl-well: color-mix(in srgb, var(--invert-fg, #efebe4) 7%, transparent);
}
.slot-picker :where(p, fieldset, legend) { margin: 0; padding: 0; border: 0; min-width: 0; }
.slot-picker :where(input, select, textarea, button) { font: inherit; color: inherit; }

.slot-picker .sl-chip {
    --row-gap: .5em; --row-item: auto; --row-flow-narrow: row wrap;
    align-items: center; width: -moz-max-content; width: max-content; max-width: 100%;
    padding: .5em .85em .5em .75em; border: 1px solid var(--sl-line); border-radius: 99em;
    color: var(--sl-ink); font-size: 0.75rem; font-size: var(--text-xs, .8rem); font-weight: 560; letter-spacing: .02em; line-height: 1;
}
.slot-picker .sl-chip > * { flex: 0 0 auto; }
.slot-picker .sl-chip-icon { color: var(--sl-accent); font-size: 1.15em; translate: 0 .04em; }
.slot-picker .sl-title {
    margin: .7em 0 0; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 400;
    font-size: 2.6rem;
    font-size: var(--text-xl, 2.6rem); line-height: 1.04; letter-spacing: -.012em; text-wrap: balance;
}
.slot-picker .sl-lead { margin: .9em 0 0; max-width: 44ch; color: var(--sl-muted); text-wrap: pretty; }
.slot-picker .sl-lead:empty { margin: 0; }
.slot-picker.sl-align-center .sl-head { text-align: center; }
.slot-picker.sl-align-center .sl-chip { margin-left: auto; margin-right: auto; }
.slot-picker.sl-align-center .sl-lead { margin-left: auto; margin-right: auto; }

.slot-picker .sl-step { margin-top: 4cqi; }
.slot-picker .sl-step-label {
    display: block; width: 100%; padding: 0 0 1em; color: var(--sl-muted);
    font-size: 0.75rem;
    font-size: var(--text-xs, .8rem); font-weight: 560; letter-spacing: .12em; text-transform: uppercase; line-height: 1.9;
}
.slot-picker .sl-n {
    display: inline-block; width: 1.9em; height: 1.9em; margin-right: .85em; border: 1px solid var(--sl-line); border-radius: 50%;
    color: var(--sl-ink); text-align: center; letter-spacing: 0; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.slot-picker :where(.sl-day, .sl-time) input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; width: 100%; height: 100%; margin: 0; pointer-events: none; }

.slot-picker .sl-service {
    position: relative; display: block; padding: .95em .9em .95em 2.7em; border-top: 1px solid var(--sl-line);
    cursor: pointer; transition: background-color .2s ease;
}
.slot-picker .sl-service:last-child { border-bottom: 1px solid var(--sl-line); }
.slot-picker .sl-service-name { display: block; font-weight: 560; }
.slot-picker .sl-service-note { display: block; margin-top: .15em; color: var(--sl-muted); }
.slot-picker .sl-service input {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none; position: absolute; left: .9em; top: 1.2em; width: 1.05em; height: 1.05em; margin: 0; cursor: pointer;
    border: .0938rem solid var(--sl-muted); border-radius: 50%; transition: border-color .2s ease, box-shadow .2s ease;
}
.slot-picker .sl-service input:checked { border-color: var(--sl-accent); box-shadow: inset 0 0 0 .2em var(--sl-plate), inset 0 0 0 1em var(--sl-accent); }
.slot-picker .sl-service:hover { background: rgba(0, 5, 6, 0.04); }

@supports (color: color-mix(in lch, red, blue)) {
.slot-picker .sl-service:hover { background: color-mix(in srgb, var(--sl-accent) 4%, transparent); }
}
.slot-picker .sl-service:has(input:checked) { background: rgba(0, 9, 11, 0.07); }

@supports (color: color-mix(in lch, red, blue)) {
.slot-picker .sl-service:has(input:checked) { background: color-mix(in srgb, var(--sl-accent) 7%, transparent); }
}
.slot-picker .sl-service:has(input:focus-visible) { outline: .125rem solid var(--sl-accent); outline-offset: -.125rem; }

.slot-picker .sl-step-staff:not(:has(.sl-stylist ~ .sl-stylist)) { display: none; }
.slot-picker .sl-staff { --row-gap: .5em; --row-item: calc(25% - .5em); --row-flow-narrow: row wrap; }
.slot-picker .sl-stylist {
    position: relative; flex-grow: 0; padding: .45em .45em .7em; cursor: pointer;
    background: var(--sl-well); border: 1px solid transparent; border-radius: calc(var(--sl-r) * .6);
    transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
.slot-picker .sl-stylist input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: inherit; }
.slot-picker .sl-stylist-photo { width: 100%; aspect-ratio: 4 / 5; margin: 0 0 .65em; overflow: hidden; border-radius: calc(var(--sl-r) * .4); background: var(--sl-line); }
.slot-picker .sl-stylist-photo img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; filter: grayscale(1) contrast(1.05); filter: var(--sl-photo-filter, grayscale(1) contrast(1.05)); transition: filter .35s ease, scale .6s cubic-bezier(.2, .7, .2, 1); }
.slot-picker .sl-stylist-text > span { display: block; padding-left: .3em; padding-right: .3em; }
.slot-picker .sl-stylist-name { font-weight: 600; line-height: 1.2; }
.slot-picker :where(.sl-stylist-level, .sl-stylist-note) { margin-top: .25em; color: var(--sl-muted); font-size: 0.75rem; font-size: var(--text-xs, .75rem); line-height: 1.3; }
.slot-picker .sl-stylist-level { font-weight: 560; letter-spacing: .1em; text-transform: uppercase; }
.slot-picker .sl-stylist-any { background: transparent; border: 1px dashed var(--sl-line); }
.slot-picker .sl-stylist-any .sl-stylist-text { position: absolute; top: auto; right: .45em; bottom: .7em; left: .45em; }
.slot-picker .sl-stylist-any .sl-stylist-name { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-size: 1.35rem; font-size: var(--text-lg, 1.35rem); font-weight: 400; line-height: 1.05; word-wrap: normal; overflow-wrap: normal; -webkit-hyphens: none; hyphens: none; }
.slot-picker .sl-stylist:hover { border-color: var(--sl-line); }
.slot-picker .sl-stylist:hover .sl-stylist-photo img { filter: grayscale(0); scale: 1.04; }
.slot-picker .sl-stylist:has(input:checked) { background: color-mix(in srgb, var(--sl-accent) 9%, var(--sl-plate)); border-color: var(--sl-accent); border-style: solid; box-shadow: inset 0 0 0 1px var(--sl-accent); }
/* the picked one's photo in colour, handed down from the stylist (a :has() on it asked about its <img> restyled the page on
   every insertion) */
.slot-picker .sl-stylist:has(input:checked) { --sl-photo-filter: grayscale(0); }
.slot-picker .sl-stylist:has(input:focus-visible) { outline: .125rem solid var(--sl-accent); outline-offset: .125rem; }
.slot-picker .sl-stylist.is-off { opacity: .38; cursor: not-allowed; }
.slot-picker .sl-stylist.is-off:hover .sl-stylist-photo img { filter: grayscale(1); scale: 1; }

.slot-picker.sl-mode-slots .sl-staff { --row-item: auto; }
.slot-picker.sl-mode-slots .sl-stylist { flex: 0 0 auto; padding: .6em 1em; border-radius: 99em; }
.slot-picker.sl-mode-slots .sl-stylist-photo { display: none; }
.slot-picker.sl-mode-slots .sl-stylist-text > span { display: inline; padding: 0; }
.slot-picker.sl-mode-slots .sl-stylist-text > .sl-stylist-note { display: none; }
.slot-picker.sl-mode-slots .sl-stylist-level { margin-left: .6em; }
.slot-picker.sl-mode-slots .sl-stylist-any .sl-stylist-text { position: static; }
.slot-picker.sl-mode-slots .sl-stylist-any .sl-stylist-name { font-family: inherit; font-size: 1em; font-weight: 600; }
.slot-picker.sl-mode-slots .sl-stylist-any .sl-stylist-text > .sl-stylist-level { display: none; }

.slot-picker .sl-days { --row-gap: .5em; --row-item: calc(20% - .5em); --row-flow-narrow: row wrap; }
.slot-picker .sl-day {
    position: relative; flex-grow: 0; padding: .7em .2em .65em; text-align: center; cursor: pointer;
    background: var(--sl-well); border: 1px solid transparent; border-radius: calc(var(--sl-r) * .6);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.slot-picker .sl-day > span { display: block; line-height: 1.15; }
.slot-picker :where(.sl-dow, .sl-mon) { font-size: 0.75rem; font-size: var(--text-xs, .75rem); font-weight: 560; letter-spacing: .1em; text-transform: uppercase; color: var(--sl-muted); }
.slot-picker .sl-num { margin: .2em 0 .1em; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-size: 1.5rem; font-size: var(--text-lg, 1.5rem); font-feature-settings: tabular-nums lining-nums; font-variant-numeric: tabular-nums lining-nums; }
.slot-picker .sl-day:hover { border-color: var(--sl-line); }
.slot-picker .sl-day.is-today .sl-dow { color: var(--sl-accent); }
.slot-picker .sl-day:has(input:checked) { background: var(--sl-accent); border-color: var(--sl-accent); color: var(--sl-on-accent); }
.slot-picker .sl-day > input:checked ~ span, .slot-picker .sl-day > span:has(~ input:checked) { color: inherit; }
.slot-picker .sl-day.is-full { cursor: default; background: transparent; border-color: var(--sl-line); border-style: dashed; }
.slot-picker .sl-day.is-full .sl-num { color: var(--sl-muted); -webkit-text-decoration: line-through; text-decoration: line-through; text-decoration-thickness: from-font; }
.slot-picker .sl-day:has(input:focus-visible) { outline: .125rem solid var(--sl-accent); outline-offset: .125rem; }

.slot-picker .sl-times { --row-gap: .5em; --row-item: calc(25% - .5em); --row-flow-narrow: row wrap; }
.slot-picker .sl-time {
    position: relative; flex-grow: 0; padding: .72em 0; text-align: center; cursor: pointer;
    border: 1px solid var(--sl-line); border-radius: 99em; font-weight: 500;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.slot-picker .sl-time:hover { border-color: var(--sl-ink); }
.slot-picker .sl-time:has(input:checked) { background: var(--sl-accent); border-color: var(--sl-accent); color: var(--sl-on-accent); }
.slot-picker .sl-time:has(input:focus-visible) { outline: .125rem solid var(--sl-accent); outline-offset: .125rem; }
.slot-picker .sl-empty { margin-top: .6em; color: var(--sl-muted); }
.slot-picker .sl-zone { margin-top: 1.1em; color: var(--sl-muted); }
.slot-picker .sl-zone [data-slot-clock] { color: var(--sl-ink); font-weight: 560; }

.slot-picker .sl-summary {
    margin-top: 4cqi; padding: 1em 1.15em; border-radius: calc(var(--sl-r) * .6);
    background: var(--sl-well); border-left: .125rem solid var(--sl-accent);
}
.slot-picker .sl-summary-key { display: block; color: var(--sl-muted); font-size: 0.75rem; font-size: var(--text-xs, .75rem); font-weight: 560; letter-spacing: .12em; text-transform: uppercase; }
.slot-picker .sl-summary-value { display: block; margin-top: .3em; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-size: 1.35rem; font-size: var(--text-lg, 1.35rem); line-height: 1.25; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; text-wrap: balance; }

.slot-picker .sl-lead-fields { margin-top: 3.4cqi; }
.slot-picker .sl-fields { --row-gap: 1em 1.2em; --row-item: 12em; margin-top: 1em; }
.slot-picker .sl-field { display: block; margin: 0; }
.slot-picker .sl-field-wide { margin-top: 1em; }
.slot-picker .sl-label { display: block; margin-bottom: .5em; color: var(--sl-muted); font-size: 0.75rem; font-size: var(--text-xs, .75rem); font-weight: 560; letter-spacing: .12em; text-transform: uppercase; }
.slot-picker .sl-input {
    display: block; box-sizing: border-box; width: 100%; padding: .8em .9em; margin: 0;
    background: var(--sl-well); border: 1px solid var(--sl-line); border-radius: calc(var(--sl-r) * .45); outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.slot-picker .sl-input:hover { border-color: color-mix(in srgb, var(--sl-ink) 35%, var(--sl-line)); }
.slot-picker .sl-input:focus { border-color: var(--sl-accent); box-shadow: 0 0 0 .1875rem rgba(0, 27, 34, 0.22); }

@supports (color: color-mix(in lch, red, blue)) {
.slot-picker .sl-input:focus { box-shadow: 0 0 0 .1875rem color-mix(in srgb, var(--sl-accent) 22%, transparent); }
}
.slot-picker .sl-select {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none; padding-right: 2.4em; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--sl-muted) 50%), linear-gradient(135deg, var(--sl-muted) 50%, transparent 50%);
    background-position: calc(100% - 1.25em) 55%, calc(100% - .95em) 55%; background-size: .32em .32em; background-repeat: no-repeat;
}
.slot-picker .sl-textarea { resize: vertical; min-height: 5.5em; line-height: 1.45; }
.slot-picker .sl-error { display: none; margin-top: 1.2em; padding: .8em 1em; background: var(--sl-well); border-left: .125rem solid var(--sl-accent); }
.slot-picker.is-failed .sl-error { display: block; }
.slot-picker .sl-foot { --row-gap: 1em 1.4em; --row-item: auto; align-items: center; margin-top: 1.6em; }
.slot-picker .sl-foot > * { flex: 0 1 auto; }
.slot-picker .sl-footnote { flex: 1 1 14em; color: var(--sl-muted); }
.slot-picker :where(.sl-submit, .sl-continue).btn {
    padding: 1.05em 1.6em; border-radius: calc(var(--sl-r) * .45);
    background: var(--sl-accent); border-color: var(--sl-accent); color: var(--sl-on-accent);
    font-size: 0.75rem;
    font-size: var(--text-xs, .8rem); font-weight: 620; letter-spacing: .1em; text-transform: uppercase;
}
.slot-picker :where(.sl-submit, .sl-continue).btn:hover { transform: none; background: var(--sl-ink); border-color: var(--sl-ink); color: var(--sl-plate); }
.slot-picker :where(.sl-submit, .sl-continue).btn:focus-visible { outline: .125rem solid var(--sl-accent); outline-offset: .1875rem; }
.slot-picker.is-busy .sl-submit { opacity: .55; cursor: progress; }

.slot-picker.sl-fields-lead :where(.sl-field-phone, .sl-field-visit) { display: none; }
.slot-picker.sl-fields-client :where(.sl-field-email, .sl-field-company, .sl-field-select) { display: none; }
.slot-picker.sl-fields-client .sl-fields:has(.sl-field-company) { display: none; }
.slot-picker .sl-field-visit { margin-top: 1.2em; }
.slot-picker .sl-visit-pill {
    position: relative; display: inline-block; margin: 0 .5em .5em 0; padding: .72em 1.25em; cursor: pointer;
    border: 1px solid var(--sl-line); border-radius: 99em; font-weight: 500;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.slot-picker .sl-visit-pill input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.slot-picker .sl-visit-pill:hover { border-color: var(--sl-ink); }
.slot-picker .sl-visit-pill:has(input:checked) { background: var(--sl-accent); border-color: var(--sl-accent); color: var(--sl-on-accent); }
.slot-picker .sl-visit-pill:has(input:focus-visible) { outline: .125rem solid var(--sl-accent); outline-offset: .125rem; }

.slot-picker:not(.sl-mode-slots) .sl-continue { display: none; }
.slot-picker.sl-mode-slots :where(.sl-step-service, .sl-lead-fields) { display: none; }
.slot-picker.sl-mode-slots .sl-continue.btn { width: 100%; margin-top: 1.4em; box-sizing: border-box; }
.slot-picker.sl-mode-slots .sl-step-day { margin-top: 3.2cqi; }
.slot-picker .sl-hp { position: absolute; left: calc(-200 * var(--pe-vw)); width: .1em; height: .1em; overflow: hidden; }

.slot-picker .sl-success { display: none; padding: 2cqi 0 1cqi; }
.slot-picker.is-sent .sl-body { display: none; }
.slot-picker.is-sent .sl-success { display: block; }
.slot-picker.is-sent :where(.sl-title, .sl-lead) { display: none; }
.slot-picker .sl-success-icon { display: block; margin-top: 3cqi; color: var(--sl-accent); font-size: 2.2em; }
.slot-picker .sl-success-title { margin-top: .5em; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-size: 2.6rem; font-size: var(--text-xl, 2.6rem); line-height: 1.04; letter-spacing: -.012em; }
.slot-picker .sl-readback { margin-top: 1em; padding: .9em 1.1em; background: var(--sl-well); border-left: .125rem solid var(--sl-accent); font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-size: 1.35rem; font-size: var(--text-lg, 1.35rem); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.slot-picker .sl-success-text { margin-top: 1em; max-width: 44ch; color: var(--sl-muted); }

@container (max-width: 34rem) {
    .slot-picker { --sl-pad: 6cqi; }
    .slot-picker .sl-days { --row-gap: .35em; --row-item: calc(20% - .35em); }
    .slot-picker .sl-day { padding-left: 0; padding-right: 0; }
    .slot-picker :where(.sl-dow, .sl-mon) { letter-spacing: .02em; }
    .slot-picker .sl-times { --row-item: calc(33.3% - .5em); }
    .slot-picker .sl-fields { --row-item: auto; }
    .slot-picker .sl-staff { --row-item: calc(50% - .5em); }
    .slot-picker :where(.sl-title, .sl-success-title) { font-size: min(2.2rem, 11cqi); font-size: min(var(--text-xl, 2.2rem), 11cqi); }
}

/* blocks/space-cards.css */

.space-cards {
    --spc-ink: var(--ink, #1b1b1b);
    --spc-muted: var(--muted, #666);
    --spc-line: var(--line, #ddd);
    --spc-paper: var(--paper, #fff);
    --spc-accent: var(--accent, #3b3470);
    --spc-figure: var(--spc-ink);
    --spc-chip-ink: var(--ink, #1b1b1b);
    --spc-aspect: 3 / 4;
    --spc-gap: 1.1em;
    width: 100%; margin: 0;
    color: #222;
    color: var(--spc-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, 'Helvetica Neue', Arial, sans-serif);
}
.space-cards.spc-crop-tall { --spc-aspect: 2 / 3; }
.space-cards.spc-crop-landscape { --spc-aspect: 4 / 3; }
.space-cards.spc-tone-dark {
    --spc-ink: var(--invert-fg, #f3ede1);
    --spc-muted: color-mix(in srgb, var(--invert-fg, #f3ede1) 72%, transparent);
    --spc-line: color-mix(in srgb, var(--invert-fg, #f3ede1) 24%, transparent);
    --spc-figure: var(--spark, var(--invert-fg, #f3ede1));
    --spc-chip-ink: var(--invert-bg, #1b1b1b);
}

.space-cards .spc-head { margin: 0 0 2.6em; max-width: 44em; }
.space-cards .spc-head > * { margin: 0; }
.space-cards .spc-eyebrow { font-size: .78em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; color: var(--spc-muted); }
.space-cards .spc-title { margin-top: .45em; margin-left: -.04em; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 300; font-size: 3.2em; line-height: 1; letter-spacing: -.03em; text-wrap: balance; }
.space-cards .spc-title em { font-style: italic; color: var(--spc-accent); }
.space-cards.spc-tone-dark .spc-title em { color: inherit; color: var(--spark, inherit); }
.space-cards .spc-lead { margin-top: 1em; max-width: 34em; font-size: 1.1em; line-height: 1.5; color: var(--spc-muted); text-wrap: pretty; }
.space-cards.spc-align-center .spc-head { margin-left: auto; margin-right: auto; text-align: center; }

.space-cards .spc-track { --row-gap: 2.4em var(--spc-gap); --row-item: calc(var(--spc-share, 31) * 1%); margin: 0; padding: 0; }
.space-cards.spc-flow-rail .spc-track, .space-cards.spc-flow-strip .spc-track { --row-flow: row nowrap; --row-flow-narrow: row nowrap; }
.space-cards.spc-flow-rail .spc-track { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .4em; }
.space-cards.spc-flow-rail .spc-track::-webkit-scrollbar { display: none; }
.space-cards.spc-flow-rail .spc-card { scroll-snap-align: start; }
.space-cards.spc-flow-strip .spc-track { overflow: visible; }
.space-cards .spc-track > .spc-card { flex-shrink: 0; flex-grow: 0; }
.space-cards.spc-flow-grid .spc-track > .spc-card { flex-grow: 1; }

.space-cards .spc-card { position: relative; display: block; margin: 0; color: inherit; -webkit-text-decoration: none; text-decoration: none; }
.space-cards .spc-media { position: relative; overflow: hidden; margin: 0; aspect-ratio: var(--spc-aspect); border-radius: calc(.2 * 1em); border-radius: calc(var(--spc-radius, .2) * 1em); background: var(--spc-line); }
.space-cards .spc-photo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: 0; }
.space-cards .spc-photo img, .space-cards .spc-photo picture { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transform: scale(1.02); transition: transform 1.4s cubic-bezier(.4, 0, .2, 1); transition: transform 1.4s var(--ease, cubic-bezier(.2, .7, .15, 1)); }
.space-cards .spc-photo-second { opacity: 0; transition: opacity .8s cubic-bezier(.4, 0, .2, 1); transition: opacity .8s var(--ease, ease); }
.space-cards.spc-swap-1 .spc-card:hover .spc-photo-second, .space-cards.spc-swap-1 .spc-card:focus-visible .spc-photo-second { opacity: 1; }
.space-cards .spc-card:hover .spc-photo img { transform: scale(1.07); }
.space-cards .spc-n {
    position: absolute; left: .9em; top: .9em; z-index: 2;
    padding: .45em .7em .42em; border-radius: 99em;
    background: var(--spc-paper); color: var(--spc-chip-ink);
    font-size: .76em; font-weight: 600; line-height: 1; letter-spacing: .08em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}

.space-cards .spc-body { padding: 1.3em 0 0; }
.space-cards .spc-body > * { margin: 0; }
.space-cards .spc-kicker { font-size: .78em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; color: var(--spc-muted); }
.space-cards .spc-name { margin-top: .35em; margin-left: -.03em; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-style: italic; font-weight: 300; font-size: 2.2em; line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
.space-cards .spc-figures { --row-gap: 0; --row-item: 0; --row-flow-narrow: row nowrap; list-style: none; margin-top: 1.1em; padding: .9em 0 0; border-top: 1px solid var(--spc-line); }
.space-cards .spc-figure { margin: 0; padding: 0 .8em 0 0; }
.space-cards .spc-figure + .spc-figure { padding-left: .8em; border-left: 1px solid var(--spc-line); }
.space-cards .spc-value { display: block; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 200; font-size: 2.3em; line-height: 1; letter-spacing: -.03em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--spc-figure); }
.space-cards .spc-figure-label { display: block; margin-top: .45em; font-size: .72em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.25; color: var(--spc-muted); }
.space-cards .spc-note { margin-top: 1em; font-size: 1em; line-height: 1.5; color: var(--spc-muted); text-wrap: pretty; }
.space-cards .spc-more { margin-top: 1.1em; font-size: .95em; font-weight: 500; line-height: 1.2; }
.space-cards .spc-cta { padding-bottom: .15em; border-bottom: 1px solid var(--spc-line); transition: border-color .3s cubic-bezier(.4, 0, .2, 1); transition: border-color .3s var(--ease, ease); }
.space-cards .spc-arrow { display: inline-block; margin-left: .45em; font-size: .9em; vertical-align: -.05em; transition: transform .45s cubic-bezier(.4, 0, .2, 1); transition: transform .45s var(--ease, ease); }
.space-cards .spc-card:hover .spc-cta { border-bottom-color: currentColor; }
.space-cards .spc-card:hover .spc-arrow { transform: translate(.2em, -.2em); }
.space-cards .spc-card:focus-visible { outline: .125rem solid var(--spc-accent); outline-offset: .5em; }
.space-cards.spc-tone-dark .spc-card:focus-visible { outline-color: currentColor; outline-color: var(--spark, currentColor); }

@container (max-width: 40rem) {
    .space-cards .spc-track { --row-item: 78%; }
    .space-cards.spc-flow-grid .spc-track { --row-item: auto; }
    .space-cards .spc-title { font-size: 2.4em; }
}

/* blocks/spielplan-board.css */
[data-board-flap] .flap-cell, [data-board-heading] .flap-cell, [data-board-clock] .flap-cell {
    display: inline-block; position: relative; min-width: .62em; text-align: center;
    background: rgba(2, 2, 2, 0.06);
    background: var(--board-leaf, rgba(2, 2, 2, 0.06));
    background: color-mix(in srgb, #222 6%, transparent);
    padding: .06em .02em; margin-right: .04em; color: inherit;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}

@supports (color: color-mix(in lch, red, blue)) {
[data-board-flap] .flap-cell, [data-board-heading] .flap-cell, [data-board-clock] .flap-cell {
    background: var(--board-leaf, color-mix(in srgb, var(--ink, #111) 6%, transparent));
}
}
[data-board-flap] .flap-cell::after, [data-board-heading] .flap-cell::after, [data-board-clock] .flap-cell::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
    background: #f9f9f9;
    background: var(--board-hinge, var(--page-bg, #fff)); opacity: .7;
}
[data-board-flap] .flap-cell.is-space, [data-board-heading] .flap-cell.is-space, [data-board-clock] .flap-cell.is-space { background: none; min-width: .3em; }
[data-board-flap] .flap-cell.is-space::after, [data-board-heading] .flap-cell.is-space::after, [data-board-clock] .flap-cell.is-space::after { display: none; }
[data-board-flap] .flap-cell.flapping, [data-board-heading] .flap-cell.flapping, [data-board-clock] .flap-cell.flapping { opacity: .75; transform: rotateX(28deg); }
[data-board-sort] { cursor: pointer; }
[data-board-sort][aria-pressed="true"] { background: #007b9a; background: var(--board-pressed, var(--accent, #000)); color: rgb(240, 251, 255); color: color(display-p3 0.94504 0.9821 1); color: oklch(from #007b9a clamp(0.16, (0.6 - l) * 99, 0.98) calc(c * 0.15) h); color: var(--board-pressed-ink, var(--on-accent, #fff)); }
html.respect-reduced-motion [data-board-flap] .flap-cell, html.respect-reduced-motion [data-board-heading] .flap-cell, html.respect-reduced-motion [data-board-clock] .flap-cell { transform: none !important; }

/* blocks/stackanim.css */

.stackanim {
    --sa-frame: var(--paper, #fff);
    --sa-line: var(--line, #e3e8ee);
    --sa-accent: var(--accent, #635bff);
    --sa-ink: var(--ink, #0a2540);
    --sa-muted: var(--muted, #425466);
    --sa-card-w: 58%;
    --sa-aspect: 16 / 10;
    width: 100%;
    color: #222;
    color: var(--sa-ink);
}

.stackanim .sa-label {
    width: var(--sa-card-w); max-width: 100%; margin: 0 auto 1.4rem;
    color: var(--sa-muted);
    font: 600 .72rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 .72rem/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .2em; text-transform: uppercase;
}
.stackanim.sa-align-center .sa-label { text-align: center; }
.stackanim.sa-align-right .sa-label { text-align: right; }

.stackanim .sa-track { position: relative; }
.stackanim.sa-pin-true .sa-track { min-height: 100vh; }
.stackanim .sa-stage { position: relative; padding-top: 0; padding-bottom: 5.25rem; }

.stackanim .sa-deck { position: relative; width: var(--sa-card-w); max-width: 100%; margin-left: auto; margin-right: auto; perspective: 140cqi; }
.stackanim .sa-card {
    position: absolute; left: 0; top: 0; width: 100%; margin: 0;
    transform-origin: 50% 0;
    will-change: transform, opacity;
    transform: translateY(calc(var(--n) * 4 * -.24cqi)) scale(calc(1 - var(--n) * .035));
    transform: translateY(calc(var(--n) * var(--sa-depth, 4) * -.24cqi)) scale(calc(1 - var(--n) * .035));
    opacity: calc(1 - var(--n) * .09);
    z-index: calc(20 - var(--n));
}
.stackanim .sa-card:first-child { position: relative; }
.stackanim .sa-card:nth-child(1) { --n: 0; }
.stackanim .sa-card:nth-child(2) { --n: 1; }
.stackanim .sa-card:nth-child(3) { --n: 2; }
.stackanim .sa-card:nth-child(4) { --n: 3; }
.stackanim .sa-card:nth-child(5) { --n: 4; }
.stackanim .sa-card:nth-child(6) { --n: 5; }
.stackanim .sa-card:nth-child(7) { --n: 6; }
.stackanim .sa-card:nth-child(8) { --n: 7; }
.stackanim.sa-live .sa-card { transform: none; opacity: 1; }

.stackanim .sa-shot { margin: 0; border-radius: calc(1.2 * 1cqi); border-radius: calc(var(--sa-radius, 1.2) * 1cqi); overflow: hidden; background: color-mix(in srgb, var(--sa-ink) 3%, var(--sa-frame)); }
.stackanim .sa-shot img, .stackanim .sa-shot picture { display: block; width: 100%; aspect-ratio: var(--sa-aspect); -o-object-fit: cover; object-fit: cover; -o-object-position: top center; object-position: top center; }

.stackanim .sa-cap {
    position: absolute; left: 0; right: 0; top: 100%; margin: 1.2rem 0 0;
    text-align: center; color: var(--sa-ink);
    font: 500 .95rem/1.4 'Open Sans', Arial, Helvetica, sans-serif;
    font: 500 .95rem/1.4 var(--font-display, system-ui, sans-serif); letter-spacing: .005em;
    text-wrap: balance;
    opacity: 0; transition: opacity .3s ease;
}
.stackanim .sa-card.is-current .sa-cap { opacity: 1; }
.stackanim:not(.sa-live) .sa-card:first-child .sa-cap { opacity: 1; }
.stackanim.sa-captions-hidden .sa-cap { display: none; }
.stackanim.sa-captions-always .sa-cap { opacity: 1; position: relative; top: auto; }

.stackanim .sa-progress {
    position: absolute; left: 50%; bottom: 0; translate: -50% 0;
    width: min(var(--sa-card-w), 100%);
    --row-flow: row nowrap; --row-gap: 1.1rem; --p: 0;
    align-items: center;
}
.stackanim .sa-bar { flex: 1 1 auto; position: relative; height: .2rem; border-radius: .2rem; overflow: hidden; background: rgba(5, 5, 5, 0.15); }

@supports (color: color-mix(in lch, red, blue)) {
.stackanim .sa-bar { background: color-mix(in srgb, var(--sa-ink) 15%, transparent); }
}
.stackanim .sa-fill { position: absolute; top: 0; right: auto; bottom: 0; left: 0; width: calc(var(--p) * 100%); border-radius: inherit; background: var(--sa-accent); transition: width .1s linear; }
.stackanim .sa-count { flex: 0 0 auto; color: var(--sa-muted); font: 600 .72rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 600 .72rem/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .1em; white-space: nowrap; }
.stackanim .sa-now { color: var(--sa-accent); font-weight: 700; }
.stackanim .sa-total { font-style: normal; color: color-mix(in srgb, var(--sa-muted) 65%, transparent); }
.stackanim.sa-progress-false .sa-progress { display: none; }

.stackanim.sa-size-narrow { --sa-card-w: 44%; }
.stackanim.sa-size-medium { --sa-card-w: 58%; }
.stackanim.sa-size-wide { --sa-card-w: 76%; }
.stackanim.sa-size-full { --sa-card-w: 100%; }
.stackanim.sa-aspect-wide { --sa-aspect: 16 / 10; }
.stackanim.sa-aspect-video { --sa-aspect: 16 / 9; }
.stackanim.sa-aspect-square { --sa-aspect: 1 / 1; }
.stackanim.sa-aspect-portrait { --sa-aspect: 4 / 5; }
.stackanim.sa-shadow-soft .sa-shot {
    box-shadow: 0 .3cqi .7cqi rgba(3, 3, 3, 0.1),
                0 1.6cqi 3.6cqi rgba(5, 5, 5, 0.14);
}

@supports (color: color-mix(in lch, red, blue)) {
.stackanim.sa-shadow-soft .sa-shot {
    box-shadow: 0 .3cqi .7cqi color-mix(in srgb, var(--sa-ink) 10%, transparent),
                0 1.6cqi 3.6cqi color-mix(in srgb, var(--sa-ink) 14%, transparent);
}
}
.stackanim.sa-shadow-deep .sa-shot {
    box-shadow: 0 .4cqi 1cqi rgba(4, 4, 4, 0.13),
                0 2.8cqi 6cqi -1cqi rgba(11, 11, 11, 0.32);
}

@supports (color: color-mix(in lch, red, blue)) {
.stackanim.sa-shadow-deep .sa-shot {
    box-shadow: 0 .4cqi 1cqi color-mix(in srgb, var(--sa-ink) 13%, transparent),
                0 2.8cqi 6cqi -1cqi color-mix(in srgb, var(--sa-ink) 32%, transparent);
}
}

@container (max-width: 30rem) {
    .stackanim { --sa-card-w: 92%; }
}

/* blocks/stage.css */
/* blocks/stage.css — the full-screen stage of behaviors/openOnStage.js. Closed, it is not there; open, it fills the screen
   at the z-index the site gives it (under a top bar, over the page) and scrolls one item, as a page of its own. An item's
   landing (its piece marked [data-stage-landing]) is its opening screen: laid over the stage's first screen, under the
   item, which starts below it. Absolute, it scrolls away with the item; given `position: fixed` it stays behind as the
   item scrolls over it. What it does on the way (shrinks into a box, fades) is keys on the item's scroll track.
   Knobs, bare numbers, each a control of the Stage look (looks/stage.json): --stage-top (room above an item with no
   opening screen, clear of a top bar, em) · --stage-left / --stage-right (the item's box, % of the screen's width) · --stage-narrow-sides (both sides on a phone and a tablet; none = the desktop's) ·
   --stage-corners (vw) · --stage-opening (the landing's height, the first screen, vh) · the aside, a piece of the item
   marked [data-stage-aside] that a desktop pins as a card at the left: --stage-aside-width · --stage-aside-inset ·
   --stage-aside-padding (vw) · --stage-close-top · --stage-close-size-narrow (em). The flight's length and easing are
   the behavior's flight / flightEase (it writes --stage-morph / --stage-ease) */
[data-stage="closed"] { display: none !important; }
[data-stage] { overflow: auto; }   /* a scroller even closed: a track inside it finds it (engine.js scrollerAround) */
/* !important: the stage is the whole screen whatever box it was authored as (a margin, corners, a width) */
[data-stage="open"] {
    position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    width: auto !important; height: auto !important; max-width: none !important; max-height: none !important;
    margin: 0 !important; border-radius: 0 !important; display: block !important;
    overscroll-behavior: contain; background: #f9f9f9; background: var(--page-bg, Canvas); color: #222; color: var(--ink, CanvasText);
    /* the open item's box is the stage's content box, and the stage is its measure: the item's lattice (gutters, row
       pitch) reads 100cqw as the item's width, not the screen's, so its cells never run past its right edge */
    container-type: inline-size;
    padding: 0 calc(0 * 1%) 0 calc(0 * 1%) !important;
    padding: 0 calc(var(--stage-right, 0) * 1%) 0 calc(var(--stage-left, 0) * 1%) !important;
}
@media (max-width: 64em) {
    [data-stage="open"] {
        padding-left: calc(0 * 1%) !important;
        padding-right: calc(0 * 1%) !important;
        padding-left: calc(var(--stage-narrow-sides, var(--stage-left, 0)) * 1%) !important;
        padding-right: calc(var(--stage-narrow-sides, var(--stage-right, 0)) * 1%) !important;
    }
}
[data-stage] > [hidden] { display: none !important; }   /* an item's own display (a grid section) would outrank [hidden] */
/* static: its landing is placed on the stage, not on the item */
[data-stage] > :not([data-stage-close]) {
    position: static; background: #f9f9f9; background: var(--page-bg, Canvas); overflow: clip;   /* a bleeding piece stops at its edge */
    margin: calc(0 * 1em) 0 0;
    margin: calc(var(--stage-top, 0) * 1em) 0 0;
    border-radius: calc(0 * (1 * var(--pe-vw)));
    border-radius: calc(var(--stage-corners, 0) * (1 * var(--pe-vw)));
    border-radius: calc(0 * calc(1 * var(--pe-vw)));
    border-radius: calc(var(--stage-corners, 0) * calc(1 * var(--pe-vw)));
}
[data-stage] > [data-stage-opening] { margin-top: calc(100 * 1vh); margin-top: calc(var(--stage-opening, 100) * 1vh); }
[data-stage] [data-stage-landing] {
    position: absolute; top: 0; left: 0; z-index: -1; width: 100%; overflow: clip;   /* corners keyed on it clip what it shows */
    height: calc(100 * 1vh) !important;
    height: calc(var(--stage-opening, 100) * 1vh) !important; min-height: 0 !important; margin: 0 !important;
}
/* the opener drawn in an empty landing fills it, wherever and however the opener stood (a reel's stack, its shape) */
[data-stage-copy] {
    position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
    margin: 0 !important; transform: none !important; translate: none !important; scale: none !important; rotate: none !important;
    opacity: 1 !important; visibility: visible !important;
    border-radius: 0 !important;   /* a whole screen: the card's corners go in the flight */
}
/* a picture of the opener, nothing in it to press; the copy itself stays hit-testable, so what reads on it sees its colour */
[data-stage-copy] * { pointer-events: none; }
/* a desktop pins the aside at the left of the screen as a card; its own box (a bleed, a padding, a height) gives way */
@media (min-width: 64.0625em) {
    [data-stage="open"] [data-stage-aside] {
        position: fixed !important; z-index: 2; top: 50%; left: calc(2 * (1 * var(--pe-vw))); left: calc(var(--stage-aside-inset, 2) * (1 * var(--pe-vw))); left: calc(2 * calc(1 * var(--pe-vw))); left: calc(var(--stage-aside-inset, 2) * calc(1 * var(--pe-vw)));
        width: calc(34 * (1 * var(--pe-vw))) !important;
        width: calc(var(--stage-aside-width, 34) * (1 * var(--pe-vw))) !important;
        width: calc(34 * calc(1 * var(--pe-vw))) !important;
        width: calc(var(--stage-aside-width, 34) * calc(1 * var(--pe-vw))) !important; height: auto !important;
        max-height: calc(100vh - 2 * (2 * var(--pe-vw)));
        max-height: calc(100vh - var(--stage-aside-inset, 2) * (2 * var(--pe-vw)));
        max-height: calc(100vh - 2 * calc(2 * var(--pe-vw)));
        max-height: calc(100vh - var(--stage-aside-inset, 2) * calc(2 * var(--pe-vw)));   /* desktop only: vh is the screen there */
        margin: 0 !important; padding: calc(2.5 * (1 * var(--pe-vw))) !important; padding: calc(var(--stage-aside-padding, 2.5) * (1 * var(--pe-vw))) !important; padding: calc(2.5 * calc(1 * var(--pe-vw))) !important; padding: calc(var(--stage-aside-padding, 2.5) * calc(1 * var(--pe-vw))) !important; min-height: 0 !important;
        overflow: clip; translate: 0 -50%;
        background: #f9f9f9;
        background: var(--page-bg, Canvas); border-radius: calc(0 * (1 * var(--pe-vw))); border-radius: calc(var(--stage-corners, 0) * (1 * var(--pe-vw))); border-radius: calc(0 * calc(1 * var(--pe-vw))); border-radius: calc(var(--stage-corners, 0) * calc(1 * var(--pe-vw)));
    }
    @supports not (translate: 0) { [data-stage="open"] [data-stage-aside] { transform: translateY(-50%); } }
    /* a moved box round it (a nudge's translate) would become what the pinned card is placed in: it stays the screen's */
    [data-stage="open"] :has(> [data-stage-aside]) { translate: none !important; transform: none !important; }
    /* its type sizes as it did in the item (a text's cqi reads the item), not to the narrow card; its other pieces keep
       their own cells */
    [data-stage="open"] :is([data-stage-aside] :has(> :is([data-type=text], [data-type=headline], [data-type=richtext]))) {
        container-type: normal !important;
    }
    [data-stage="open"] [data-stage-aside]:not(.does-not-exist) {
        container-type: normal !important;
    }
    [data-stage="open"] :is([data-stage-aside], [data-stage-aside] :has(> :is([data-type=text], [data-type=headline], [data-type=richtext]))) {
        container-type: normal !important;
    }
}

/* the stage's own closer; a piece marked data-stage-close is the owner's, placed and styled as any piece */
[data-stage-close="auto"] {
    position: fixed; top: calc(4 * 1em); top: calc(var(--stage-close-top, 4) * 1em); right: 1em; z-index: 3;   /* clear of a top bar above the stage */
    width: 2.75rem; height: 2.75rem; width: max(2.6em, 2.75rem); height: max(2.6em, 2.75rem);   /* never under a finger's size */
    border: 0; border-radius: 50%;
    background: #222;
    background: var(--ink, CanvasText); color: #f9f9f9; color: var(--page-bg, Canvas);
    font: inherit; line-height: 1; cursor: pointer;
}
@media (max-width: 64em) { [data-stage-close="auto"] { font-size: calc(.8 * 1em); font-size: calc(var(--stage-close-size-narrow, .8) * 1em); } }   /* the type is larger there */
[data-stage-open] { cursor: pointer; }

::view-transition-group(stage-landing), ::view-transition-group(stage-cover) {
    animation-duration: var(--stage-morph);
    animation-timing-function: var(--stage-ease);
}
/* the opener and the landing have different shapes: each covers the growing box, cut at its edge (else the one of the
   other shape stands out of it, a ghost) */
::view-transition-group(stage-landing) { overflow: clip; }
::view-transition-old(stage-landing), ::view-transition-new(stage-landing) { height: 100%; -o-object-fit: cover; object-fit: cover; }
/* the corners ease with the growing box: the card's own (--stage-opener-radius, openOnStage writes it) to square, and
   back on the way home */
::view-transition-image-pair(stage-landing) {
    overflow: clip;
    animation: stage-corners var(--stage-morph) var(--stage-ease) both;
}
html[data-stage-morph="close"]::view-transition-image-pair(stage-landing) { animation-direction: reverse; }
@keyframes stage-corners { from { border-radius: 0; border-radius: var(--stage-opener-radius, 0); } to { border-radius: 0; } }
/* the sheet is the landing for most of the way: opening, the landing covers the opener early; closing, the opener shows
   only as the box lands (its late pieces, data-stage-late, held back until after) */
::view-transition-old(stage-landing), ::view-transition-new(stage-landing) { mix-blend-mode: normal; }
html[data-stage-morph="open"]::view-transition-old(stage-landing) { animation: none; }
html[data-stage-morph="open"]::view-transition-new(stage-landing) { animation: stage-fade-in calc(var(--stage-morph) * .35) ease-out both; }
html[data-stage-morph="close"]::view-transition-old(stage-landing) { animation: none; }
html[data-stage-morph="close"]::view-transition-new(stage-landing) { animation: stage-fade-in calc(var(--stage-morph) * .35) ease-in calc(var(--stage-morph) * .65) both; }
html[data-stage-morph="close"] [data-stage-late] { opacity: 0 !important; }
@keyframes stage-fade-in { from { opacity: 0; } }
/* the two covers are one logo: show one, moved and grown, never a cross-fade */
::view-transition-old(stage-cover) { animation: none; opacity: 0; }
::view-transition-new(stage-cover) { animation: none; }
/* no fade of the page either: opening, the page holds still under the growing box and the stage is there when it lands;
   closing, the page is back under the shrinking box */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
html[data-stage-morph="open"]::view-transition-new(root), html[data-stage-morph="close"]::view-transition-old(root) { opacity: 0; }

/* blocks/stat-band.css */

@font-face { font-family: 'bootstrap-icons'; src: url('/media/fonts/bootstrap-icons.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: block; }
.stat-band [class*="bi-"]::before { font-family: 'bootstrap-icons'; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; display: inline-block; }
.stat-band .bi-mortarboard::before { content: "\f6fe"; }
.stat-band .bi-people::before { content: "\f4d0"; }
.stat-band .bi-people-fill::before { content: "\f4cf"; }
.stat-band .bi-clock-history::before { content: "\f292"; }
.stat-band .bi-graph-up-arrow::before { content: "\f673"; }
.stat-band .bi-graph-up::before { content: "\f3f2"; }
.stat-band .bi-bar-chart-line-fill::before { content: "\f17b"; }
.stat-band .bi-lightning-charge-fill::before { content: "\f46c"; }
.stat-band .bi-patch-check-fill::before { content: "\f4b5"; }
.stat-band .bi-stars::before { content: "\f589"; }
.stat-band .bi-trophy::before { content: "\f5e7"; }
.stat-band .bi-award::before { content: "\f154"; }
.stat-band .bi-globe::before { content: "\f3ee"; }
.stat-band .bi-building::before { content: "\f1dd"; }
.stat-band .bi-speedometer2::before { content: "\f580"; }
.stat-band .bi-rocket-takeoff::before { content: "\f845"; }
.stat-band .bi-heart-pulse::before { content: "\f76f"; }
.stat-band .bi-hospital::before { content: "\f774"; }
.stat-band .bi-activity::before { content: "\f66b"; }

.stat-band {
    --sb-gap: max(1.25rem, min(3.2cqi, 2.75rem));
    --sb-gap: clamp(1.25rem, 3.2cqi, 2.75rem);
    --sb-rule: var(--line, #e3e8ee);
    --sb-value-size: max(2.4rem, min(7cqi, 4rem));
    --sb-value-size: clamp(2.4rem, 7cqi, 4rem);
    width: 100%;
}

.stat-band .sb-eyebrow {
    color: #007b9a;
    color: var(--accent, #635bff);
    font: 600 .72rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 .72rem/1 var(--font-mono, var(--font-display, system-ui));
    letter-spacing: .14em; text-transform: uppercase;
    margin-bottom: max(1rem, min(2.4cqi, 1.8rem));
    margin-bottom: clamp(1rem, 2.4cqi, 1.8rem);
}

.stat-band .sb-row { --row-gap: var(--sb-gap); --row-flow-narrow: row wrap; }   /* narrow: two to a row, not one tall column */
.stat-band .sb-stat > * + * { margin-top: .55rem; }

.stat-band .sb-ic {
    width: 2.25rem; height: 2.25rem; display: block; text-align: center; line-height: 2.25rem;
    font-size: 1.05rem; border-radius: 1vh; border-radius: var(--r-md, var(--radius, .625rem));
    color: #007b9a;
    color: var(--accent, #635bff);
    background: rgba(0, 14, 17, 0.11);
    background: color-mix(in srgb, #007b9a 11%, transparent);
    margin-bottom: .2rem;
}

@supports (color: color-mix(in lch, red, blue)) {
.stat-band .sb-ic {
    background: color-mix(in srgb, var(--accent, #635bff) 11%, transparent);
}
}

.stat-band .sb-value {
    color: #222;
    color: var(--ink, #0a2540);
    font: 600 var(--sb-value-size)/.92 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 var(--sb-value-size)/.92 var(--font-display, system-ui);
    letter-spacing: -.035em; font-feature-settings: tabular-nums lining-nums; font-variant-numeric: tabular-nums lining-nums;
}
.stat-band .sb-label {
    color: rgba(98, 98, 98, 0.9);
    color: color-mix(in srgb, #626262 90%, transparent);
    font: 400 max(.82rem, min(1.7cqi, .95rem))/1.35 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 max(.82rem, min(1.7cqi, .95rem))/1.35 var(--font-display, system-ui);
    font: 400 max(.82rem, min(1.7cqi, .95rem))/1.35 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 clamp(.82rem, 1.7cqi, .95rem)/1.35 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 clamp(.82rem, 1.7cqi, .95rem)/1.35 var(--font-display, system-ui);
    letter-spacing: -.005em; margin-left: 0; margin-right: 0; text-wrap: balance;
}

@supports (color: color-mix(in lch, red, blue)) {
.stat-band .sb-label {
    color: color-mix(in srgb, var(--muted, #425466) 90%, transparent);
}
}

.stat-band.sb-div-hairline .sb-stat + .sb-stat {
    padding-left: var(--sb-gap);
    border-left: .0625em solid var(--sb-rule);
}
.stat-band.sb-div-card .sb-row { --row-gap: max(.75rem, min(1.8cqi, 1.1rem)); --row-gap: clamp(.75rem, 1.8cqi, 1.1rem); }
.stat-band.sb-div-card .sb-stat {
    padding: max(1.1rem, min(2.6cqi, 1.6rem));
    padding: clamp(1.1rem, 2.6cqi, 1.6rem);
    background: rgb(241, 241, 241);
    background: color-mix(in srgb, #222 4%, #fafafa);
    border: .0625em solid var(--sb-rule);
    border-radius: calc(1vh * 1.6);
    border-radius: var(--r-lg, var(--radius, .875rem));
}

@supports (color: color-mix(in lch, red, blue)) {
.stat-band.sb-div-card .sb-stat {
    background: var(--surface, color-mix(in srgb, var(--ink, #0a2540) 3%, var(--paper, #fff)));
}
}

.stat-band.sb-w-regular .sb-value { font-weight: 400; letter-spacing: -.02em; }
.stat-band.sb-w-light .sb-value { font-weight: 300; letter-spacing: -.01em; }
.stat-band.sb-ic-small .sb-ic { width: 1.75rem; height: 1.75rem; line-height: 1.75rem; font-size: .85rem; }
.stat-band.sb-ic-large .sb-ic { width: 3.25rem; height: 3.25rem; line-height: 3.25rem; font-size: 1.6rem; }
.stat-band.sb-fig-small { --sb-value-size: max(1.8rem, min(5cqi, 3rem)); --sb-value-size: clamp(1.8rem, 5cqi, 3rem); }
.stat-band.sb-fig-large { --sb-value-size: max(3rem, min(9.5cqi, 5.6rem)); --sb-value-size: clamp(3rem, 9.5cqi, 5.6rem); }

.stat-band.sb-align-center { text-align: center; }
.stat-band.sb-align-center .sb-eyebrow { text-align: center; }
.stat-band.sb-align-center .sb-row { justify-content: center; }
.stat-band.sb-align-center .sb-ic { margin-left: auto; margin-right: auto; }
.stat-band.sb-align-center.sb-div-hairline .sb-stat + .sb-stat { border-left-color: var(--sb-rule); }

@container (max-width: 30rem) {
    .stat-band.sb-div-hairline .sb-stat + .sb-stat {
        padding-left: 0; border-left: 0;
        padding-top: var(--sb-gap); border-top: .0625em solid var(--sb-rule);
    }
}

/* blocks/statement-collage.css */

.statement-collage {
    --sc-ink: var(--ink, #111);
    --sc-muted: var(--muted, #5f5f5f);
    --sc-accent: var(--accent, #2a2ad9);
    --sc-ground: var(--page-bg, #fff);
    position: relative; margin: 0; color: #222; color: var(--sc-ink); background: #f9f9f9; background: var(--sc-ground); container-type: inline-size;
    min-height: calc(150 * 1cqi);
    min-height: calc(var(--sc-height, 150) * 1cqi);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, 'Helvetica Neue', Arial, sans-serif); font-size: 1.125rem; font-size: var(--text-md, 1rem); line-height: 1.5;
}
.statement-collage.sc-tone-band { --sc-ink: var(--invert-fg, #f2efe9); --sc-muted: var(--muted-dark, #c9cbf5); --sc-accent: var(--mark, var(--accent-2, #d9f24a)); --sc-ground: var(--invert-bg, #2a2ad9); }
.statement-collage :where(h2, p, figure, figcaption) { margin: 0; }

.statement-collage .sc-pin { position: sticky; top: 0; z-index: 2; min-height: 100svh; padding-top: 30svh; padding-bottom: 6svh; }
.statement-collage.sc-tone-light .sc-pin { mix-blend-mode: difference; color: rgb(from var(--sc-ink) calc(255 - r) calc(255 - g) calc(255 - b)); }
.statement-collage.sc-tone-light .sc-pin :where(.sc-eyebrow, .sc-note) { color: rgb(from var(--sc-muted) calc(255 - r) calc(255 - g) calc(255 - b)); }
.statement-collage.sc-tone-light .sc-statement em { color: rgb(from var(--sc-accent) calc(255 - r) calc(255 - g) calc(255 - b)); }
.statement-collage .sc-eyebrow { margin-bottom: 1.4cqi; color: var(--sc-muted); font-size: 0.75rem; font-size: var(--text-xs, .8rem); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.statement-collage .sc-statement {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-poster, var(--font-display, sans-serif)); font-stretch: 100%; font-stretch: var(--poster-stretch, 100%); font-weight: 800; font-weight: var(--poster-weight, 800);
    font-size: calc(9 * 1cqi);
    font-size: calc(var(--sc-size, 9) * 1cqi); line-height: .84; letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance;
}
.statement-collage .sc-statement em { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-stretch: 100%; font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.035em; color: var(--sc-accent); }
.statement-collage .sc-note { max-width: 40ch; margin-top: 2.2cqi; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-size: 1.35rem; font-size: var(--text-lg, 1.35rem); line-height: 1.3; text-wrap: pretty; }
.statement-collage.sc-align-center :where(.sc-pin) { text-align: center; }
.statement-collage.sc-align-center .sc-note { margin-left: auto; margin-right: auto; }

.statement-collage .sc-field { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: none; }
.statement-collage.sc-tone-band .sc-field { z-index: 3; }
.statement-collage .sc-shot {
    position: absolute; left: min(calc(0 * 1%), calc(100% - 20 * 1cqi)); left: min(calc(var(--sc-x, 0) * 1%), calc(100% - var(--sc-w, 20) * 1cqi)); top: calc(0 * 1%); top: calc(var(--sc-y, 0) * 1%);
    width: calc(20 * 1cqi);
    width: calc(var(--sc-w, 20) * 1cqi); pointer-events: auto;
}
.statement-collage .sc-photo { overflow: hidden; border-radius: 1vh; border-radius: var(--radius, 0); background: rgb(241, 241, 241); background: color-mix(in srgb, #222 4%, #fafafa); background: var(--surface, #e6e2d8); box-shadow: 0 2cqi 4cqi -2.4cqi rgba(15, 15, 15, 0.45); box-shadow: 0 2cqi 4cqi -2.4cqi color-mix(in srgb, #222 45%, transparent); }

@supports (color: color-mix(in lch, red, blue)) {
.statement-collage .sc-photo { box-shadow: 0 2cqi 4cqi -2.4cqi color-mix(in srgb, var(--ink, #111) 45%, transparent); }
}
.statement-collage .sc-photo :where(picture, img) { display: block; width: 100%; height: auto; }
.statement-collage.sc-grade-mono .sc-photo img { filter: grayscale(1) contrast(1.08); }
.statement-collage.sc-grade-duo .sc-photo { background: #007b9a; background: var(--accent, #2a2ad9); }
.statement-collage.sc-grade-duo .sc-photo img { filter: grayscale(1) contrast(1.2); mix-blend-mode: screen; }
.statement-collage .sc-photo img { transition: filter .5s ease, scale .8s cubic-bezier(.4, 0, .2, 1); transition: filter .5s ease, scale .8s var(--ease, ease); }
.statement-collage .sc-shot:hover .sc-photo img { filter: none; mix-blend-mode: normal; scale: 1.04; }
.statement-collage .sc-caption { margin-top: .6em; color: var(--sc-muted); font-size: 0.75rem; font-size: var(--text-xs, .8rem); font-weight: 600; letter-spacing: .08em; line-height: 1.35; text-transform: uppercase; }

html:not(.respect-reduced-motion) .statement-collage .sc-shot { animation: sc-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
html:not(.respect-reduced-motion) .statement-collage .sc-photo { animation: sc-open linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
@keyframes sc-drift { from { translate: 0 calc(0 * 16cqi); translate: 0 calc(var(--sc-d, 0) * 16cqi); } to { translate: 0 calc(0 * -16cqi); translate: 0 calc(var(--sc-d, 0) * -16cqi); } }
@keyframes sc-open { from { clip-path: inset(18% 0 0 0); scale: .92; } to { clip-path: inset(0 0 0 0); scale: 1; } }

@container (max-width: 40rem) {
    .statement-collage { min-height: calc(150 * 2.6cqi); min-height: calc(var(--sc-height, 150) * 2.6cqi); }
    .statement-collage .sc-pin { padding-top: 34svh; padding-bottom: 6svh; }
    .statement-collage .sc-statement { font-size: calc(9 * 1.75cqi); font-size: calc(var(--sc-size, 9) * 1.75cqi); }
    .statement-collage .sc-shot { width: min(calc(20 * 1.5cqi), 44cqi); width: min(calc(var(--sc-w, 20) * 1.5cqi), 44cqi); left: min(calc(0 * 1%), calc(100% - min(calc(20 * 1.5cqi), 44cqi))); left: min(calc(var(--sc-x, 0) * 1%), calc(100% - min(calc(var(--sc-w, 20) * 1.5cqi), 44cqi))); }
}

/* blocks/states.css */
/* A piece shown only in some states of its box: its showIn prop (words, rendered as data-show-in) names them. The box's
   behaviour writes the box's state as data-state: formPost busy / sent / failed (none yet = idle), countdown before /
   today / after (its preset starts the box at before), scheduleNow before / during / after, cartDrawer empty / filled.
   A piece out of its state is hidden with its cell, so it leaves no gap in a flow; a piece outside any box with a state
   shows only if its words include idle. */
[data-state="idle"] .plot:has(> [data-show-in]:not([data-show-in~="idle"])) { display: none !important; }
[data-state="busy"] .plot:has(> [data-show-in]:not([data-show-in~="busy"])) { display: none !important; }
[data-state="sent"] .plot:has(> [data-show-in]:not([data-show-in~="sent"])) { display: none !important; }
[data-state="failed"] .plot:has(> [data-show-in]:not([data-show-in~="failed"])) { display: none !important; }
[data-state="during"] .plot:has(> [data-show-in]:not([data-show-in~="during"])) { display: none !important; }
[data-state="empty"] .plot:has(> [data-show-in]:not([data-show-in~="empty"])) { display: none !important; }
[data-state="filled"] .plot:has(> [data-show-in]:not([data-show-in~="filled"])) { display: none !important; }
[data-state="before"] .plot:has(> [data-show-in]:not([data-show-in~="before"])) { display: none !important; }
[data-state="today"] .plot:has(> [data-show-in]:not([data-show-in~="today"])) { display: none !important; }
[data-state="after"] .plot:has(> [data-show-in]:not([data-show-in~="after"])) { display: none !important; }
[data-show-in]:not([data-show-in~="idle"]):not([data-state] *),
.plot:has(> [data-show-in]:not([data-show-in~="idle"]):not([data-state] *)),
[data-state="idle"] [data-show-in]:not([data-show-in~="idle"]):not(.does-not-exist),
[data-state="busy"] [data-show-in]:not([data-show-in~="busy"]):not(.does-not-exist),
[data-state="sent"] [data-show-in]:not([data-show-in~="sent"]):not(.does-not-exist),
[data-state="failed"] [data-show-in]:not([data-show-in~="failed"]):not(.does-not-exist),
[data-state="during"] [data-show-in]:not([data-show-in~="during"]):not(.does-not-exist),
[data-state="empty"] [data-show-in]:not([data-show-in~="empty"]):not(.does-not-exist),
[data-state="filled"] [data-show-in]:not([data-show-in~="filled"]):not(.does-not-exist),
[data-state="before"] [data-show-in]:not([data-show-in~="before"]):not(.does-not-exist),
[data-state="today"] [data-show-in]:not([data-show-in~="today"]):not(.does-not-exist),
[data-state="after"] [data-show-in]:not([data-show-in~="after"]):not(.does-not-exist) { display: none !important; }
[data-show-in]:not([data-show-in~="idle"]):not([data-state] *),
.plot:has(> [data-show-in]:not([data-show-in~="idle"]):not([data-state] *)),
[data-state="idle"] :is([data-show-in]:not([data-show-in~="idle"]), .plot:has(> [data-show-in]:not([data-show-in~="idle"]))),
[data-state="busy"] :is([data-show-in]:not([data-show-in~="busy"]), .plot:has(> [data-show-in]:not([data-show-in~="busy"]))),
[data-state="sent"] :is([data-show-in]:not([data-show-in~="sent"]), .plot:has(> [data-show-in]:not([data-show-in~="sent"]))),
[data-state="failed"] :is([data-show-in]:not([data-show-in~="failed"]), .plot:has(> [data-show-in]:not([data-show-in~="failed"]))),
[data-state="during"] :is([data-show-in]:not([data-show-in~="during"]), .plot:has(> [data-show-in]:not([data-show-in~="during"]))),
[data-state="empty"] :is([data-show-in]:not([data-show-in~="empty"]), .plot:has(> [data-show-in]:not([data-show-in~="empty"]))),
[data-state="filled"] :is([data-show-in]:not([data-show-in~="filled"]), .plot:has(> [data-show-in]:not([data-show-in~="filled"]))),
[data-state="before"] :is([data-show-in]:not([data-show-in~="before"]), .plot:has(> [data-show-in]:not([data-show-in~="before"]))),
[data-state="today"] :is([data-show-in]:not([data-show-in~="today"]), .plot:has(> [data-show-in]:not([data-show-in~="today"]))),
[data-state="after"] :is([data-show-in]:not([data-show-in~="after"]), .plot:has(> [data-show-in]:not([data-show-in~="after"]))) { display: none !important; }

/* blocks/station-halftone.css */
:where(.station-halftone) { margin: 0; width: 100%; }
:where(.station-halftone .sh-still) { margin: 0; overflow: clip; aspect-ratio: 4 / 3; aspect-ratio: var(--sh-ratio, 4 / 3); }
:where(.station-halftone .sh-still picture, .station-halftone .sh-still img) { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
:where(.station-halftone.sh-ratio-portrait) { --sh-ratio: 3 / 4; }
:where(.station-halftone.sh-ratio-square) { --sh-ratio: 1 / 1; }
:where(.station-halftone.sh-ratio-wide) { --sh-ratio: 16 / 9; }
:where(.station-halftone .sh-caption) {
    display: block; margin: .8em 0 0; margin: var(--sh-caption-gap, .8em) 0 0;
    color: #626262;
    color: var(--muted, #666);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, inherit); font-size: 0.6875rem; font-size: var(--text-label, .85em); letter-spacing: .06em; line-height: 1.4;
}

/* blocks/status-board.css */

.status-board {
    background: #0d0f14;
    background: var(--board-bg, var(--invert-bg, #0c0e10));
    color: #f4f6fb;
    color: var(--board-ink, var(--invert-fg, #f3ede1));
    border: 1px solid rgba(5, 5, 5, 0.14);
    border: 1px solid var(--board-line, var(--rule, rgba(255, 255, 255, .13)));
    border-radius: 1vh;
    border-radius: var(--radius, .125rem);
    box-shadow: 0 1.875rem 4.375rem -2.5rem rgba(0, 0, 0, .8);
    box-shadow: var(--board-shadow, 0 1.875rem 4.375rem -2.5rem rgba(0, 0, 0, .8));
    overflow: hidden;
}
.status-board-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: .85rem 1.2rem;
    border-bottom: 1px solid rgba(5, 5, 5, 0.14);
    border-bottom: 1px solid var(--board-line, var(--rule, rgba(255, 255, 255, .13)));
    background: linear-gradient(#0d0f14, #0d0f14);
    background: linear-gradient(var(--board-panel, var(--board-bg, var(--invert-bg, #0c0e10))), var(--board-bg, var(--invert-bg, #0c0e10)));
}
.status-board-title {
    font: 700 .625rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 700 .625rem/1 var(--font-mono, ui-monospace, Menlo, monospace); letter-spacing: .22em;
    color: #f4f6fb;
    color: var(--board-ink, var(--invert-fg, #f3ede1));
}
.status-board-stamp {
    font: 400 .625rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 400 .625rem/1 var(--font-mono, ui-monospace, Menlo, monospace); letter-spacing: .1em;
    color: #626262;
    color: var(--board-muted, var(--muted, #8b9490)); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}

.status-board-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-columns: repeat(var(--sb-cols, 4), minmax(0, 1fr));
    grid-gap: 1px;
    gap: 1px;
    background: rgba(5, 5, 5, 0.14);
    background: var(--board-line, var(--rule, rgba(255, 255, 255, .13)));
}
.status-cell {
    display: flex; flex-direction: column; gap: .55rem;
    padding: 1.15rem 1.2rem 1.25rem;
    background: #0d0f14;
    background: var(--board-bg, var(--invert-bg, #0c0e10));
    min-width: 0;
}
.status-cell--wide { grid-column: span 2; }
.status-cell-label {
    font: 400 .5625rem/1.3 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 400 .5625rem/1.3 var(--font-mono, ui-monospace, Menlo, monospace); letter-spacing: .2em; text-transform: uppercase;
    color: #626262;
    color: var(--board-muted, var(--muted, #8b9490));
}
.status-cell-value {
    font: 700 max(.95rem, min(calc(1.35 * var(--pe-vw)), 1.22rem))/1.1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 700 max(.95rem, min(calc(1.35 * var(--pe-vw)), 1.22rem))/1.1 var(--font-mono, ui-monospace, Menlo, monospace);
    font: 700 max(.95rem, min(calc(1.35 * var(--pe-vw)), 1.22rem))/1.1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 700 clamp(.95rem, calc(1.35 * var(--pe-vw)), 1.22rem)/1.1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 700 clamp(.95rem, calc(1.35 * var(--pe-vw)), 1.22rem)/1.1 var(--font-mono, ui-monospace, Menlo, monospace); letter-spacing: .02em;
    color: #f4f6fb;
    color: var(--board-ink, var(--invert-fg, #f3ede1));
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums; word-break: break-word;
}
.status-cell[data-state="open"]   .status-cell-value { color: #f4f6fb; color: var(--board-open, var(--board-ink, var(--invert-fg, #f3ede1))); }
.status-cell[data-state="closed"] .status-cell-value { color: #626262; color: var(--board-shut, var(--board-muted, var(--muted, #8b9490))); }

[data-field] .flap-cell {
    display: inline-block; position: relative; min-width: .6em; text-align: center;
    background: rgba(2, 2, 2, 0.07);
    background: color-mix(in srgb, #222 7%, transparent);
    padding: .08em .04em; margin-right: 1px;
    border-radius: 1px;
    border-radius: var(--sb-leaf-radius, 1px); color: inherit;
}

@supports (color: color-mix(in lch, red, blue)) {
[data-field] .flap-cell {
    background: color-mix(in srgb, var(--ink, #111) 7%, transparent);
}
}
[data-field] .flap-cell::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
    background: #f9f9f9;
    background: var(--page, var(--page-bg, #fff)); opacity: .8;
}
[data-field] .flap-cell.is-space { background: none; min-width: .3em; }
[data-field] .flap-cell.is-space::after { display: none; }
[data-field] .flap-cell.flapping { opacity: .78; transform: rotateX(26deg); }
.status-board [data-field] .flap-cell {
    background: #0d0f14;
    background: var(--board-panel, var(--board-bg, var(--invert-bg, #0c0e10)));
    color: #f4f6fb;
    color: var(--board-ink, var(--invert-fg, #f3ede1));
    padding: .12em .04em; min-width: .62em;
}
.status-board [data-field] .flap-cell::after { background: #0d0f14; background: var(--board-bg, var(--invert-bg, #0c0e10)); opacity: .85; }
.status-board [data-field] .flap-cell.flapping { color: #007b9a; color: var(--board-hot, var(--accent, #f0a94b)); opacity: 1; }
.status-cell[data-state="open"]   [data-field] .flap-cell { color: #f4f6fb; color: var(--board-open, var(--board-ink, var(--invert-fg, #f3ede1))); }
.status-cell[data-state="closed"] [data-field] .flap-cell { color: #626262; color: var(--board-shut, var(--board-muted, var(--muted, #8b9490))); }

@media (max-width: 768px) {
    .status-board-grid { --sb-cols: 2; }
    .status-cell--wide { grid-column: span 2; }
    .status-cell { padding: .95rem 1rem 1rem; }
}

/* blocks/stay-picker.css */

:where(.stay-picker) {
    --sp-ink: var(--ink, #0a0a0a);
    --sp-muted: var(--muted, #6b6b6b);
    --sp-line: var(--line, #e3e3e3);
    --sp-paper: var(--paper, #fff);
    --sp-surface: var(--surface, color-mix(in srgb, var(--ink, #0a0a0a) 5%, var(--paper, #fff)));
    --sp-accent: var(--accent, #635bff);
    --sp-on-accent: var(--on-accent, #fff);
    --sp-radius: 1;
    position: relative;
    width: 100%; margin: 0;
    padding: 2.4em 2.4em 2.2em;
    color: #222;
    color: var(--sp-ink);
    background: #fafafa;
    background: var(--sp-paper);
    border-radius: calc(1 * 1em);
    border-radius: calc(var(--sp-radius, 1) * 1em);
    box-shadow: 0 0 0 1px rgba(5, 5, 5, 0.14);
    box-shadow: 0 0 0 1px var(--sp-line);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif);
}
:where(.stay-picker.sp-shadow-soft) {
    box-shadow: 0 0 0 1px var(--sp-line),
                0 1px .125rem rgba(2, 2, 2, 0.06),
                0 1.2em 2.6em -1em rgba(7, 7, 7, 0.22);
}

@supports (color: color-mix(in lch, red, blue)) {
:where(.stay-picker.sp-shadow-soft) {
    box-shadow: 0 0 0 1px var(--sp-line),
                0 1px .125rem color-mix(in srgb, var(--sp-ink) 6%, transparent),
                0 1.2em 2.6em -1em color-mix(in srgb, var(--sp-ink) 22%, transparent);
}
}
:where(.stay-picker.sp-shadow-deep) {
    box-shadow: 0 0 0 1px var(--sp-line),
                0 1px .125rem rgba(3, 3, 3, 0.08),
                0 2.4em 4.6em -1.4em rgba(12, 12, 12, 0.36);
}

@supports (color: color-mix(in lch, red, blue)) {
:where(.stay-picker.sp-shadow-deep) {
    box-shadow: 0 0 0 1px var(--sp-line),
                0 1px .125rem color-mix(in srgb, var(--sp-ink) 8%, transparent),
                0 2.4em 4.6em -1.4em color-mix(in srgb, var(--sp-ink) 36%, transparent);
}
}

:where(.stay-picker .sp-head) { margin-bottom: 1.8em; }
:where(.stay-picker .sp-title) { margin: 0; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 500; font-size: 2.1em; line-height: 1.02; letter-spacing: -.015em; }
:where(.stay-picker .sp-lead) { margin: .8em 0 0; color: var(--sp-muted); font-size: 1em; line-height: 1.45; max-width: 38em; }

:where(.stay-picker .sp-hp), :where(.stay-picker .sp-hidden) { position: absolute; left: calc(-200 * var(--pe-vw)); top: 0; width: .1em; height: .1em; overflow: hidden; }

.stay-picker .sp-fields { --row-gap: 1.2em; --row-item: 11em; margin-bottom: 1.2em; }
:where(.stay-picker .sp-field) { display: block; }
:where(.stay-picker .sp-label) {
    display: block; margin-bottom: .55em;
    color: var(--sp-muted);
    font-size: .78em; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2;
}
:where(.stay-picker .sp-input) {
    display: block; width: 100%;
    padding: .85em 1em; min-height: 3.1em;
    font: inherit; font-size: 1em; line-height: 1.3;
    color: var(--sp-ink);
    background: var(--sp-surface);
    border: 1px solid transparent;
    border-radius: calc(1 * .4em);
    border-radius: calc(var(--sp-radius, 1) * .4em);
    box-shadow: inset 0 1px 0 rgba(2, 2, 2, 0.05);
    outline: none;
    transition: border-color .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s cubic-bezier(.4, 0, .2, 1), background .2s cubic-bezier(.4, 0, .2, 1);
    transition: border-color .2s var(--ease, ease), box-shadow .2s var(--ease, ease), background .2s var(--ease, ease);
}

@supports (color: color-mix(in lch, red, blue)) {
:where(.stay-picker .sp-input) {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sp-ink) 5%, transparent);
}
}
:where(.stay-picker .sp-input:hover) { border-color: var(--sp-line); }
:where(.stay-picker .sp-input:focus-visible) { border-color: var(--sp-accent); box-shadow: 0 0 0 .125rem rgba(0, 34, 43, 0.28); background: var(--sp-paper); }

@supports (color: color-mix(in lch, red, blue)) {
:where(.stay-picker .sp-input:focus-visible) { box-shadow: 0 0 0 .125rem color-mix(in srgb, var(--sp-accent) 28%, transparent); }
}

:where(.stay-picker .sp-choice) { margin: 0 0 1.2em; padding: 0; border: 0; min-width: 0; }
:where(.stay-picker .sp-choice .sp-label) { padding: 0; float: none; }

.stay-picker .sp-pills { --row-flow: row wrap; --row-flow-narrow: row wrap; --row-gap: .5em; --row-item: 0; }
:where(.stay-picker .sp-pill) {
    display: block; position: relative; cursor: pointer;
    min-width: 3.2em; padding: .8em 1.1em;
    text-align: center; line-height: 1.3;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--sp-line); border-radius: 99em;
    background: var(--sp-paper);
    transition: background .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1), border-color .2s cubic-bezier(.4, 0, .2, 1);
    transition: background .2s var(--ease, ease), color .2s var(--ease, ease), border-color .2s var(--ease, ease);
}
:where(.stay-picker .sp-pill:hover) { border-color: var(--sp-ink); }
:where(.stay-picker .sp-pill input), :where(.stay-picker .sp-room input), :where(.stay-picker .sp-switch input) { position: absolute; opacity: 0; width: .1em; height: .1em; top: 0; right: auto; bottom: auto; left: 0; margin: 0; }
:where(.stay-picker .sp-pill:has(input:checked)) { background: var(--sp-accent); border-color: var(--sp-accent); color: var(--sp-on-accent); }
:where(.stay-picker .sp-pill:has(input:focus-visible)) { box-shadow: 0 0 0 .125rem var(--sp-paper), 0 0 0 .25rem var(--sp-accent); }

:where(.stay-picker .sp-rooms) { border-top: 1px solid var(--sp-line); }
:where(.stay-picker .sp-room) {
    display: block; position: relative; cursor: pointer;
    padding: .9em 8.5em .9em 1em; margin: 0 -1em;
    border-bottom: 1px solid var(--sp-line);
    border-radius: calc(1 * .35em);
    border-radius: calc(var(--sp-radius, 1) * .35em);
    transition: background .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1);
    transition: background .2s var(--ease, ease), color .2s var(--ease, ease);
}
:where(.stay-picker .sp-room:hover) { background: var(--sp-surface); }
:where(.stay-picker .sp-room-name) { display: block; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 500; font-size: 1.35em; line-height: 1.1; letter-spacing: -.01em; }
:where(.stay-picker .sp-room-facts) { display: block; margin-top: .25em; color: var(--sp-muted); font-size: .9em; line-height: 1.35; }
:where(.stay-picker .sp-room-rate) { position: absolute; right: 1em; top: 50%; translate: 0 -50%; text-align: right; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-size: 1.35em; line-height: 1; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; white-space: nowrap; }
:where(.stay-picker .sp-room-rate i) { font-style: normal; font-size: .7em; color: var(--sp-muted); margin-right: .05em; vertical-align: .15em; }
:where(.stay-picker .sp-room-rate small) { display: block; margin-top: .3em; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-text, system-ui, sans-serif); font-size: .55em; color: var(--sp-muted); letter-spacing: .04em; }
:where(.stay-picker .sp-room:has(input:checked)) { background: var(--sp-accent); color: var(--sp-on-accent); border-bottom-color: var(--sp-accent); }
/* the room's words follow its input (a :has() on the room asked about its <i> and <small> restyled the page on every insertion) */
:where(.stay-picker .sp-room > input:checked ~ .sp-room-facts), :where(.stay-picker .sp-room > input:checked ~ .sp-room-rate i), :where(.stay-picker .sp-room > input:checked ~ .sp-room-rate small) { color: color-mix(in srgb, var(--sp-on-accent) 78%, transparent); }
:where(.stay-picker .sp-room:has(input:focus-visible)) { box-shadow: 0 0 0 .125rem var(--sp-paper), 0 0 0 .25rem var(--sp-accent); }

:where(.stay-picker .sp-switch) { display: block; position: relative; cursor: pointer; margin: 1.4em 0 0; padding-left: 4em; min-height: 1.7em; }
:where(.stay-picker .sp-switch-track) { position: absolute; left: 0; top: 0; width: 3em; height: 1.7em; border-radius: 99em; background: var(--sp-surface); box-shadow: inset 0 0 0 1px var(--sp-line); transition: background .2s cubic-bezier(.4, 0, .2, 1); transition: background .2s var(--ease, ease); }
:where(.stay-picker .sp-switch-knob) { position: absolute; top: .2em; left: .2em; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--sp-paper); box-shadow: 0 1px .125rem rgba(8, 8, 8, 0.25); transition: translate .2s cubic-bezier(.4, 0, .2, 1); transition: translate .2s var(--ease, ease); }

@supports (color: color-mix(in lch, red, blue)) {
:where(.stay-picker .sp-switch-knob) { box-shadow: 0 1px .125rem color-mix(in srgb, var(--sp-ink) 25%, transparent); }
}
:where(.stay-picker .sp-switch:has(input:checked) .sp-switch-track) { background: var(--sp-accent); box-shadow: none; }
:where(.stay-picker .sp-switch:has(input:checked) .sp-switch-knob) { translate: 1.3em 0; }
:where(.stay-picker .sp-switch:has(input:focus-visible) .sp-switch-track) { box-shadow: 0 0 0 .125rem var(--sp-paper), 0 0 0 .25rem var(--sp-accent); }
:where(.stay-picker .sp-switch-text) { display: block; line-height: 1.3; padding-top: .15em; }
:where(.stay-picker .sp-switch-text small) { display: block; margin-top: .2em; color: var(--sp-muted); font-size: .85em; }

:where(.stay-picker .sp-answer) { margin: 1.6em 0 1.6em; padding-top: 1.1em; border-top: 1px solid var(--sp-line); }
:where(.stay-picker .sp-row) { display: flow-root; margin: 0 0 .5em; color: var(--sp-muted); font-size: .95em; line-height: 1.4; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
:where(.stay-picker .sp-row > span:last-child) { float: right; margin-left: 1.2em; }
:where(.stay-picker .sp-total-row) { display: flow-root; margin: .9em 0 0; padding-top: .9em; border-top: 1px solid var(--sp-line); font-weight: 500; }
:where(.stay-picker .sp-total-row small) { color: var(--sp-muted); font-weight: 400; font-size: .85em; }
:where(.stay-picker .sp-total) { float: right; margin-left: 1.2em; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 500; font-size: 2em; line-height: 1; letter-spacing: -.01em; color: var(--sp-accent); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; transition: color .3s cubic-bezier(.4, 0, .2, 1); transition: color .3s var(--ease, ease); }
:where(.stay-picker .is-changed) { animation: sp-flash .7s cubic-bezier(.4, 0, .2, 1); animation: sp-flash .7s var(--ease, ease); }
@keyframes sp-flash { 0% { opacity: .35; translate: 0 .15em; } 100% { opacity: 1; translate: 0 0; } }
:where(.stay-picker .sp-includes) { margin: .8em 0 0; color: var(--sp-muted); font-size: .85em; line-height: 1.45; }
:where(.stay-picker .sp-closed) { display: none; margin: .6em 0 0; color: var(--sp-accent); font-weight: 500; font-size: .95em; line-height: 1.4; }
:where(.stay-picker.is-closed-dates .sp-closed) { display: block; }

.stay-picker .sp-foot { --row-gap: 1.4em; --row-item: 0; align-items: center; margin-top: 1.6em; }
:where(.stay-picker .sp-submit) {
    flex: 0 0 auto; cursor: pointer;
    padding: 1em 1.8em;
    font: inherit; font-size: .9em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1;
    color: var(--sp-on-accent);
    background: var(--sp-accent);
    border: 1px solid var(--sp-accent); border-radius: 99em;
    transition: background .2s cubic-bezier(.4, 0, .2, 1), border-color .2s cubic-bezier(.4, 0, .2, 1), transform .2s cubic-bezier(.4, 0, .2, 1);
    transition: background .2s var(--ease, ease), border-color .2s var(--ease, ease), transform .2s var(--ease, ease);
}
:where(.stay-picker .sp-submit:hover) { background: var(--sp-ink); border-color: var(--sp-ink); transform: none; }
:where(.stay-picker .sp-submit:focus-visible) { outline: .125rem solid var(--sp-accent); outline-offset: .1875rem; }
:where(.stay-picker.is-busy .sp-submit) { opacity: .6; pointer-events: none; }
:where(.stay-picker .sp-footnote) { flex: 1 1 10em; margin: 0; color: var(--sp-muted); font-size: .9em; line-height: 1.45; }

:where(.stay-picker .sp-error) { display: none; margin: 0 0 1em; color: var(--sp-accent); font-weight: 500; line-height: 1.45; }
:where(.stay-picker.is-failed .sp-error) { display: block; }
:where(.stay-picker .sp-success) { display: none; }
:where(.stay-picker.is-sent .sp-body) { display: none; }
:where(.stay-picker.is-sent .sp-head .sp-lead) { display: none; }
:where(.stay-picker.is-sent .sp-success) { display: block; }
:where(.stay-picker .sp-success-title) { margin: 0; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 500; font-size: 1.6em; line-height: 1.1; letter-spacing: -.01em; color: var(--sp-accent); }
:where(.stay-picker .sp-success-line) { margin: .9em 0 0; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-size: 1.25em; line-height: 1.3; letter-spacing: -.01em; }
:where(.stay-picker .sp-success-text) { margin: .8em 0 0; color: var(--sp-muted); line-height: 1.5; max-width: 40em; }

:where(.stay-picker.sp-tone-tint) { --sp-paper: color-mix(in srgb, var(--accent, #635bff) 6%, var(--paper, #fff)); --sp-surface: var(--paper, #fff); }
:where(.stay-picker.sp-tone-dark) {
    --sp-paper: var(--invert-bg, #0c0e10); --sp-ink: var(--invert-fg, #f3ede1);
    --sp-muted: color-mix(in srgb, var(--invert-fg, #f3ede1) 62%, transparent);
    --sp-line: color-mix(in srgb, var(--invert-fg, #f3ede1) 18%, transparent);
    --sp-surface: color-mix(in srgb, var(--invert-fg, #f3ede1) 8%, transparent);
    --sp-accent: var(--invert-fg, #f3ede1); --sp-on-accent: var(--invert-bg, #0c0e10);
}

:where(.stay-picker.sp-align-center .sp-head) { text-align: center; }

@container (max-width: 30em) {
    :where(.stay-picker) { padding: 1.6em 1.3em 1.5em; }
    :where(.stay-picker .sp-fields), :where(.stay-picker .sp-foot) { --row-item: auto; }
    :where(.stay-picker .sp-title) { font-size: 1.7em; }
    :where(.stay-picker .sp-room) { margin: 0; padding: .9em .6em 3em; }
    :where(.stay-picker .sp-room-rate) { top: auto; bottom: .8em; translate: none; }
}

/* blocks/stylist-looks.css */

.stylist-looks {
    --stl-ink: var(--ink, #151316);
    --stl-muted: var(--muted, #5f5a60);
    --stl-line: var(--line, #d9d4cd);
    --stl-accent: var(--accent-text, var(--accent, #5a3dc8));
    --stl-crop: 4 / 5;
    margin: 0; color: #222; color: var(--stl-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, 'Helvetica Neue', Arial, sans-serif); font-size: 1.125rem; font-size: var(--text-md, 1rem); line-height: 1.4;
}
.stylist-looks :where(h2, h3, p, ol, li) { margin: 0; padding: 0; }
.stylist-looks.stl-crop-tall { --stl-crop: 2 / 3; }
.stylist-looks.stl-crop-square { --stl-crop: 1 / 1; }

.stylist-looks .stl-head { margin-bottom: 4cqi; }
.stylist-looks :where(.stl-eyebrow, .stl-credit, .stl-index) { font-size: 0.75rem; font-size: var(--text-xs, .78rem); font-weight: 560; letter-spacing: .12em; text-transform: uppercase; line-height: 1.35; }
.stylist-looks .stl-eyebrow { color: var(--stl-muted); }
.stylist-looks .stl-title { margin-top: .5em; max-width: 14ch; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 400; font-size: 3rem; font-size: var(--text-xl, 3rem); line-height: .98; letter-spacing: -.015em; text-wrap: balance; }
.stylist-looks .stl-lead { margin-top: 1em; max-width: 46ch; color: var(--stl-muted); text-wrap: pretty; }
.stylist-looks.stl-align-center .stl-head { text-align: center; }
.stylist-looks.stl-align-center :where(.stl-title, .stl-lead) { margin-left: auto; margin-right: auto; }

.stylist-looks .stl-track { list-style: none; --row-gap: 2.4cqi; }
.stylist-looks .stl-look { position: relative; }
.stylist-looks .stl-index { display: block; margin-bottom: .8em; color: var(--stl-muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.stylist-looks .stl-shot { position: relative; margin: 0; aspect-ratio: var(--stl-crop); overflow: hidden; background: var(--stl-line); }
.stylist-looks .stl-shot img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: filter .6s ease, scale 1.2s cubic-bezier(.2, .7, .2, 1); }
.stylist-looks:where(.stl-mono-1) .stl-shot img { filter: grayscale(1) contrast(1.05); }
.stylist-looks .stl-look:hover .stl-shot img { filter: none; scale: 1.05; }
.stylist-looks .stl-name { margin-top: .6em; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 400; font-size: 1.6rem; font-size: var(--text-lg, 1.6rem); line-height: 1.05; letter-spacing: -.01em; }
.stylist-looks .stl-credit { margin-top: .5em; color: var(--stl-muted); }
.stylist-looks .stl-link.btn {
    position: static; margin: .9em 0 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--stl-ink);
    font-size: 0.75rem;
    font-size: var(--text-xs, .78rem); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; box-shadow: inset 0 -1px 0 currentColor;
    transition: color .25s ease, padding .35s cubic-bezier(.2, .7, .2, 1);
}
.stylist-looks .stl-link.btn::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.stylist-looks .stl-look:hover .stl-link.btn { color: var(--stl-accent); padding-right: 1.2em; transform: none; }
.stylist-looks .stl-link.btn:focus-visible { outline: .125rem solid var(--stl-accent); outline-offset: .25rem; }

.stylist-looks.stl-arrange-rail .stl-track {
    --row-flow: row nowrap; --row-flow-narrow: row nowrap; --row-item: auto;
    width: -moz-max-content;
    width: max-content; max-width: 100%; max-width: var(--stl-max, 100%); overflow-x: auto; overflow-x: var(--stl-overflow, auto); scroll-snap-type: x mandatory; padding-bottom: 1.2cqi;
}
.stylist-looks.stl-arrange-rail .stl-look { flex: 0 0 calc(24 * 1cqi); flex: 0 0 calc(var(--stl-look, 24) * 1cqi); scroll-snap-align: start; }
.stylist-looks.stl-arrange-rail .stl-look:nth-child(even) .stl-shot { aspect-ratio: 3 / 4; }

.stylist-looks.stl-arrange-grid .stl-track { --row-item: 14em; --row-gap: 5cqi 2.4cqi; align-items: flex-start; }
.stylist-looks.stl-arrange-grid .stl-look:nth-child(even) { margin-top: 8cqi; }

@container (max-width: 46rem) {
    .stylist-looks .stl-title { font-size: min(2.4rem, 12cqi); font-size: min(var(--text-xl, 2.4rem), 12cqi); }
    .stylist-looks.stl-arrange-rail .stl-look { flex-basis: 66cqi; }
    .stylist-looks.stl-arrange-grid .stl-track { --row-item: 40%; --row-flow-narrow: row wrap; }
}

/* blocks/stylist-roster.css */

.stylist-roster {
    --str-ink: var(--ink, #151316);
    --str-muted: var(--muted, #5f5a60);
    --str-line: var(--line, #d9d4cd);
    --str-plate: var(--paper, #faf9f6);
    --str-accent: var(--accent, #b7a3f6);
    --str-accent-text: var(--accent-text, var(--accent, #5a3dc8));
    --str-r: calc(var(--str-radius, .5) * 1cqi);
    margin: 0; color: #222; color: var(--str-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, 'Helvetica Neue', Arial, sans-serif); font-size: 1.125rem; font-size: var(--text-md, 1rem); line-height: 1.45;
}
.stylist-roster.str-tone-dark {
    --str-ink: var(--invert-fg, #efede9); --str-muted: color-mix(in srgb, var(--invert-fg, #efede9) 64%, transparent);
    --str-line: color-mix(in srgb, var(--invert-fg, #efede9) 18%, transparent); --str-plate: color-mix(in srgb, var(--invert-fg, #efede9) 6%, var(--invert-bg, #131114));
    --str-accent-text: var(--accent, #b7a3f6);
}
.stylist-roster :where(h2, h3, p, ol, li) { margin: 0; padding: 0; }
.stylist-roster .str-list { list-style: none; }

.stylist-roster .str-head { margin-bottom: 4.5cqi; }
.stylist-roster :where(.str-eyebrow, .str-facts, .str-cta) { font-size: 0.75rem; font-size: var(--text-xs, .78rem); font-weight: 560; letter-spacing: .12em; text-transform: uppercase; line-height: 1.35; }
.stylist-roster .str-eyebrow { color: var(--str-muted); }
.stylist-roster .str-title {
    margin-top: .5em; max-width: 16ch; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 400;
    font-size: 3rem;
    font-size: var(--text-xl, 3rem); line-height: .98; letter-spacing: -.015em; text-wrap: balance;
}
.stylist-roster .str-lead { margin-top: 1em; max-width: 52ch; color: var(--str-muted); text-wrap: pretty; }
.stylist-roster.str-align-center .str-head { text-align: center; }
.stylist-roster.str-align-center :where(.str-title, .str-lead) { margin-left: auto; margin-right: auto; }

.stylist-roster .str-person { position: relative; }
.stylist-roster :where(.str-portrait, .str-work-shot) { margin: 0; overflow: hidden; background: var(--str-line); border-radius: var(--str-r); }
.stylist-roster .str-portrait { aspect-ratio: 4 / 5; }
.stylist-roster :where(.str-portrait, .str-work-shot) img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: filter .5s ease, scale .9s cubic-bezier(.2, .7, .2, 1); }
.stylist-roster:where(.str-mono-1) :where(.str-portrait, .str-work-shot) img { filter: grayscale(1) contrast(1.06); }
.stylist-roster .str-person:hover :where(.str-portrait, .str-work-shot) img { filter: none; }
.stylist-roster .str-name {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, Georgia, serif); font-weight: 400; font-size: 3rem; font-size: var(--text-xl, 3rem);
    line-height: 1; letter-spacing: -.015em; transition: translate .45s cubic-bezier(.2, .7, .2, 1), color .3s ease;
}
.stylist-roster .str-level { color: var(--str-accent-text); }
.stylist-roster .str-level + .str-specialism { margin-left: .9em; padding-left: .9em; border-left: 1px solid var(--str-line); }
.stylist-roster .str-specialism { color: var(--str-muted); }
.stylist-roster .str-days { margin-top: .7em; color: var(--str-muted); }
.stylist-roster .str-next { margin-top: .3em; }
.stylist-roster .str-next:not(:has([data-slot-filled])) { display: none; }
.stylist-roster .str-next-label { color: var(--str-muted); }
.stylist-roster .str-next b { font-weight: 600; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.stylist-roster .str-cta.btn {
    position: static; margin: 1.2em 0 0; padding: .25em 0; border: 0; border-radius: 0; background: none; color: var(--str-ink);
    box-shadow: inset 0 -1px 0 currentColor; transition: color .25s ease;
}
.stylist-roster .str-cta.btn::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; }
.stylist-roster .str-person:hover .str-cta.btn { color: var(--str-accent-text); transform: none; }
.stylist-roster .str-cta.btn:focus-visible { outline: .125rem solid var(--str-accent-text); outline-offset: .25rem; }

.stylist-roster.str-arrange-index .str-list { --row-flow: column nowrap; --row-gap: 0; border-top: 1px solid var(--str-line); }
.stylist-roster.str-arrange-index .str-person { padding: 2.2cqi 0 2.2cqi 8cqi; border-bottom: 1px solid var(--str-line); }
.stylist-roster.str-arrange-index .str-person:hover { z-index: 3; }
.stylist-roster.str-arrange-index .str-body { --row-gap: 4cqi; --row-item: auto; align-items: center; }
.stylist-roster.str-arrange-index .str-name { flex: 1.5 1 0; font-size: calc(3rem * 1.35); font-size: calc(var(--text-xl, 3rem) * 1.35); }
.stylist-roster.str-arrange-index .str-details { flex: 1 1 0; }
.stylist-roster.str-arrange-index .str-person:hover .str-name { font-style: italic; translate: .25em 0; }
.stylist-roster.str-arrange-index .str-portrait {
    position: absolute; left: 0; top: 50%; width: 5.6cqi; translate: 0 -50%; z-index: 4;
    transform-origin: 0 50%; transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s ease;
}
.stylist-roster.str-arrange-index .str-person:hover .str-portrait { transform: scale(1.9) rotate(-2deg); box-shadow: 0 1.4cqi 3.2cqi -1cqi rgba(0, 0, 0, 0.45); box-shadow: 0 1.4cqi 3.2cqi -1cqi color-mix(in srgb, #000 45%, transparent); }
.stylist-roster.str-arrange-index .str-work {
    position: absolute; left: 44%; top: 50%; width: 9cqi; aspect-ratio: 4 / 5; pointer-events: none; z-index: 3;
    opacity: 0; translate: 0 -50%; transition: opacity .35s ease;
}
.stylist-roster.str-arrange-index .str-work-shot { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: scale(.7); transition: transform .6s cubic-bezier(.2, .7, .2, 1); box-shadow: 0 1cqi 2.6cqi -1cqi rgba(0, 0, 0, 0.4); box-shadow: 0 1cqi 2.6cqi -1cqi color-mix(in srgb, #000 40%, transparent); }
.stylist-roster.str-arrange-index .str-person:hover .str-work { opacity: 1; }
.stylist-roster.str-arrange-index .str-person:hover .str-work-shot:nth-child(1) { transform: translateX(-70%) rotate(-8deg) scale(.92); }
.stylist-roster.str-arrange-index .str-person:hover .str-work-shot:nth-child(2) { transform: rotate(2deg) scale(1); }
.stylist-roster.str-arrange-index .str-person:hover .str-work-shot:nth-child(3) { transform: translateX(70%) rotate(8deg) scale(.92); }
.stylist-roster.str-arrange-index .str-work-shot:nth-child(n+4) { display: none; }
.stylist-roster.str-arrange-index .str-cta.btn { margin-top: .9em; }

.stylist-roster.str-arrange-cards .str-list { --row-gap: 6cqi 3cqi; --row-item: 26%; }
.stylist-roster.str-arrange-cards .str-body { --row-flow: column nowrap; --row-gap: 0; --row-item: auto; margin-top: 1.2em; }
.stylist-roster.str-arrange-cards .str-name { font-size: calc(3rem * .72); font-size: calc(var(--text-xl, 3rem) * .72); }
.stylist-roster.str-arrange-cards .str-facts { margin-top: .9em; }
.stylist-roster.str-arrange-cards .str-person:hover .str-portrait img { scale: 1.04; }
.stylist-roster.str-arrange-cards .str-work { margin-top: 1.2em; font-size: 0; line-height: 0; }
.stylist-roster.str-arrange-cards .str-work-shot { display: inline-block; width: calc((100% - 1rem) / 3); aspect-ratio: 1; margin-right: .5rem; vertical-align: top; }
.stylist-roster.str-arrange-cards .str-work-shot:nth-child(3n) { margin-right: 0; }
.stylist-roster.str-arrange-cards .str-work-shot:nth-child(n+4) { display: none; }

@container (max-width: 46rem) {
    .stylist-roster .str-title { font-size: min(2.4rem, 12cqi); font-size: min(var(--text-xl, 2.4rem), 12cqi); }
    .stylist-roster.str-arrange-index .str-person { padding: 6cqi 0; }
    .stylist-roster.str-arrange-index .str-portrait { position: relative; left: auto; top: auto; float: left; width: 30%; margin: 0 5cqi 3cqi 0; translate: none; }
    .stylist-roster.str-arrange-index .str-person:hover .str-portrait { transform: none; box-shadow: none; }
    .stylist-roster.str-arrange-index .str-body { --row-flow: column nowrap; --row-gap: .6em; --row-item: auto; align-items: stretch; }
    .stylist-roster.str-arrange-cards .str-list { --row-item: 40%; --row-flow-narrow: row wrap; }
    .stylist-roster.str-arrange-index .str-name { font-size: min(calc(2.4rem * .9), 11cqi); font-size: min(calc(var(--text-xl, 2.4rem) * .9), 11cqi); }
    .stylist-roster.str-arrange-index .str-person:hover .str-name { translate: none; }
    .stylist-roster.str-arrange-index .str-work { position: static; clear: both; width: auto; aspect-ratio: auto; opacity: 1; translate: none; padding-top: 2cqi; font-size: 0; line-height: 0; }
    .stylist-roster.str-arrange-index .str-work-shot { position: relative; display: inline-block; width: calc((100% - 4cqi) / 3); aspect-ratio: 1; margin-right: 2cqi; transform: none; box-shadow: none; }
    .stylist-roster.str-arrange-index .str-work-shot:nth-child(3n) { margin-right: 0; }
    .stylist-roster.str-arrange-index .str-person:hover .str-work-shot:nth-child(n) { transform: none; }
    .stylist-roster .str-facts { line-height: 1.7; }
}

/* blocks/tabs.css */

.tabs {
    --tb-ink:    var(--ink, #0a2540);
    --tb-body:   var(--muted, #425466);
    --tb-muted:  var(--muted, #6b7280);
    --tb-accent: var(--accent, #635bff);
    --tb-line:   var(--line, #e3e8ee);
    width: 100%; container-type: inline-size;
}
.tabs[data-scheme="dark"] {
    --tb-ink:    var(--ink-dark, #e9eaee);
    --tb-body:   var(--muted-dark, #aab2c0);
    --tb-muted:  var(--muted-dark, #9aa1b0);
    --tb-line:   var(--line-dark, #2a2e38);
}

.tabs .tabs-eyebrow {
    margin: 0 0 max(1rem, min(2.4cqi, 1.8rem));
    margin: 0 0 clamp(1rem, 2.4cqi, 1.8rem);
    font: 600 .72rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 .72rem/1 var(--font-mono, var(--font-display, system-ui));
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--tb-accent);
}

.tabs .tab-bar {
    position: relative;
    display: flex; flex-wrap: wrap;
    gap: max(1.4rem, min(4cqi, 3.5rem));
    gap: clamp(1.4rem, 4cqi, 3.5rem);
    border-bottom: .125rem solid var(--tb-line);
    padding-bottom: max(.8rem, min(1.6cqi, 1.1rem));
    padding-bottom: clamp(.8rem, 1.6cqi, 1.1rem);
}
.tabs .tab {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
    font: 700 max(1.3rem, min(3.4cqi, 2.4rem))/1 'Open Sans', Arial, Helvetica, sans-serif;
    font: 700 max(1.3rem, min(3.4cqi, 2.4rem))/1 var(--font-display, system-ui);
    font: 700 max(1.3rem, min(3.4cqi, 2.4rem))/1 'Open Sans', Arial, Helvetica, sans-serif;
    font: 700 clamp(1.3rem, 3.4cqi, 2.4rem)/1 'Open Sans', Arial, Helvetica, sans-serif;
    font: 700 clamp(1.3rem, 3.4cqi, 2.4rem)/1 var(--font-display, system-ui);
    letter-spacing: -.02em;
    color: var(--tb-muted);
    transition: color .25s ease;
}
.tabs .tab.is-active,
.tabs .tab:hover { color: var(--tb-ink); }
.tabs .tab:focus-visible { outline: .125rem solid var(--tb-accent); outline-offset: .25rem; }

.tabs .tab-underline {
    position: absolute; left: 0; bottom: -.125rem;
    height: .3125rem; width: 0;
    background: var(--tb-accent);
    transition: transform .42s cubic-bezier(.22, 1, .36, 1), width .42s cubic-bezier(.22, 1, .36, 1);
}

.tabs .tab-panels { position: relative; padding-top: max(2rem, min(5cqi, 4rem)); padding-top: clamp(2rem, 5cqi, 4rem); }
.tabs .tab-panel { display: none; }
.tabs .tab-panel.is-active { display: block; }
.tabs .tab-panel .panel-no {
    display: block; margin-bottom: max(.8rem, min(2cqi, 1.2rem)); margin-bottom: clamp(.8rem, 2cqi, 1.2rem);
    font: 600 .78rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 .78rem/1 var(--font-mono, var(--font-display, system-ui));
    letter-spacing: .2em; color: var(--tb-accent);
}
.tabs .tab-panel .panel-heading {
    margin: 0 0 .55em; max-width: 20ch;
    font: 700 max(1.6rem, min(4.4cqi, 3rem))/1.02 'Open Sans', Arial, Helvetica, sans-serif;
    font: 700 max(1.6rem, min(4.4cqi, 3rem))/1.02 var(--font-display, system-ui);
    font: 700 max(1.6rem, min(4.4cqi, 3rem))/1.02 'Open Sans', Arial, Helvetica, sans-serif;
    font: 700 clamp(1.6rem, 4.4cqi, 3rem)/1.02 'Open Sans', Arial, Helvetica, sans-serif;
    font: 700 clamp(1.6rem, 4.4cqi, 3rem)/1.02 var(--font-display, system-ui);
    letter-spacing: -.03em; color: var(--tb-ink);
}
.tabs .tab-panel .panel-body {
    max-width: 54ch;
    font: 400 max(1rem, min(1.5cqi, 1.2rem))/1.5 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 max(1rem, min(1.5cqi, 1.2rem))/1.5 var(--font-display, system-ui);
    font: 400 max(1rem, min(1.5cqi, 1.2rem))/1.5 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 clamp(1rem, 1.5cqi, 1.2rem)/1.5 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 clamp(1rem, 1.5cqi, 1.2rem)/1.5 var(--font-display, system-ui);
    color: var(--tb-body);
}
.tabs .tab-panel .panel-body p { margin: 0 0 1em; }
.tabs .tab-panel .panel-body ul {
    display: flex; flex-wrap: wrap; gap: .6rem;
    margin: 1.4em 0 0; padding: 0; list-style: none;
}
.tabs .tab-panel .panel-body li {
    font: 500 .8rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 .8rem/1 var(--font-mono, var(--font-display, system-ui));
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--tb-ink);
    border: 1px solid rgba(14, 14, 14, 0.4);
    padding: .55em .9em; border-radius: calc(1vh * 0.5); border-radius: var(--r-sm, .25rem);
}

@supports (color: color-mix(in lch, red, blue)) {
.tabs .tab-panel .panel-body li {
    border: 1px solid color-mix(in srgb, var(--tb-ink) 40%, transparent);
}
}


/* blocks/tag-row.css */

.tag-row {
    --tr-accent: var(--accent, #635bff);
    --tr-ink: var(--ink, #0a2540);
    --tr-paper: var(--paper, #fff);
    --tr-line: var(--line, #e3e8ee);
    --tr-muted: var(--muted, #425466);
    --tr-hue: var(--tr-accent);
    --tr-pad-y: .46em;
    --tr-pad-x: .82em;
    --tr-fs: .84rem;
    --tr-radius: var(--r-pill, 999em);
    --tr-weight: 550;
    position: relative;
    color: #222;
    color: var(--tr-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, system-ui, sans-serif);
}

.tag-row .tr-label {
    margin: 0 0 1em;
    color: var(--tr-muted);
    font-size: .72rem; font-weight: 600; line-height: 1;
    letter-spacing: .13em; text-transform: uppercase;
}

.tag-row .tr-list { list-style: none; margin: 0; padding: 0; --row-gap: calc(var(--tr-gap, 0.5) * 1rem); --row-flow-narrow: var(--tag-row-narrow, column nowrap); }   /* a row's own --tag-row-narrow: row wrap keeps the pills in rows in a narrow box */

.tag-row .tr-pill {
    flex: 0 0 auto;
    text-align: center;   /* a pill stretched to its row keeps its word in the middle */
    padding: var(--tr-pad-y) var(--tr-pad-x);
    border: .0625em solid transparent;
    border-radius: var(--tr-radius);
    background: var(--tr-paper);
    color: var(--tr-ink);
    font-size: var(--tr-fs); font-weight: var(--tr-weight); line-height: 1.15; letter-spacing: -.006em;
    white-space: nowrap; cursor: default;
    box-shadow: inset 0 .0625em 0 color-mix(in srgb, var(--tr-paper) 60%, transparent),
                0 .0625em .0625em -.0625em color-mix(in srgb, var(--tr-ink) 18%, transparent),
                0 .1875rem .4375rem -.25rem color-mix(in srgb, var(--tr-ink) 13%, transparent);
    transition: transform .18s cubic-bezier(.2, .7, .2, 1), box-shadow .2s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
}
.tag-row .tr-pill > * { vertical-align: middle; }
.tag-row .tr-pill:hover {
    transform: translateY(-.0938rem);
    box-shadow: inset 0 .0625em 0 color-mix(in srgb, var(--tr-paper) 70%, transparent),
                0 .3125rem .75rem -.25rem color-mix(in srgb, var(--tr-hue) 34%, transparent),
                0 .125rem .3125rem -.1875rem color-mix(in srgb, var(--tr-ink) 18%, transparent);
}
.tag-row .tr-pill:active { transform: translateY(0); }

.tag-row .tr-ic {
    margin-right: .46em; margin-left: -.06em;
    font-size: 1.02em; line-height: 1;
    color: var(--tr-hue);
}

.tag-row .tr-dot {
    display: none;
    width: .48em; height: .48em; margin-right: .52em;
    border-radius: 50%;
    background: var(--tr-hue);
    box-shadow: 0 0 0 .1875rem rgba(0, 20, 25, 0.16);
}

@supports (color: color-mix(in lch, red, blue)) {
.tag-row .tr-dot {
    box-shadow: 0 0 0 .1875rem color-mix(in srgb, var(--tr-hue) 16%, transparent);
}
}

.tag-row.tr-soft .tr-pill {
    border-color: color-mix(in srgb, var(--tr-hue) 26%, var(--tr-line));
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--tr-hue) 9%, var(--tr-paper)),
        color-mix(in srgb, var(--tr-hue) 17%, var(--tr-paper)));
    color: #076780;
}

@supports (color: color-mix(in lch, red, blue)) {
.tag-row.tr-soft .tr-pill {
    color: color-mix(in srgb, var(--tr-hue) 78%, var(--tr-ink));
}
}
.tag-row.tr-soft .tr-pill:hover {
    border-color: color-mix(in srgb, var(--tr-hue) 44%, var(--tr-line));
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--tr-hue) 13%, var(--tr-paper)),
        color-mix(in srgb, var(--tr-hue) 23%, var(--tr-paper)));
}
.tag-row.tr-outline .tr-pill { background: var(--tr-paper); border-color: var(--tr-line); color: var(--tr-ink); }
.tag-row.tr-outline .tr-pill:hover {
    border-color: color-mix(in srgb, var(--tr-hue) 52%, var(--tr-line));
    background: color-mix(in srgb, var(--tr-hue) 5%, var(--tr-paper));
}
.tag-row.tr-solid .tr-pill {
    border-color: transparent; background: var(--tr-hue); color: var(--tr-paper);
    box-shadow: inset 0 .0625em 0 color-mix(in srgb, var(--tr-paper) 26%, transparent),
                0 .125rem .3125rem -.125rem color-mix(in srgb, var(--tr-hue) 42%, transparent),
                0 .25rem .75rem -.3125rem color-mix(in srgb, var(--tr-hue) 40%, transparent);
}
.tag-row.tr-solid .tr-ic { color: var(--tr-paper); }
.tag-row.tr-solid .tr-dot { background: var(--tr-paper); box-shadow: 0 0 0 .1875rem color-mix(in srgb, var(--tr-paper) 24%, transparent); }
.tag-row.tr-solid .tr-pill:hover {
    box-shadow: inset 0 .0625em 0 color-mix(in srgb, var(--tr-paper) 30%, transparent),
                0 .4375rem 1rem -.3125rem color-mix(in srgb, var(--tr-hue) 55%, transparent);
}
.tag-row.tr-dot .tr-pill { background: var(--tr-paper); border-color: var(--tr-line); color: var(--tr-ink); }
.tag-row.tr-dot .tr-dot { display: inline-block; }

.tag-row.tr-elev-flat .tr-pill, .tag-row.tr-elev-flat .tr-pill:hover { box-shadow: none; }

.tag-row.tr-sm { --tr-fs: .74rem; --tr-pad-y: .32em; --tr-pad-x: .66em; }
.tag-row.tr-md { --tr-fs: .84rem; }
.tag-row.tr-lg { --tr-fs: .98rem; --tr-pad-y: .54em; --tr-pad-x: 1.02em; }

.tag-row.tr-tone-ink { --tr-accent: var(--tr-ink); }
.tag-row.tr-tone-muted { --tr-accent: var(--tr-muted); }

.tag-row.tr-shape-rounded { --tr-radius: .5em; }
.tag-row.tr-shape-square { --tr-radius: 0; }
.tag-row.tr-weight-regular { --tr-weight: 450; }
.tag-row.tr-weight-bold { --tr-weight: 700; }
.tag-row.tr-caps-true .tr-text { text-transform: uppercase; letter-spacing: .07em; font-size: .9em; }

.tag-row.tr-accent-1 .tr-pill:nth-child(6n+1) { --tr-hue: var(--tr-accent); }
.tag-row.tr-accent-1 .tr-pill:nth-child(6n+2) { --tr-hue: var(--tr-hue-2, #12b886); }
.tag-row.tr-accent-1 .tr-pill:nth-child(6n+3) { --tr-hue: var(--tr-hue-3, #f59f00); }
.tag-row.tr-accent-1 .tr-pill:nth-child(6n+4) { --tr-hue: var(--tr-hue-4, #e64980); }
.tag-row.tr-accent-1 .tr-pill:nth-child(6n+5) { --tr-hue: var(--tr-hue-5, #7c5cff); }
.tag-row.tr-accent-1 .tr-pill:nth-child(6n+6) { --tr-hue: var(--tr-hue-6, #22b8cf); }

/* fill: two pills to a row; a tag too long for half the row is as wide as its longest word (min-width wins over
   max-width) and wraps inside its pill, never spilling past it */
.tag-row.tr-fill-1 .tr-pill { flex: 1 1 auto; max-width: calc(50% - .5rem / 2); max-width: calc(50% - var(--row-gap, .5rem) / 2); min-width: -moz-min-content; min-width: min-content; white-space: normal; justify-content: center; text-align: center; }

.tag-row.tr-align-center .tr-label { text-align: center; }
.tag-row.tr-align-center .tr-list { justify-content: center; }
.tag-row.tr-align-right .tr-label { text-align: right; }
.tag-row.tr-align-right .tr-list { justify-content: flex-end; }

/* blocks/tech-row.css */

.tech-row {
    --tk-accent: var(--accent, #635bff);
    --tk-ink: var(--ink, #0a2540);
    --tk-paper: var(--paper, #fff);
    --tk-line: var(--line, #e3e8ee);
    --tk-muted: var(--muted, #425466);
    --tk-surface: color-mix(in srgb, var(--tk-ink) 4%, var(--tk-paper));
    --tk-fs: .9rem;
    --tk-pad-y: .5em;
    --tk-pad-x: .85em;
    width: 100%;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, system-ui, sans-serif);
}

.tech-row .tk-heading {
    margin: 0 0 .9rem;
    color: var(--tk-muted);
    font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}

.tech-row .tk-list {
    list-style: none; margin: 0; padding: 0;
    --row-flow: row wrap;
    --row-gap: calc(var(--tk-gap, 0.6) * 1rem);
}

.tech-row .tk-item {
    flex: 0 0 auto;
    color: var(--tk-ink);
    font-size: var(--tk-fs); font-weight: 600; line-height: 1.2; letter-spacing: -.005em;
    white-space: nowrap; cursor: default;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
}
.tech-row .tk-name { vertical-align: middle; }
.tech-row .tk-mark { display: inline-block; vertical-align: middle; width: 1.15em; height: 1.15em; margin-right: .45em; color: var(--mark, var(--tk-accent)); }
.tech-row .tk-mark > svg { display: block; width: 100%; height: 100%; }
.tech-row.tk-tone-ink .tk-mark, .tech-row.tk-tone-muted .tk-mark { color: var(--tk-accent); }

.tech-row.tk-variant-badges .tk-item {
    padding: var(--tk-pad-y) calc(var(--tk-pad-x) + .1em);
    border: 1px solid var(--tk-line);
    border-radius: 61.25rem;
    border-radius: var(--r-pill, 999em);
    background: var(--tk-paper);
    box-shadow: 0 1px 2px rgba(34, 34, 34, 0.08),
                    0 8px 24px -12px rgba(34, 34, 34, 0.18);
    box-shadow: 0 1px 2px color-mix(in srgb, #222 8%, transparent),
                    0 8px 24px -12px color-mix(in srgb, #222 18%, transparent);
    box-shadow: var(--shadow-card, 0 1px .125rem rgba(10, 37, 64, .06));
}
.tech-row.tk-variant-badges .tk-item::first-letter {
    color: var(--tk-accent);
    font-weight: 800;
}
.tech-row.tk-variant-badges .tk-item:hover {
    transform: translateY(-1px);
    color: var(--tk-ink);
    background: color-mix(in srgb, var(--tk-accent) 4%, var(--tk-paper));
    border-color: color-mix(in srgb, var(--tk-accent) 45%, var(--tk-line));
    box-shadow: 0 .375rem 1rem -.5rem rgba(0, 62, 77, 0.5), 0 1px .125rem rgba(10, 37, 64, .06);
}

@supports (color: color-mix(in lch, red, blue)) {
.tech-row.tk-variant-badges .tk-item:hover {
    box-shadow: 0 .375rem 1rem -.5rem color-mix(in srgb, var(--tk-accent) 50%, transparent), 0 1px .125rem rgba(10, 37, 64, .06);
}
}

.tech-row.tk-variant-words .tk-item { color: var(--tk-muted); padding: .1em 0; }
.tech-row.tk-variant-words .tk-item::first-letter { color: var(--tk-accent); font-weight: 700; }
.tech-row.tk-variant-words .tk-item:not(:first-child) {
    padding-left: calc(0.6 * 1rem);
    padding-left: calc(var(--tk-gap, 0.6) * 1rem);
    border-left: 1px solid var(--tk-line);
}
.tech-row.tk-variant-words .tk-item:hover { color: var(--tk-accent); }

.tech-row.tk-variant-logos .tk-list {
    --row-gap: calc(var(--tk-gap, 0.6) * 2rem);
    justify-content: space-evenly; align-items: center;
    padding: 1.6em 1.2em;
    border-radius: 1vh;
    border-radius: var(--r-md, .75rem);
    background: var(--tk-surface);
}
.tech-row.tk-variant-logos .tk-item {
    color: var(--tk-muted);
    font-size: calc(var(--tk-fs) * 1.5); font-weight: 700; letter-spacing: -.01em;
    filter: grayscale(1); opacity: .82;
    transition: filter .25s ease, opacity .25s ease, color .25s ease;
}
.tech-row.tk-variant-logos .tk-item .tk-mark { width: 1.25em; height: 1.25em; margin-right: .35em; }
.tech-row.tk-variant-logos .tk-item::first-letter { font-weight: 800; }
.tech-row.tk-variant-logos .tk-item:hover { filter: none; opacity: 1; color: var(--tk-ink); }

.tech-row.tk-size-small { --tk-fs: .78rem; }
.tech-row.tk-size-medium { --tk-fs: .9rem; }
.tech-row.tk-size-large { --tk-fs: 1.05rem; }

.tech-row.tk-tone-ink { --tk-accent: var(--tk-ink); }
.tech-row.tk-tone-muted { --tk-accent: var(--tk-muted); }

.tech-row.tk-caps-1 .tk-name { text-transform: uppercase; letter-spacing: .06em; font-size: .92em; }

.tech-row.tk-align-center .tk-heading { text-align: center; }
.tech-row.tk-align-center .tk-list { justify-content: center; }
.tech-row.tk-align-right .tk-heading { text-align: right; }
.tech-row.tk-align-right .tk-list { justify-content: flex-end; }

/* blocks/testimonial-wall.css */

.testimonial-wall {
    --tw-ink: var(--ink, #1c1b1a);
    --tw-muted: var(--muted, #6b655f);
    --tw-line: var(--line, #ddd6cc);
    --tw-plate: var(--paper, #fbfaf7);
    --tw-accent: var(--accent, #7a2433);
    --tw-r: calc(var(--tw-radius, 1) * 1cqi);
    margin: 0; color: #222; color: var(--tw-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, 'Helvetica Neue', Arial, sans-serif); font-size: 1.125rem; font-size: var(--text-md, 1rem); line-height: 1.5;
}
.testimonial-wall :where(h2, p, figure, figcaption, blockquote) { margin: 0; }

.testimonial-wall .tw-head { margin-bottom: 3.4cqi; }
.testimonial-wall :where(.tw-eyebrow, .tw-result) { font-size: 0.75rem; font-size: var(--text-xs, .78rem); font-weight: 560; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; }
.testimonial-wall .tw-eyebrow { color: var(--tw-muted); }
.testimonial-wall .tw-title { margin-top: .55em; max-width: 24ch; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 400; font-size: 2.8rem; font-size: var(--text-xl, 2.8rem); line-height: 1.04; letter-spacing: -.014em; text-wrap: balance; }
.testimonial-wall.tw-align-center .tw-head { text-align: center; }
.testimonial-wall.tw-align-center .tw-title { margin-left: auto; margin-right: auto; }

.testimonial-wall .tw-list { --row-gap: 1.8cqi; --row-item: 17em; }
.testimonial-wall .tw-piece { --row-flow: column nowrap; --row-gap: 0; --row-item: auto; flex: 1 1 17em; position: relative; padding: 3cqi 3.2cqi 2.8cqi; }
.testimonial-wall.tw-surface-plate .tw-piece { background: var(--tw-plate); border-radius: var(--tw-r); box-shadow: 0 0 0 1px rgba(2, 2, 2, 0.07); }

@supports (color: color-mix(in lch, red, blue)) {
.testimonial-wall.tw-surface-plate .tw-piece { box-shadow: 0 0 0 1px color-mix(in srgb, var(--tw-ink) 7%, transparent); }
}
.testimonial-wall.tw-surface-ruled .tw-piece { padding-left: 0; padding-right: 0; border-top: 1px solid var(--tw-ink); }
.testimonial-wall.tw-surface-none .tw-piece { padding-left: 0; padding-right: 0; }

.testimonial-wall .tw-mark { display: block; height: .5em; margin-left: -.06em; color: var(--tw-accent); font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-size: 4.5rem; font-size: var(--text-display, 4.5rem); line-height: 1; }
.testimonial-wall .tw-result { position: absolute; top: 3.2cqi; right: 3.2cqi; padding: .5em .8em .45em; border: 1px solid var(--tw-line); border-radius: 99em; color: var(--tw-ink); }
.testimonial-wall.tw-surface-ruled .tw-result, .testimonial-wall.tw-surface-none .tw-result { right: 0; }
.testimonial-wall:is(.tw-surface-ruled, .tw-surface-none) .tw-result { right: 0; }
.testimonial-wall .tw-quote { margin-top: .6em; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-size: 1.4rem; font-size: var(--text-lg, 1.4rem); line-height: 1.34; letter-spacing: -.004em; text-wrap: pretty; }

.testimonial-wall .tw-who { --row-gap: .9em; --row-item: auto; --row-flow-narrow: row nowrap; align-items: center; margin-top: auto; padding-top: 1.8em; }
.testimonial-wall .tw-avatar { flex: 0 0 2.9em; width: 2.9em; height: 2.9em; margin: 0; overflow: hidden; border-radius: 50%; background: var(--tw-line); }
.testimonial-wall .tw-avatar :where(picture, img) { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.testimonial-wall:not(.tw-avatars-1) .tw-avatar { display: none; }
.testimonial-wall .tw-id { flex: 1 1 auto; line-height: 1.35; }
.testimonial-wall .tw-name { display: block; font-weight: 600; }
.testimonial-wall .tw-role { display: block; color: var(--tw-muted); }

.testimonial-wall.tw-arrange-feature .tw-piece:first-child { --row-flow: row wrap; --row-gap: 0 5cqi; flex-basis: 100%; align-items: flex-end; padding: 4.4cqi 4.6cqi 4.2cqi; }
.testimonial-wall.tw-arrange-feature .tw-piece:first-child > .tw-mark { flex: 1 1 100%; }
.testimonial-wall.tw-arrange-feature .tw-piece:first-child > .tw-quote { flex: 1 1 60%; }
.testimonial-wall.tw-arrange-feature .tw-piece:first-child > .tw-who { flex: 0 1 auto; margin-left: auto; padding: 0 0 .35em; }
.testimonial-wall.tw-arrange-feature.tw-surface-ruled .tw-piece:first-child,
.testimonial-wall.tw-arrange-feature.tw-surface-none .tw-piece:first-child { padding-left: 0; padding-right: 0; }
.testimonial-wall.tw-arrange-feature .tw-piece:first-child .tw-quote { max-width: 30ch; font-size: calc(2.4rem * 1); font-size: calc(var(--text-xl, 2.4rem) * var(--tw-feature-scale, 1)); line-height: 1.12; letter-spacing: -.014em; }
.testimonial-wall.tw-arrange-feature .tw-piece:first-child .tw-result { top: 4.6cqi; right: 4.6cqi; }
.testimonial-wall.tw-arrange-column .tw-list { --row-flow: column nowrap; }

@container (max-width: 40rem) {
    .testimonial-wall .tw-list { --row-item: auto; }
    .testimonial-wall .tw-piece { flex-basis: auto; padding: 7cqi 6cqi 6cqi; }
    .testimonial-wall .tw-result { position: static; align-self: flex-start; order: 2; margin-top: 1.2em; }
    .testimonial-wall.tw-arrange-feature .tw-piece:first-child { --row-flow: column nowrap; align-items: stretch; padding: 8cqi 6cqi 7cqi; }
    .testimonial-wall.tw-arrange-feature .tw-piece:first-child > :where(.tw-mark, .tw-quote, .tw-who) { flex: 0 0 auto; }
    .testimonial-wall.tw-arrange-feature .tw-piece:first-child > .tw-who { margin-left: 0; padding-top: 1.8em; }
    .testimonial-wall.tw-arrange-feature .tw-piece:first-child .tw-quote { font-size: calc(1.4rem * 1); font-size: calc(var(--text-lg, 1.4rem) * var(--tw-feature-scale, 1)); }
    .testimonial-wall .tw-title { font-size: min(2.4rem, 11cqi); font-size: min(var(--text-xl, 2.4rem), 11cqi); }
    .testimonial-wall .tw-who { order: 3; }
}

/* blocks/text.css */
/* text — a run before or after the text (props.before / props.after) sits beside it; its look is the piece's own
   style.before / style.after. A list inside a text marks its rows by props.marker (text-marks--<mark>), in
   --marker-color (a knob; default the accent). Marks are list-style strings, which every engine draws in ::marker. */
.text-before { margin-right: .3em; }
.text-after { margin-left: .3em; }
.text-marks ul, .text-marks ol { padding-left: 1.3em; }
.text-marks :is(ul, ol) { padding-left: 1.3em; }
.text-marks li { padding-left: .2em; }
.text-marks li::marker { color: #007b9a; color: var(--marker-color, var(--accent, currentColor)); }
.text-marks--dot li { list-style-type: "●"; }
.text-marks--dot li::marker { font-size: .7em; }
.text-marks--dash li { list-style-type: "–"; }
.text-marks--check li { list-style-type: "✓"; }
.text-marks--cross li { list-style-type: "✕"; }
.text-marks--plus li { list-style-type: "+"; }
.text-marks--arrow li { list-style-type: "→"; }
.text-marks--number li { list-style-type: decimal-leading-zero; }
.text-marks--number li::marker { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
/* a link inside a text (words linked in the editor) reads as part of it: the text's colour, marked by an underline, never
   the browser's blue; a theme colours its links with --link-color */
[data-prop="html"] a[href] { color: inherit; color: var(--link-color, inherit); text-decoration-thickness: .06em; text-underline-offset: .15em; }
/* a reading flow (one text of headings, paragraphs, lists and pictures: richtext.mjs) reads as the theme's prose: a
   picture fits the column, a list row's words are the row (TipTap writes them as a paragraph inside it) */
[data-prop="html"] img { display: block; max-width: 100%; height: auto; }
[data-prop="html"] li > p { margin: 0; }

/* blocks/textfx.css */

.curve-ribbon { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display); font-weight: 700; color: #222; color: var(--ink); }
.curve-ribbon.accent { color: #007b9a; color: var(--accent); }
.curve-eyebrow { font: 600 .75rem/1 ui-monospace, 'SF Mono', Menlo, monospace; font: 600 .75rem/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: #626262; color: var(--muted); }

/* blocks/timeline.css */

.timeline {
    --tl-ink:     var(--ink, #0a2540);
    --tl-muted:   var(--muted, #6b7280);
    --tl-accent:  var(--accent, #635bff);
    --tl-paper:   var(--paper, #fff);
    --tl-line:    var(--line, #e3e8ee);
    --tl-good:    var(--good, #1a7f55);
    --tl-warn:    var(--warn, #b45309);
    --tl-bad:     var(--bad, #b42318);
    --tl-faint:   var(--faint, color-mix(in srgb, var(--tl-muted) 55%, transparent));
    width: 100%;
}

.timeline[data-scheme="dark"] {
    --tl-ink:    var(--ink-dark, #e9eaee);
    --tl-muted:  var(--muted-dark, #9aa3b2);
    --tl-accent: var(--accent-dark, var(--accent, #7c75ff));
    --tl-paper:  var(--paper-dark, #0c0d10);
    --tl-line:   var(--line-dark, #23262d);
    --tl-good:   var(--good-dark, #3ddc97);
    --tl-warn:   var(--warn-dark, #f4b740);
    --tl-bad:    var(--bad-dark, #ff6b5e);
}

.timeline .tl-eyebrow {
    color: var(--tl-accent);
    font: 600 .72rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 .72rem/1 var(--font-mono, var(--font-display, system-ui));
    letter-spacing: .2em; text-transform: uppercase;
    margin: 0 0 max(1.4rem, min(3cqi, 2.4rem));
    margin: 0 0 clamp(1.4rem, 3cqi, 2.4rem);
}

.timeline .tl-list { list-style: none; margin: 0; }

.timeline[data-variant="changelog"] .tl-changelog {
    padding: 0 0 0 2.4rem; position: relative;
}
.timeline[data-variant="changelog"] .tl-rule {
    position: absolute; left: .375rem; top: .4rem; bottom: .4rem; width: .125rem;
    background: linear-gradient(var(--tl-accent), var(--tl-line) 70%);
    transform-origin: top center;
}

.timeline[data-variant="changelog"] .tl-entry { position: relative; padding: 0 0 max(2rem, min(4cqi, 3rem)); padding: 0 0 clamp(2rem, 4cqi, 3rem); }
.timeline[data-variant="changelog"] .tl-entry:last-child { padding-bottom: 0; }
.timeline[data-variant="changelog"] .tl-entry::before {
    content: ""; position: absolute; left: -2.4rem; top: .35rem;
    width: .875rem; height: .875rem; border-radius: 50%;
    background: var(--tl-paper); border: .125rem solid var(--tl-accent);
    box-shadow: 0 0 0 .25rem var(--tl-paper);
}

.timeline[data-variant="changelog"] .tl-meta {
    display: flex; align-items: baseline; gap: 1ch; flex-wrap: wrap;
    margin-bottom: .7rem;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, var(--font-display, system-ui));
    font-feature-settings: tabular-nums lining-nums;
    font-variant-numeric: tabular-nums lining-nums;
}
.timeline[data-variant="changelog"] .tl-ver { color: var(--tl-accent); font-weight: 600; font-size: .82rem; }
.timeline[data-variant="changelog"] .tl-date {
    color: var(--tl-muted); font-size: .72rem;
    text-transform: uppercase; letter-spacing: .1em;
}

.timeline[data-variant="changelog"] .tl-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .7rem; }
.timeline[data-variant="changelog"] .tl-tag {
    display: inline-block;
    font: 600 .68rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 .68rem/1 var(--font-mono, var(--font-display, system-ui));
    text-transform: uppercase; letter-spacing: .1em;
    padding: .42em .72em; border-radius: calc(1vh * 0.5); border-radius: var(--r-sm, var(--radius, .375rem));
    border: 1px solid var(--tl-line); color: var(--tl-muted);
}
.timeline[data-variant="changelog"] .tl-tag--added,
.timeline[data-variant="changelog"] .tl-tag--new {
    color: var(--tl-good);
    border-color: rgba(10, 51, 34, 0.4);
}

@supports (color: color-mix(in lch, red, blue)) {
.timeline[data-variant="changelog"] .tl-tag--added,
.timeline[data-variant="changelog"] .tl-tag--new {
    border-color: color-mix(in srgb, var(--tl-good) 40%, transparent);
}
}
.timeline[data-variant="changelog"] .tl-tag--changed,
.timeline[data-variant="changelog"] .tl-tag--improved {
    color: var(--tl-warn);
    border-color: rgba(72, 33, 4, 0.4);
}

@supports (color: color-mix(in lch, red, blue)) {
.timeline[data-variant="changelog"] .tl-tag--changed,
.timeline[data-variant="changelog"] .tl-tag--improved {
    border-color: color-mix(in srgb, var(--tl-warn) 40%, transparent);
}
}
.timeline[data-variant="changelog"] .tl-tag--security {
    color: var(--tl-accent);
    border-color: rgba(0, 49, 62, 0.4);
}

@supports (color: color-mix(in lch, red, blue)) {
.timeline[data-variant="changelog"] .tl-tag--security {
    border-color: color-mix(in srgb, var(--tl-accent) 40%, transparent);
}
}
.timeline[data-variant="changelog"] .tl-tag--removed,
.timeline[data-variant="changelog"] .tl-tag--deprecated {
    color: var(--tl-bad);
    border-color: rgba(72, 14, 10, 0.4);
}

@supports (color: color-mix(in lch, red, blue)) {
.timeline[data-variant="changelog"] .tl-tag--removed,
.timeline[data-variant="changelog"] .tl-tag--deprecated {
    border-color: color-mix(in srgb, var(--tl-bad) 40%, transparent);
}
}

.timeline[data-variant="changelog"] .tl-entry-title {
    font: 600 max(1.15rem, min(2.6cqi, 1.4rem))/1.2 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 max(1.15rem, min(2.6cqi, 1.4rem))/1.2 var(--font-display, system-ui);
    font: 600 max(1.15rem, min(2.6cqi, 1.4rem))/1.2 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 clamp(1.15rem, 2.6cqi, 1.4rem)/1.2 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 clamp(1.15rem, 2.6cqi, 1.4rem)/1.2 var(--font-display, system-ui);
    letter-spacing: -.02em; color: var(--tl-ink);
    margin: 0 0 .5rem;
}
.timeline[data-variant="changelog"] .tl-entry-body {
    color: var(--tl-muted);
    font: 400 max(.9rem, min(1.8cqi, .98rem))/1.55 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 max(.9rem, min(1.8cqi, .98rem))/1.55 var(--font-display, system-ui);
    font: 400 max(.9rem, min(1.8cqi, .98rem))/1.55 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 clamp(.9rem, 1.8cqi, .98rem)/1.55 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 clamp(.9rem, 1.8cqi, .98rem)/1.55 var(--font-display, system-ui);
    margin: 0; max-width: 58ch; text-wrap: pretty;
}

.timeline[data-variant="agenda"] .tl-agenda {
    padding: 0;
    border-left: .125rem solid var(--tl-line);
}
.timeline[data-variant="agenda"] .tl-row {
    position: relative;
    display: grid; grid-template-columns: max(7rem, min(16cqi, 9rem)) 1fr; grid-template-columns: clamp(7rem, 16cqi, 9rem) 1fr;
    grid-gap: max(1rem, min(3cqi, 3rem));
    grid-gap: clamp(1rem, 3cqi, 3rem);
    gap: max(1rem, min(3cqi, 3rem));
    gap: clamp(1rem, 3cqi, 3rem);
    padding: max(1.2rem, min(3cqi, 2.2rem)) 0 max(1.2rem, min(3cqi, 2.2rem)) max(1.4rem, min(4cqi, 3rem));
    padding: max(1.2rem, min(3cqi, 2.2rem)) 0 max(1.2rem, min(3cqi, 2.2rem)) clamp(1.4rem, 4cqi, 3rem);
    padding: max(1.2rem, min(3cqi, 2.2rem)) 0 max(1.4rem, min(4cqi, 3rem)) max(1.4rem, min(4cqi, 3rem));
    padding: max(1.2rem, min(3cqi, 2.2rem)) 0 max(1.4rem, min(4cqi, 3rem)) clamp(1.4rem, 4cqi, 3rem);
    padding: max(1.2rem, min(3cqi, 2.2rem)) 0 clamp(1.2rem, 3cqi, 2.2rem) clamp(1.4rem, 4cqi, 3rem);
    padding: max(1.2rem, min(3cqi, 2.2rem)) 0 max(1.2rem, min(3cqi, 2.2rem)) max(1.4rem, min(4cqi, 3rem));
    padding: max(1.2rem, min(3cqi, 2.2rem)) 0 max(1.2rem, min(3cqi, 2.2rem)) clamp(1.4rem, 4cqi, 3rem);
    padding: max(1.2rem, min(3cqi, 2.2rem)) 0 max(1.4rem, min(4cqi, 3rem)) max(1.4rem, min(4cqi, 3rem));
    padding: max(1.2rem, min(3cqi, 2.2rem)) 0 max(1.4rem, min(4cqi, 3rem)) clamp(1.4rem, 4cqi, 3rem);
    padding: max(1.2rem, min(3cqi, 2.2rem)) 0 clamp(1.2rem, 3cqi, 2.2rem) clamp(1.4rem, 4cqi, 3rem);
    padding: max(1.4rem, min(4cqi, 3rem)) 0 max(1.2rem, min(3cqi, 2.2rem)) max(1.4rem, min(4cqi, 3rem));
    padding: max(1.4rem, min(4cqi, 3rem)) 0 max(1.2rem, min(3cqi, 2.2rem)) clamp(1.4rem, 4cqi, 3rem);
    padding: max(1.4rem, min(4cqi, 3rem)) 0 max(1.4rem, min(4cqi, 3rem)) max(1.4rem, min(4cqi, 3rem));
    padding: max(1.4rem, min(4cqi, 3rem)) 0 max(1.4rem, min(4cqi, 3rem)) clamp(1.4rem, 4cqi, 3rem);
    padding: max(1.4rem, min(4cqi, 3rem)) 0 clamp(1.2rem, 3cqi, 2.2rem) clamp(1.4rem, 4cqi, 3rem);
    padding: clamp(1.2rem, 3cqi, 2.2rem) 0 clamp(1.2rem, 3cqi, 2.2rem) clamp(1.4rem, 4cqi, 3rem);
    border-bottom: 1px solid var(--tl-line);
}
.timeline[data-variant="agenda"] .tl-row::before {
    content: ""; position: absolute; left: -.4375rem; top: max(1.5rem, min(3.4cqi, 2.6rem)); top: clamp(1.5rem, 3.4cqi, 2.6rem);
    width: .75rem; height: .75rem; border-radius: 50%;
    background: var(--tl-accent);
    box-shadow: 0 0 0 .1875rem var(--tl-paper);
}

.timeline[data-variant="agenda"] .tl-time {
    font: 500 max(.78rem, min(1.6cqi, .9rem))/1.3 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 max(.78rem, min(1.6cqi, .9rem))/1.3 var(--font-mono, var(--font-display, system-ui));
    font: 500 max(.78rem, min(1.6cqi, .9rem))/1.3 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 clamp(.78rem, 1.6cqi, .9rem)/1.3 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 clamp(.78rem, 1.6cqi, .9rem)/1.3 var(--font-mono, var(--font-display, system-ui));
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--tl-accent);
    font-feature-settings: tabular-nums lining-nums;
    font-variant-numeric: tabular-nums lining-nums;
    padding-top: .15em;
}

.timeline[data-variant="agenda"] .tl-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem .8rem; margin-bottom: .35em; }
.timeline[data-variant="agenda"] .tl-title {
    font: 700 max(1.15rem, min(2.6cqi, 1.7rem))/1.18 'Open Sans', Arial, Helvetica, sans-serif;
    font: 700 max(1.15rem, min(2.6cqi, 1.7rem))/1.18 var(--font-display, system-ui);
    font: 700 max(1.15rem, min(2.6cqi, 1.7rem))/1.18 'Open Sans', Arial, Helvetica, sans-serif;
    font: 700 clamp(1.15rem, 2.6cqi, 1.7rem)/1.18 'Open Sans', Arial, Helvetica, sans-serif;
    font: 700 clamp(1.15rem, 2.6cqi, 1.7rem)/1.18 var(--font-display, system-ui);
    letter-spacing: -.01em; color: var(--tl-ink);
}
.timeline[data-variant="agenda"] .tl-pill {
    font: 600 .62rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 .62rem/1 var(--font-mono, var(--font-display, system-ui));
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--tl-accent);
    padding: .42em .7em; border-radius: calc(1vh * 0.5); border-radius: var(--r-sm, var(--radius, .375rem));
    border: 1px solid rgba(0, 49, 62, 0.4);
    align-self: center;
}

@supports (color: color-mix(in lch, red, blue)) {
.timeline[data-variant="agenda"] .tl-pill {
    border: 1px solid color-mix(in srgb, var(--tl-accent) 40%, transparent);
}
}
.timeline[data-variant="agenda"] .tl-by {
    display: block;
    color: var(--tl-muted);
    font: 400 max(.92rem, min(1.7cqi, 1.05rem))/1.5 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 max(.92rem, min(1.7cqi, 1.05rem))/1.5 var(--font-display, system-ui);
    font: 400 max(.92rem, min(1.7cqi, 1.05rem))/1.5 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 clamp(.92rem, 1.7cqi, 1.05rem)/1.5 'Open Sans', Arial, Helvetica, sans-serif;
    font: 400 clamp(.92rem, 1.7cqi, 1.05rem)/1.5 var(--font-display, system-ui);
}

@container (max-width: 30rem) {
    .timeline[data-variant="changelog"] .tl-changelog { padding-left: 1.9rem; }
    .timeline[data-variant="changelog"] .tl-entry::before { left: -1.9rem; }
    .timeline[data-variant="agenda"] .tl-agenda { border-left: 0; }
    .timeline[data-variant="agenda"] .tl-row { grid-template-columns: 1fr; gap: .4rem; padding-left: 0; }
    .timeline[data-variant="agenda"] .tl-row::before { display: none; }
}

/* blocks/timetable.css */

:where(.timetable) {
    --tt-ink: var(--ink, #0a0a0a);
    --tt-muted: var(--muted, #6b6b6b);
    --tt-line: var(--line, #e3e3e3);
    --tt-accent: var(--accent, #c8ff00);
    --tt-on-accent: var(--on-accent, var(--ink, #0a0a0a));
    --tt-paper: var(--paper, transparent);
    --tt-row-pad: 1.1em;
    --tt-time-col: 7em;
    --tt-cap-col: 12em;
    width: 100%; margin: 0;
    color: #222;
    color: var(--tt-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif);
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
:where(.timetable.tt-rule-none) { --tt-line: transparent; }
:where(.timetable.tt-rule-strong) { --tt-line: var(--rule-strong, var(--ink, #0a0a0a)); }

:where(.timetable .tt-eyebrow) {
    margin: 0 0 1.2em;
    color: var(--tt-muted);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, monospace);
    font-size: .78em; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2;
}

:where(.timetable .tt-live) {
    --row-gap: .9em; --row-item: 0; --row-flow: row wrap; --row-flow-narrow: row wrap;
    align-items: baseline;
    margin: 0 0 1.4em; padding: .9em 0;
    border-top: 1px solid var(--tt-ink); border-bottom: 1px solid var(--tt-line);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, monospace);
    font-size: .82em; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3;
}

:where(.timetable .tt-tag) { color: var(--tt-muted); }
:where(.timetable .tt-tag-now) { padding: .25em .55em; background: var(--tt-accent); color: var(--tt-on-accent); }
:where(.timetable .tt-live-name) { color: var(--tt-ink); font-weight: 700; margin-right: 1.2em; }
:where(.timetable .tt-live-in) { color: var(--tt-muted); }
:where(.timetable[data-schedule="before"] .tt-tag-now), :where(.timetable[data-schedule="before"] .tt-tag-now + .tt-live-name),
:where(.timetable[data-schedule="after"] .tt-tag-now), :where(.timetable[data-schedule="after"] .tt-tag-now + .tt-live-name) { opacity: .45; }

:where(.timetable .tt-list) { list-style: none; margin: 0; padding: 0; }
:where(.timetable .tt-row) {
    --row-gap: 1.4em; --row-item: 0; --row-flow: row nowrap; --row-flow-narrow: row wrap;
    align-items: flex-start;
    padding: var(--tt-row-pad) .6em;
    border-top: 1px solid var(--tt-line);
    transition: background .3s cubic-bezier(.4, 0, .2, 1), color .3s cubic-bezier(.4, 0, .2, 1), opacity .3s cubic-bezier(.4, 0, .2, 1);
    transition: background .3s var(--ease, ease), color .3s var(--ease, ease), opacity .3s var(--ease, ease);
}
:where(.timetable .tt-row:first-child) { border-top: 0; }
:where(.timetable .tt-time) {
    color: var(--tt-muted);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, monospace);
    font-size: .82em; font-weight: 500; letter-spacing: .06em; line-height: 1.5;
    white-space: nowrap;
}
:where(.timetable .tt-body) { min-width: 0; }
:where(.timetable .tt-name) {
    display: block;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, system-ui, sans-serif); font-weight: 700;
    font-size: 1.5em; line-height: 1; letter-spacing: .01em; text-transform: uppercase;
}
:where(.timetable .tt-meta) { display: block; margin-top: .35em; color: var(--tt-muted); line-height: 1.4; font-size: .95em; }
:where(.timetable .tt-cap) { padding-top: .25em; }
:where(.timetable .tt-track) {
    position: relative; overflow: hidden;
    height: .55em;
    height: var(--tt-bar, .55em); margin-bottom: .45em;
    background: rgba(3, 3, 3, 0.1);
    box-shadow: inset 0 0 0 1px rgba(6, 6, 6, 0.18);
}

@supports (color: color-mix(in lch, red, blue)) {
:where(.timetable .tt-track) {
    background: color-mix(in srgb, var(--tt-ink) 10%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tt-ink) 18%, transparent);
}
}
:where(.timetable .tt-bar) {
    display: block; height: 100%;
    width: calc(0 * 1%);
    width: calc(var(--tt-fill, 0) * 1%);
    background: var(--tt-accent);
    transition: width .6s cubic-bezier(.4, 0, .2, 1);
    transition: width .6s var(--ease, ease);
}
:where(.timetable .tt-count) {
    display: block; color: var(--tt-muted);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, monospace); font-size: .78em; letter-spacing: .06em; line-height: 1.2;
}

.timetable .tt-live > * { flex: 0 0 auto; }
.timetable .tt-time { flex: 0 0 var(--tt-time-col); }
.timetable .tt-body { flex: 1 1 0; }
.timetable .tt-cap { flex: 0 0 var(--tt-cap-col); }

:where(.timetable .tt-row.is-past) { color: var(--tt-muted); opacity: .62; }
:where(.timetable .tt-row.is-past .tt-name) { color: var(--tt-muted); }
:where(.timetable .tt-row.is-now) { background: var(--tt-accent); color: var(--tt-on-accent); border-top-color: transparent; }
:where(.timetable .tt-row.is-now .tt-time), :where(.timetable .tt-row.is-now .tt-meta), :where(.timetable .tt-row.is-now .tt-count) { color: var(--tt-on-accent); }
:where(.timetable .tt-row.is-now .tt-track) { background: color-mix(in srgb, var(--tt-on-accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tt-on-accent) 30%, transparent); }
:where(.timetable .tt-row.is-now .tt-bar) { background: var(--tt-on-accent); }
:where(.timetable .tt-row.is-now + .tt-row) { border-top-color: transparent; }
:where(.timetable .tt-row.is-next) { border-top: .125rem solid var(--tt-ink); }
:where(.timetable .tt-row.is-now .tt-time) { font-weight: 700; }

:where(.timetable.tt-tone-dark) { --tt-ink: var(--invert-fg, #ffffff); --tt-muted: color-mix(in srgb, var(--invert-fg, #ffffff) 64%, transparent); --tt-line: color-mix(in srgb, var(--invert-fg, #ffffff) 22%, transparent); }

:where(.timetable.tt-align-center) { text-align: center; }
:where(.timetable.tt-align-center .tt-row) { --row-flow: column nowrap; }

@container (max-width: 34em) {
    :where(.timetable .tt-row) { --row-flow: row wrap; }
    .timetable .tt-time { flex: 1 1 100%; }
    .timetable .tt-body { flex: 1 1 100%; }
    .timetable .tt-cap { flex: 1 1 100%; padding-top: .6em; }
}

/* blocks/turn-dots.css */
/* turn-dots — the look of a slideshow's dots (turnDots) and progress line (turnProgress). Both follow the text around
   them: sizes are in em of their own font size, colours default to the text colour. Every knob is a registry prop with
   a cssVar (the editor shows it as a plain control):
   dots:     --dots-size (× the text size) · --dots-gap · --dots-ink · --dots-dim (% strength of the others) · --dots-align
   progress: --progress-thickness (× a hairline) · --progress-ink · --progress-track (% strength of the unfilled part) */
.turn-dots {
    --dot: calc(var(--dots-size, 1) * .55em);
    --dot-gap: calc(var(--dots-gap, 1) * .9em);
    --dot-hit: .8em;   /* the tap area above and below each dot; half the gap either side, so two targets never overlap */
    display: flex; align-items: center; justify-content: end; justify-content: var(--dots-align, end); height: 1.5em; margin: 0;
}
.turn-dots > button {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none; border: 0; box-sizing: content-box; cursor: pointer; color: inherit;
    width: var(--dot); height: var(--dot); border-radius: 50%; flex-shrink: 0;   /* a crowded row overflows its place, a dot stays round */
    padding: var(--dot-hit) calc(var(--dot-gap) / 2); margin: calc(-1 * var(--dot-hit)) 0;
    background: color-mix(in oklab, currentColor calc(22 * 1%), transparent) content-box;
    transition: background-color .3s, scale .3s;
}

@supports (color: color-mix(in lch, red, blue)) {
.turn-dots > button {
    background: color-mix(in oklab, var(--dots-ink, currentColor) calc(var(--dots-dim, 22) * 1%), transparent) content-box;
}
}
.turn-dots > button:first-child { margin-left: calc(-1 * var(--dot-gap) / 2); }   /* the outer dots sit flush with the place */
.turn-dots > button:last-child { margin-right: calc(-1 * var(--dot-gap) / 2); }
.turn-dots > button:hover { scale: 1.25; }
.turn-dots > [aria-current="true"] { background-color: currentColor; background-color: var(--dots-ink, currentColor); }
/* the dot on show, clicked: the reel holds, and the dot draws a pause sign */
.turn-dots > [data-paused] {
    border-radius: 0;
    background: linear-gradient(to right, currentColor 0,currentColor 35%, transparent 35%,transparent 65%, currentColor 65%) content-box;
    background: linear-gradient(to right, var(--dots-ink, currentColor) 0,var(--dots-ink, currentColor) 35%, transparent 35%,transparent 65%, var(--dots-ink, currentColor) 65%) content-box;
    background: linear-gradient(to right, currentColor 0 35%, transparent 35% 65%, currentColor 65%) content-box;
}

@supports (background: linear-gradient(red 0%, red 0% 1%, red 2%)) {
.turn-dots > [data-paused] {
    background: linear-gradient(to right, var(--dots-ink, currentColor) 0 35%, transparent 35% 65%, var(--dots-ink, currentColor) 65%) content-box;
}
}

.turn-progress { position: relative; height: 100%; }
.turn-progress::before, .turn-progress::after {
    content: ''; position: absolute; left: 0; top: 50%; translate: 0 -50%;
    height: calc(1 * .12em);
    height: calc(var(--progress-thickness, 1) * .12em); border-radius: 1em;
}
.turn-progress::before { right: 0; background: color-mix(in oklab, currentColor calc(15 * 1%), transparent); }

@supports (color: color-mix(in lch, red, blue)) {
.turn-progress::before { background: color-mix(in oklab, var(--progress-ink, currentColor) calc(var(--progress-track, 15) * 1%), transparent); }
}
/* the fill is full width and clipped to --p: a frame of the turn repaints the line, it never lays the page out again */
.turn-progress::after {
    right: 0; background: currentColor; background: var(--progress-ink, currentColor);
    clip-path: inset(0 calc((1 - 0) * 100%) 0 0 round 1em);
    clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0 round 1em);
}

/* blocks/video-player.css */

.video-player {
    --vp-surface: var(--surface, color-mix(in srgb, var(--ink, #0a2540) 4%, var(--paper, #fff)));
    --vp-radius: var(--r-lg, var(--radius, 0.875rem));
    --vp-shadow: var(--shadow-card, 0 1.5rem 3.125rem -1.375rem rgba(20, 30, 60, .35), 0 .375rem 1.125rem -.625rem rgba(0, 0, 0, .25));
    margin: 0 auto;
    width: 100%;
    color: #222;
    color: var(--ink, #0a2540);
}

.video-player .vp-stage {
    position: relative;
    aspect-ratio: 16/9;
    aspect-ratio: var(--vp-aspect, 16/9);
    border-radius: var(--vp-radius);
    overflow: hidden;
    background: #000;
    background: var(--vp-matte, #000);
    box-shadow: var(--vp-shadow);
    cursor: pointer;
}
.video-player .vp-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
}

.video-player .vp-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max(3.4rem, min(9cqi, 4.6rem));
    width: clamp(3.4rem, 9cqi, 4.6rem);
    aspect-ratio: 1;
    border: 0;
    border-radius: 50%;
    display: grid;
    align-items: center;
    justify-items: center;
    place-items: center;
    background: rgba(250, 250, 250, 0.9);
    background: color-mix(in srgb, #fafafa 90%, transparent);
    box-shadow: 0 .5rem 1.5rem -.375rem rgba(0, 0, 0, .45);
    color: #007b9a;
    color: var(--accent, #635bff);
    cursor: pointer;
    transition: opacity .25s ease, transform .25s ease, background .2s ease;
    -webkit-backdrop-filter: blur(.375rem);
            backdrop-filter: blur(.375rem);
}

@supports (color: color-mix(in lch, red, blue)) {
.video-player .vp-play {
    background: color-mix(in srgb, var(--paper, #fff) 90%, transparent);
}
}
.video-player .vp-play svg { width: 42%; height: 42%; fill: currentColor; margin-left: 6%; }
.video-player .vp-stage:hover .vp-play { transform: translate(-50%, -50%) scale(1.06); }
.video-player.vp-auto .vp-play,
.video-player.vp-playing .vp-play { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.8); }

.video-player .vp-sound {
    position: absolute;
    right: .7rem;
    bottom: .7rem;
    width: 2.2rem;
    aspect-ratio: 1;
    border: 0;
    border-radius: 50%;
    display: grid;
    align-items: center;
    justify-items: center;
    place-items: center;
    background: rgba(0, 0, 0, 0.45);
    background: color-mix(in srgb, #000 45%, transparent);
    color: #fff;
    color: var(--vp-on-video, #fff);
    cursor: pointer;
    opacity: 0;
    transition: opacity .25s ease, background .2s ease;
    -webkit-backdrop-filter: blur(.25rem);
            backdrop-filter: blur(.25rem);
}

@supports (color: color-mix(in lch, red, blue)) {
.video-player .vp-sound {
    background: color-mix(in srgb, var(--vp-matte, #000) 45%, transparent);
}
}
.video-player.vp-auto:hover .vp-sound,
.video-player.vp-unmuted .vp-sound { opacity: 1; }
.video-player .vp-sound:hover { background: rgba(0, 0, 0, 0.65); background: color-mix(in srgb, #000 65%, transparent); }

@supports (color: color-mix(in lch, red, blue)) {
.video-player .vp-sound:hover { background: color-mix(in srgb, var(--vp-matte, #000) 65%, transparent); }
}
.video-player .vp-sound svg { width: 56%; height: 56%; fill: currentColor; }
.video-player .vp-ic-sound { display: none; }
.video-player.vp-unmuted .vp-ic-muted { display: none; }
.video-player.vp-unmuted .vp-ic-sound { display: block; }

.video-player .vp-control {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .65rem .2rem .1rem;
}
.video-player .vp-toggle {
    flex: none;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    display: grid;
    align-items: center;
    justify-items: center;
    place-items: center;
    background: rgba(0, 15, 18, 0.12);
    background: color-mix(in srgb, #007b9a 12%, transparent);
    color: #007b9a;
    color: var(--accent, #635bff);
    cursor: pointer;
    transition: background .2s ease;
}

@supports (color: color-mix(in lch, red, blue)) {
.video-player .vp-toggle {
    background: color-mix(in srgb, var(--accent, #635bff) 12%, transparent);
}
}
.video-player .vp-toggle:hover { background: rgba(0, 25, 31, 0.2); background: color-mix(in srgb, #007b9a 20%, transparent); }

@supports (color: color-mix(in lch, red, blue)) {
.video-player .vp-toggle:hover { background: color-mix(in srgb, var(--accent, #635bff) 20%, transparent); }
}
.video-player .vp-toggle svg { width: 55%; height: 55%; fill: currentColor; }
.video-player .vp-ic-pause { display: none; }
.video-player.vp-playing .vp-ic-play { display: none; }
.video-player.vp-playing .vp-ic-pause { display: block; }

.video-player .vp-track {
    flex: 1;
    height: .3125rem;
    border-radius: 62.4375rem;
    background: rgba(5, 5, 5, 0.14);
    background: var(--line, rgba(4, 4, 4, 0.12));
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: height .15s ease;
}

@supports (color: color-mix(in lch, red, blue)) {
.video-player .vp-track {
    background: var(--line, color-mix(in srgb, var(--ink, #0a2540) 12%, transparent));
}
}
.video-player .vp-track:hover, .video-player .vp-track:focus-visible { height: .5rem; outline: none; }
.video-player .vp-fill {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform-origin: left;
    transform: scaleX(0);
    background: #007b9a;
    background: var(--accent, #635bff);
    border-radius: 62.4375rem;
}
.video-player .vp-time {
    flex: none;
    font: 500 .72rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 500 .72rem/1 var(--font-mono, ui-monospace, monospace);
    color: #626262;
    color: var(--muted, #425466);
    letter-spacing: .02em;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    min-width: 2.5em;
    text-align: right;
}

.video-player .vp-caption {
    margin-top: .7rem;
    font: 400 .8rem/1.45 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 400 .8rem/1.45 var(--font-mono, ui-monospace, monospace);
    color: #626262;
    color: var(--muted, #888);
    letter-spacing: .02em;
}

.video-player.vp-frame-browser {
    background: #fafafa;
    background: var(--paper, #fff);
    border: 1px solid rgba(5, 5, 5, 0.14);
    border: 1px solid var(--line, rgba(5, 5, 5, 0.14));
    border-radius: var(--vp-radius);
    box-shadow: var(--vp-shadow);
    overflow: hidden;
}

@supports (color: color-mix(in lch, red, blue)) {
.video-player.vp-frame-browser {
    border: 1px solid var(--line, color-mix(in srgb, var(--ink, #0a2540) 14%, transparent));
}
}
.video-player.vp-frame-browser .vp-bar {
    display: flex;
    align-items: center;
    padding: .55rem .85rem;
    border-bottom: 1px solid rgba(5, 5, 5, 0.14);
    border-bottom: 1px solid var(--line, rgba(4, 4, 4, 0.12));
    background: var(--vp-surface);
}

@supports (color: color-mix(in lch, red, blue)) {
.video-player.vp-frame-browser .vp-bar {
    border-bottom: 1px solid var(--line, color-mix(in srgb, var(--ink, #0a2540) 12%, transparent));
}
}
.video-player.vp-frame-browser .vp-dots { display: inline-flex; gap: .4rem; }
.video-player.vp-frame-browser .vp-dots i {
    width: .62rem; height: .62rem; border-radius: 50%;
    background: rgba(7, 7, 7, 0.2);
    background: color-mix(in srgb, #222 20%, transparent);
}

@supports (color: color-mix(in lch, red, blue)) {
.video-player.vp-frame-browser .vp-dots i {
    background: color-mix(in srgb, var(--ink, #0a2540) 20%, transparent);
}
}
.video-player.vp-frame-browser .vp-stage { border-radius: 0; box-shadow: none; }
.video-player.vp-frame-browser .vp-control { padding: .55rem .85rem; }
.video-player.vp-frame-browser .vp-caption { padding: 0 .85rem .7rem; margin-top: 0; }

.video-player.vp-frame-phone {
    max-width: 17rem;
    padding: .4375rem;
    background: #222;
    background: var(--ink, #111);
    border-radius: 1.625rem;
    box-shadow: var(--vp-shadow);
}
.video-player.vp-frame-phone .vp-stage { border-radius: 1.1875rem; box-shadow: none; }
.video-player.vp-frame-phone .vp-control { padding: .5rem .5rem .15rem; }
.video-player.vp-frame-phone .vp-time { color: rgba(250, 250, 250, 0.7); color: color-mix(in srgb, #fafafa 70%, transparent); }

@supports (color: color-mix(in lch, red, blue)) {
.video-player.vp-frame-phone .vp-time { color: color-mix(in srgb, var(--paper, #fff) 70%, transparent); }
}
.video-player.vp-frame-phone .vp-caption { padding: 0 .3rem .2rem; color: rgba(250, 250, 250, 0.6); color: color-mix(in srgb, #fafafa 60%, transparent); }

@supports (color: color-mix(in lch, red, blue)) {
.video-player.vp-frame-phone .vp-caption { color: color-mix(in srgb, var(--paper, #fff) 60%, transparent); }
}

.video-player.vp-error { display: none; }

@media (max-width: 768px) {
    .video-player.vp-frame-phone { max-width: none; }
}

/* blocks/video-wall.css */

.video-wall {
    --vw-radius: var(--r-lg, var(--radius, 0.875rem));
    --vw-frame:  var(--line, color-mix(in srgb, var(--ink, #0a2540) 12%, transparent));
    --vw-shadow: var(--shadow-lift, 0 1.125rem 2.5rem -1rem rgba(20, 30, 60, .35), 0 .375rem 1rem -.5rem rgba(0, 0, 0, .25));
    --vw-pad:    max(.8rem, min(calc(2 * var(--pe-vw)), 1.4rem));
    --vw-pad:    clamp(.8rem, calc(2 * var(--pe-vw)), 1.4rem);
    display: flex; flex-direction: column; gap: max(.9rem, min(calc(2.2 * var(--pe-vw)), 1.6rem)); gap: clamp(.9rem, calc(2.2 * var(--pe-vw)), 1.6rem);
    container-type: inline-size;
}
.video-wall .vw-label {
    font: 600 .72rem/1 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 600 var(--fs-micro, .72rem)/1 var(--font-mono, ui-monospace, monospace);
    letter-spacing: .14em; text-transform: uppercase;
    color: #007b9a;
    color: var(--accent, #635bff);
}

.video-wall .vw-clip { margin: 0; min-width: 0; }
.video-wall .vw-frame {
    position: relative; overflow: hidden; background: #222; background: var(--ink, #0a1020);
    border: 1px solid var(--vw-frame); border-radius: var(--vw-radius);
    box-shadow: var(--vw-shadow);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s cubic-bezier(.22, 1, .36, 1);
    transform: translateZ(0);
}
.video-wall .vw-frame video {
    display: block; width: 100%; height: auto; -o-object-fit: cover; object-fit: cover;
    background: #222;
    background: var(--ink, #0a1020);
}
.video-wall .vw-clip:hover .vw-frame {
    transform: translateY(-.25rem) scale(1.012);
    box-shadow: 0 50px 100px -20px rgba(34, 34, 34, 0.22),
                    0 30px 60px -30px rgba(34, 34, 34, 0.26);
    box-shadow: 0 50px 100px -20px color-mix(in srgb, #222 22%, transparent),
                    0 30px 60px -30px color-mix(in srgb, #222 26%, transparent);
    box-shadow: var(--shadow-panel, 0 2.5rem 5rem -1.5rem rgba(20, 30, 60, .4), 0 1rem 2.25rem -1rem rgba(0, 0, 0, .3));
}

.video-wall .vw-cap {
    margin-top: .6rem;
    font: 400 .8rem/1.45 ui-monospace, 'SF Mono', Menlo, monospace;
    font: 400 var(--fs-mono, .8rem)/1.45 var(--font-mono, ui-monospace, monospace);
    letter-spacing: .02em; color: #626262; color: var(--muted, #425466);
}
.video-wall .vw-cap::before { content: none; }

.video-wall .vw-play { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; align-items: center; justify-items: center; place-items: center; pointer-events: none;
    opacity: 0; transition: opacity .3s ease; }
.video-wall [data-vw-hover] ~ .vw-play { opacity: 1; }
.video-wall .vw-clip:hover [data-vw-hover] ~ .vw-play { opacity: 0; }
.video-wall .vw-play::before {
    content: ""; width: max(2.6rem, min(5cqi, 3.4rem)); width: clamp(2.6rem, 5cqi, 3.4rem); aspect-ratio: 1; border-radius: 50%;
    background: rgba(250, 250, 250, 0.86);
    background: color-mix(in srgb, #fafafa 86%, transparent);
    box-shadow: 0 .375rem 1.25rem -.375rem rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(.25rem);
            backdrop-filter: blur(.25rem);
}

@supports (color: color-mix(in lch, red, blue)) {
.video-wall .vw-play::before {
    background: color-mix(in srgb, var(--paper, #fff) 86%, transparent);
}
}
.video-wall .vw-play::after {
    content: ""; position: absolute;
    width: 0; height: 0; border-style: solid;
    border-width: .52rem 0 .52rem .82rem;
    border-color: transparent transparent transparent #222;
    border-color: transparent transparent transparent var(--ink, #0a2540);
    transform: translateX(.12rem);
}

.video-wall.vw-feature .vw-lead .vw-clip { max-width: none; }
.video-wall.vw-feature .vw-rail {
    display: grid; grid-gap: max(.7rem, min(1.8cqi, 1.2rem)); grid-gap: clamp(.7rem, 1.8cqi, 1.2rem); gap: max(.7rem, min(1.8cqi, 1.2rem)); gap: clamp(.7rem, 1.8cqi, 1.2rem);
    grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
    align-items: start;
}
.video-wall.vw-feature .vw-rail .is-portrait { align-self: stretch; }
.video-wall.vw-feature .vw-rail .is-landscape { grid-column: span 2; }

.video-wall.vw-grid .vw-set {
    display: grid; grid-gap: max(.7rem, min(1.8cqi, 1.2rem)); grid-gap: clamp(.7rem, 1.8cqi, 1.2rem); gap: max(.7rem, min(1.8cqi, 1.2rem)); gap: clamp(.7rem, 1.8cqi, 1.2rem);
    grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));
    grid-auto-flow: dense; align-items: start;
}
.video-wall.vw-grid .is-landscape { grid-column: span 2; }
@container (max-width: 460px) {
    .video-wall.vw-grid .is-landscape { grid-column: 1 / -1; }
}

.video-wall.vw-strip .vw-set {
    display: grid; grid-auto-flow: column; grid-gap: max(.7rem, min(1.8cqi, 1.2rem)); grid-gap: clamp(.7rem, 1.8cqi, 1.2rem); gap: max(.7rem, min(1.8cqi, 1.2rem)); gap: clamp(.7rem, 1.8cqi, 1.2rem);
    grid-auto-columns: minmax(9rem, 1fr); align-items: end;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
    padding-bottom: .4rem;
}
.video-wall.vw-strip .vw-clip { scroll-snap-align: start; }
.video-wall.vw-strip .is-landscape { grid-column: span 2; }

@container (max-width: 540px) {
    .video-wall.vw-feature .vw-rail { grid-template-columns: 1fr 1fr; }
    .video-wall.vw-feature .vw-rail .is-landscape { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
    .video-wall .vw-frame { border-radius: 1vh; border-radius: var(--radius, .75rem); }
}

/* blocks/viewing-card.css */

:where(.viewing-card) {
    --vc-ink: var(--ink, #111);
    --vc-muted: var(--muted, #666);
    --vc-line: var(--line, #e3e3e3);
    --vc-paper: var(--paper, #fff);
    --vc-surface: var(--surface, color-mix(in srgb, var(--ink, #111) 4%, var(--paper, #fff)));
    --vc-accent: var(--accent, #17456B);
    --vc-on-accent: var(--on-accent, #fff);
    position: relative;
    width: 100%; margin: 0;
    padding: 2.4em 2.4em 2.2em;
    color: #222;
    color: var(--vc-ink);
    background: #fafafa;
    background: var(--vc-paper);
    border-radius: calc(.6 * 1em);
    border-radius: calc(var(--vc-radius, .6) * 1em);
    box-shadow: 0 0 0 1px rgba(5, 5, 5, 0.14);
    box-shadow: 0 0 0 1px var(--vc-line);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, system-ui, sans-serif);
}
:where(.viewing-card.vc-tone-tint) { background: var(--vc-surface); }
:where(.viewing-card.vc-shadow-soft) {
    box-shadow: 0 0 0 1px var(--vc-line), 0 1px .125rem rgba(2, 2, 2, 0.05), 0 1.2em 2.6em -1em rgba(6, 6, 6, 0.18);
}

@supports (color: color-mix(in lch, red, blue)) {
:where(.viewing-card.vc-shadow-soft) {
    box-shadow: 0 0 0 1px var(--vc-line), 0 1px .125rem color-mix(in srgb, var(--vc-ink) 5%, transparent), 0 1.2em 2.6em -1em color-mix(in srgb, var(--vc-ink) 18%, transparent);
}
}
:where(.viewing-card.vc-shadow-deep) {
    box-shadow: 0 0 0 1px var(--vc-line), 0 1px .125rem rgba(3, 3, 3, 0.08), 0 2.4em 4.6em -1.4em rgba(11, 11, 11, 0.32);
}

@supports (color: color-mix(in lch, red, blue)) {
:where(.viewing-card.vc-shadow-deep) {
    box-shadow: 0 0 0 1px var(--vc-line), 0 1px .125rem color-mix(in srgb, var(--vc-ink) 8%, transparent), 0 2.4em 4.6em -1.4em color-mix(in srgb, var(--vc-ink) 32%, transparent);
}
}

:where(.viewing-card .vc-head) { margin-bottom: 1.8em; }
:where(.viewing-card .vc-eyebrow) { margin: 0 0 .9em; color: var(--vc-muted); font-size: .78em; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; }
:where(.viewing-card .vc-title) { margin: 0; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, system-ui, sans-serif); font-weight: 500; font-size: 1.9em; line-height: 1.05; letter-spacing: -.02em; }
:where(.viewing-card .vc-intro) { margin: .8em 0 0; max-width: 40em; color: var(--vc-muted); font-size: 1em; line-height: 1.45; }

:where(.viewing-card .vc-hp) { position: absolute; left: calc(-200 * var(--pe-vw)); top: 0; width: .1em; height: .1em; overflow: hidden; }

:where(.viewing-card .vc-fields) { --row-gap: 1.2em; --row-item: 12em; margin-bottom: 1.2em; }
:where(.viewing-card .vc-field) { display: block; margin-bottom: 0; }
:where(.viewing-card .vc-body > .vc-field) { margin-bottom: 1.2em; }
:where(.viewing-card .vc-field-wide) { flex-basis: 100%; }
:where(.viewing-card .vc-label) { display: block; margin-bottom: .55em; color: var(--vc-muted); font-size: .78em; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; }
:where(.viewing-card .vc-input) {
    display: block; width: 100%; box-sizing: border-box;
    padding: .8em .95em;
    color: var(--vc-ink); background: var(--vc-surface);
    border: 1px solid transparent; border-radius: calc(.6 * .5em); border-radius: calc(var(--vc-radius, .6) * .5em);
    font: inherit; font-size: 1em; line-height: 1.3;
    transition: border-color .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s cubic-bezier(.4, 0, .2, 1);
    transition: border-color .2s var(--ease, ease), box-shadow .2s var(--ease, ease);
}
:where(.viewing-card.vc-tone-tint .vc-input) { background: var(--vc-paper); }
:where(.viewing-card .vc-input:focus-visible) { outline: none; border-color: var(--vc-accent); box-shadow: 0 0 0 .1875rem rgba(0, 27, 34, 0.22); }

@supports (color: color-mix(in lch, red, blue)) {
:where(.viewing-card .vc-input:focus-visible) { box-shadow: 0 0 0 .1875rem color-mix(in srgb, var(--vc-accent) 22%, transparent); }
}
:where(.viewing-card .vc-select) { -moz-appearance: none; appearance: none; -webkit-appearance: none; padding-right: 2.4em; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.25em) 55%, calc(100% - .9em) 55%; background-size: .35em .35em; background-repeat: no-repeat; }
:where(.viewing-card .vc-textarea) { resize: vertical; min-height: 4.4em; }

:where(.viewing-card .vc-choice) { margin: 0 0 1.2em; padding: 0; border: 0; min-width: 0; }
:where(.viewing-card .vc-pills) { --row-gap: .6em; --row-item: 0; }
:where(.viewing-card .vc-pill) { position: relative; display: block; cursor: pointer; }
:where(.viewing-card .vc-pill input) { position: absolute; opacity: 0; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
:where(.viewing-card .vc-pill span) {
    display: block; padding: .7em 1.2em; white-space: nowrap;
    color: var(--vc-ink); background: var(--vc-paper);
    border: 1px solid var(--vc-line); border-radius: 99em;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, ui-monospace, monospace); font-size: .9em; font-weight: 500; line-height: 1.2; text-align: center;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    transition: background .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1), border-color .2s cubic-bezier(.4, 0, .2, 1);
    transition: background .2s var(--ease, ease), color .2s var(--ease, ease), border-color .2s var(--ease, ease);
}
:where(.viewing-card .vc-pill:hover span) { border-color: var(--vc-ink); }
:where(.viewing-card .vc-pill input:checked + span) { background: var(--vc-accent); color: var(--vc-on-accent); border-color: var(--vc-accent); }
:where(.viewing-card .vc-pill input:focus-visible + span) { box-shadow: 0 0 0 .1875rem rgba(0, 31, 39, 0.25); }

@supports (color: color-mix(in lch, red, blue)) {
:where(.viewing-card .vc-pill input:focus-visible + span) { box-shadow: 0 0 0 .1875rem color-mix(in srgb, var(--vc-accent) 25%, transparent); }
}

:where(.viewing-card .vc-foot) { --row-gap: 1.2em; --row-item: 0; align-items: center; margin-top: .4em; }
:where(.viewing-card .vc-foot > *) { flex: 0 1 auto; }
:where(.viewing-card .vc-submit) { font-family: inherit; }
:where(.viewing-card .vc-footnote) { margin: 0; color: var(--vc-muted); font-size: .88em; line-height: 1.4; }

:where(.viewing-card .vc-error) { display: none; margin: 0 0 1em; color: var(--vc-accent); font-size: .92em; line-height: 1.4; }
:where(.viewing-card.is-failed .vc-error) { display: block; }
:where(.viewing-card.is-busy .vc-submit) { opacity: .55; pointer-events: none; }
:where(.viewing-card .vc-success) { display: none; }
:where(.viewing-card.is-sent .vc-head), :where(.viewing-card.is-sent .vc-body) { display: none; }
:where(.viewing-card.is-sent .vc-success) { display: block; padding: 1em 0 .4em; }
:where(.viewing-card .vc-success-title) { margin: 0; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, system-ui, sans-serif); font-weight: 500; font-size: 1.9em; line-height: 1.05; letter-spacing: -.02em; }
:where(.viewing-card .vc-success-text) { margin: 1em 0 0; max-width: 40em; color: var(--vc-muted); font-size: 1em; line-height: 1.5; }
:where(.viewing-card.vc-align-center) { text-align: center; }

/* blocks/wedding-day.css */

.wedding-day {
    --wd-ink: var(--ink, #1b1b1b);
    --wd-muted: var(--muted, #666);
    --wd-line: var(--line, #ddd);
    --wd-ground: var(--page-bg, #fff);
    --wd-accent: var(--accent, #3b3470);
    --wd-ease: var(--ease-slow, cubic-bezier(.65, 0, .15, 1));
    position: relative; width: 100%; margin: 0;
    color: #222;
    color: var(--wd-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, 'Helvetica Neue', Arial, sans-serif);
}
.wedding-day.wd-tone-dark {
    --wd-ink: var(--invert-fg, #f3ede1);
    --wd-muted: color-mix(in srgb, var(--invert-fg, #f3ede1) 72%, transparent);
    --wd-line: color-mix(in srgb, var(--invert-fg, #f3ede1) 24%, transparent);
    --wd-ground: var(--invert-bg, #1b1b1b);
    --wd-accent: var(--spark, var(--invert-fg, #f3ede1));
}

.wedding-day .wd-stage { position: relative; }
.wedding-day .wd-head > *, .wedding-day .wd-caption > * { margin: 0; }
.wedding-day .wd-eyebrow { font-size: .78em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; color: var(--wd-muted); }
.wedding-day .wd-title { margin-top: .5em; margin-left: -.03em; max-width: 12em; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 300; font-size: 2.2em; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.wedding-day .wd-title em { font-style: italic; color: var(--wd-accent); }
.wedding-day .wd-plates { position: relative; margin: 2em 0 0; aspect-ratio: 16 / 10; }
.wedding-day .wd-plate { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; }
.wedding-day:not(.is-live) .wd-plate + .wd-plate { display: none; }
.wedding-day .wd-photo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--wd-line); }
.wedding-day .wd-photo img, .wedding-day .wd-photo picture, .wedding-day .wd-inset img, .wedding-day .wd-inset picture { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.wedding-day .wd-inset { position: absolute; left: -9%; bottom: 7%; width: 30%; aspect-ratio: 3 / 4; margin: 0; overflow: hidden; background: var(--wd-line); box-shadow: 0 0 0 .55em var(--wd-ground); }
.wedding-day:not(.is-live) .wd-inset, .wedding-day:not(.is-live) .wd-hours, .wedding-day:not(.is-live) .wd-rail { display: none; }
.wedding-day .wd-captions { list-style: none; margin: 2em 0 0; padding: 0; }
.wedding-day:not(.is-live) .wd-caption + .wd-caption { margin-top: 1.8em; }
.wedding-day .wd-place { font-size: .78em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; color: var(--wd-accent); }
.wedding-day .wd-name { margin-top: .4em; margin-left: -.03em; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-weight: 300; font-size: 2.3em; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.wedding-day .wd-body { margin-top: .8em; max-width: 30em; font-size: 1em; line-height: 1.55; color: var(--wd-muted); text-wrap: pretty; }
.wedding-day .wd-link { display: inline-block; margin-top: 1em; padding-bottom: .15em; border-bottom: 1px solid var(--wd-line); color: inherit; font-weight: 500; -webkit-text-decoration: none; text-decoration: none; transition: border-color .3s cubic-bezier(.4, 0, .2, 1); transition: border-color .3s var(--ease, ease); }
.wedding-day .wd-link:hover { border-bottom-color: currentColor; }
.wedding-day .wd-link:focus-visible { outline: .125rem solid var(--wd-accent); outline-offset: .3em; }

.wedding-day.is-live, .plot > .wedding-day.is-live { height: calc(6 * 75 * 1svh + 100svh); height: calc(var(--wd-count, 6) * var(--wd-step, 75) * 1svh + 100svh); }
.wedding-day.is-live .wd-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.wedding-day.is-live .wd-head { position: absolute; left: 0; top: 11%; width: 40%; }
.wedding-day.is-live .wd-plates { position: absolute; right: 0; top: 11%; width: 55%; height: 72%; margin: 0; aspect-ratio: auto; }
.wedding-day.is-live .wd-plate {
    clip-path: inset(100% 0 0 -30%);
    transition: clip-path 1.25s var(--wd-ease);
}
.wedding-day.is-live .wd-plate .wd-photo img { transform: scale(1.12); transition: transform 2.4s var(--wd-ease); }
.wedding-day.is-live .wd-plate.is-active, .wedding-day.is-live .wd-plate.is-past { clip-path: inset(0 0 0 -30%); }
.wedding-day.is-live .wd-plate.is-active .wd-photo img, .wedding-day.is-live .wd-plate.is-past .wd-photo img { transform: scale(1); }
.wedding-day.is-live .wd-inset { transform: translateY(18%); opacity: 0; transition: transform 1.4s var(--wd-ease) .25s, opacity .8s cubic-bezier(.4, 0, .2, 1) .25s; transition: transform 1.4s var(--wd-ease) .25s, opacity .8s var(--ease, ease) .25s; }
.wedding-day.is-live .wd-plate.is-active .wd-inset { transform: none; opacity: 1; }
.wedding-day.is-live .wd-plate.is-past .wd-inset { opacity: 0; transition-delay: 0s; }

.wedding-day.is-live .wd-hours { position: absolute; left: -.06em; top: 34%; width: 42%; height: 1.02em; overflow: hidden; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display, Georgia, serif); font-style: italic; font-weight: 200; font-size: 8.4em; font-size: var(--wd-hour-size, 8.4em); line-height: 1; letter-spacing: -.04em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.wedding-day.is-live .wd-hour { position: absolute; left: 0; top: 0; margin: 0; white-space: nowrap; transform: translateY(105%); transition: transform 1.1s var(--wd-ease); }
.wedding-day.is-live .wd-hour.is-active { transform: none; }
.wedding-day.is-live .wd-hour.is-past { transform: translateY(-105%); }

.wedding-day.is-live .wd-captions { position: absolute; left: 0; top: 57%; width: 36%; margin: 0; }
.wedding-day.is-live .wd-caption { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transform: translateY(1.4em); visibility: hidden; transition: opacity .6s cubic-bezier(.4, 0, .2, 1), transform .9s var(--wd-ease), visibility 0s linear .9s; transition: opacity .6s var(--ease, ease), transform .9s var(--wd-ease), visibility 0s linear .9s; }
.wedding-day.is-live .wd-caption.is-active { opacity: 1; transform: none; visibility: visible; transition-delay: .2s, .2s, 0s; }

.wedding-day.is-live .wd-rail { position: absolute; left: 0; right: 0; bottom: 5.5%; height: 2.6em; margin: 0; padding: 0; list-style: none; font-size: .8em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.wedding-day.is-live .wd-tick { position: absolute; top: 0; left: calc(0 * 100% / 6); left: calc(var(--wd-i, 0) * 100% / var(--wd-count, 6)); box-sizing: border-box; width: calc(100% / 6); width: calc(100% / var(--wd-count, 6)); white-space: nowrap; padding: .9em 0 0; border-top: 1px solid var(--wd-line); color: var(--wd-muted); font-weight: 500; letter-spacing: .04em; transition: color .5s cubic-bezier(.4, 0, .2, 1), border-color .5s cubic-bezier(.4, 0, .2, 1), box-shadow .5s cubic-bezier(.4, 0, .2, 1); transition: color .5s var(--ease, ease), border-color .5s var(--ease, ease), box-shadow .5s var(--ease, ease); }
.wedding-day.is-live .wd-tick.is-past { border-top-color: rgba(0, 68, 85, 0.55); }

@supports (color: color-mix(in lch, red, blue)) {
.wedding-day.is-live .wd-tick.is-past { border-top-color: color-mix(in srgb, var(--wd-accent) 55%, transparent); }
}
.wedding-day.is-live .wd-tick.is-active { border-top-color: var(--wd-accent); box-shadow: inset 0 .125rem 0 var(--wd-accent); color: var(--wd-ink); }

.wedding-day .wd-marks { position: absolute; left: 0; top: 50svh; bottom: 50svh; width: .1em; pointer-events: none; }
.wedding-day .wd-mark { display: block; height: calc(100% / 6); height: calc(100% / var(--wd-count, 6)); }
.wedding-day:not(.is-live) .wd-marks { display: none; }

@container (max-width: 44rem) {
    .wedding-day.is-live .wd-head { top: 10%; width: 100%; }
    .wedding-day.is-live .wd-title { font-size: 1.6em; }
    .wedding-day.is-live .wd-plates { left: 0; right: 0; top: 24%; width: auto; height: 34%; }
    .wedding-day.is-live .wd-inset { left: auto; right: 5%; bottom: -12%; width: 26%; }
    .wedding-day.is-live .wd-hours { top: 61%; width: 70%; font-size: 4.6em; font-size: var(--wd-hour-size-narrow, 4.6em); }
    .wedding-day.is-live .wd-captions { top: 71%; width: 100%; }
    .wedding-day.is-live .wd-name { font-size: 1.6em; }
    .wedding-day.is-live .wd-body { display: none; }
    .wedding-day.is-live .wd-rail { bottom: 3%; font-size: .74em; letter-spacing: 0; }
}
html.respect-reduced-motion .wedding-day.is-live .wd-plate, html.respect-reduced-motion .wedding-day.is-live .wd-hour, html.respect-reduced-motion .wedding-day.is-live .wd-caption, html.respect-reduced-motion .wedding-day.is-live .wd-inset, html.respect-reduced-motion .wedding-day.is-live .wd-plate .wd-photo img { transition: none; }

/* blocks/wires.css */
.wires { display: block; width: 100%; height: 100%;
    --wires-stroke: var(--wires-color, color-mix(in srgb, var(--ink, #0a2540) 40%, transparent));
    --wires-w: calc(var(--wires-stroke-width, 1.5) * 0.0625rem); --wires-dot: 0.375rem; }
.wires svg { display: block; width: 100%; height: 100%; overflow: visible; }
.wires path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.wires-w { stroke: var(--wires-stroke); stroke-width: var(--wires-w); }
.wires-ring { stroke: var(--wires-stroke); stroke-width: calc(var(--wires-dot) + var(--wires-w) * 2); }
.wires-tip { stroke: #fafafa; stroke: var(--paper, #fff); stroke-width: var(--wires-dot); }
.wires-hub { stroke: #007b9a; stroke: var(--wires-hub, var(--accent, #635bff)); stroke-width: calc(var(--wires-dot) + .125rem); }

/* blocks/work-index.css */

.work-index {
    --wkx-ink: var(--ink, #151513);
    --wkx-muted: var(--muted, #65625b);
    --wkx-faint: var(--faint, #8a867e);
    --wkx-line: var(--line, #d8d5cd);
    --wkx-accent: var(--accent, #b3321d);
    --wkx-title-scale: 3.25;
    --hidx-aspect: 4 / 5;
    --hidx-shift: .4cqi;
    --hidx-scale: 1.02;
    --hidx-dim: var(--wkx-faint);
    --row-gap: 5cqi;
    width: 100%; margin: 0;
    color: #222;
    color: var(--wkx-ink);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-text, 'Helvetica Neue', Arial, sans-serif);
}
.work-index.wkx-title-medium { --wkx-title-scale: 2.3; }
.work-index.wkx-title-huge { --wkx-title-scale: 4.4; }
.work-index.wkx-aspect-square { --hidx-aspect: 1 / 1; }
.work-index.wkx-aspect-wide { --hidx-aspect: 3 / 2; }

.work-index .wkx-list { --row-item: 40%; --row-flow: column nowrap; --row-gap: 0; flex-grow: 1; }
.work-index .wkx-presenter { --row-item: 50%; --row-flow: column nowrap; --row-gap: 0; flex-grow: 1.4; }
.work-index.wkx-plate-left .wkx-presenter { order: -1; }
.work-index .wkx-list > *, .work-index .wkx-presenter > * { --row-item: auto; flex-grow: 0; }
.work-index .wkx-list > .wkx-eyebrow { margin: 0 0 2.4em; }
.work-index .wkx-list > .wkx-rows { margin: auto 0 0; }
.work-index.wkx-aspect-fill .wkx-presenter > .wkx-plate { flex-grow: 1; }

.work-index .wkx-eyebrow {
    color: var(--wkx-muted);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, 'SFMono-Regular', Menlo, monospace); font-size: .82em; line-height: 1.4; letter-spacing: .01em;
}

.work-index .wkx-rows { list-style: none; padding: 0; }
.work-index .wkx-row { margin: 0; border-top: 1px solid var(--wkx-line); }
.work-index .wkx-row:first-child { border-top: 0; }
.work-index .wkx-link {
    display: block; position: relative;
    padding: 1.05em 3.4em 1.1em 0;
    color: var(--wkx-ink); -webkit-text-decoration: none; text-decoration: none;
    transition: color .32s cubic-bezier(.4, 0, .2, 1);
    transition: color .32s var(--ease, ease);
}
.work-index .wkx-row:first-child .wkx-link { padding-top: 0; }
.work-index.wkx-numbers-1 .wkx-link { padding-left: 3.6em; }
.work-index .wkx-link:focus-visible { outline: .125rem solid var(--wkx-accent); outline-offset: .3em; }

.work-index .wkx-n {
    display: none; position: absolute; left: 0; top: 1.62em;
    color: var(--wkx-muted);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, 'SFMono-Regular', Menlo, monospace); font-size: .82em; line-height: 1; letter-spacing: .02em;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    transition: color .32s cubic-bezier(.4, 0, .2, 1);
    transition: color .32s var(--ease, ease);
}
.work-index.wkx-numbers-1 .wkx-n { display: block; }
.work-index .wkx-row:first-child .wkx-n { top: .5em; }
.work-index .wkx-mark {
    position: absolute; left: 1.95em; top: 1.36em;
    width: .44em; height: .44em;
    background: var(--wkx-accent);
    transform: scale(0); transform-origin: 50% 50%;
    transition: transform .36s cubic-bezier(.4, 0, .2, 1);
    transition: transform .36s var(--ease, ease);
}
.work-index .wkx-row:first-child .wkx-mark { top: .31em; }
.work-index:not(.wkx-numbers-true):not(.wkx-numbers-1) .wkx-mark { left: auto; right: 0; top: auto; bottom: 1.5em; }

.work-index .wkx-title {
    display: block;
    margin: 0 0 .32em -.045em;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display, 'Helvetica Neue', Arial, sans-serif); font-weight: 400;
    font-size: calc(var(--wkx-title-scale) * 1em); line-height: .98; letter-spacing: -.035em;
    text-wrap: balance;
}
.work-index .wkx-client { margin-right: 1.25em; color: var(--wkx-muted); font-size: 1em; line-height: 1.4; transition: color .32s cubic-bezier(.4, 0, .2, 1); transition: color .32s var(--ease, ease); }
.work-index .wkx-place, .work-index .wkx-year {
    color: var(--wkx-muted);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, 'SFMono-Regular', Menlo, monospace); font-size: .82em; line-height: 1.4; letter-spacing: .01em;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    transition: color .32s cubic-bezier(.4, 0, .2, 1);
    transition: color .32s var(--ease, ease);
}
.work-index .wkx-place { white-space: nowrap; }
.work-index .wkx-year { position: absolute; right: 0; bottom: 1.34em; }
.work-index .wkx-arrow {
    position: absolute; right: 0; top: 1.05em;
    font-size: calc(var(--wkx-title-scale) * .42em); line-height: 1;
    color: var(--wkx-ink);
    opacity: 0; transform: translate(-.25em, .25em);
    transition: opacity .3s cubic-bezier(.4, 0, .2, 1), transform .45s cubic-bezier(.4, 0, .2, 1);
    transition: opacity .3s var(--ease, ease), transform .45s var(--ease, ease);
}
.work-index .wkx-row:first-child .wkx-arrow { top: 0; }

.work-index .wkx-link.is-active .wkx-mark { transform: scale(1); }
.work-index .wkx-link.is-active .wkx-n { color: var(--wkx-ink); }
.work-index .wkx-link.is-active .wkx-arrow { opacity: 1; transform: none; }
.work-index .wkx-link.is-dim { color: var(--wkx-faint); }
.work-index .wkx-link.is-dim .wkx-client, .work-index .wkx-link.is-dim .wkx-place,
.work-index .wkx-link.is-dim .wkx-year, .work-index .wkx-link.is-dim .wkx-n { color: var(--wkx-muted); }

.work-index .wkx-plate { width: 100%; }
.work-index.wkx-aspect-fill .wkx-plate { --hidx-aspect: auto; min-height: 24cqi; }
.work-index .wkx-stack { margin: 0; }
.work-index .wkx-picture { margin: 0; border-radius: 0; }
.work-index .wkx-readout {
    margin: 0; padding-top: 1.05em;
    color: var(--wkx-muted);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-family: var(--font-mono, 'SFMono-Regular', Menlo, monospace); font-size: .82em; line-height: 1.4; letter-spacing: .01em;
}
.work-index .wkx-counter { margin-right: 2.4em; color: var(--wkx-ink); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

.work-index.wkx-reveal-wipe [data-hidx-frame] {
    z-index: 1; opacity: 0;
    transition: opacity .3s linear calc(.8 * 1s);
    transition: opacity .3s linear calc(var(--wkx-wipe, .8) * 1s);
}
.work-index.wkx-reveal-wipe [data-hidx-frame].is-active {
    z-index: 3; opacity: 1; transition: none;
    animation: wkx-wipe calc(.8 * 1s) cubic-bezier(.4, 0, .2, 1) both;
    animation: wkx-wipe calc(var(--wkx-wipe, .8) * 1s) var(--ease, cubic-bezier(.2, .7, .15, 1)) both;
}
.work-index.wkx-reveal-wipe [data-hidx-frame].is-active img { animation: wkx-settle calc(.8 * 1.8s) cubic-bezier(.4, 0, .2, 1) both; animation: wkx-settle calc(var(--wkx-wipe, .8) * 1.8s) var(--ease, cubic-bezier(.2, .7, .15, 1)) both; }
@keyframes wkx-wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes wkx-settle { from { transform: scale(1.06); } to { transform: scale(1); } }

@container (max-width: 30rem) {
    .work-index .wkx-list, .work-index .wkx-presenter { --row-item: auto; }

    .work-index .wkx-presenter { order: -1; }
    .work-index { --hidx-aspect: 4 / 5; --row-gap: 7cqi; --wkx-title-scale: 2.2; }
    .work-index.wkx-aspect-fill .wkx-plate { --hidx-aspect: 4 / 5; }
    .work-index .wkx-list > .wkx-eyebrow { margin-bottom: 1.4em; }
}

/* blocks/zz-graceful.css */

html:not(.smooth-scroll) #smooth-wrapper { height: 100%; overflow-y: auto; overflow-x: hidden; }

html:not(.smooth-scroll):not(.honest-gutters) .section[data-section]:not(.plotgrid) { justify-content: flex-start; padding: 0; }
html:not(.smooth-scroll).honest-gutters .section[data-section] { justify-content: flex-start; padding-top: 0; padding-bottom: 0; }

html:not(.smooth-scroll):not(.native-scroll) .section[data-section] canvas { display: none; }
html:not(.smooth-scroll):not(.native-scroll) .section[data-section] .layer-sticky { position: static; width: auto !important; height: auto !important; max-width: none !important; max-height: none !important; }
html:not(.smooth-scroll):not(.native-scroll) .section[data-section] .free {
    position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
    width: auto !important; height: auto !important; transform: none !important; margin: 0 !important;
    min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
html:not(.smooth-scroll):not(.native-scroll) .section[data-section] .free > * { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; }
.js svg[data-fit]:not([data-fitted]) { visibility: hidden; }
html:not(.smooth-scroll):not(.native-scroll) .section[data-section] .svg_wrap { position: static !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; margin: 3vh auto 0; }
html:not(.smooth-scroll):not(.native-scroll) .section[data-section] :has(> .svg_wrap) { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; }
html:not(.smooth-scroll):not(.native-scroll) .section[data-section]:has(.svg_wrap) { min-height: 100vh !important; justify-content: center; }
html:not(.smooth-scroll):not(.native-scroll) .section[data-section]:has(.svg_wrap) .free { min-height: 0 !important; }
html:not(.smooth-scroll):not(.native-scroll) .section[data-section]:not(.plotgrid) { min-height: 0 !important; padding: 0; }

.js [data-reveal-hide="visibility"] { visibility: hidden; }
.js [data-reveal-hide="opacity"]    { opacity: 0; }

:focus-visible { outline: .125rem solid #007b9a; outline: .125rem solid var(--accent, currentColor); outline-offset: .125rem; border-radius: .125rem; }
.skip-link {
    position: absolute; left: .5rem; top: 0; z-index: 100000; transform: translateY(-150%);
    padding: .6rem 1rem; border-radius: .4rem;
    background: #222;
    background: var(--ink, #111); color: #f9f9f9; color: var(--page-bg, #fff);
    font: 600 .85rem/1 'Open Sans', Arial, Helvetica, sans-serif;
    font: 600 .85rem/1 var(--font-text, system-ui, sans-serif); -webkit-text-decoration: none; text-decoration: none; transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(.5rem); }
.skip-link:focus:not(:focus-visible) { transform: translateY(-150%); }   /* a click or a script's focus never shows it, a Tab does (a browser without :focus-visible drops this rule and keeps :focus) */
@media (prefers-reduced-motion: reduce) {
    html.respect-reduced-motion *, html.respect-reduced-motion *::before, html.respect-reduced-motion *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* blocks/zz-paint-frame.css */

.paint-frame {
    --frame-top: 0px;
    --frame-right: 0px;
    --frame-bottom: 0px;
    --frame-left: 0px;
    --frame-radius: 0px;

    --col-top: 0px;
    --col-right: 0px;
    --col-bottom: 0px;
    --col-left: 0px;
}

html.paint-frame,
html.paint-frame body { overflow-x: clip; }
html.paint-frame { background: #f9f9f9; background: var(--page-bg); }
.paint-frame body { background: transparent; }

.paint-frame #intro_stage {
    position: static;
    z-index: auto;
    overflow: visible;
    contain: none;
    container-type: inline-size;
    background: none;
    margin: var(--col-top) var(--col-right) var(--col-bottom) var(--col-left);
}

html.paint-frame:not(.smooth-scroll) #smooth-wrapper { height: auto; overflow: visible; }

html.paint-frame.smooth-scroll #smooth-wrapper {
    top: var(--col-top) !important;
    right: var(--col-right) !important;
    bottom: var(--col-bottom) !important;
    left: var(--col-left) !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
}

html.paint-frame.smooth-scroll .pin-spacer { width: auto !important; max-width: 100% !important; }

.paint-frame #smooth-wrapper > .stage-mat {
    position: fixed;
    top: var(--frame-top);
    right: var(--frame-right);
    bottom: var(--frame-bottom);
    left: var(--frame-left);
    border-radius: var(--frame-radius);
    box-shadow: 0 0 0 100vmax #f9f9f9;
    box-shadow: 0 0 0 100vmax var(--surround-bg, var(--page-bg));
    pointer-events: none;
    z-index: 30;
}

.paint-frame .peek,
.paint-frame #smooth-content > .peek { position: relative; z-index: 40; }

.paint-frame .section[data-section] { contain: layout; }

.paint-frame .site-bg,
.paint-frame #intro_stage > [data-block="sitewide/backdrop"] {
    position: fixed;
    top: var(--col-top);
    right: var(--col-right);
    bottom: var(--col-bottom);
    left: var(--col-left);
    width: calc(100% - var(--col-left) - var(--col-right));   /* fixed: 100% is the window, which a capped vw (AutoFit) is not */
    height: calc(100svh - var(--col-top) - var(--col-bottom));
}

.paint-frame .layer-sticky {
    width: 100% !important;
    height: calc(100svh - var(--col-top) - var(--col-bottom)) !important;
    max-width: 100% !important;
    max-height: calc(100svh - var(--col-top) - var(--col-bottom)) !important;
    container-type: size;
}
.paint-frame.native-scroll .layer-sticky { position: sticky; top: var(--col-top); }

/* components/canvas.css */
/* canvas — a 3D scene surface. Fills its positioned parent (the site-bg shell, or a
   screen's sticky layer). display:block kills the inline-canvas baseline gap. The drawing
   buffer is sized in JS (pe.three, setSize(...,false)); CSS owns the display box. */
.scene-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* canvas-tile — TILE MODE (canvas.twig with props.width): a case's floating-model cell in the
   .maingrid. The aspect-ratio (inline, from props.aspect) gives the box a height so the absolutely
   filling .scene-canvas has something to fill. position:relative anchors the corner .label. */
.canvas-tile {
    position: relative;
    border-radius: 1vh;
    border-radius: var(--radius);
    overflow: hidden;
}
.canvas-tile .label {
    position: absolute;
    top: 1vh;
    left: 1vh;
    z-index: 1;
    font-size: .8em;
    text-transform: uppercase;
}

/* site-bg — the site-wide background scene. A direct child of #intro_stage BEHIND
   #smooth-wrapper (z-index:0 vs the wrapper's 2), absolute inset:0 so it tracks the stage's
   inset animation and never scrolls with the content. Ported from the old .site_bg canvas. */
.site-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* <canvas> is a replaced element: with width:auto it keeps its intrinsic 300x150 even
       under inset:0 — it does NOT stretch like a block. Set explicit 100% so it fills the
       stage (the drawing buffer then follows via pe.three's ResizeObserver). */
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
}

/* components/headline.css */
/* components/headline.css — look for the `headline` node type, scoped to .headline.
   Mirrors components/headline.twig 1:1. */
.headline {
    margin: 0;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.01em;
    white-space: pre-line;   /* preserve author line breaks (Enter in the editor) — newlines render as breaks */
}
.headline--h1 { font-size: max(2.5rem, min(calc(8 * var(--pe-vw)), 7rem)); font-size: clamp(2.5rem, calc(8 * var(--pe-vw)), 7rem); }
.headline--h2 { font-size: max(1.25rem, min(calc(3 * var(--pe-vw)), 2.25rem)); font-size: clamp(1.25rem, calc(3 * var(--pe-vw)), 2.25rem); color: #626262; color: var(--muted); font-weight: 400; }

/* components/image.css */
/* components/image.css — look for the `image` node type, scoped to .imagesingle.
   Mirrors components/image.twig 1:1. Cleaned from legacy .imagesingle. */
.imagesingle {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 1vh;
    border-radius: var(--radius);
}
.imagesingle .label {
    position: absolute;
    top: 1vh;
    left: 1vh;
    z-index: 1;
    font-size: .8em;
    text-transform: uppercase;
}
.imagesingle picture { display: block; width: 100%; height: 100%; }
.imagesingle img { display: block; width: 100%; height: 100%; }

/* components/imagestack.css */
/* components/imagestack.css — look for the `imagestack` node type, scoped to .imagestack.
   Mirrors components/imagestack.twig 1:1. The fanned, tilted stack + nav dots + progress bar,
   distilled from legacy .imagestack_wrapper/.stack_wrapper. The active card sits at
   [data-position="1"] (front, opaque, outlined); each later position steps back + fades.
   The imageStack behavior reassigns data-position to advance the stack. */
.imagestack {
    position: relative;
    padding: calc(4 * var(--pe-vw));
    border-radius: 1vh;
    border-radius: var(--radius);
}
.imagestack .label {
    position: absolute;
    top: 1vh;
    left: 1vh;
    font-size: .8em;
    text-transform: uppercase;
}
.stack_wrapper {
    --top-offset: calc(0.5 * var(--pe-vw));     /* vertical step between stacked cards */
    --left-offset: calc(-1.5 * var(--pe-vw));   /* horizontal step between stacked cards */
    --start-opacity: 0.4;    /* opacity of the 2nd card (front is always 1) */
    --opacity-step: 0.1;     /* extra transparency per step deeper */
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: calc(2 * var(--pe-vw));
    transform: rotate3d(1, 0, 0, 10deg);
}
.stack_wrapper .image_wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    border-radius: 1vh;
    border-radius: var(--radius);
    box-shadow: 0 0 10px rgba(0,0,0,0.18039);
    box-shadow: 0 0 10px #0000002e;
    cursor: pointer;
    transform-origin: bottom left;
    transition: top .3s, left .3s, opacity .3s;
}
.stack_wrapper .image_wrapper img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: top left;
       object-position: top left;
}
.stack_wrapper .image_wrapper[data-position="1"] { top: 0; left: 0; z-index: 10; opacity: 1; border: 2px solid #222; border: 2px solid var(--ink); }
.stack_wrapper .image_wrapper[data-position="2"] { top: calc(1 * var(--top-offset)); left: calc(1 * var(--left-offset)); z-index: 9; opacity: var(--start-opacity); }
.stack_wrapper .image_wrapper[data-position="3"] { top: calc(2 * var(--top-offset)); left: calc(2 * var(--left-offset)); z-index: 8; opacity: calc(var(--start-opacity) - 1 * var(--opacity-step)); }
.stack_wrapper .image_wrapper[data-position="4"] { top: calc(3 * var(--top-offset)); left: calc(3 * var(--left-offset)); z-index: 7; opacity: calc(var(--start-opacity) - 2 * var(--opacity-step)); }
.stack_wrapper .image_wrapper[data-position="5"] { top: calc(4 * var(--top-offset)); left: calc(4 * var(--left-offset)); z-index: 6; opacity: calc(var(--start-opacity) - 3 * var(--opacity-step)); }

.imagestack .explainer { margin-top: calc(2 * var(--pe-vw)); text-align: center; text-transform: uppercase; font-size: .8em; }
.imagestack .explainer p { margin: 0; }

.carousel-nav { display: flex; justify-content: center; gap: 10px; padding: calc(2 * var(--pe-vw)) 0 0; }
.nav-dot {
    width: 1.4vh;
    height: 1.4vh;
    border-radius: 50%;
    background: transparent;
    outline: 1px solid #222;
    outline: 1px solid var(--ink);
    cursor: pointer;
    transition: background .3s;
}
.nav-dot.active { background: #222; background: var(--ink); outline: 2px solid #222; outline: 2px solid var(--ink); }
.imagestack .progress { height: .3vh; background: #222; background: var(--ink); transform: scaleX(0); transform-origin: left; }

/* components/layer.css */
/* layer — a screen's sticky "fixed beside the scroll" region: a frame the size of the inset
   stage holding a canvas + copy as absolute layers, while flow nodes scroll past beneath.
   Ported + distilled from the old .sticky_layer/.sticky_stage pair.

   Sized in cqw/cqh (resolved against #intro_stage's box — it is container-type:size) with
   !important so the frame tracks the inset animation AND beats the ScrollTrigger pin's frozen
   inline width/height/max-* captured at pin start. Plain top/left/inset on children then
   resolve to the inset frame — no manual offsets. */
.layer-sticky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100cqw !important;
    height: 100cqh !important;
    max-width: 100cqw !important;
    max-height: 100cqh !important;
    z-index: 2;
    /* click-through over empty areas (canvas orbit / future editor handles, and flow content
       beneath); the content islands below re-enable events so their text + links work. */
    pointer-events: none;
}
.layer-sticky > * { pointer-events: auto; }

/* the scene canvas fills the sticky frame, behind the overlay copy */
.layer-sticky .scene-canvas {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

/* native scroll (mobile/iOS): no GSAP pin — plain CSS sticky holds the layer for the
   screen's scroll (compositor-driven, smooth on iOS). Set on <html> by the engine. */
.native-scroll .layer-sticky {
    position: sticky;
    top: 0;
}

/* components/richtext.css */
/* components/richtext.css — look for the `richtext` node type. Deliberately minimal:
   a richtext node is bespoke prose, so its placement/size lives in the block or page
   CSS that targets the instance by data-uid. This only sets generic inline looks. */
.richtext { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-text); }
.richtext a { color: #007b9a; color: var(--accent); }

/* blocks/case-list.css */
/* blocks/case-list.css — look for the cases section (section/cases, a looper wearing .case-list). It stacks the case
   blocks (each styled by blocks/case.css + the component CSS); rhythm between them lives here.
   The solid surface is what makes the cases READ as a page: the whole site lives over the
   grid-sphere site-bg, which would otherwise bleed through every .maingrid gap. The cases are
   the portfolio listing — a solid white sheet (the stage's own colour) sitting on the sphere. */
.case-list {
    position: relative;
    z-index: 1;             /* above the site-bg sphere (z0) */
    display: flex;
    flex-direction: column;
    gap: 6vh;
    padding: 6vh 0;
    background: #fff;
}

/* blocks/case.css */
/* blocks/case.css — block-level look for case blocks (blocks/case/*.json).
   The component nodes inside are styled by their own components/*.css; this file
   is for case-block-specific chrome only (e.g. spanning backgrounds, block rhythm). */

/* a faint hairline frame around each case, inset from the page edges, so the cases read as
   distinct, tightly-bounded cards rather than an open stack. Content keeps its own calc(4 * var(--pe-vw)) inner
   padding (.content-block-head / .maingrid), so it sits comfortably inside the frame. */
.content-block {
    margin: 0 calc(2 * var(--pe-vw));
    border: 1px solid rgba(0, 0, 0, 0.1);
    border: 1px solid rgb(0 0 0 / 0.1);
    border-radius: 1vh;
    border-radius: var(--radius);
}

/* blocks/mahilahaat.css */
/* mahilahaat.css — mahilahaat.dk as it was, lightly brought up to date: a teal hairline on top, a centred column
   with the logo and the menu tabs over a side column (the latest news, the short text) beside the page's own text.
   Desktop: side column + text · tablet (≤ 950px): the same, narrower · phone (≤ 600px): one column. */

html { font-size: 16px; }
/* the page scrolls as a document (site.json paintFrame), over the photo held still at the top left */
html.paint-frame { background: #f9f9f9 url('/media/mahilahaat/baggrund.jpg') no-repeat fixed 0 0; background: var(--page-bg) var(--mh-backdrop) no-repeat fixed 0 0; }
#intro_stage { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-text); color: #222; color: var(--ink); }
/* the thin bar across the top */
#intro_stage::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #007b9a;
    background: var(--accent);
    z-index: 10;
    pointer-events: none;
}

/* the column: header across, the side column and the text below it (floats where a browser has no grid) */
#smooth-content {
    width: 92%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 1.75rem 0 4rem;
}
#smooth-content:after { content: ""; display: block; clear: both; }
#smooth-content > section.section { min-height: 0 !important; padding: 0; margin: 0; }
#smooth-content > #sidebjaelke { float: left; width: 27%; }
#smooth-content > section:not(#sidehoved):not(#sidebjaelke) { float: right; width: 68%; }
@supports (display: grid) {
    #smooth-content { display: grid; grid-template-columns: 27% 68%; justify-content: space-between; align-items: start; }
    #smooth-content > #sidehoved { grid-column: 1 / -1; }
    #smooth-content > #sidebjaelke, #smooth-content > section:not(#sidehoved):not(#sidebjaelke) { float: none; width: auto; }
}

#smooth-content h2, #smooth-content h3, #smooth-content h4, #smooth-content h5, #smooth-content h6 { margin: 0; padding: 0; font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-family: var(--font-display); }

/* header: the logo left, the tabs along its foot */
.mh-header { display: flex; align-items: flex-end; gap: 2rem; margin-bottom: 1.75rem; }
.mh-logo { display: block; flex: 0 0 27%; text-align: center; }
.mh-logo .imagesingle { margin: 0; }
.mh-logo img { display: inline-block; width: 140px; height: auto; border-radius: 0; }
.mh-nav { display: flex; flex-wrap: wrap; gap: .5rem; padding-bottom: .5rem; }
.mh-nav a {
    display: block;
    padding: .45rem .7rem;
    border-radius: 4px;
    background: #007b9a url('/media/mahilahaat/menu-baggrund.jpg');
    background: var(--accent) var(--mh-tab-bg);
    color: #fff;
    color: var(--mh-on-teal);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    -webkit-text-decoration: none;
    text-decoration: none;
    line-height: 1.2;
}
.mh-nav a:hover, .mh-nav a:focus-visible { background: #00657e; }

/* the side column: two teal boxes */
.left_wrapper { display: block; }
.front_news, .info {
    display: block;
    color: #fff;
    color: var(--mh-on-teal);
    background: #007b9a url('/media/mahilahaat/info-baggrund.jpg');
    background: var(--accent) var(--mh-box-bg);
    border-radius: 6px;
    font-size: .875rem;
    line-height: 1.55;
}
.front_news { padding: 1rem 1.1rem .25rem; margin-bottom: 1.25rem; }
.front_news h6 { text-align: center; font-size: 1.1rem; font-weight: 700; margin-bottom: .75rem !important; }
.front_news .loop { display: block; }
.front_news a { display: block; margin-bottom: 1.1rem; color: #fff; color: var(--mh-on-teal); -webkit-text-decoration: none; text-decoration: none; }
.front_news a:hover h4 { -webkit-text-decoration: underline; text-decoration: underline; }
.front_news h4 { font-size: .9375rem; font-weight: 600; line-height: 1.4; }
.front_news h5 { font-size: .75rem; font-weight: 400; opacity: .85; margin-top: .2rem !important; letter-spacing: .03em; }
.info { padding: .4rem 1.1rem; }
.info p { margin: .9rem 0; }

/* the text column */
.mh-content {
    font-size: 1rem;
    line-height: 1.65;
    color: #222;
    color: var(--ink);
    padding-right: 1.5rem;
    border-right: 1px dashed #ddd;
    border-right: 1px dashed var(--mh-rule);
    max-width: 46rem;
}
/* the text's headings: Overskrift (h2) in teal, Mellemrubrik (h3) */
.mh-content h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.3; color: #007b9a; color: var(--accent); }
.mh-content h3 { font-size: 1.0625rem; font-weight: 700; line-height: 1.4; margin-top: 1.5rem !important; }
.mh-content p { margin: .9rem 0; }
.mh-content p em:only-child { color: #5b6670; color: var(--mh-caption); font-size: .9375rem; }
.mh-content a { color: #007b9a; color: var(--accent); -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; }
.mh-content .imagesingle, .mh-content [data-prop="html"] img { margin: 1.25rem 0 .5rem; }
.mh-content .imagesingle img, .mh-content [data-prop="html"] img { display: block; width: 100%; height: auto; border-radius: 6px; }
.mh-content ul { margin: .5rem 0 1rem; padding-left: 1.25rem; }
.mh-content .loop, .mh-content .news_text, .mh-content .news_pictures { display: block; }
.mh-indent { display: block; padding-left: 1.25rem; border-left: 3px solid #eee; border-left: 3px solid var(--mh-indent); }

/* a news post: the title in teal, the date small, a clear gap to the next */
.news_item { display: block; padding-bottom: 3rem; margin-bottom: 3rem; border-bottom: 1px solid #eee; border-bottom: 1px solid var(--mh-indent); }
.news_item:last-child { border-bottom: 0; }
.mh-content .news_item h4 { margin-top: .25rem !important; font-size: .8125rem; font-weight: 600; line-height: 1.4; color: #5b6670; color: var(--mh-caption); letter-spacing: .04em; }

/* a tablet: the same two columns, closer */
@media (max-width: 950px) {
    #smooth-content { width: 94%; }
    .mh-header { gap: 1rem; }
    .mh-content { padding-right: 0; border-right: 0; }
}

/* a phone: one column — the logo and the tabs, the short text, then the page (the latest-news box goes: the news
   page is one tap away) */
@media (max-width: 600px) {
    html.paint-frame { background-attachment: scroll; background-size: 200% auto; }
    #smooth-content { display: block; width: 90%; padding-top: 1.25rem; }
    #smooth-content > #sidebjaelke, #smooth-content > section:not(#sidehoved):not(#sidebjaelke) { float: none; width: auto; }
    .mh-header { flex-direction: column; align-items: stretch; gap: 1rem; margin-bottom: 1.25rem; }
    .mh-logo { flex: none; text-align: left; }
    .mh-logo img { width: 110px; }
    .mh-nav { gap: .4rem; padding-bottom: 0; }
    .front_news { display: none; }
    .info { margin-bottom: 2rem; font-size: .875rem; }
    .mh-content h2 { font-size: 1.3rem; }
}
@supports (color: oklch(0 0 0)) {
    :root {
        --muted:   color-mix(in srgb, var(--ink) var(--muted-share), var(--page-bg));
        --paper:   color-mix(in srgb, var(--page-bg) 88%, #fff);
        --body:   color-mix(in srgb, var(--ink) 82%, var(--page-bg));
        --faint:   color-mix(in srgb, var(--ink) 42%, var(--page-bg));
        --line:   color-mix(in srgb, var(--ink) 14%, transparent);
        --rule-strong:   color-mix(in srgb, var(--ink) 34%, transparent);
        --cr-track:   color-mix(in srgb, var(--ink) 10%, transparent);
    }
}