@font-face { font-family: "Platypi"; src: url("/assets/fonts/specimen/platypi-var.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Platypi"; src: url("/assets/fonts/specimen/platypi-var-italic.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Edu SA Hand"; src: url("/assets/fonts/specimen/edu-sa-hand-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Platypi Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 101%; ascent-override: 92%; descent-override: 26%; }
@property --swn-stretch { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --swn-wght { syntax: "<number>"; inherits: true; initial-value: 640; }

.spec-strewn {
  --swn-bone: #E9E1D3; --swn-ink: #221E19; --swn-corn: #5B8DEF; --swn-corn-deep: #2F5FC4; --swn-white: #FFFFFF;
  --swn-ink-2: rgba(34, 30, 25, .72); --swn-line: rgba(34, 30, 25, .18); --swn-haze: #EFE9DE; --swn-shade: rgba(34, 30, 25, .16);
  --swn-serif: "Platypi", "Platypi Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --swn-gut: clamp(16px, 4vw, 72px);
  --swn-nav-h: 52px; --swn-top: calc(var(--bar-h, 40px) + var(--swn-nav-h));
  --swn-H: 1.6; --swn-cx: 0; --swn-F: 1400px; --swn-U: 400px; --swn-vx: 720px; --swn-vy: 347px; --swn-px: 686px; --swn-az: 15.5;
  --swn-Fw: 1400px; --swn-Uw: 400px; --swn-vya: calc(var(--swn-top) + var(--swn-vy));
  --swn-ease: cubic-bezier(.22, .7, .2, 1);
  --swn-weave: repeating-linear-gradient(0deg, rgba(34, 30, 25, .025) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(34, 30, 25, .02) 0 1px, transparent 1px 3px);
  background: var(--swn-bone);
  margin: 0;
}
.spec-strewn #spec-main { font-family: var(--swn-serif); color: var(--swn-ink); font-size: clamp(16.5px, .95rem + .18vw, 19px); line-height: 1.58; font-weight: 400; }
:where(.spec-strewn #spec-main) :where(h1, h2, h3, p, ul, ol, figure) { margin: 0; }
.swn-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.swn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.spec-strewn #spec-main a { color: inherit; text-decoration: none; }
.spec-strewn #spec-main :focus-visible { outline: 2px solid var(--swn-corn); outline-offset: 3px; }

/* a ribbon, cut at one end: the only button shape on the page */
.swn-rib { --swn-rl: var(--swn-ink); --swn-rf: var(--swn-white); position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 34px 0 20px; border: 0; background: none; color: var(--swn-ink); font: 580 16.5px/1 var(--swn-serif); cursor: pointer; transition: transform .2s var(--swn-ease); }
.swn-rib::before, .swn-rib::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.swn-rib::before { background: var(--swn-rl); clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%); }
.swn-rib::after { background: linear-gradient(90deg, var(--swn-corn) calc(var(--swn-charge, 0) * 100%), var(--swn-rf) 0); clip-path: polygon(1.5px 1.5px, calc(100% - 2.8px) 1.5px, calc(100% - 15.6px) 50%, calc(100% - 2.8px) calc(100% - 1.5px), 1.5px calc(100% - 1.5px)); }
.swn-rib:hover { transform: translateY(-1px); }
.swn-rib:disabled { cursor: default; opacity: .55; transform: none; }
.swn-rib > * { position: relative; }

/* the nav, under the slim bar */
.swn-nav { position: sticky; top: var(--bar-h, 40px); z-index: 10; height: var(--swn-nav-h); box-sizing: border-box; display: flex; align-items: center; gap: clamp(12px, 2.4vw, 40px); padding: 0 var(--swn-gut); background: rgba(233, 225, 211, .88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--swn-line); }
.swn-brand { display: inline-flex; align-items: center; gap: 10px; font-style: italic; font-weight: 600; font-size: 19px; line-height: 1; letter-spacing: -.005em; }
.swn-mark { display: block; flex: none; }
.swn-nav .swn-links { display: flex; gap: clamp(14px, 2.2vw, 34px); list-style: none; padding: 0; margin: 0 0 0 auto; font-size: 16px; font-weight: 480; }
.swn-links a { background: linear-gradient(var(--swn-corn), var(--swn-corn)) 50% 100% / 0 2px no-repeat; padding-bottom: 3px; transition: background-size .2s var(--swn-ease); }
.swn-links a:hover { background-size: 100% 2px; }
.swn-talk { --swn-rl: var(--swn-corn); --swn-rf: var(--swn-corn); flex: none; height: 36px; padding: 0 30px 0 16px; font-size: 15.5px; font-weight: 600; }
@media (max-width: 1180px) { .swn-nav .swn-l4 { display: none; } }
@media (max-width: 1100px) { .swn-nav .swn-name { display: none; } }
@media (max-width: 760px) { .swn-nav .swn-links { display: none; } .swn-talk { margin-left: auto; } .swn-nav .swn-name { display: inline; } }

/* the stage: one aisle drawn by one law, fixed behind everything */
.swn-stage { position: fixed; left: 0; right: 0; top: var(--swn-top); height: calc(100lvh - var(--swn-top)); z-index: 0; overflow: hidden; pointer-events: none; }
.swn-ground { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--swn-haze) 0, var(--swn-haze) calc(var(--swn-vy) - 50px), var(--swn-bone) calc(var(--swn-vy) + 40px)); }
.swn-ground::after { content: ""; position: absolute; left: 0; right: 0; top: var(--swn-vy); height: 1px; background: var(--swn-line); }
.swn-runner { position: absolute; inset: 0; background: var(--swn-weave), var(--swn-white); clip-path: polygon(20% 100%, 80% 100%, 50.4% 43%, 49.6% 43%); }
.swn-world { position: absolute; inset: 0; perspective: var(--swn-F); perspective-origin: var(--swn-vx) var(--swn-vy); }
.swn-chairs { -webkit-mask-image: linear-gradient(#000 55%, rgba(0, 0, 0, .15) 92%); mask-image: linear-gradient(#000 55%, rgba(0, 0, 0, .15) 92%); }
.swn-tread { position: absolute; inset: 0; transform-style: preserve-3d; }
.swn-row, .swn-arb { position: absolute; left: var(--swn-vx); top: var(--swn-vy); width: 0; height: 0; transform-style: preserve-3d; transform: translate3d(calc(-1 * var(--swn-cx) * var(--swn-U)), calc(var(--swn-H) * var(--swn-U)), calc((3.5 - var(--z)) * var(--swn-U))); }
.swn-arb { --z: var(--swn-az); }
.swn-arb { transition: opacity .6s var(--swn-ease); }
.swn-there .swn-arb { opacity: 0; }
.swn-arb path { vector-effect: non-scaling-stroke; }
.swn-arb svg { position: absolute; bottom: 0; left: calc(-1.2 * var(--swn-U)); width: calc(2.4 * var(--swn-U)); height: calc(2.96 * var(--swn-U)); overflow: visible; }
.swn-side { position: absolute; bottom: 0; width: calc(2.02 * var(--swn-U)); height: calc(.9 * var(--swn-U)); overflow: visible; }
.swn-l { right: calc(1.1 * var(--swn-U)); }
.swn-r { left: calc(1.1 * var(--swn-U)); }
.swn-gst, .swn-tie { opacity: clamp(0, calc((var(--swn-go, 1) - var(--q)) * 12), 1); }
.swn-arb g > :nth-child(3n + 2) { opacity: clamp(0, calc((var(--swn-go, 1) - .22) * 8), 1); }
.swn-arb g > :nth-child(3n) { opacity: clamp(0, calc((var(--swn-go, 1) - .5) * 8), 1); }
.swn-haze { position: absolute; left: 0; right: 0; top: calc(var(--swn-vy) - 2px); height: calc(var(--swn-F) * .16); background: linear-gradient(rgba(239, 233, 222, .97), rgba(239, 233, 222, .55) 55%, rgba(239, 233, 222, 0)); }
@supports (animation-timeline: scroll()) {
  .swn-live .swn-tread { animation: swn-tread linear both; animation-timeline: scroll(root); animation-range: calc(var(--swn-a0, 0px) + var(--swn-hold, 60vh)) 100%; animation-iteration-count: var(--swn-walk-rows, 20); }
}
@keyframes swn-tread { to { transform: translateZ(calc(1.1 * var(--swn-U))); } }

.swn-petals { position: fixed; left: 0; top: var(--swn-top); width: 100vw; height: calc(100lvh - var(--swn-top)); z-index: 2; pointer-events: none; visibility: hidden; }

/* the aisle: down at the linen, the band after the notes */
.swn-aisle { position: relative; z-index: 1; height: calc(100lvh - var(--swn-top) + var(--swn-hold, 60vh)); }
.swn-frame { position: sticky; top: var(--swn-top); height: calc(100lvh - var(--swn-top)); overflow: hidden; }
.swn-photo, .swn-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
@supports (animation-timeline: scroll()) {
  .swn-live .swn-photo { animation: swn-dissolve linear both; animation-timeline: scroll(root); animation-range: calc(var(--swn-a0, 0px) + 12vh) calc(var(--swn-a0, 0px) + var(--swn-hold, 60vh)); }
}
@keyframes swn-dissolve { to { opacity: 0; } }
@supports (animation-timeline: scroll()) {
  .swn-live .swn-trace { animation: swn-trace linear both; animation-timeline: scroll(root); animation-range: calc(var(--swn-a0, 0px) + 12vh) calc(var(--swn-a0, 0px) + var(--swn-hold, 60vh)); }
}
@keyframes swn-trace { 0% { opacity: 0; } 30%, 62% { opacity: .95; } 100% { opacity: 0; } }
.swn-pad { position: absolute; inset: 0; z-index: 4; touch-action: pan-y; }
.swn-pad.is-on { cursor: grab; }
.swn-pad.is-on:active { cursor: grabbing; }
.swn-head { position: absolute; z-index: 3; left: var(--swn-px); top: var(--swn-vy); width: min(13.5em, calc(100vw - 2 * var(--swn-gut))); transform: translate(-50%, -56%); text-align: center; pointer-events: none; font-size: clamp(34px, .7rem + 2.9vw, 64px); }
.swn-head::before { content: ""; position: absolute; z-index: -1; inset: -.7em -1.3em -.9em; background: radial-gradient(closest-side, rgba(233, 225, 211, .88), rgba(233, 225, 211, .7) 55%, rgba(233, 225, 211, 0)); }
.swn-ah { position: relative; z-index: 3; font-size: 1em; font-style: italic; font-weight: 360; line-height: .98; letter-spacing: -.024em; font-variation-settings: "wght" var(--swn-hw, 360); text-wrap: balance; text-shadow: 0 0 .5em rgba(255, 255, 255, .55); }
.swn-br { display: block; }
.swn-sub { max-width: min(30em, calc(100vw - 2 * var(--swn-gut))); margin-inline: auto; margin: .6em auto 0 !important; font-size: clamp(16px, .82rem + .42vw, 20.5px); line-height: 1.42; font-weight: 540; text-wrap: balance; text-shadow: 0 0 8px var(--swn-bone), 0 0 3px var(--swn-bone); }
/* the photograph traced into lines, between the photograph and the drawing */
.swn-trace { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0; pointer-events: none; }
.swn-throw { position: absolute; z-index: 5; right: 32px; bottom: 28px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.swn-throw[hidden] { display: none; }
.swn-hint { font-style: italic; font-size: 15px; font-weight: 460; line-height: 1.35; max-width: 16em; text-align: right; text-shadow: 0 0 6px #fff, 0 0 14px #fff, 0 0 2px #fff; }
.swn-hint-s, .swn-hint-t { display: none; }
@media (hover: none) and (pointer: coarse) { .swn-hint-p, .swn-hint-s { display: none !important; } .swn-hint-t { display: inline; } }
.swn-pill { height: 52px; font-size: 17px; }
.swn-pill.is-dip { transform: translateY(1px); transition-duration: .06s; }
@media (max-width: 1180px), (max-height: 780px) {
  .swn-throw { right: 24px; bottom: 20px; }
  .swn-hint-p { display: none; }
  .swn-hint-s { display: inline; }
}
@media (max-width: 700px) {
  .swn-more { display: none; }
  .swn-head { left: 50%; font-size: clamp(28px, 8.8vw, 38px); }
    .swn-throw { left: 16px; right: 16px; bottom: 16px; align-items: stretch; gap: 8px; }
  .swn-hint { max-width: none; text-align: center; align-self: center; }
  .swn-pill { width: 100%; }
}
@media (max-width: 700px) and (max-height: 600px) {
  .swn-head { font-size: 30px; }
  .swn-sub { font-size: 14.5px; }
  .swn-throw { bottom: 12px; }
  .swn-throw .swn-hint { display: none; }
  .swn-pill { height: 48px; flex-direction: column; gap: 1px; }
  .swn-pill::before { clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%); }
  .swn-pill > span::after { content: "Flick or tap the aisle"; display: block; margin-top: 3px; font: italic 400 12px/1.2 var(--swn-serif); }
  .swn-pill svg { display: none; }
}

/* the sections, standing on the aisle */
.swn-sec { position: relative; z-index: 3; padding: 15vh var(--swn-gut) 4vh; }
.swn-hinge { display: flex; justify-content: center; margin: 0 auto 18vh; }
.swn-hinge:last-child { margin-bottom: 0; }
.swn-left { justify-content: flex-end; padding-right: 50%; }
.swn-right { justify-content: flex-start; padding-left: 50%; }
.swn-left > .swn-leaf { margin-right: 2vw; }
.swn-right > .swn-leaf { margin-left: 2vw; }
.swn-left, .swn-right { box-sizing: border-box; }
@media (max-width: 900px) { .swn-left, .swn-right { padding: 0; justify-content: center; } .swn-left > .swn-leaf, .swn-right > .swn-leaf { margin: 0; } }
.swn-leaf { position: relative; max-width: 30em; box-sizing: border-box; padding: clamp(22px, 3vw, 44px); background: var(--swn-bone); box-shadow: 0 40px 60px -40px var(--swn-shade); }
.swn-leaf > * + * { margin-top: 1em !important; }
.swn-sec h2 { font-weight: 720; font-size: clamp(36px, 1.1rem + 3.4vw, 76px); line-height: 1; letter-spacing: -.024em; text-wrap: balance; }
.swn-lead { font-size: clamp(18px, 1rem + .3vw, 22px); line-height: 1.5; font-weight: 420; }
.swn-pull { font-style: italic; font-weight: 420; font-size: clamp(22px, 1rem + 1.3vw, 36px); line-height: 1.18; letter-spacing: -.01em; text-wrap: balance; }
.swn-small, .swn-sec figcaption { font-size: 15px; line-height: 1.4; font-weight: 480; }
.swn-open { box-shadow: none; }

/* road lettering: painted long, so it reads when it lies flat, and it straightens as it stands */
.swn-road { font-weight: 640; font-variation-settings: "wght" var(--swn-wght); font-size: clamp(64px, 11.5vw, 200px); line-height: .86; letter-spacing: -.035em; padding-bottom: .24em; transform-origin: 50% 100%; transform: scaleY(var(--swn-stretch)); text-shadow: 0 0 .05em var(--swn-bone), 0 0 .16em var(--swn-bone); }
.swn-word .swn-leaf { max-width: none; text-align: center; background: none; box-shadow: none; padding: 0; }
.swn-word .swn-leaf > p { margin-top: 0 !important; }
.swn-word p { position: relative; max-width: 26em; margin-inline: auto; padding: 14px 24px; background: var(--swn-bone); }
.swn-word { box-sizing: border-box; padding-right: 12vw; margin-bottom: 10vh; }
.swn-word.swn-alt { padding: 0 0 0 12vw; }
@media (max-width: 700px) { .swn-word, .swn-word.swn-alt { padding: 0; } .swn-road { font-size: 60px; } }

/* the walk: one frame held still while the ribbons pass underfoot */
.swn-walk { padding-bottom: 0; }
.swn-wt { margin-bottom: 8vh; }
.swn-wt .swn-road { padding-bottom: .16em; }
.swn-wt .swn-leaf { max-width: none; background: none; box-shadow: none; padding: 0; text-align: center; }
.swn-wt .swn-road { font-size: clamp(46px, 7.4vw, 128px); }
.swn-stages { list-style: none; padding: 0; margin: 0; }
.swn-st { margin-bottom: 12vh; }
/* each step is a linen sash tied to the aisle-end chair with the blue ribbon, its tail cut in a V */
.swn-sash { max-width: 27em; background: var(--swn-weave), var(--swn-white); border-top: 9px solid var(--swn-corn); box-shadow: none; padding: clamp(30px, 3vw, 44px) clamp(24px, 3vw, 40px) calc(clamp(22px, 3vw, 40px) + 26px); clip-path: polygon(0 -40px, 100% -40px, 100% 100%, 50% calc(100% - 26px), 0 100%); }
.swn-knot { position: absolute; left: 50%; top: -30px; width: 58px; height: 50px; transform: translateX(-50%); overflow: visible; }
.swn-sash .swn-pull { font-size: clamp(22px, 1rem + 1.1vw, 32px); }
.swn-st4 { gap: 3vw; align-items: flex-end; }
.swn-fig { padding: 0; background: none; width: min(26vw, 380px); min-width: 200px; }
.swn-fig img, .swn-hall img, .swn-arch img, .swn-cloth img { display: block; width: 100%; height: auto; }
.swn-floor { display: none; }
@media (max-width: 700px) { .swn-st4 { flex-direction: column; align-items: center; } .swn-fig { width: 62vw; align-self: flex-end; } }

/* places */
.swn-bleed { margin-inline: calc(-1 * var(--swn-gut)); }
.swn-hall { max-width: none; width: 100%; padding: 0; background: none; box-shadow: none; }
.swn-hall picture { display: block; height: min(56.25vw, 80svh); overflow: hidden; }
.swn-hall img { height: 100%; object-fit: cover; }
@media (max-width: 700px) { .swn-hall picture { height: 62svh; } .swn-hall img { object-position: 40% 50%; } }
.swn-hall figcaption { font-style: italic; margin: 0 !important; padding: 14px var(--swn-gut); background: var(--swn-bone); }
.swn-places .swn-leaf p + p { margin-top: .8em; }

/* the first screen: the couple's notes strewn on the linen, and our run sheet beside them. A note
   that reaches the sheet becomes a line of the day, until the only card left on the table is theirs */
.swn-list { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(330px, 36fr) 64fr; min-height: calc(100svh - var(--swn-top)); background: var(--swn-bone); }
.swn-lt { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 5vh, 64px) clamp(28px, 4vw, 72px) clamp(40px, 9vh, 110px) var(--swn-gut); }
.swn-lt .swn-sub { margin: 22px 0 0 !important; max-width: 25em; font-size: clamp(17px, .85rem + .45vw, 21px); line-height: 1.42; font-weight: 560; text-wrap: pretty; text-shadow: none; }
.swn-list-hint { margin-top: 22px !important; }
.swn-list-hint .swn-ht { display: none; }
@media (hover: none) and (pointer: coarse) { .swn-list-hint .swn-hp { display: none; } .swn-list-hint .swn-ht { display: inline; } }
.swn-lot-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 28px; }
.swn-lot { height: 50px; font-size: 16.5px; }
.swn-tally { font-style: italic; font-size: 16px; line-height: 1.35; }
.swn-desk { --nf: clamp(16px, .55rem + .8vw, 21px); --swn-shw: clamp(334px, 24vw, 350px); --swn-shr: clamp(18px, 2.2vw, 40px); position: relative; min-height: 540px; box-shadow: inset 9px 0 0 var(--swn-corn); }
.swn-desk .swn-tie-bow { z-index: 2; }
.swn-table { position: absolute; inset: 0 0 0 9px; overflow: hidden; touch-action: pan-y; }
.swn-cup, .swn-spool, .swn-strewn { position: absolute; display: block; overflow: visible; pointer-events: none; }
.swn-cup { left: -34px; bottom: -40px; width: calc(var(--nf) * 9); filter: drop-shadow(0 6px 8px rgba(34, 30, 25, .14)); }
.swn-spool { right: 4px; bottom: -34px; width: calc(var(--nf) * 12.5); transform: scaleX(-1); filter: drop-shadow(0 4px 5px rgba(34, 30, 25, .12)); }
.swn-strewn { left: 24%; bottom: 1%; width: calc(var(--nf) * 13); }
.swn-pile { position: absolute; left: 0; top: 0; bottom: 0; right: calc(var(--swn-shw) + var(--swn-shr) + 8px); z-index: 2; pointer-events: none; }
.swn-pile .swn-nt { pointer-events: auto; }

/* the notes: paper of five kinds, in pen, biro and pencil */
.swn-nt { --lift: 0; position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: var(--w); box-sizing: border-box; padding: .55em .7em .65em; font: 500 var(--nf)/1.12 "Edu SA Hand", "Segoe Print", "Bradley Hand", cursive; color: #221E19; background: #FFFDF8; box-shadow: 0 1px 1px rgba(34, 30, 25, .16), 0 calc(3px + var(--lift) * 16px) calc(8px + var(--lift) * 22px) calc(-3px - var(--lift) * 3px) rgba(34, 30, 25, calc(.24 + var(--lift) * .08)); transform: translate(-50%, -50%) rotate(var(--r)); cursor: pointer; -webkit-user-select: none; user-select: none; touch-action: pan-y; }
.swn-nt p { pointer-events: none; text-wrap: balance; }
.swn-nt[data-ink="blue"] { color: var(--swn-corn-deep); }
.swn-nt[data-ink="pencil"] { color: #5C564E; }
.swn-nt u { text-decoration: none; padding-bottom: .12em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M1 4C30 2 62 6 99 3M5 8C36 6 70 9 95 7' fill='none' stroke='%23221E19' stroke-width='1.7' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 100% / 100% .34em no-repeat; }
.swn-nt[data-ink="blue"] u { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M1 4C30 2 62 6 99 3M5 8C36 6 70 9 95 7' fill='none' stroke='%232F5FC4' stroke-width='1.7' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.swn-nt-card { background: linear-gradient(transparent .42em, rgba(91, 141, 239, .6) .42em, rgba(91, 141, 239, .6) calc(.42em + 1.5px), transparent 0), #FFFCF4; padding-top: .78em; }
.swn-nt-sq { background: linear-gradient(172deg, #E4ECFC 0 62%, #D3DFF8); min-height: calc(var(--w) * .8); padding-top: .8em; }
.swn-nt-ruled { --rl: 1.12em; background: radial-gradient(circle at .5em calc(var(--rl) / 2), #F4F1EA 0 .13em, rgba(34, 30, 25, .2) .14em .18em, transparent .19em) 0 .55em / 1em var(--rl) repeat-y, repeating-linear-gradient(transparent 0 calc(var(--rl) - 1px), rgba(91, 141, 239, .34) calc(var(--rl) - 1px) var(--rl)) 0 .62em / 100% calc(100% - .62em) no-repeat, #FFFFFF; padding: .62em .7em .7em 1.35em; line-height: var(--rl); }
.swn-nt-tag { background: radial-gradient(circle at .78em 50%, #FFFFFF 0 .2em, rgba(34, 30, 25, .32) .21em .26em, transparent .27em), #EADDC4; border-radius: 2px 7px 7px 2px; padding-left: 1.55em; }
.swn-nt-env { background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(34, 30, 25, .16) 50%, transparent calc(50% + 1px)) 0 0 / 50% 1.5em no-repeat, linear-gradient(to top left, transparent calc(50% - 1px), rgba(34, 30, 25, .16) 50%, transparent calc(50% + 1px)) 100% 0 / 50% 1.5em no-repeat, #F3EADB; padding-top: 1.55em; }
.swn-nt-strip { background: #FFFFFF; border-top: 2px dotted rgba(34, 30, 25, .26); padding-block: .45em .5em; }
.swn-nt.is-held { cursor: grabbing; }
.swn-nt.is-gone { pointer-events: none; }
/* pointed at: a blue bar fills along its foot, and when it is full the note is ours */
.swn-nt::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--swn-corn); transform: scaleX(0); transform-origin: 0 50%; }
.swn-nt.is-aim::after { transform: none; transition: transform .42s linear; }
.swn-run.is-aim { background: rgba(91, 141, 239, .15); box-shadow: -10px 0 0 rgba(91, 141, 239, .15), 10px 0 0 rgba(91, 141, 239, .15); }
.swn-desk.is-live .swn-run.is-aim time { color: var(--swn-corn-deep); }
.swn-pile.is-live .swn-nt { left: 0; top: 0; will-change: transform; }

/* what's left on the table when the notes are ours */
.swn-yours { position: absolute; left: 50%; top: 55%; width: 9.6em; box-sizing: border-box; padding: .9em 1em 1em; font-size: var(--nf); text-align: center; background: var(--swn-white); border: 1px solid rgba(34, 30, 25, .12); box-shadow: 0 1px 1px rgba(34, 30, 25, .1), 0 12px 22px -14px rgba(34, 30, 25, .4); transform: translate(-50%, -50%) rotate(-2deg); }
.swn-yours span { display: block; font-size: .62em; font-weight: 620; letter-spacing: .16em; text-transform: uppercase; color: var(--swn-ink-2); }
.swn-yours b { display: block; margin-top: .3em; font-size: 1.6em; font-style: italic; font-weight: 460; line-height: 1.05; letter-spacing: -.01em; }
.swn-yours b::after { content: ""; display: block; height: 3px; margin: .3em auto 0; width: 0; background: var(--swn-corn); transition: width .7s .3s var(--swn-ease); }
.swn-desk.is-done .swn-yours b::after { width: 70%; }
/* until then the card is blank but for its heading, and the line is written as the last note goes */
.swn-desk.is-live .swn-yours b { clip-path: inset(0 100% 0 0); }
.swn-desk.is-done .swn-yours b { clip-path: inset(-.2em -.2em -.4em); transition: clip-path .8s .25s cubic-bezier(.45, .05, .35, 1); }
@keyframes swn-yours { 0%, 100% { transform: translate(-50%, -50%) rotate(-2deg); } 40% { transform: translate(-50%, -54%) rotate(1deg) scale(1.05); } }
.swn-desk.is-done .swn-yours { animation: swn-yours .9s var(--swn-ease); }

/* the run sheet: tied with the ribbon at the top, its lines written as the notes reach it */
.swn-sheet { position: absolute; z-index: 1; right: var(--swn-shr); top: 50%; width: var(--swn-shw); max-height: calc(100% - 36px); overflow: hidden; box-sizing: border-box; transform: translateY(-50%); background: var(--swn-weave), #FFFEFA; border-top: 9px solid var(--swn-corn); box-shadow: 0 1px 2px rgba(34, 30, 25, .14), 0 22px 36px -20px rgba(34, 30, 25, .36); padding-bottom: 12px; transition: transform .5s var(--swn-ease); }
.swn-sh-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px 10px; border-bottom: 1px solid var(--swn-line); }
.swn-sh-t { font-style: italic; font-weight: 640; font-size: 20px; line-height: 1; }
.swn-sh-d { margin-left: auto !important; font-size: 14px; font-style: italic; color: var(--swn-ink-2); }
.swn-runs { list-style: none; padding: 4px 18px 0; }
.swn-run { display: grid; grid-template-columns: 4.35em minmax(0, 1fr) 14px; gap: 6px; align-items: baseline; padding: 5px 0 4px; border-bottom: 1px dotted rgba(34, 30, 25, .22); font-size: 14.5px; line-height: 1.3; }
.swn-run time { font-weight: 640; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--swn-ink-2); transition: color .4s; }
.swn-run small { margin-left: 1px; font-size: .8em; font-weight: 520; }
.swn-run::after { content: ""; align-self: center; width: 12px; height: 9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.6 4.4 8 11 1' fill='none' stroke='%235B8DEF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 50% / contain no-repeat; }
.swn-sh-n { padding: 9px 18px 0; font-size: 14px; font-style: italic; }
.swn-sh-n b { font-style: normal; font-weight: 640; font-variant-numeric: tabular-nums; }
.swn-sh-tab, .swn-just { display: none; }
.swn-desk.is-live .swn-run span { clip-path: inset(0 100% 0 0); }
.swn-desk.is-live .swn-run::after { transform: scale(0); transition: transform .35s .5s cubic-bezier(.3, 1.6, .5, 1); }
.swn-desk.is-live .swn-run.is-in span { clip-path: inset(0); transition: clip-path .75s cubic-bezier(.45, .05, .35, 1); }
.swn-desk.is-live .swn-run.is-in time { color: var(--swn-ink); }
.swn-desk.is-live .swn-run.is-in::after { transform: none; }
@keyframes swn-row { 0% { background: rgba(91, 141, 239, 0); } 20% { background: rgba(91, 141, 239, .16); } 100% { background: rgba(91, 141, 239, 0); } }
.swn-run.is-new { animation: swn-row 1.4s var(--swn-ease); }

/* the hand that shows the way, once */
.swn-ghost { position: absolute; z-index: 80; left: 0; top: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--swn-corn); background: rgba(91, 141, 239, .2); opacity: 0; pointer-events: none; transition: opacity .3s, scale .2s; }
.swn-ghost.is-on { opacity: 1; }
.swn-ghost.is-press { scale: .78; background: rgba(91, 141, 239, .38); }

@media (max-width: 980px) {
  .swn-list { grid-template-columns: 1fr; min-height: 0; }
  .swn-lt { padding: clamp(24px, 5vh, 48px) var(--swn-gut) 32px; }
  .swn-lt .swn-sub { max-width: 34em; }
  .swn-desk { --swn-shw: 340px; min-height: 0; height: clamp(540px, 66svh, 640px); box-shadow: inset 0 9px 0 var(--swn-corn); }
  .swn-desk .swn-tie-bow { left: 50%; top: -18px; transform: translateX(-50%); }
  .swn-table { inset: 9px 0 0; }
}
@media (max-width: 700px) {
  .swn-lt { padding: 22px var(--swn-gut) 18px; }
  .swn-lt { display: block; }
  .swn-lt .swn-sub { font-size: 16.5px; margin-top: 12px !important; }
  .swn-lt .swn-more { display: none; }
  .swn-list-hint { display: none; }
  .swn-lot-row { margin-top: 16px; gap: 8px 14px; }
  .swn-lot { height: 46px; font-size: 15.5px; }
  .swn-tally { font-size: 15px; }
  .swn-desk { --nf: 14.5px; --swn-shw: 272px; height: clamp(390px, 56svh, 500px); }
  .swn-spool { display: none; }
  .swn-cup { left: -40px; bottom: -46px; }
  .swn-strewn { left: 32%; }
  /* the sheet peeks in from the edge: its times and ticks show, and it pulls out to be read */
  .swn-pile { right: 92px; }
  .swn-sheet { right: 0; top: 12px; max-height: calc(100% - 24px); transform: translateX(calc(100% - 104px)); }
  .swn-sheet.is-out { width: min(calc(100% - 12px), 360px); transform: none; z-index: 70; }
  .swn-sh-top { padding: 11px 14px 8px 26px; }
  .swn-sh-t { font-size: 17px; }
  .swn-runs { padding: 2px 14px 0 26px; }
  .swn-run { font-size: 13px; padding: 3px 0 2px; grid-template-columns: 4.3em minmax(0, 1fr) 12px; gap: 4px; }
  .swn-run span { white-space: nowrap; overflow: hidden; }
  .swn-sh-n { padding: 7px 14px 0 26px; font-size: 13px; }
  .swn-sh-tab { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 20px; padding: 0; border: 0; background: rgba(91, 141, 239, .14); cursor: pointer; }
  .swn-sh-tab span { position: absolute; left: 50%; top: 50%; white-space: nowrap; font: italic 600 11.5px/1 var(--swn-serif); color: var(--swn-corn-deep); transform: translate(-50%, -50%) rotate(-90deg); }
  .swn-just { display: block; position: absolute; z-index: 60; left: 10px; bottom: 10px; max-width: calc(100% - 132px); padding: 6px 10px; font-size: 14px; font-style: italic; line-height: 1.3; background: rgba(233, 225, 211, .94); box-shadow: inset 3px 0 0 var(--swn-corn); opacity: 0; transition: opacity .3s; }
  .swn-just.is-on { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .swn-desk.is-live .swn-run.is-in span, .swn-desk.is-live .swn-run::after, .swn-sheet, .swn-yours b, .swn-yours b::after { transition: none !important; }
  .swn-desk.is-done .swn-yours, .swn-run.is-new { animation: none; }
}

/* who sits where. Bone at left for the words and the controls; the plan on a white linen cloth
   that runs to the right edge, tied at the top with the blue ribbon */
.swn-linen { background: var(--swn-weave), var(--swn-white); }
.swn-seat { position: relative; z-index: 3; background: var(--swn-bone); }
.swn-planner { display: grid; grid-template-columns: minmax(330px, 36fr) 64fr; grid-template-rows: auto 1fr; grid-template-areas: "top plan" "ctrl plan"; column-gap: clamp(28px, 4vw, 72px); min-height: calc(100svh - var(--swn-top)); padding-left: var(--swn-gut); box-sizing: border-box; }
.swn-seat-top { grid-area: top; padding-top: clamp(28px, 6.5vh, 76px); }
.swn-seat-top > * + * { margin-top: 18px !important; }
.swn-h1 { font-size: clamp(42px, .8rem + 3.5vw, 84px); font-style: italic; font-weight: 440; line-height: .96; letter-spacing: -.028em; font-variation-settings: "wght" var(--swn-hw, 440); text-wrap: balance; }
.swn-h1 .swn-br { display: block; white-space: nowrap; }
@media (max-width: 380px) { .swn-h1 .swn-br { white-space: normal; } }
.swn-seat-top .swn-sub { margin: 20px 0 0 !important; max-width: 25em; font-size: clamp(17px, .85rem + .45vw, 21px); line-height: 1.42; font-weight: 560; text-wrap: pretty; text-shadow: none; }
.swn-seat-hint { max-width: 26em; font-size: 16px; line-height: 1.45; font-style: italic; font-weight: 420; color: var(--swn-ink-2); padding-left: 14px; border-left: 3px solid var(--swn-corn); }
.swn-planwrap { grid-area: plan; min-width: 0; position: sticky; top: var(--swn-top); align-self: start; height: calc(100svh - var(--swn-top)); min-height: 520px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 5vh, 64px) clamp(20px, 3vw, 56px) clamp(16px, 3vh, 32px); box-shadow: inset 9px 0 0 var(--swn-corn); }
.swn-tie-bow { position: absolute; left: -24px; top: 26px; width: 58px; height: 50px; overflow: visible; }
.swn-plan { display: block; width: 100%; height: auto; max-height: calc(100svh - var(--swn-top) - 150px); min-height: 0; flex: 0 1 auto; }
.swn-plan text { font-family: var(--swn-serif); }
.swn-plan .swn-gu text { font-size: 9.5px; font-weight: 640; text-anchor: middle; font-variant-numeric: tabular-nums; }
.swn-plan .swn-tn { font-size: 15px; font-weight: 600; text-anchor: middle; fill: var(--swn-ink-2); }
.swn-plan .swn-cap { font-size: 14px; font-style: italic; fill: var(--swn-ink-2); }
.swn-said { font-style: italic; font-size: clamp(19px, 1rem + .6vw, 26px); line-height: 1.3; margin-top: 10px !important; min-height: 2.6em; padding-left: 4%; }
.swn-ctrl { grid-area: ctrl; min-width: 0; padding: 30px 0 clamp(40px, 8vh, 96px); }
.swn-ctrl > * + * { margin-top: 16px !important; }
.swn-groups { list-style: none; padding: 0; display: grid; gap: 6px; max-width: 460px; }
.swn-grp { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 28px; align-items: center; gap: 6px; }
.swn-pick { width: 40px; height: 34px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 3px; background: none; cursor: pointer; padding: 0; }
.swn-pick[aria-pressed="true"] { border-color: var(--swn-ink); background: var(--swn-white); box-shadow: inset 0 -2px 0 var(--swn-corn); }
.swn-gname, .swn-step input { font: 460 15.5px/1.3 var(--swn-serif); color: var(--swn-ink); background: var(--swn-white); border: 1px solid var(--swn-line); border-radius: 3px; padding: 6px 8px; min-width: 0; }
.swn-step { display: inline-flex; align-items: center; }
.swn-step input { width: 2.6em; text-align: center; padding: 6px 2px; -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
.swn-step input::-webkit-inner-spin-button, .swn-step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.swn-step button, .swn-x { width: 28px; height: 32px; border: 0; background: none; color: var(--swn-ink); font: 500 19px/1 var(--swn-serif); cursor: pointer; border-radius: 3px; padding: 0; }
.swn-step button:hover, .swn-x:hover { background: var(--swn-haze); }
.swn-x:disabled { opacity: .3; cursor: default; }
.swn-plain { border: 0; background: none; padding: 4px 0; font: italic 460 16px/1.3 var(--swn-serif); color: var(--swn-ink); cursor: pointer; background-image: linear-gradient(var(--swn-corn), var(--swn-corn)); background-size: 100% 2px; background-position: 0 100%; background-repeat: no-repeat; }
.swn-plain:disabled { opacity: .5; cursor: default; }
.swn-act { border-top: 1px solid var(--swn-line); padding-top: 14px; max-width: 460px; }
.swn-act-say { min-height: 2.8em; font-style: italic; }
.swn-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.swn-chipb { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--swn-ink); border-radius: 3px; background: var(--swn-white); font: 520 14.5px/1 var(--swn-serif); color: var(--swn-ink); cursor: pointer; }
.swn-chipb:disabled { border-color: var(--swn-line); color: var(--swn-ink-2); background: transparent; cursor: default; }
.swn-chipb:disabled svg { opacity: .4; }
.swn-chipb:not(:disabled):hover { background: var(--swn-haze); }
.swn-wishes { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; max-width: 460px; }
.swn-wishes li { display: inline-flex; align-items: center; gap: 2px; padding: 2px 2px 2px 10px; font-size: 14.5px; font-style: italic; background: var(--swn-white); border-left: 3px solid var(--swn-corn); }
@keyframes swn-met { 0% { background: var(--swn-white); } 25% { background: var(--swn-corn); color: var(--swn-white); } 100% { background: var(--swn-white); } }
@keyframes swn-met-s { 0% { color: var(--swn-ink); } 30% { color: var(--swn-corn-deep); } 100% { color: var(--swn-ink); } }
.swn-wishes li.is-met { animation: swn-met 1.1s var(--swn-ease) both; }
.swn-said.is-met { animation: swn-met-s 1.4s var(--swn-ease); }
.swn-wishes button { width: 26px; height: 26px; border: 0; background: none; font: 18px/1 var(--swn-serif); color: var(--swn-ink); cursor: pointer; }
.swn-seat-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--swn-line); padding-top: 14px; max-width: 460px; }
.swn-cap { border: 0; padding: 0; margin: 0; display: flex; align-items: center; gap: 12px; font-size: 15px; }
.swn-cap legend { float: left; padding: 0; margin-right: 4px; font-weight: 520; }
.swn-cap label { display: inline-flex; align-items: center; gap: 5px; }
.swn-cap input { accent-color: var(--swn-corn-deep); width: 16px; height: 16px; margin: 0; }
.swn-shuffle { height: 42px; font-size: 15.5px; }
.swn-planner.is-live .swn-nojs { display: none; }
@media (max-width: 980px) {
  .swn-planner { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "top" "plan" "ctrl"; padding: 0; }
  .swn-seat-top { padding: clamp(24px, 5vh, 48px) var(--swn-gut) 28px; }
  .swn-planwrap { position: relative; top: auto; height: auto; min-height: 0; padding: 44px var(--swn-gut) 16px; box-shadow: inset 0 9px 0 var(--swn-corn); }
  .swn-tie-bow { left: 50%; top: -18px; transform: translateX(-50%); }
  .swn-plan { max-height: none; }
  .swn-ctrl { padding: 24px var(--swn-gut) 56px; }
}
@media (max-width: 700px) { .swn-h1 { font-size: clamp(36px, 10.5vw, 46px); } .swn-seat-top .swn-sub { font-size: 16.5px; } .swn-said { font-size: 18px; padding-left: 0; } }

/* the long lunch */
.swn-cloth { max-width: none; width: 100%; padding: 0; background: none; box-shadow: none; }
.swn-cloth picture { display: block; height: min(66.6vw, 84svh); overflow: hidden; }
.swn-cloth img { height: 100%; object-fit: cover; object-position: 100% 50%; }
.swn-menu { position: absolute; left: 8vw; top: 50%; transform: translateY(-50%); width: min(26em, 50vw); margin: 0 !important; }
.swn-menu h3 { font-size: clamp(20px, 1rem + .6vw, 26px); font-weight: 720; line-height: 1.1; letter-spacing: -.01em; }
.swn-menu p { margin: .35em 0 1.25em !important; }
.swn-cooked { font-weight: 700; }
.swn-poured { font-style: italic; font-weight: 420; }
.swn-dry .swn-pull { font-size: clamp(26px, 1rem + 2vw, 48px); }
@media (max-width: 800px) { .swn-cloth picture { height: auto; aspect-ratio: 4 / 3; } }
@media (max-width: 700px) { .swn-cloth picture { aspect-ratio: 4 / 5; } }
@media (max-width: 800px) { .swn-menu { position: static; transform: none; width: auto; padding: 24px var(--swn-gut); background: var(--swn-bone); } }

/* the in-between */
.swn-small-h { font-size: 20px !important; font-weight: 600 !important; letter-spacing: 0 !important; }
.swn-brk { max-width: 12.5em; font-size: clamp(40px, 1rem + 6.2vw, 116px); text-align: center; padding-block: .3em; background: none; text-shadow: 0 0 .12em var(--swn-bone), 0 0 .3em var(--swn-bone); }
.swn-brk .swn-small-h { font-size: 20px; }
.swn-break { font-style: italic; font-weight: 360; line-height: 1.02; letter-spacing: -.018em; }
.swn-day .swn-left .swn-leaf { max-width: 26em; }

/* at the arbour */
.swn-arch { width: 46vw; min-width: 280px; max-width: calc(100svh * 2 / 3); padding: 0; background: none; box-shadow: none; touch-action: pan-y; }
.swn-at { display: flex; justify-content: center; align-items: flex-start; gap: 24px; margin: 0 auto; }
.swn-at > .swn-hinge { margin: 0; flex: 0 1 720px; min-width: 0; }
.swn-formleaf { max-width: 720px; width: 100%; }
.swn-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-top: 28px !important; }
.swn-f { display: grid; gap: 6px; font-size: 15px; font-weight: 480; min-width: 0; border: 0; padding: 0; margin: 0; }
.swn-f legend { padding: 0; margin-bottom: 6px; }
fieldset.swn-f { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 18px; }
fieldset.swn-f label { display: inline-flex; align-items: center; gap: 6px; font-weight: 420; }
.swn-wide { grid-column: 1 / -1; }
.swn-f input[type="text"], .swn-f select, .swn-f textarea { font: 400 16px/1.4 var(--swn-serif); color: var(--swn-ink); background: var(--swn-white); border: 1px solid var(--swn-line); border-radius: 3px; padding: 10px 12px; min-width: 0; }
.swn-f :is(input, select, textarea):focus, .swn-gname:focus, .swn-step input:focus { border-color: var(--swn-corn); box-shadow: inset 0 0 0 1px var(--swn-corn); outline: none; }
.swn-f input[type="radio"], .swn-f input[type="checkbox"] { accent-color: var(--swn-corn-deep); width: 17px; height: 17px; margin: 0; }
.swn-send-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.swn-send { --swn-rl: var(--swn-corn); --swn-rf: var(--swn-corn); height: 52px; padding: 0 46px 0 30px; font-size: 17px; font-weight: 620; }
.swn-status { font-size: 15px; font-style: italic; }
.swn-back { grid-column: 1 / -1; font-style: italic; font-size: clamp(18px, 1rem + .4vw, 22px); line-height: 1.3; }
.swn-back:empty { display: none; }
@media (max-width: 900px) { .swn-at { flex-direction: column; align-items: stretch; } .swn-at > .swn-hinge { flex: none; } }
@media (max-width: 600px) { .swn-form { grid-template-columns: 1fr; } .swn-arch { width: 100%; min-width: 0; } }
.swn-stirling { margin: 6vh auto 0 !important; padding-bottom: 4vh; text-align: center; font-weight: 800; font-size: clamp(72px, 13vw, 230px); line-height: .86; color: rgba(34, 30, 25, .2); transform: perspective(900px) rotateX(76deg) scaleY(2.4); transform-origin: 50% 100%; font-variation-settings: "wght" 800; }
.swn-foot { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding: 40px var(--swn-gut) 48px; background: var(--swn-bone); border-top: 1px solid var(--swn-line); font-family: var(--swn-serif); color: var(--swn-ink); font-size: 15px; }
.swn-foot a { color: inherit; text-decoration: none; }
.swn-foot p { margin: 0; flex: 1 1 22em; }
.swn-foot .swn-links { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 0; padding: 0; }

/* the walk, where scroll timelines run: leaves lie on the runner and stand as you reach them */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .swn-hinge { perspective: var(--swn-Fw); animation: swn-po linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .swn-hinge:not(.swn-tall) > .swn-leaf { transform-origin: 50% 100%; animation: swn-stand linear backwards; animation-timeline: view(); animation-range: entry 5% cover 40%; }
    .swn-hinge:not(.swn-tall) > .swn-leaf .swn-road { animation: swn-roadk linear backwards; animation-timeline: view(); animation-range: entry 5% cover 40%; }
    /* the big words have been passed once they reach the nav: they fade, never slide under it */
    .swn-hinge.swn-word, .swn-hinge.swn-wt { animation: swn-po linear both, swn-out linear both; animation-timeline: view(), view(block 92px 0px); animation-range: cover 0% cover 100%, exit 0% exit 50%; }
    /* the planning, one stage at a time, in a frame that holds still */
    .swn-wtrack { position: relative; height: calc(5 * 60vh + 100lvh - var(--swn-top)); view-timeline: --swn-walk-tl block; margin: 0 calc(-1 * var(--swn-gut)); }
    .swn-wf { position: sticky; top: var(--swn-top); height: calc(100lvh - var(--swn-top)); overflow: hidden; display: grid; }
    .swn-floor { display: block; position: absolute; inset: 0; perspective: var(--swn-F); perspective-origin: var(--swn-vx) var(--swn-vy); }
    .swn-rb { position: absolute; left: var(--swn-vx); top: var(--swn-vy); width: 0; height: 0; transform-style: preserve-3d; animation: swn-rib linear both; animation-timeline: --swn-walk-tl; animation-range: contain 0% var(--end); }
    .swn-rb svg { position: absolute; left: calc(-1.35 * var(--swn-U)); top: calc(-.3 * var(--swn-U)); width: calc(2.7 * var(--swn-U)); height: calc(.6 * var(--swn-U)); transform: rotateX(90deg); overflow: visible; }
    .swn-stages { display: contents; }
    /* each sash comes up the aisle from the arbour, hangs beside you while you read, and passes;
       the next is already on its way, on the other side */
    .swn-st { grid-area: 1 / 1; margin: 0; align-self: stretch; display: flex; justify-content: flex-start; align-items: flex-end; padding: 0 calc(var(--swn-gut) + 2vw) 9vh; perspective: var(--swn-Fw); perspective-origin: var(--swn-vx) var(--swn-vy); animation: none; }
    .swn-st:nth-child(even) { justify-content: flex-end; }
    .swn-wf .swn-st.swn-hinge > .swn-leaf { animation: swn-come linear both; animation-timeline: --swn-walk-tl; animation-range: contain calc(var(--k) * 19% - 10%) contain calc(var(--k) * 19% + 24%); }
    .swn-wf .swn-st.swn-hinge:last-child > .swn-leaf { animation-name: swn-come-last; animation-range: contain 66% contain 100%; }
    @media (max-width: 700px) {
      .swn-wtrack { height: calc(5 * 48vh + 100lvh - var(--swn-top)); }
      .swn-st, .swn-st:nth-child(even) { justify-content: center; padding: 0 var(--swn-gut) 7vh; }
      .swn-st4 .swn-fig { display: none; }
    }
  }
}
@keyframes swn-po { from { perspective-origin: 50% calc(var(--swn-vya) - 100vh); } to { perspective-origin: 50% calc(var(--swn-vya) + 100%); } }
@keyframes swn-stand { from { transform: rotateX(80deg); } to { transform: rotateX(0deg); } }
@keyframes swn-roadk { from { --swn-stretch: 2.4; --swn-wght: 800; } to { --swn-stretch: 1; --swn-wght: 640; } }
@keyframes swn-out { to { opacity: 0; } }
@keyframes swn-come {
  0% { transform: translate3d(0, 0, calc(-3 * var(--swn-Fw))); opacity: 0; visibility: hidden; }
  12% { opacity: 1; visibility: visible; }
  40%, 70% { transform: none; opacity: 1; visibility: visible; }
  100% { transform: translate3d(calc(var(--sd, 1) * 22vw), 14vh, calc(.5 * var(--swn-Fw))); opacity: 0; visibility: hidden; }
}
@keyframes swn-come-last {
  0% { transform: translate3d(0, 0, calc(-3 * var(--swn-Fw))); opacity: 0; visibility: hidden; }
  18% { opacity: 1; visibility: visible; }
  45%, 100% { transform: none; opacity: 1; visibility: visible; }
}
@keyframes swn-stage {
  0% { transform: rotateX(88deg); visibility: hidden; }
  20%, 80% { transform: none; visibility: visible; }
  100% { transform: translate3d(0, 75vh, calc(1.1 * var(--swn-Uw))); visibility: hidden; }
}
@keyframes swn-stage-last {
  0% { transform: rotateX(88deg); visibility: hidden; }
  20%, 100% { transform: none; visibility: visible; }
}
@keyframes swn-rib {
  from { transform: translate3d(0, calc(var(--swn-H) * var(--swn-U)), calc((3.5 - var(--z0)) * var(--swn-U))); }
  to { transform: translate3d(0, calc(var(--swn-H) * var(--swn-U)), calc((3.5 - var(--z1)) * var(--swn-U))); }
}

/* no scroll timelines: each leaf stands once as it comes into view */
@media (prefers-reduced-motion: no-preference) {
  .swn-io .swn-hinge:not(.swn-tall) > .swn-leaf { transform-origin: 50% 100%; transition: transform .6s var(--swn-ease); }
  .swn-io .swn-hinge:not(.swn-tall) > .swn-leaf:not(.is-up) { transform: perspective(var(--swn-Fw)) rotateX(80deg); }
}

@media (prefers-reduced-motion: reduce) {
  .swn-tread, .swn-photo { animation: none !important; }
  .swn-aisle { height: calc(100lvh - var(--swn-top)); }
  .swn-sec { padding-top: 12vh; }
  .swn-hinge { margin-bottom: 12vh; }
  .swn-word { margin-bottom: 8vh; }
  .swn-st { margin-bottom: 12vh; }
  .swn-rib, .swn-links a { transition: none; }
}