/* fonts */
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/eb-garamond-400-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/eb-garamond-400-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/eb-garamond-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/eb-garamond-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/eb-garamond-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/eb-garamond-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"EB Garamond Fallback";font-style:italic;font-weight:400;src:local("Times New Roman Italic"),local("Liberation Serif Italic"),local("Tinos Italic");size-adjust:90.97%;ascent-override:110.69%;descent-override:32.76%;line-gap-override:0%}
@font-face{font-family:"EB Garamond Fallback";font-style:normal;font-weight:400;src:local("Times New Roman"),local("Liberation Serif"),local("Tinos");size-adjust:94.16%;ascent-override:106.94%;descent-override:31.65%;line-gap-override:0%}
@font-face{font-family:"EB Garamond Fallback";font-style:normal;font-weight:500;src:local("Times New Roman"),local("Liberation Serif"),local("Tinos");size-adjust:94.16%;ascent-override:106.94%;descent-override:31.65%;line-gap-override:0%}
/* kit */
/* Studio kit — the states motion.js animates between, hidden only under html.kit-anim (assemble
   sets it). A root motion.js has not marked .kit-ready by 3 s (JS off, blocked, broken) shows every
   [data-reveal] and split word; design CSS that waits for .is-in is not covered (reveal-audit finds it). */

[data-reveal] { --kit-delay: 0ms; }
.kit-anim [data-reveal]:not(.is-in) { opacity: 0; }
.kit-anim [data-reveal="up"]:not(.is-in), .kit-anim [data-reveal=""]:not(.is-in) { transform: translate3d(0, 28px, 0); }
.kit-anim [data-reveal="scale"]:not(.is-in) { transform: scale(.94); }
.kit-anim [data-reveal="clip"]:not(.is-in) { opacity: 1; clip-path: inset(100% 0 0 0); }
[data-reveal].is-in {
  opacity: 1; transform: none; clip-path: inset(0 0 0 0);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1) var(--kit-delay), transform .9s cubic-bezier(.2,.7,.2,1) var(--kit-delay), clip-path 1.1s cubic-bezier(.7,0,.2,1) var(--kit-delay);
}

.kit-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.kit-wi { display: inline-block; }
.kit-anim [data-split]:not(.is-in) .kit-wi { transform: translate3d(0, 105%, 0); }
[data-split].is-in .kit-wi { transform: none; transition: transform .9s cubic-bezier(.2,.75,.2,1) calc(var(--kit-i, 0) * 45ms); }

/* The 3 s fallback lives in CSS because the CSP blocks any inline script. motion.js starting within
   3 s adds .kit-ready and cancels it unseen; a later start hides again what is not yet scrolled to. */
.kit-anim:not(.kit-ready) [data-reveal]:not(.is-in), .kit-anim:not(.kit-ready) [data-split]:not(.is-in) .kit-wi { animation: kit-shown 0s 3s forwards; }
@keyframes kit-shown { to { opacity: 1; transform: none; clip-path: none; } }

[data-marquee] { display: flex; overflow: hidden; gap: var(--kit-gap, 2rem); }
[data-marquee] > * { flex: none; display: flex; gap: var(--kit-gap, 2rem); }
/* Until motion.js moves it (JS off, blocked) the row scrolls instead of clipping, so every item can be read. */
[data-marquee]:not(.is-moving) { overflow-x: auto; scrollbar-width: none; }
[data-marquee]:not(.is-moving)::-webkit-scrollbar { display: none; }
[data-marquee].is-moving > * { animation: kit-marquee var(--kit-speed, 30s) linear infinite; }
[data-marquee].is-moving:hover > * { animation-play-state: paused; }
@keyframes kit-marquee { to { transform: translate3d(calc(-100% - var(--kit-gap, 2rem)), 0, 0); } }

[data-tilt], [data-magnetic] { transition: transform .35s cubic-bezier(.2,.7,.2,1); will-change: transform; }

/* The host isolates, so the canvas (z -1) paints over the host's background and under its
   content. Overlay effects (grain, liquid) raise their own canvas inline. */
[data-fx] { position: relative; isolation: isolate; }
.kit-fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; z-index: -1; }
.fx-on > .kit-fx-canvas { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .kit-anim [data-reveal]:not(.is-in), .kit-anim [data-split]:not(.is-in) .kit-wi { opacity: 1; transform: none; clip-path: none; }
  [data-marquee] { flex-wrap: wrap; }
  [data-marquee] > * { animation: none !important; flex-wrap: wrap; }
}

/* Defaults that keep the touch and desktop audits clean unless a design says otherwise. :where()
   gives them no specificity, so any rule a designer writes wins. min-height and min-width have no
   effect on an inline text link, which is exactly what render-audit exempts (a11y/touch measures
   a[class], buttons, summaries, selects that are not display:inline). An image is capped at 80% of
   the screen's height, the desktop audit's image-tall line, and crops rather than squashes. */
:where(a[class], button, summary, [role="button"], select) { min-height: 44px; min-width: 44px; }
:where(img) { max-height: 80vh; object-fit: cover; }
/* A phone number is one word to a reader: it never splits at its hyphen or space, and a flex row cannot squeeze its box below its text (Aqua Man, Boise, Victor's, Mars, 2026-10). */
:where(a[href^="tel:"]) { white-space: nowrap; flex-shrink: 0; }

/* W338: today's row of the printed weekly hours (motion.js today()); a design styles it further */
[data-day].is-today { font-weight: 700; }

/* plumbing */
:root{--pl-bg:#ffffff;--pl-fg:#1c2219;--pl-accent:#5b4a91;--pl-on-accent:#ffffff;--pl-font:"EB Garamond",system-ui,sans-serif;--pl-display:"EB Garamond",Georgia,serif}
/* Studio plumbing pages (buy.html, thanks.html) and the form trap. Palette and type come
   from the site's design through four custom properties assemble.mjs writes at the top. */
*, *::before, *::after { box-sizing: border-box; }
body.studio-page { margin: 0; background: var(--pl-bg); color: var(--pl-fg); font: 400 1.0625rem/1.6 var(--pl-font); }
.studio-page main { max-width: 40rem; margin: 0 auto; padding: clamp(2.5rem, 8vw, 6rem) max(1.25rem, env(safe-area-inset-right, 0px)) 3rem max(1.25rem, env(safe-area-inset-left, 0px)); }
.studio-page h1 { font: 400 clamp(2rem, 1.4rem + 3vw, 3.2rem)/1.05 var(--pl-display); letter-spacing: -.01em; margin: 0 0 1.25rem; text-wrap: balance; }
.studio-page p { margin: 0 0 1.1rem; }
.studio-page a { color: inherit; text-underline-offset: .2em; }
.studio-page .buy__lead { font-size: 1.25rem; line-height: 1.4; }
.studio-page .buy__price { display: flex; align-items: center; gap: .9rem; margin: 1.5rem 0; }
.studio-page .buy__figure { font: 400 clamp(3.5rem, 2.5rem + 6vw, 5.5rem)/1 var(--pl-display); letter-spacing: -.02em; }
.studio-page .buy__per { font-size: 1.05rem; line-height: 1.3; font-weight: 600; }
.studio-page .buy__list { margin: 0 0 .5rem; padding: 0; list-style: none; display: grid; gap: .5rem; }
.studio-page .buy__list li { position: relative; padding-left: 1.6rem; font-weight: 600; }
.studio-page .buy__list li::before { content: ""; position: absolute; left: .15rem; top: .45em; width: .5rem; height: .9rem; border: solid currentColor; border-width: 0 .17rem .17rem 0; transform: rotate(40deg) scale(.8); transform-origin: center; }
.studio-page .buy__scope { font-size: .9rem; opacity: .8; }
.studio-page .buy .btn--buy { min-height: 3.75rem; padding: 0 2.2rem; font-size: 1.25rem; }
.studio-page .buy__terms { margin-top: 1.25rem; padding: 1rem 1.15rem; border: 2px solid currentColor; border-radius: .75rem; font-size: 1.2rem; font-weight: 600; line-height: 1.4; }
.studio-page .buy__terms p { margin: 0 0 .5rem; }
.studio-page .buy__terms p:last-child { margin-bottom: 0; }
.studio-page .buy__terms-links { margin-top: 1rem; font-size: 1rem; }
.studio-page .buy__deadline { font-weight: 600; margin-top: 1.5rem; }
.studio-page .btn { display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1.4rem; border-radius: 999px; background: var(--pl-fg); color: var(--pl-bg); font-weight: 650; text-decoration: none; }
.studio-page .btn--quiet { background: transparent; color: inherit; border: 1px solid currentColor; }
.studio-page .actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.studio-page .studio-page__head { max-width: 40rem; margin: 0 auto; padding: 1.25rem max(1.25rem, env(safe-area-inset-right, 0px)) 0 max(1.25rem, env(safe-area-inset-left, 0px)); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; align-items: center; }
.studio-page .studio-page__head a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; text-decoration: none; }
.studio-page footer { max-width: 40rem; margin: 0 auto; padding: 0 1.25rem 2rem; font-size: .9rem; opacity: .75; }
.studio-page :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.skip-link { position: absolute; left: -9999px; top: 0; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 2147483001; padding: .5rem 1rem; background: #fff; color: #000; }
img, video { max-width: 100%; height: auto; }
.form__trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* SP4, W234 (SW2): the footer's illustration line sits inset like a centred page wrap, never flush at the screen edge. One class, so a reset such as `footer p` or `*` loses to it and a design's own `.foot .kit-art-credit` still wins. */
.kit-art-credit { box-sizing: border-box; margin: 0; padding: .75rem max(1.25rem, calc((100% - 72rem) / 2 + 1.25rem)) 1rem; font-size: .875rem; line-height: 1.5; }

/* Row 117 (Nic, 2026-11-10): the buy page sells. "As flashy as possible ... Ignore the site theme if it's best,
   angled banners, laser colors, animations". Its own fixed palette and type, scoped to body.buy-page, so the
   thanks and 404 pages keep the site's. Law (runs/marketing-team/research/MQ32-buy-page.md §5-7): the renewal
   terms sit touching the button in contrasting, larger type (.buy__terms); the only deadline is the preview's
   real live-until date; nothing moves for a visitor who asked for reduced motion. */
body.buy-page { --bz-bg: #07060d; --bz-ink: #f4f1ff; --bz-pink: #ff2bd6; --bz-cyan: #00e5ff; --bz-lime: #c6ff00; --bz-violet: #7b2bff; --bz-sun: #ffe600;
  --bz-display: "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif; --bz-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bz-bg); color: var(--bz-ink); font: 400 1.0625rem/1.55 var(--bz-font); overflow-x: clip; }
html:has(> body.buy-page) { overflow-x: clip; background: #07060d; }
body.buy-page main, body.buy-page .studio-page__head, body.buy-page footer { position: relative; z-index: 1; }
body.buy-page main { max-width: 44rem; padding-top: clamp(1.5rem, 5vw, 3rem); }
body.buy-page a { color: inherit; }

/* the lasers: three drifting beams of light and a receding grid, behind everything */
.buy-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.buy-fx__beam { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(70px); opacity: .55; mix-blend-mode: screen; animation: bz-drift 14s ease-in-out infinite alternate; }
.buy-fx__beam--a { background: var(--bz-pink); top: -25vmax; left: -20vmax; }
.buy-fx__beam--b { background: var(--bz-cyan); top: 20vh; right: -30vmax; animation-duration: 17s; animation-delay: -5s; }
.buy-fx__beam--c { background: var(--bz-violet); bottom: -35vmax; left: 10vw; animation-duration: 20s; animation-delay: -9s; }
.buy-fx__grid { position: absolute; left: -50%; right: -50%; bottom: -10%; height: 55%; transform: perspective(420px) rotateX(62deg); transform-origin: bottom;
  background-image: linear-gradient(rgba(0,229,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,43,214,.35) 1px, transparent 1px); background-size: 48px 48px;
  mask-image: linear-gradient(to top, #000 10%, transparent 85%); -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%); animation: bz-grid 3s linear infinite; }
@keyframes bz-drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(8vw,6vh,0) scale(1.15); } }
@keyframes bz-grid { from { background-position: 0 0, 0 0; } to { background-position: 0 48px, 0 0; } }

/* the angled ribbon */
.buy-ribbon { position: relative; z-index: 1; margin: 1rem -5vw 0; transform: rotate(-3deg); background: var(--bz-lime) linear-gradient(90deg, var(--bz-sun), var(--bz-lime) 50%, var(--bz-sun)); color: #07060d;
  box-shadow: 0 0 24px rgba(198,255,0,.55), 0 0 0 3px #07060d, 0 0 0 5px var(--bz-pink); overflow: hidden; white-space: nowrap; }
.buy-ribbon__track { display: inline-flex; animation: bz-marquee 18s linear infinite; }
.buy-ribbon span { font: 900 clamp(.95rem, .8rem + .8vw, 1.25rem)/1 var(--bz-display); text-transform: uppercase; letter-spacing: .04em; padding: .7rem 1.1rem; }
.buy-ribbon span::after { content: "\2605"; margin-left: 2.2rem; color: var(--bz-pink); }
@keyframes bz-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* headline */
body.buy-page .buy__kicker { display: inline-block; margin: 1.75rem 0 .75rem; padding: .35rem .85rem; border: 2px solid var(--bz-cyan); border-radius: 999px; font-weight: 800; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bz-cyan); box-shadow: 0 0 14px rgba(0,229,255,.6), inset 0 0 10px rgba(0,229,255,.35); }
body.buy-page h1 { font: 900 clamp(3rem, 1.6rem + 8vw, 6.25rem)/.92 var(--bz-display); text-transform: uppercase; letter-spacing: -.02em; margin: 0 0 1.25rem; transform: skewY(-3deg); }
body.buy-page .buy__h1-top { display: block; color: var(--bz-ink); text-shadow: 3px 3px 0 var(--bz-pink), 6px 6px 0 var(--bz-violet); }
body.buy-page .buy__h1-big { display: block; background: linear-gradient(90deg, var(--bz-cyan), var(--bz-pink), var(--bz-sun), var(--bz-lime), var(--bz-cyan)); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: var(--bz-cyan); -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 18px rgba(255,43,214,.55)); animation: bz-sheen 6s linear infinite; }
@keyframes bz-sheen { to { background-position: 300% 0; } }
body.buy-page .buy__lead { font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem); line-height: 1.35; font-weight: 600; }
body.buy-page .buy__lead strong { color: var(--bz-lime); text-shadow: 0 0 12px rgba(198,255,0,.6); }

/* W281: the owner's own site, first screen, in a tilted neon browser window linking back to it */
body.buy-page .buy__shot { display: block; width: min(92%, 30rem); margin: 1.25rem 0 2rem .5rem; border-radius: .9rem; overflow: hidden; background: #07060d; transform: rotate(2deg); text-decoration: none;
  box-shadow: 0 0 0 3px var(--bz-cyan), 0 0 0 6px #07060d, 0 0 0 8px var(--bz-pink), 0 0 40px rgba(0,229,255,.45), 0 18px 50px rgba(0,0,0,.6); transition: transform .2s ease; }
body.buy-page .buy__shot-bar { display: flex; gap: .4rem; align-items: center; height: 1.6rem; padding: 0 .75rem; background: #17151f; border-bottom: 1px solid rgba(255,255,255,.14); }
body.buy-page .buy__shot-bar i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--bz-pink); }
body.buy-page .buy__shot-bar i:nth-child(2) { background: var(--bz-sun); }
body.buy-page .buy__shot-bar i:nth-child(3) { background: var(--bz-lime); }
body.buy-page .buy__shot img { display: block; width: 100%; height: auto; }
body.buy-page .buy__shot:hover, body.buy-page .buy__shot:focus-visible { transform: rotate(0deg) scale(1.01); }
body.buy-page .buy__shot:focus-visible { outline: 3px solid var(--bz-sun); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) { body.buy-page .buy__shot { transition: none; } }

/* price */
body.buy-page .buy__price-card { position: relative; width: fit-content; max-width: 100%; margin: 1.75rem 0; padding: 1.25rem 1.5rem 1rem; border-radius: 1.25rem; background: rgba(7,6,13,.72); transform: rotate(-1.5deg);
  border: 3px solid transparent; background-clip: padding-box; box-shadow: 0 0 0 3px var(--bz-pink), 0 0 30px rgba(255,43,214,.55), 0 0 60px rgba(0,229,255,.25); }
body.buy-page .buy__price { display: flex; align-items: center; gap: .75rem; margin: 0; }
body.buy-page .buy__figure { font: 900 clamp(3.4rem, 1.8rem + 9vw, 7.5rem)/1 var(--bz-display); flex: none; letter-spacing: -.04em; color: #fff; text-shadow: 0 0 6px #fff, 0 0 22px var(--bz-cyan), 0 0 44px var(--bz-cyan); }
body.buy-page .buy__per { min-width: 0; font-size: clamp(.85rem, .7rem + .6vw, 1.15rem); line-height: 1.2; font-weight: 800; text-transform: uppercase; color: var(--bz-cyan); }
body.buy-page .buy__after { margin: .35rem 0 0; font-weight: 700; color: var(--bz-sun); text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; }

/* what's included */
body.buy-page .buy__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; margin: 0 0 .75rem; padding: 0; list-style: none; }
body.buy-page .buy__list li { position: relative; padding: .85rem 1rem .85rem 3rem; border-radius: .85rem; background: #17151f; border: 1px solid rgba(255,255,255,.14); font-weight: 750; }
body.buy-page .buy__list li:last-child, body.buy-page .buy__list li:has(small) { grid-column: 1 / -1; }
body.buy-page .buy__list li::before { content: ""; position: absolute; left: 1rem; top: .95rem; width: 1.3rem; height: 1.3rem; border: 0; border-radius: 50%; transform: none;
  background: var(--bz-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%2307060d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; box-shadow: 0 0 12px rgba(198,255,0,.7); }
body.buy-page .buy__list small { display: block; margin-top: .25rem; font-size: .88rem; font-weight: 500; opacity: .85; }
body.buy-page .buy__scope { font-size: .9rem; opacity: .75; }

/* the button and, touching it, the terms (clear and conspicuous: larger than the body, high contrast) */
body.buy-page .buy__cta { margin-top: 1.5rem; }
body.buy-page .btn { border-radius: 999px; text-decoration: none; font-weight: 800; }
body.buy-page .btn--buy { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; min-height: 4.5rem; padding: 0 1.5rem; overflow: hidden; isolation: isolate;
  font: 900 clamp(1.05rem, .8rem + 1.4vw, 1.6rem)/1.1 var(--bz-display); text-transform: uppercase; letter-spacing: .01em; color: #07060d; white-space: nowrap;
  background-color: var(--bz-lime); background-image: linear-gradient(90deg, var(--bz-lime), var(--bz-cyan), var(--bz-pink), var(--bz-sun), var(--bz-lime)); background-size: 300% 100%;
  box-shadow: 0 0 0 3px #07060d, 0 0 0 5px var(--bz-lime), 0 10px 40px rgba(198,255,0,.45); animation: bz-sheen 5s linear infinite, bz-pulse 2.2s ease-in-out infinite; transition: transform .15s ease; }
body.buy-page .btn--buy span::after { content: "\00a0\2192"; }
body.buy-page .btn--buy::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%); transform: translateX(-120%); animation: bz-shine 3.2s ease-in-out infinite; }
body.buy-page .btn--buy:hover, body.buy-page .btn--buy:focus-visible { transform: translateY(-2px) scale(1.02); }
@keyframes bz-pulse { 0%, 100% { box-shadow: 0 0 0 3px #07060d, 0 0 0 5px var(--bz-lime), 0 10px 40px rgba(198,255,0,.45); } 50% { box-shadow: 0 0 0 3px #07060d, 0 0 0 9px var(--bz-pink), 0 10px 60px rgba(255,43,214,.6); } }
@keyframes bz-shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
body.buy-page .buy__cta .actions { margin-top: 0; }
body.buy-page .buy__terms { margin-top: .9rem; padding: 1rem 1.2rem; border: 2px solid var(--bz-cyan); border-radius: .9rem; background: #0d1622; color: #fff; font-size: 1.15rem; font-weight: 600; line-height: 1.45; box-shadow: 0 0 18px rgba(0,229,255,.35); }
body.buy-page .buy__terms strong { color: var(--bz-lime); }
body.buy-page .buy__terms-links { margin-top: .9rem; font-size: 1rem; }
body.buy-page .buy__terms-links a { color: var(--bz-cyan); }

/* the real deadline */
body.buy-page .buy__deadline { display: inline-block; margin: 1.75rem 0 0; padding: .6rem 1rem; transform: rotate(2deg); background: var(--bz-pink); color: #07060d; font: 900 1.05rem/1.2 var(--bz-display); text-transform: uppercase; letter-spacing: .02em;
  box-shadow: 0 0 0 3px #07060d, 0 0 0 5px var(--bz-sun), 0 0 26px rgba(255,43,214,.7); animation: bz-blink 1.6s steps(2, end) infinite; }
@keyframes bz-blink { 50% { box-shadow: 0 0 0 3px #07060d, 0 0 0 5px var(--bz-cyan), 0 0 36px rgba(0,229,255,.8); } }

/* not ready yet */
body.buy-page .buy__ask { margin-top: 2rem; padding: 1.1rem 1.25rem; border-radius: 1rem; border: 1px dashed rgba(255,255,255,.35); background: #12101a; }
body.buy-page .buy__ask p { margin-bottom: .5rem; }
body.buy-page .buy__ask .actions { margin-top: .75rem; }
body.buy-page .btn--ask { display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1.4rem; background: var(--bz-cyan); color: #07060d; box-shadow: 0 0 16px rgba(0,229,255,.55); }
body.buy-page .btn--quiet { display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1.4rem; background: transparent; color: var(--bz-ink); border: 1px solid rgba(255,255,255,.5); }
body.buy-page .studio-page__head a { color: var(--bz-ink); }
body.buy-page footer { opacity: .7; }
body.buy-page :focus-visible { outline: 3px solid var(--bz-sun); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  body.buy-page *, body.buy-page *::before, body.buy-page *::after { animation: none !important; transition: none !important; }
  .buy-ribbon__track { transform: none; }
}

/* design */
/* Le Nonne — la carta on the garden: white printed cards laid on the spruce green of the front trees, heads in the lavender of the path, the name over one pair of square tablets and the house tipped in under them, a headnote of how it was founded, the carta on its own page */

:root {
  --table: #1f3a2a;
  --table-deep: #182f22;
  --sheet: #ffffff;
  --ink: #1c2219;
  --ink-soft: #454c41;
  --ink-12: rgba(28, 34, 25, .12);
  --ink-25: rgba(28, 34, 25, .25);
  --rubric: #5b4a91;
  --on-table: #ffffff;
  --on-table-soft: #d6e0d5;
  --serif: "EB Garamond","EB Garamond Fallback", Garamond, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--table); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--table);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

p, h1, h2, h3, figure, blockquote { margin: 0; }
img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }
a:focus-visible { outline: 2px solid var(--rubric); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 50;
  padding: 12px 18px; background: var(--sheet); color: var(--ink);
  font-size: 16px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.num { font-variant-numeric: oldstyle-nums tabular-nums; }
.nowrap { white-space: nowrap; }

/* ---------- the cards ---------- */

.card {
  position: relative;
  background: var(--sheet);
  margin-inline: 14px;
  border: 1px solid var(--ink-12);
}

/* the double rule that opens a card: 1px, 3px gap, 1px */
.rule2 {
  height: 5px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

/* ---------- letterhead (the first screen) ---------- */

.letterhead {
  margin-top: 22px;
  padding: 26px 20px 0;
  text-align: center;
  overflow: hidden;
}

.letterhead__kind {
  margin-top: 22px;
  font-style: italic;
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink-soft);
}

.letterhead__name {
  margin-top: 6px;
  font-weight: 500;
  font-size: clamp(40px, 12.4vw, 76px);
  line-height: 1.05;
  letter-spacing: .14em;
  margin-right: -.14em; /* the tracking's trailing space, so the caps sit centred */
  text-transform: uppercase;
}

.letterhead__town {
  margin-top: 10px;
  font-size: 14px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Call for reservations and Directions: the page's one pair, under the name and above the house,
   cut as square tablets (a filled one in the spruce of the table, an outlined one in ink): stacked
   on a phone, side by side from 960px. No bar at the foot of the screen. */
.acts {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  width: 100%;
  margin-top: 22px;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 1 1 100%; max-width: 300px;
  min-height: 52px; min-width: 140px;
  padding: 0 26px;
  border: 1px solid var(--ink);
  border-radius: 0;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.btn--fill { background: var(--table); border-color: var(--table); color: var(--on-table); }
.btn--fill:hover { background: var(--table-deep); border-color: var(--table-deep); }
.btn--line { background: var(--sheet); color: var(--ink); }
.btn--line:hover { background: var(--table); border-color: var(--table); color: var(--on-table); }
.btn:focus-visible { outline: 2px solid var(--rubric); outline-offset: 3px; }
@media (max-width: 359px) {
  .btn { min-width: 0; padding: 0 14px; letter-spacing: .12em; }
}

/* a running head over the letterhead's double rule: the way to the menu */
.runhead { display: flex; justify-content: center; margin: -14px 0 10px; }
.runhead__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: 14px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--rubric); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 50% calc(100% - 10px) / 0 1px no-repeat;
  transition: background-size .3s ease;
}
.runhead__link:hover { background-size: calc(100% - 24px) 1px; }

/* the menu page's letterhead: the name a link home, set a size down, the pair under it */
.letterhead.letterhead--page { padding-bottom: 32px; }
.carta--page { margin-top: 22px; }
.letterhead__name--page { font-size: clamp(36px, 10.4vw, 60px); }
.letterhead__home { text-decoration: none; }
.letterhead__home:hover { color: var(--rubric); }

/* the house, tipped in at the sheet's full width on a phone */
.plate {
  margin-top: 24px;
  margin-inline: max(-20px, calc((100% - 375px) / 2));
}
.plate img {
  width: 100%;
  aspect-ratio: 375 / 332;
  object-fit: cover;
}
.plate figcaption {
  padding: 12px 20px 22px;
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* ---------- a guest's line, set large on the table ---------- */

.line {
  padding: 64px 30px 68px;
  text-align: center;
  color: var(--on-table);
}
.line__fig { max-width: 36rem; margin-inline: auto; }
.line blockquote p {
  font-style: italic;
  font-size: 27px;
  line-height: 1.3;
  text-wrap: balance;
}
.line figcaption {
  margin-top: 22px;
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--on-table-soft);
}
.line figcaption::before {
  content: "";
  display: block;
  width: 40px; height: 1px;
  margin: 0 auto 18px;
  background: currentColor;
}

/* ---------- the carta ---------- */

.carta {
  padding: 40px 22px 24px;
  text-align: center;
  border-bottom: 0;
}

.vignette {
  width: 132px;
  margin: 0 auto 14px;
}

.carta__title {
  font-weight: 500;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: .06em;
}

.carta__note {
  margin-top: 10px;
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
}

.course { margin-top: 44px; }

.course__head {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rubric);
}
.course__head::before,
.course__head::after {
  content: "";
  width: 32px; height: 1px;
  background: var(--rubric);
  opacity: .6;
}

/* the dishes, set as a carta sets them: one to a line, centred, no prices */
.dishes {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  font-size: 21px;
  line-height: 1.3;
}
.dishes li { text-wrap: balance; }
.dishes li + li { margin-top: 18px; }
.dish { display: block; }
/* one line under each dish, set small and italic as a carta sets its glosses */
.dish__desc {
  display: block;
  max-width: 24em;
  margin: 4px auto 0;
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-soft);
}

.course__quote { max-width: 32em; margin: 26px auto 0; padding-top: 22px; position: relative; }
.course__quote::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  width: 6px; height: 6px; margin-left: -3px;
  border-radius: 50%;
  background: var(--rubric);
  opacity: .55;
}
.course__quote blockquote p {
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  text-wrap: balance;
}
.course__quote figcaption {
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-wrap: balance;
}

.flourish {
  display: block;
  width: 160px; height: 16px;
  margin: 48px auto 0;
  fill: none;
  stroke: var(--rubric);
  stroke-width: 1.2;
  opacity: .75;
}

/* ---------- the headnote: the story at the head of the carta ---------- */

.headnote {
  padding: 40px 22px 34px;
  text-align: center;
  border-bottom: 0;
}
.headnote .course__head { margin-top: 2px; }
.headnote__title {
  max-width: 15em;
  margin: 16px auto 0;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: .02em;
  text-wrap: balance;
}
.headnote__body {
  max-width: 31em;
  margin: 22px auto 0;
  font-size: 18px;
  line-height: 1.6;
  text-align: left;
  hyphens: manual;
}
.headnote__body p + p { margin-top: 14px; text-indent: 1.4em; }
.headnote__credit {
  max-width: 28em;
  margin: 20px auto 0;
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-soft);
}

.more { margin-top: 18px; }
.more__link {
  display: inline-block; min-height: 48px; line-height: 48px;
  font-style: italic;
  font-size: 24px;
  color: var(--rubric);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.more__link span { font-style: normal; text-decoration: none; }

.colophon__back { margin-top: 10px; }

/* ---------- the colophon: the visit block, the page's end ---------- */

.colophon {
  margin-bottom: 22px;
  padding: 26px 20px 40px;
  text-align: center;
  border-top: 0;
}

.colophon__mark {
  width: 84px;
  margin: 30px auto 8px;
}

.colophon__head {
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--rubric);
}

.colophon__addr { margin-top: 14px; font-size: 19px; }

.colophon__tel {
  display: inline-flex; align-items: center; min-height: 48px;
  margin-top: 4px;
  font-size: 30px;
  text-decoration: none;
  border-bottom: 1px solid var(--ink-25);
  line-height: 1.2;
}
.colophon__tel:hover { border-bottom-color: var(--rubric); }

.colophon__hours { margin-top: 14px; font-size: 18px; }

.ul {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: 6px;
  font-style: italic;
  color: var(--rubric);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.colophon__access {
  max-width: 24em;
  margin: 18px auto 0;
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
}

footer.colophon .kit-art-credit {
  max-width: 28em;
  margin: 22px auto 0;
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
}

/* ---------- wider: the sheets centred on the table ---------- */

@media (min-width: 560px) {
  .card { width: min(760px, calc(100% - 96px)); margin-inline: auto; }
  .letterhead { margin-top: 40px; padding: 36px 48px 0; }
  .carta { padding: 56px 56px 28px; }
  .headnote { padding: 56px 56px 40px; }
  .carta--page { margin-top: 40px; }
  .letterhead.letterhead--page { padding-bottom: 40px; }
  .colophon { padding: 28px 56px 48px; margin-bottom: 72px; }
  .plate { margin-inline: auto; width: 375px; max-width: 100%; }
  .plate img { outline: 1px solid var(--ink-12); outline-offset: 10px; }
  .plate figcaption { padding: 22px 0 32px; }
  .line { padding: 80px 48px 84px; }
  .line blockquote p { font-size: 32px; }
}

@media (min-width: 760px) {
  .letterhead { margin-top: 56px; padding: 40px 64px 0; }
  .letterhead__kind { font-size: 22px; margin-top: 26px; }

  .plate { margin-top: 30px; }

  .line { padding: 96px 48px 100px; }
  .line blockquote p { font-size: 36px; }

  .carta { padding: 64px 72px 32px; }
  .headnote { padding: 64px 72px 44px; }
  .headnote__title { font-size: 36px; }
  .headnote__body { font-size: 19px; }
  .vignette { width: 150px; }
  .carta__title { font-size: 34px; }
  .course { margin-top: 52px; }
  .course__quote blockquote p { font-size: 20px; }
  .dishes { font-size: 23px; }
  .dish__desc { font-size: 16.5px; }

  .colophon { padding: 32px 72px 56px; margin-bottom: 96px; }
  .colophon__tel { font-size: 32px; }
}

@media (min-width: 960px) {
  .acts { margin-top: 24px; }
  .btn { flex: 0 0 auto; min-width: 172px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .runhead__link, .more__link { transition: none; }
}