/* Swiss layer over weblib. One face (Archivo Narrow), black ground, white paper, one red. Only the assets and the sheet. */
:root, html[data-theme] { --wl-bg: #000; --wl-fg: #fff; --ink: #111; --grey: #8d8d88; --paper: #f4f4f1; --red: #e4002b; --pad: clamp(20px, 3.4vw, 48px); }
html { scroll-behavior: auto !important; background: #000; }
html.lenis, html.lenis body { height: auto; }
body { background: #000; color: #fff; }
body, body * { font-family: "Archivo Narrow", "Arial Narrow", "Helvetica Neue", Arial, sans-serif !important; }
body:not(.is-ready) { overflow: hidden; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--paper); color: var(--ink); padding: 10px 14px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* Everything that is not an asset or the sheet goes: labels, hints, tags, peeks, titles, dots, arrows, HUDs, panels, lightboxes. */
.wl-art__meta, .wl-art__tags, .wl-art__peek, .wl-art__title, .wl-art__label, .wl-art__hint, .wl-tip, .wl-specs,
.wl-fc__bar, .wl-fc__next, .wl-fc__dots, .wl-fc__label, .wl-hx__hint, .wl-hx__label,
.wl-mb__nav, .wl-mb__dots, .wl-mb__label, .wl-mt__label, .wl-mt__hint, .wl-mt__hud, .wl-bg__panel, .wl-band__box { display: none !important; }
.wl-art__stage, .wl-fc__stage { background: #000 !important; }
/* Only the stages paint (and they fade, see paper3d.js); sections are transparent so overlapping them leaves no seam.
   Overlap 40vh so the black gap between two pinned scenes is 0.6 of a screen, not a whole one. The helix and the
   scene after it keep their own spacing (the coil's leaks already overlap its neighbours). */
.wl-b, .wl-fc, .wl-art, .wl-hx { background: transparent !important; }
#stop-2, #stop-3, #stop-4, #stop-8, #stop-9 { margin-top: -40vh; }
canvas { cursor: default !important; }

/* ---------- calendar pages (swiss-art.js → WL.flipPages), 640 × 430 design px each ----------
   One idea per page. Inter Tight in real weights (light for display, regular for text, medium for labels),
   never squeezed; hairline rules; tabular figures; the only colour is today's red. */
body .cal-pg, body .cal-pg * { font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif !important; }
.cal-pg { background: #f3f2ee; color: #121212; padding: 30px 36px; box-sizing: border-box; text-transform: none; font-weight: 400;
  font-feature-settings: "tnum" 1; -webkit-font-smoothing: antialiased; }
.fc-low.cal-pg { padding-top: 42px; }
.cal-pg::before { opacity: .07; }
.cal-head { display: grid; grid-template-columns: 1fr 1fr auto; border-top: 1px solid currentColor; padding-top: 8px;
  font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.cal-head span:nth-child(2) { color: #8a8984; }

/* month pages */
.cal-month { position: absolute; left: 36px; top: 72px; margin: 0; font-size: 26px; letter-spacing: -.02em; }
.cal-num { position: absolute; left: 28px; bottom: 34px; font-size: 236px; font-weight: 300; letter-spacing: -.075em; line-height: .74; }
.cal-key { position: absolute; left: 36px; top: 112px; margin: 0; font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #8a8984; }
.cal-key i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #121212; margin-right: 8px; vertical-align: 1px; }
.cal-cal { position: absolute; right: 36px; top: 74px; width: 266px; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); padding-bottom: 8px; border-bottom: 1px solid #d9d8d3; }
.cal-week b { text-align: center; font-size: 9px; font-weight: 500; letter-spacing: .14em; color: #8a8984; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 5px; margin-top: 9px; }
.cal-grid .fc-pill { width: 30px; height: 30px; margin: 0 auto; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none;
  display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 400; color: #121212; text-decoration: none; transition: background .25s, color .25s; }
.cal-grid .fc-pill.is-today { background: #e4002b; color: #fff; font-weight: 500; }
.cal-grid .fc-pill.is-open { background: #121212; color: #f3f2ee; cursor: pointer; }
.cal-grid .fc-pill.is-open:hover { background: #3b3b39; }
.cal-grid .fc-pill.is-off { color: #c4c3be; }
.cal-grid .fc-pill.is-picked { background: #e4002b; color: #fff; }

/* statement + list pages */
.cal-say { position: absolute; left: 36px; top: 74px; width: 200px; margin: 0; font-size: 28px; line-height: 1.06; letter-spacing: -.03em; }
.fc-low .cal-say { top: 86px; }
.cal-agenda, .cal-bring { position: absolute; right: 36px; top: 76px; width: 318px; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid #d9d8d3; }
.cal-bring { top: 88px; }
.cal-agenda li, .cal-bring li { display: grid; grid-template-columns: 48px 1fr; align-items: baseline; padding: 11px 0 12px; border-top: 1px solid #d9d8d3; font-size: 17px; letter-spacing: -.012em; }
.cal-agenda li:first-child, .cal-bring li:first-child { border-top-color: #121212; }
.cal-agenda i, .cal-bring i { font-style: normal; font-size: 10px; font-weight: 500; letter-spacing: .1em; color: #8a8984; }
.cal-big { margin: 30px 0 0; font-size: 46px; font-weight: 300; line-height: 1; letter-spacing: -.04em; }
.cal-cols { position: absolute; left: 36px; right: 36px; bottom: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cal-cols b { display: block; margin-bottom: 7px; padding-top: 8px; border-top: 1px solid #121212; font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #8a8984; }
.cal-cols p { margin: 0; font-size: 14.5px; line-height: 1.3; }

/* booking */
.cal-pg .fc-slots { position: absolute; left: 36px; right: 36px; top: 176px; display: flex; gap: 8px; flex-wrap: wrap; }
.cal-pg .fc-slots button { border: 1px solid #121212; border-radius: 999px; background: transparent; color: #121212; padding: 9px 17px;
  font-size: 14.5px; font-weight: 400; letter-spacing: -.005em; cursor: pointer; transition: background .25s, color .25s; }
.cal-pg .fc-slots button:hover { background: rgba(18, 18, 18, .07); }
.cal-pg .fc-slots button.is-on { background: #121212; color: #f3f2ee; }
/* Clickables: colour changes only (nothing moves, so nothing shakes), a calm ease, and a clear focus ring. */
.cal-cta { position: absolute; left: 36px; bottom: 32px; display: inline-flex; align-items: center; gap: 16px; padding: 13px 22px; border-radius: 999px;
  border: 1px solid #121212; background: transparent; color: #8a8984; font-size: 13.5px; font-weight: 500; letter-spacing: .01em; text-decoration: none;
  pointer-events: none; transition: background .35s ease, color .35s ease, border-color .35s ease; }
.cal-cta em { font-style: normal; }
.cal-cta span { opacity: 0; transition: opacity .35s ease; }
.cal-cta.is-ready { background: #121212; color: #f3f2ee; pointer-events: auto; cursor: pointer; }
.cal-cta.is-ready span { opacity: 1; }
.cal-cta.is-ready:hover { background: #e4002b; border-color: #e4002b; }
.cal-cta.is-done { background: #e4002b; border-color: #e4002b; color: #fff; pointer-events: auto; cursor: pointer; }
.cal-pg .fc-slots button, .cal-grid .fc-pill, .cal-cta, .cal-mail { -webkit-tap-highlight-color: transparent; transform: none !important; }
.cal-pg .fc-slots button:focus-visible, .cal-grid .fc-pill:focus-visible, .cal-cta:focus-visible, .cal-mail:focus-visible { outline: 2px solid #e4002b; outline-offset: 3px; }
.cal-pg .fc-slots button:focus { outline: none; }
.cal-mail { transition: color .35s ease; }
.cal-mail:hover { color: #e4002b; }
/* The calendar is scrolled, not dragged: let vertical swipes scroll the page on touch screens. */
.wl-fc__cal { touch-action: pan-y !important; }

/* contact + the last page */
.cal-mail { display: block; margin-top: 30px; font-size: 50px; font-weight: 300; letter-spacing: -.04em; line-height: 1; color: #121212; text-decoration: none; }
.cal-dark { background: #121212; color: #f3f2ee; }
.cal-dark .cal-head span:nth-child(2) { color: #77766f; }
.cal-end { position: absolute; left: 32px; bottom: 38px; margin: 0; font-size: 92px; font-weight: 300; line-height: .9; letter-spacing: -.05em; }

/* the client's sheet as a calendar page (printed by paper3d.js, so it is the same sheet that flew in) */
.cal-sheet { padding: 0; background: #f3f2ee center / 100% 100% no-repeat; }
.cal-sheet::before { display: none; }
.cal-sheet--front { background-image: var(--sheet-front, none); }
.cal-sheet--back { background-image: var(--sheet-back, none); }

/* Two assets render a plain full-height canvas: pin them so the sheet has scroll time there. */
.wl-b-mailboxes { height: 280vh; }
.wl-b-mailboxes .wl-mb { position: sticky; top: 0; height: 100vh !important; height: 100svh !important; }
.wl-b-metaltins { height: 360vh; }
.wl-b-metaltins .wl-mt { position: sticky; top: 0; height: 100vh !important; height: 100svh !important; }

.pp-gl { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 60; pointer-events: none; }

/* Loading: black, one counter. */
.cover { position: fixed; inset: 0; z-index: 95; background: #000; transition: opacity .9s .2s, visibility 0s 1.2s; }
.cover-n { position: absolute; left: var(--pad); bottom: var(--pad); font-size: 13px; font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.is-ready .cover { opacity: 0; visibility: hidden; }

/* ---------- the letter printed on the sheet at the end: a spec sheet, mostly air ----------
   12 × 12 grid over the full-screen sheet. Mark top-left; label, specs and links mid-left; an image plate in the
   right columns with micro text under it; the maker's line bottom-left with the one red dot. */
.letter { position: fixed; inset: 0; z-index: 65; opacity: 0; visibility: hidden; color: var(--ink); overflow: hidden;
  --lp: clamp(20px, 3.2vw, 44px); padding: var(--lp);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 1.8vw, 28px); }
.letter.is-on { visibility: visible; }
.l-mark { grid-area: 1 / 1 / 4 / 6; width: clamp(150px, 21vw, 320px); height: auto; fill: var(--ink); }
.l-info { grid-area: 6 / 1 / 12 / 5; align-self: start; }
.l-dots { display: block; width: 24px; height: 24px; margin-bottom: 20px; fill: var(--ink); }
.l-label { margin: 0 0 12px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.02; font-weight: 700; letter-spacing: .005em; }
.l-spec { margin: 0; font-size: 10.5px; line-height: 1.5; font-weight: 600; letter-spacing: .035em; }
.l-links { margin: 24px 0 0; display: grid; gap: 7px; justify-items: start; }
.l-links a { font-size: 11px; font-weight: 700; letter-spacing: .045em; color: var(--ink); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }
.l-links a:hover { color: var(--red); }
.l-links a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.l-plate { grid-area: 6 / 10 / 13 / 13; margin: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; }
.l-img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; background: #2b2b2a; }
.l-plate figcaption { font-size: 9.5px; line-height: 1.5; font-weight: 600; letter-spacing: .035em; max-width: 60ch; }
.l-made { grid-area: 12 / 1 / 13 / 6; align-self: end; margin: 0; display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; }
.l-made i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }

@media (max-width: 760px) {
  .letter { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .l-mark { grid-area: 1 / 1 / 3 / 6; width: 58vw; }
  .l-info { grid-area: 6 / 1 / 12 / 4; }
  .l-plate { grid-area: 6 / 4 / 13 / 7; }
  .l-made { grid-area: 12 / 1 / 13 / 4; }
  .l-links a { font-size: 10.5px; }
}

/* Opening word on the wheel: white stardust that settles into WELCOME, bottom left, under the flying sheet (welcome.js).
   The word itself stays in the page for screen readers; the canvas draws it. */
.pp-welcome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.pp-dust { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

/* A rigid page is lit evenly: one tone across all three strips (a gradient per strip drew three bands). */
#stop-2 .wl-fc__back .wl-fc__paper::after, #stop-2 .wl-fc__front .wl-fc__paper::after { background: rgba(0, 0, 0, var(--sh, 0)); }
#stop-2 .wl-fc__seg .wl-fc__paper { height: 145.6px; } /* a little more overlap between strips, so no seam line */

/* The rings close through the client's sheet as it is bound into the calendar (paper3d.js toggles .pp-bound). */
#stop-2 .wl-fc__ring { clip-path: inset(0 0 0 0); transition: clip-path .55s cubic-bezier(.2, .7, .1, 1); }
#stop-2 .wl-fc:not(.pp-bound) .wl-fc__ring { clip-path: inset(0 0 50% 0); transition-duration: .2s; }

/* ---------- binding: punched holes and the wire through them ----------
   Holes: a dark slot, deepest at its far edge (inner shadow), with a light lip where the cut paper catches the
   light; the wire carries its own soft shadow (flipcal ring SVG), so the flat CSS drop-shadow goes. */
#stop-2 .fc-holes i { width: 11px; height: 15px; margin-left: .5px; border-radius: 5.5px; background: linear-gradient(#000, #161616);
  box-shadow: inset 0 1.5px 1.5px rgba(0, 0, 0, .95), 0 1px 0 rgba(255, 255, 255, .75), 0 -.5px 0 rgba(0, 0, 0, .22); }
#stop-2 .cal-dark .fc-holes i { box-shadow: inset 0 1.5px 1.5px rgba(0, 0, 0, .95), 0 1px 0 rgba(255, 255, 255, .14); }
#stop-2 .wl-fc__ring { filter: none; overflow: visible; }
/* The pages are a stack: a few hairline sheet edges show along the binding side of each half. */
#stop-2 .wl-fc__base--low { box-shadow: 0 -1px 0 #d9d8d3, 0 -2px 0 #a9a8a3, 0 -3px 0 #dddcd7, 0 -4px 0 #8f8e8a; }
#stop-2 .wl-fc__base--up { box-shadow: 0 1px 0 #d9d8d3, 0 2px 0 #a9a8a3, 0 3px 0 #dddcd7, 0 4px 0 #8f8e8a; }

/* ---------- order a box (order.js) ---------- */
body .mb-order, body .mb-order *, body .order-page, body .order-page * { font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif !important; }
.mb-order { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; display: inline-flex; gap: 10px; align-items: center;
  padding: 9px 15px; border-radius: 999px; background: #f3f2ee; color: #121212; font-size: 13px; font-weight: 500; letter-spacing: .01em;
  opacity: 0; transition: opacity .25s ease; will-change: transform; }
.mb-order i { font-style: normal; }
.mb-order.is-on { opacity: 1; }
.order-page { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .72); display: grid; place-items: center; padding: 4vh 4vw;
  opacity: 0; transition: opacity .38s ease; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.order-page.is-open { opacity: 1; }
.op-sheet { position: relative; width: min(1080px, 100%); max-height: 92vh; overflow: auto; background: #f3f2ee; color: #121212; padding: clamp(22px, 3.4vw, 44px);
  transform: translateY(14px); transition: transform .5s cubic-bezier(.2, .7, .1, 1); }
.order-page.is-open .op-sheet { transform: none; }
.op-close { position: absolute; right: clamp(22px, 3.4vw, 44px); top: clamp(16px, 2.6vw, 34px); border: 0; background: none; color: #121212; cursor: pointer;
  font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; display: inline-flex; gap: 8px; align-items: center; }
.op-close i { font-style: normal; font-size: 18px; }
.op-close:focus-visible, .op-cta:focus-visible { outline: 2px solid #e4002b; outline-offset: 4px; }
.op-head { display: grid; grid-template-columns: 1fr 1fr auto; padding-top: 8px; border-top: 1px solid #121212; margin-top: 34px;
  font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.op-head span:nth-child(2) { color: #8a8984; }
.op-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: 28px; align-items: start; }
.op-qr { margin: 0; }
.op-qr img { display: block; width: 100%; max-width: 440px; aspect-ratio: 1; image-rendering: pixelated; background: #efefec; }
.op-qr figcaption, .op-label figcaption { margin-top: 10px; font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #8a8984; }
.op-kicker { margin: 0; font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #e4002b; }
.op-name { margin: 10px 0 0; font-size: clamp(40px, 5.4vw, 76px); font-weight: 300; line-height: .95; letter-spacing: -.045em; }
.op-list { margin: 30px 0 0; }
.op-list div { display: grid; grid-template-columns: 110px 1fr; padding: 12px 0; border-top: 1px solid #d9d8d3; }
.op-list div:last-child { border-bottom: 1px solid #d9d8d3; }
.op-list dt { font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #8a8984; padding-top: 3px; }
.op-list dd { margin: 0; font-size: 16px; line-height: 1.4; }
.op-cta { display: inline-flex; gap: 16px; align-items: center; margin-top: 30px; padding: 14px 24px; border-radius: 999px; background: #121212; color: #f3f2ee;
  font-size: 14px; font-weight: 500; text-decoration: none; transition: background .3s ease; }
.op-cta:hover { background: #e4002b; }
.op-label { margin: 34px 0 0; }
.op-label img { display: block; width: 100%; }
@media (max-width: 760px) { .op-body { grid-template-columns: 1fr; } }

/* ---------- Shunya: the ensō ---------- */
/* White mark top-left on every screen; over white paper it inverts (difference), so it always reads. */
.brand { position: fixed; left: var(--pad); top: calc(var(--pad) * 0.8); z-index: 80; display: inline-flex; align-items: center; gap: 12px;
  color: #fff; text-decoration: none; mix-blend-mode: difference; pointer-events: auto; opacity: 0; transition: opacity 1s .6s; }
.is-ready .brand { opacity: 1; }
.brand img { width: clamp(30px, 2.8vw, 42px); height: auto; display: block; }
.brand span { font-size: 13px; font-weight: 700; letter-spacing: .32em; }
.is-end .brand { opacity: 0; }
/* The loading cover: the white ensō, breathing while the scenes build. */
.cover-enso { position: absolute; left: 50%; top: 50%; width: clamp(90px, 11vw, 150px); transform: translate(-50%, -50%); opacity: .92;
  animation: enso-breathe 2.4s ease-in-out infinite; }
@keyframes enso-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(.97); opacity: .7; } 50% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cover-enso { animation: none; } }
/* The letter's mark (on paper: ink). */
.l-mark { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 20px); margin: 0; color: var(--ink); }
.l-mark img { width: clamp(56px, 7vw, 104px); height: auto; display: block; }
.l-mark span { font-size: clamp(22px, 3vw, 44px); font-weight: 700; letter-spacing: .14em; }
/* A hidden order page must be gone, not just transparent: display: grid above overrode [hidden], so the invisible
   page covered the whole site and swallowed every click (the calendar's days and times among them). */
.order-page[hidden] { display: none !important; }
/* The letter's one button: book the meet (opens the booking email, with the day and time picked on the calendar). */
.l-links .l-book { display: inline-flex; align-items: center; gap: 16px; padding: 14px 22px; background: var(--ink); color: var(--paper);
  border: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; transition: background .3s ease; }
.l-links .l-book span { transition: transform .35s cubic-bezier(.2, .7, .1, 1); }
.l-links .l-book:hover { background: #2a2a2a; color: var(--paper); }
.l-links .l-book:hover span { transform: translateX(4px); }

/* The loading count: 000 → 100, big, in the grotesk, bottom left. */
body .cover-n { font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif !important; font-size: clamp(88px, 17vw, 280px); font-weight: 500;
  letter-spacing: -.05em; line-height: .78; left: calc(var(--pad) - .03em); bottom: calc(var(--pad) * .6); }

/* Phones: no per-page grain (an SVG noise filter drawn on every copy of every calendar page is the heaviest thing in the
   site, and on iOS it runs the page out of memory), and flat shading instead of blend modes. */
@media (max-width: 900px) { .fc-pg::before { display: none !important; } .wl-fc__paper { box-shadow: none !important; } }