Twenty Flutes · Fettle

3:"$Sreact.suspense" 0:{"__staticSiblings":["privacy","sitemap.xml","order","thanks"],"__vinext_streaming_metadata_body:route:/s/bench/twenty-flutes":"$L1","__vinext_streaming_metadata_outlet:route:/s/bench/twenty-flutes":"$L2","page:/s/bench/twenty-flutes":["$","$3","[\"s\",\"slug|bench|d\",\"piece|twenty-flutes|d\"]",{"fallback":["$","div",null,{"className":"grid min-h-dvh place-items-center","aria-busy":"true","aria-live":"polite","children":[["$","div",null,{"className":"sweep relative h-px w-40 overflow-hidden bg-[var(--rule)]"}],["$","span",null,{"className":"sr-only","children":"Loading"}]]}],"children":"$L4"}],"layout:/":"$L5","route:/s/bench/twenty-flutes":"$L6","__route":"route:/s/bench/twenty-flutes","__interceptionContext":null,"__layoutIds":["layout:/"],"__rootLayout":"/","__bfcacheSegmentIdentities":{"layout:/":"[\"layout\",\"layout:/\",\"root-boundary:/\",\"\"]","page:/s/bench/twenty-flutes":"[\"page\",\"page:/s/:slug/:piece\",\"root-boundary:/\",\"[\\\"s\\\",\\\"slug|bench|d\\\",\\\"piece|twenty-flutes|d\\\"]\"]"},"__srcPage":["s","[slug]","[piece]","page"],"__layoutFlags":{"layout:/":"d"},"__artifactCompatibility":{"schemaVersion":1,"graphVersion":"app-route-graph:18bf36203ea42230","deploymentVersion":"ae332d0a-5b88-4758-89f3-37934de31968","appElementsSchemaVersion":1,"rscPayloadSchemaVersion":1,"rootBoundaryId":"/","renderEpoch":null},"__dynamicStaleTime":0} 9:"GlobalErrorBoundary" a:I["593f344dc510",[],"$9",1] b:I["0b874ad30386",[],"default",1] c:I["593f344dc510",[],"ErrorBoundary",1] d:"LayoutSegmentProvider" e:I["15c18cfaeeff",[],"$d",1] f:I["8c0f216c4604",[],"Slot",1] 10:I["a9bbde40cf2d",[],"default",1] 11:"NotFoundBoundary" 12:I["593f344dc510",[],"$11",1] 15:I["f92a5142a8c4",[],"default",1] 16:"AppRouterScrollTarget" 17:I["9276801271d6",[],"$16",1] 18:"RedirectBoundary" 19:I["593f344dc510",[],"$18",1] :HL["/_next/static/css/DUFS7VWG.css","style",{"crossOrigin":"anonymous"}] 5:[[["$","link","css:/_next/static/css/DUFS7VWG.css",{"rel":"stylesheet","crossOrigin":"anonymous","precedence":"vite-rsc/importer-resources","href":"/_next/static/css/DUFS7VWG.css","data-rsc-css-href":"/_next/static/css/DUFS7VWG.css"}],"$undefined"],"$L7"] 14:T855, @font-face { font-family: "Obj Display"; src: url(https://fonts.gstatic.com/s/bodonimoda/v28/aFTQ7PxzY382XsXX63LUYJSKSKjWXFBP.woff2) format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; } @font-face { font-family: "Obj Text"; src: url(https://fonts.gstatic.com/s/intertight/v9/NGSwv5HMAFg6IuGlBNMjxLsH8ahuQ2e8.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } .nh { --nh-ink: #15130F; --nh-mut: #5C564B; --nh-line: rgba(21,19,15,.3); --nh-pill: #15130F; --nh-on-pill: #FFFFFF; display: grid; place-items: center; padding: 48px 20px; text-align: center; color: var(--nh-ink); font-family: "Obj Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; } .nh[data-full] { min-height: 100dvh; background: #FAF6EE; } .nh:not([data-full]) { min-height: 52svh; } .nh[data-tone="stage"] { --nh-ink: #F5F2EC; --nh-mut: rgba(245,242,236,.66); --nh-line: rgba(245,242,236,.34); --nh-pill: #F5F2EC; --nh-on-pill: #15130F; background: transparent; } .nh[data-full][data-tone="stage"] { background: #121110; } .nh-in { position: relative; z-index: 10; max-width: 34rem; } .nh h1 { margin: 0; font-family: "Obj Display", Didot, "Bodoni 72", "Times New Roman", serif; font-weight: 500; font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem); line-height: 1.05; letter-spacing: -.016em; text-wrap: balance; } .nh p { margin: 16px auto 0; max-width: 30em; font-size: 1.125rem; line-height: 1.5; color: var(--nh-mut); text-wrap: pretty; } .nh-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; } .nh-acts a { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px; font-size: 1.0625rem; font-weight: 600; text-decoration: none; white-space: nowrap; background: var(--nh-pill); color: var(--nh-on-pill); } .nh-acts a[data-quiet] { background: transparent; color: var(--nh-ink); box-shadow: inset 0 0 0 1px var(--nh-line); } .nh-acts a:focus-visible { outline: 2px solid #C9A26B; outline-offset: 3px; } 6:[[["$","meta",null,{"charSet":"utf-8"}],"$L8"],["$","$La",null,{"fallback":"$b","children":["$","$Lc",null,{"fallback":"$b","children":["$","$Le",null,{"providerId":"layout:/","segmentMap":{"children":["s","bench","twenty-flutes"]},"children":["$","$Lf",null,{"id":"layout:/","parallelSlots":"$undefined","children":["$","$Lc",null,{"resetKey":"s","fallback":"$10","children":["$","$L12",null,{"resetKey":"s","fallback":"$L13","children":["$","$3","s",{"fallback":["$","div",null,{"className":"grid min-h-dvh place-items-center","aria-busy":"true","aria-live":"polite","children":[["$","div",null,{"className":"sweep relative h-px w-40 overflow-hidden bg-[var(--rule)]"}],["$","span",null,{"className":"sr-only","children":"Loading"}]]}],"children":["$","$L12",null,{"resetKey":"[\"s\",\"slug|bench|d\",\"piece|twenty-flutes|d\"]","fallback":["$","main",null,{"className":"nh","data-full":"","data-tone":"paper","children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"$14"}}],["$","div",null,{"className":"nh-in","children":[["$","h1",null,{"children":"This isn’t here."}],["$","p",null,{"children":"The link may be old, or the piece may have gone."}],["$","div",null,{"className":"nh-acts","children":[[],["$","$L15",null,{}]]}]]}]]}],"children":["$","$L17",null,{"children":["$","$L19",null,{"resetKey":"[\"s\",\"slug|bench|d\",\"piece|twenty-flutes|d\"]","children":[["$","$Le",null,{"providerId":"page:/s/bench/twenty-flutes","segmentMap":{"children":["__PAGE__"]},"children":["$","$Lf",null,{"id":"page:/s/bench/twenty-flutes"}]}],["$","$3",null,{"fallback":null,"children":["$","$Lf",null,{"id":"__vinext_streaming_metadata_outlet:route:/s/bench/twenty-flutes"}]}]]}]}]}]}]}]}]}]}]}]}],["$","div",null,{"hidden":true,"children":["$","$3",null,{"fallback":null,"children":"$L1a"}]}]] 1a:["$","$Lf",null,{"id":"__vinext_streaming_metadata_body:route:/s/bench/twenty-flutes"}] 1c:"ShellBrandProvider" 1d:I["f6ee676fee98",[],"$1c",1] 1e:I["8c0f216c4604",[],"Children",1] 1f:I["8376fda0b8bc",[],"default",1] 20:I["1f92ce809366",[],"default",1] 1b:T443,(function(){ var KEY="objectifly:chunk-reload",WINDOW=60000,RE=new RegExp("Failed to fetch dynamically imported module|error loading dynamically imported module|Importing a module script failed|ChunkLoadError|Loading chunk [\\w-]+ failed|Loading CSS chunk|Unable to preload CSS","i"); function isChunk(e){try{var m=e&&(e.message||e.reason&&e.reason.message)||String(e||"");var n=e&&e.name||"";return RE.test(n+": "+m)}catch(_){return false}} function recover(e){if(e&&!isChunk(e))return false;var last=0;try{last=+sessionStorage.getItem(KEY)||0}catch(_){} if(Date.now()-lastTwenty Flutes · Fettle1:[["$","div",null,{"hidden":true,"suppressHydrationWarning":true,"dangerouslySetInnerHTML":{"__html":"$21"}}],["$","$L23",null,{"metadataKey":"vibcf30fa87e41a254"}]] 2:null :HL["https://fonts.gstatic.com/s/youngserif/v2/3qTpojO2nS2VtkB3KtkQZ1t93kY6ah7E.woff2","font",{"crossOrigin":"","type":"font/woff2"}] :HL["/api/photo/t/2360-atom-fluted?d=88bf9f52eca4628f&v=7&s=768","image",{"fetchPriority":"high"}] 24:T10513, @font-face { font-family: "Ayin Hebrew"; font-style: normal; font-weight: 300 500; font-display: swap; src: url(https://fonts.gstatic.com/s/frankruhllibre/v23/j8_w6_fAw7jrcalD7oKYNX0QfAnPW7Ll4brkiY-xBg.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } html:has(.ay) { background: #F4EFE9; scroll-snap-type: y proximity; } html:has(.ay) body { background: #F4EFE9; } html.ay-held, html.ay-held body { overflow: hidden; } .ay { --ay-ground: #F4EFE9; --ay-sheet: #F4EFE9; --ay-ink: #2B2420; --ay-soft: #6B5E54; --ay-hair: rgba(43, 36, 32, 0.18); --ay-gold: rgba(176, 141, 87, 0.7); --ay-top: 48px; --ay-bar: 72px; --ay-col: 640px; --ay-slow: 600ms; --ay-ease: cubic-bezier(0.2, 0, 0, 1); background: var(--ay-ground); color: var(--ay-ink); font-family: var(--ayin-text); -webkit-tap-highlight-color: transparent; } .ay-he { font-family: "Ayin Hebrew", "Frank Ruhl Libre", "David Libre", "Times New Roman", serif; font-weight: 400; direction: rtl; unicode-bidi: isolate; } .ay-serif { font-family: var(--ayin-display); font-weight: 400; letter-spacing: -0.005em; } /* the two corners: the mark, and the one way to every piece */ .ay-top { position: fixed; z-index: 4; top: 0; left: 0; right: 0; height: var(--ay-top); padding-top: env(safe-area-inset-top, 0px); pointer-events: none; } .ay-top-in { position: relative; height: 100%; max-width: var(--ay-col); margin: 0 auto; } .ay-mark { pointer-events: auto; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ay-ink); text-decoration: none; font-size: 26px; line-height: 1; } .ay-all { pointer-events: auto; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); } /* the pills */ .ay-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 1px solid var(--ay-hair); border-radius: 999px; background: transparent; color: var(--ay-ink); font: inherit; font-family: var(--ayin-text); font-size: 14px; font-weight: 400; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color 160ms var(--ay-ease), opacity 160ms var(--ay-ease); } .ay-pill:active { background: rgba(43, 36, 32, 0.06); } .ay-pill:focus-visible, .ay-words-open:focus-visible, .ay-mark:focus-visible, .ay-tile:focus-visible { outline: 1px solid var(--ay-gold); outline-offset: 3px; } .ay-pill[data-strong] { border-color: var(--ay-ink); background: var(--ay-ink); color: var(--ay-ground); } .ay-pill[data-strong]:active { background: #463b34; } .ay-pill[data-small] { min-height: 32px; padding: 0 14px; font-size: 13px; } .ay-pill[disabled] { opacity: 0.5; cursor: default; } .ay-link { border: 0; padding: 6px 2px; background: none; color: var(--ay-soft); font: inherit; font-size: 13px; text-decoration: underline; text-decoration-color: var(--ay-hair); text-underline-offset: 4px; cursor: pointer; } /* one piece, one screen */ .ay-piece { box-sizing: border-box; position: relative; height: 100vh; height: 100svh; min-height: 520px; display: flex; flex-direction: column; padding: 0 0 calc(var(--ay-bar) + env(safe-area-inset-bottom, 0px)); scroll-snap-align: start; max-width: var(--ay-col); margin: 0 auto; } .ay-stage { position: relative; flex: 1 1 auto; min-height: 0; container-type: size; touch-action: pan-y; } .ay-stage [data-stage], .ay-stage [data-stage] div, .ay-stage canvas { touch-action: pan-y !important; } .ay-poster { position: absolute; left: 50%; top: 50%; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); transform: translate(-50%, -50%); isolation: isolate; transition: opacity var(--ay-slow) var(--ay-ease); pointer-events: none; } .ay-poster img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; } .ay-poster[data-tint] img { mix-blend-mode: multiply; } .ay-stage .ay-poster { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%); mask-image: linear-gradient(to bottom, transparent, #000 8%); } .ay-poster[data-gone] { opacity: 0; } /* the piece runs up under the corners and fades into the ground at the screen's top and the words' edge: never a cut line */ .ay-live { position: absolute; inset: 0; opacity: 0; transition: opacity var(--ay-slow) var(--ay-ease); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 93%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 93%, transparent); } .ay-live[data-drawn] { opacity: 1; } /* the words, set as a verse is said: short lines, centred, breath between */ /* the words come up into the foot of the stage (where the live piece has already faded), so piece and words read as one composition */ .ay-words { position: relative; z-index: 1; flex: none; margin: -56px 0 0; padding: 0 24px 6px; text-align: center; } .ay-words-open { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 20px; } .ay-name { margin: 0; font-size: 30px; line-height: 1.1; text-wrap: balance; } .ay-name-he { display: block; margin: 6px 0 0; font-size: 16px; line-height: 1.3; color: var(--ay-soft); } .ay-verse { margin: 14px auto 0; max-width: 26em; font-size: 18px; line-height: 1.5; color: var(--ay-ink); opacity: 0.86; } .ay-verse span { display: block; text-wrap: balance; } /* the bar at the thumb: the piece in view's price, Wear it, Buy */ .ay-bar { position: fixed; z-index: 4; left: 0; right: 0; bottom: 0; padding: 0 0 env(safe-area-inset-bottom, 0px); background: var(--ay-ground); } .ay-bar-in { box-sizing: border-box; display: flex; align-items: center; gap: 8px; height: var(--ay-bar); max-width: var(--ay-col); margin: 0 auto; padding: 0 16px; } .ay-price { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; margin: 0; transition: opacity 160ms var(--ay-ease); } .ay-figure { font-size: 17px; line-height: 1.1; font-weight: 450; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .ay-incl { font-size: 11px; line-height: 1.2; color: var(--ay-soft); } .ay-striking { display: inline-block; width: 64px; height: 12px; border-radius: 999px; background: rgba(43, 36, 32, 0.07); } .ay-said { position: fixed; z-index: 4; left: 0; right: 0; bottom: calc(var(--ay-bar) + env(safe-area-inset-bottom, 0px)); margin: 0; padding: 0 16px 6px; text-align: center; font-size: 13px; color: var(--ay-soft); pointer-events: none; } /* the sheets: the story, Wear it, All */ .ay-scrim { position: fixed; z-index: 10; inset: 0; background: rgba(43, 36, 32, 0.22); opacity: 0; transition: opacity 280ms var(--ay-ease); } .ay-scrim[data-on] { opacity: 1; } .ay-sheet { position: fixed; z-index: 11; left: 0; right: 0; bottom: 0; box-sizing: border-box; max-width: var(--ay-col); max-height: 90svh; margin: 0 auto; display: flex; flex-direction: column; border-radius: 28px 28px 0 0; background: var(--ay-sheet); color: var(--ay-ink); box-shadow: 0 -12px 40px rgba(43, 36, 32, 0.1); transform: translateY(100%); transition: transform 380ms var(--ay-ease); overscroll-behavior: contain; } .ay-sheet[data-on] { transform: none; } .ay-sheet-head { flex: none; position: relative; height: 44px; touch-action: none; cursor: grab; } .ay-sheet-head::before { content: ""; position: absolute; left: 50%; top: 10px; width: 36px; height: 4px; margin-left: -18px; border-radius: 999px; background: var(--ay-hair); } .ay-sheet-head .ay-pill { position: absolute; right: 12px; top: 8px; min-height: 30px; padding: 0 12px; font-size: 13px; border-color: transparent; color: var(--ay-soft); } .ay-sheet-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 24px calc(28px + env(safe-area-inset-bottom, 0px)); text-align: center; } .ay-sheet h2 { margin: 0; font-size: 30px; line-height: 1.1; } .ay-story { margin: 22px auto 0; max-width: 30em; font-size: 19px; line-height: 1.5; } .ay-story span { display: block; margin: 0 0 12px; text-wrap: pretty; } .ay-src { margin: 18px auto 0; max-width: 32em; font-size: 12.5px; line-height: 1.5; color: var(--ay-soft); } .ay-hairline { width: 32px; height: 1px; margin: 26px auto; border: 0; background: var(--ay-gold); } .ay-facts { margin: 0 auto; max-width: 30em; display: grid; gap: 16px; } .ay-facts dt { font-size: 12px; color: var(--ay-soft); } .ay-facts dd { margin: 3px 0 0; font-size: 14.5px; line-height: 1.5; } .ay-facts a { color: inherit; text-underline-offset: 4px; text-decoration-color: var(--ay-hair); } .ay-sheet-acts { margin: 26px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .ay-send { margin: 14px auto 0; max-width: 22em; display: flex; flex-direction: column; gap: 8px; } /* Wear it */ .ay-wear { margin: 6px auto 0; max-width: 26em; } .ay-wear h2 { font-size: 28px; } .ay-wear-lead { margin: 10px 0 0; font-size: 17px; line-height: 1.5; } .ay-wear-tip { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ay-soft); } .ay-terms { margin: 18px auto 0; padding: 0; list-style: none; font-size: 12.5px; line-height: 1.7; color: var(--ay-soft); } .ay-wear-acts { margin: 20px 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; } .ay-wear-pic { position: relative; margin: 16px auto 0; width: 100%; max-height: 62svh; aspect-ratio: var(--ay-ratio, 4 / 5); border-radius: 22px; overflow: hidden; background: rgba(43, 36, 32, 0.04); } .ay-wear-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 700ms var(--ay-ease), filter 700ms var(--ay-ease); } .ay-wear-pic img[data-under] { opacity: 0.55; filter: blur(2px); } .ay-wear-pic img[data-hidden] { opacity: 0; } .ay-wear-working { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-size: 13px; color: var(--ay-ink); } .ay-wear-working span { display: inline-block; padding: 7px 14px; border-radius: 999px; background: rgba(244, 239, 233, 0.88); animation: ay-breathe 2.4s ease-in-out infinite; } @keyframes ay-breathe { 50% { opacity: 0.55; } } .ay-note { margin: 14px auto 0; max-width: 26em; font-size: 13.5px; line-height: 1.5; color: var(--ay-soft); } /* All: a calm grid of the pieces */ .ay-grid { margin: 8px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; } .ay-tile { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; } .ay-tile .ay-poster { position: relative; left: auto; top: auto; transform: none; width: 100%; height: auto; aspect-ratio: 1; } .ay-tile span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.2; } .ay-tile[aria-current] span { text-decoration: underline; text-decoration-color: var(--ay-gold); text-underline-offset: 5px; } .ay-hide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (min-width: 900px) { .ay { --ay-top: 64px; --ay-bar: 84px; --ay-col: 720px; } .ay-words { margin-top: -24px; } .ay-name { font-size: 38px; } .ay-name-he { font-size: 18px; } .ay-verse { font-size: 20px; } .ay-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ay-sheet { border-radius: 28px; bottom: 24px; max-height: calc(100vh - 48px); } } @media (max-height: 700px) { .ay-words { margin-top: -24px; } .ay-name { font-size: 26px; } .ay-verse { margin-top: 10px; font-size: 16.5px; } } @media (prefers-reduced-motion: reduce) { .ay-poster, .ay-live, .ay-sheet, .ay-scrim, .ay-price, .ay-wear-pic img { transition: none; } .ay-wear-working span { animation: none; } } @font-face{font-family:"St Young Serif";font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/youngserif/v2/3qTpojO2nS2VtkB3KtkQZ1t93kY6ah7E.woff2) format("woff2")} @font-face{font-family:"St Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(https://fonts.gstatic.com/s/instrumentsans/v4/pxiTypc9vsFDm051Uf6KVwgkfoSxQ0GsQv8ToedPibnr0SZe1ZuWi3g.woff2) format("woff2")} @font-face{font-family:"St Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F63fjptAgt5VM-kVkqdyU8n1i8q131nj-o.woff2) format("woff2")} @font-face{font-family:"St Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgsAXHNk.woff2) format("woff2")} ::view-transition-old(root),::view-transition-new(root){animation-duration:260ms;animation-timing-function:cubic-bezier(.2,0,0,1)} @media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}} html:has(.st) { background: #ECE6DB; color-scheme: light; /* The account sheet (a guest's first picture) stands outside the page and reads the room's own names. */ --ayin-white: #F3EEE6; --ayin-ink: #221E1A; --ayin-body: #221E1A; --ayin-muted: #5B5248; --ayin-faint: #5B5248; --ayin-edge: rgba(34, 30, 26, 0.22); --ayin-line: rgba(34, 30, 26, 0.22); --ayin-cta: #221E1A; --ayin-cta-press: #221E1A; --ayin-on-cta: #F3EEE6; --ayin-scrim: rgba(34, 30, 26, 0.4); --ayin-display: "St Young Serif", "Cooper", Georgia, Georgia, "Times New Roman", serif; --ayin-text: "St Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --ayin-radius-card: 20px; --ayin-radius-pill: 999px; --ayin-step: 240ms; --ayin-ease: cubic-bezier(0.2, 0, 0, 1); } html:has(.st) body { background: #ECE6DB; color: #221E1A; } .st { --ay-ground: #ECE6DB; --ay-sheet: #F3EEE6; --ay-ink: #221E1A; --ay-soft: #5B5248; --ay-hair: rgba(34, 30, 26, 0.22); --ay-gold: #A4471F; --st-strong: #221E1A; --st-on-strong: #F3EEE6; --st-scrim: rgba(34, 30, 26, 0.4); --st-panel: #2A2521; --st-on-panel: #ECE6DB; --st-accent: #A4471F; --d-face: "St Young Serif", "Cooper", Georgia, Georgia, "Times New Roman", serif; --t-face: "St Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --l-face: "St Plex Mono", ui-monospace, Menlo, monospace; --l-name: "St Arabic Fall", "St Hebrew Fall", "St Plex Mono", ui-monospace, Menlo, monospace; --d-weight: 400; --d-style: normal; --d-case: none; --d-track: -0.02em; --d-lead: 1; --d-scale: 0.86; --d-width: 0.56; --t-size: 16px; --t-weight: 400; --s-face: "St Young Serif", "Cooper", Georgia, Georgia, "Times New Roman", serif; --l-size: 11.5px; --l-case: uppercase; --l-track: 0.06em; --st-section: 112; --st-g: 28; --st-gap: 20px; --st-radius: 2px; } html:has(.st) { scroll-snap-type: none; } /* what's focused or scrolled to never lands under the bar at the thumb */ html:has(.st[data-route="piece"]) { scroll-padding-bottom: 96px; } .st.ay { --g: clamp(16px, calc(var(--st-g) * 0.1vw), calc(var(--st-g) * 1px)); --sec: clamp(calc(var(--st-section) * 0.5px), calc(var(--st-section) * 0.1vw), calc(var(--st-section) * 1px)); --nav-h: 48px; display: flow-root; position: relative; min-height: 100svh; overflow-x: clip; background: var(--ay-ground); color: var(--ay-ink); font-family: var(--t-face); font-size: var(--t-size); font-weight: var(--t-weight); line-height: 1.5; } .st *, .st *::before, .st *::after { box-sizing: border-box; } :where(.st) :where(p, h1, h2, h3, ol, ul, dl, dd) { margin: 0; padding: 0; } :where(.st) :where(ol, ul) { list-style: none; } :where(.st) :where(h1, h2, h3) { font-size: inherit; font-weight: inherit; } :where(.st) a { color: inherit; text-decoration: none; } .st h1:focus { outline: none; } .st-page[hidden] { display: none; } .st section[id] { scroll-margin-top: calc(var(--nav-h) + 8px); } .st-d { font-family: var(--d-face); font-weight: var(--d-weight); font-style: var(--d-style); text-transform: var(--d-case); letter-spacing: var(--d-track); line-height: var(--d-lead); text-wrap: balance; } .st-l { font-family: var(--l-face); font-size: var(--l-size); text-transform: var(--l-case); letter-spacing: var(--l-track); line-height: 1.3; color: var(--ay-soft); font-weight: 400; font-style: normal; } .st-fit { --c: var(--c-w); font-size: min(calc((100vw - 2 * var(--g)) / (var(--c) * var(--d-width))), var(--fit-cap, 60svh)); } @media (max-width: 700px) { .st-fit { --c: var(--c-n); white-space: normal !important; } } /* the buy sheet and the order's return page */ .st-buy { text-align: left; max-width: 26em; margin: 0 auto; } .st-buy h2 { text-align: center; } .st-buy-price { text-align: center; margin: 6px 0 0; font-size: 18px; } .st-buy-row { display: block; margin-top: 12px; font-size: 13px; color: var(--ay-soft); } .st-buy-row input, .st-buy-row select { display: block; box-sizing: border-box; width: 100%; margin-top: 4px; min-height: 44px; padding: 10px 12px; font: inherit; font-size: 16px; color: var(--ay-ink); background: transparent; border: 1px solid var(--ay-hair); border-radius: 10px; } .st-buy-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .st-buy-metal { margin-top: 12px; text-align: center; font-size: 13px; color: var(--ay-soft); } .st-buy-code { display: flex; align-items: flex-end; gap: 8px; } .st-buy-code .st-buy-row { flex: 1; min-width: 0; } .st-buy-code .ay-pill { flex: none; margin-bottom: 2px; } .st-buy-lines { margin: 16px 0 0; font-size: 15px; } .st-buy-lines > div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-top: 1px solid var(--ay-hair); } .st-buy-lines > div[data-total] { font-weight: 600; } .st-buy-lines dt, .st-buy-lines dd { margin: 0; } .st-buy-pay { display: block; width: 100%; margin-top: 18px; } .st-buy-small { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ay-soft); text-align: center; } .st-buy-error { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--ay-ink); text-align: center; font-weight: 500; } .st-sample-price { display: block; font-size: 12.5px; line-height: 1.4; color: var(--ay-soft); } /* The sample's line is long: on a phone's hero footer it takes its own row rather than running off the side. */ @media (max-width: 899px) { .st-sp-foot:has(.st-sample-price), .st-po-foot:has(.st-sample-price) { flex-wrap: wrap; } .st-sp-buy:has(.st-sample-price), .st-po-buy:has(.st-sample-price) { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; } .st-sp-buy:has(.st-sample-price) .st-hero-price, .st-po-buy:has(.st-sample-price) .st-hero-price { min-width: 0; } } .st-po-foot .st-sample-price { color: inherit; opacity: 0.82; } .st-btn:disabled { opacity: 0.5; cursor: default; } /* a page of its own: an order, the store's words */ .st-section { box-sizing: border-box; max-width: 720px; margin: 0 auto; padding: var(--sec) var(--g); } .st-section > p:first-child a, .st-order a, .st-section a { text-underline-offset: 4px; text-decoration: underline; text-decoration-color: var(--ay-hair); } .st-section h1 { font-family: var(--d-face); font-weight: var(--d-weight); font-style: var(--d-style); text-transform: var(--d-case); letter-spacing: var(--d-track); line-height: var(--d-lead); font-size: clamp(28px, 5vw, 44px); margin: 24px 0 12px; } .st-section p { margin: 0 0 10px; } .st .st-order { max-width: 560px; font-size: 15px; line-height: 1.6; text-align: center; } .st-order dl { margin: 22px 0 0; text-align: left; } .st-order dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--ay-hair); } .st-order dt { color: var(--ay-soft); } .st-order dd { margin: 0; text-align: right; } /* what a brand set up: collections, the sign-up, its own pages */ .st-coll { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; margin-top: 16px; padding: 0 var(--g); } .st-coll-head { padding: 0 var(--g); font-size: clamp(24px, 4vw, 40px); } @media (min-width: 900px) { .st-coll { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; } } .st-shop { padding: var(--sec) var(--g) 0; font-size: 14px; line-height: 1.6; color: var(--ay-soft); } .st-shop > * + * { margin-top: 16px; } .st-shop a { text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 8px 0; color: var(--ay-ink); } .st-shop form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; } .st-shop input[type="email"] { flex: 1 1 200px; min-width: 0; min-height: 46px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--ay-ink); background: transparent; border: 1px solid var(--ay-hair); border-radius: 10px; } /* the store's privacy page */ .st-privacy { box-sizing: border-box; max-width: 660px; margin: 0 auto; padding: 32px var(--g) 64px; font-family: var(--l-face); font-size: 15px; line-height: 1.6; } .st-privacy a { text-decoration: underline; text-underline-offset: 4px; } .st-privacy h1 { margin: 24px 0 8px !important; font-family: var(--d-face); font-size: 40px; font-style: var(--d-style); font-weight: var(--d-weight); line-height: 1.05; text-transform: var(--d-case); } .st-privacy h2 { margin: 28px 0 8px !important; font-weight: 500; } .st-privacy p { margin: 0 0 10px; color: var(--ay-soft); } .st-privacy-v { margin-top: 32px !important; font-size: 12px; } .st .st-alt { direction: ltr; text-align: inherit; font-size: 15px; line-height: 1.3; color: var(--ay-soft); } .st-skip { position: absolute; z-index: 30; left: 8px; top: -100px; padding: 10px 14px; background: var(--ay-ink); color: var(--ay-ground) !important; } .st-skip:focus { top: 8px; } .st a:focus-visible, .st button:focus-visible, .st summary:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 3px; } /* the buttons */ .st-btn, .st .ay-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border: 1px solid var(--ay-ink); border-radius: var(--st-radius); background: transparent; color: var(--ay-ink); font-family: var(--l-face); font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0; white-space: nowrap; cursor: pointer; transition: background-color 120ms linear, color 120ms linear, transform 120ms var(--ay-ease); -webkit-tap-highlight-color: transparent; } .st-btn[data-strong], .st .ay-pill[data-strong] { border-color: var(--st-strong); background: var(--st-strong); color: var(--st-on-strong); } .st-btn:active, .st .ay-pill:active { transform: scale(0.98); } @media (hover: hover) { .st-btn:hover { background: var(--ay-ink); color: var(--ay-ground); } .st-btn[data-strong]:hover { background: var(--ay-ink); border-color: var(--ay-ink); color: var(--ay-ground); } } .st[data-buttons="line"] .st-btn { border: 0; border-bottom: 1px solid currentColor; padding: 0 2px; min-height: 44px; background: none !important; color: var(--ay-ink) !important; font-weight: 400; } .st[data-buttons="line"] .st-btn[data-strong] { border-bottom-width: 2px; } .st-link { border: 0; padding: 12px 0; background: none; color: var(--ay-soft); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ay-hair); cursor: pointer; margin-right: 14px; } .st .ay-serif { font-family: var(--d-face); font-style: var(--d-style); text-transform: var(--d-case); } .st .ay-sheet-head .ay-pill { border-color: transparent; min-height: 36px; background: none; color: var(--ay-soft); } .st .ay-wear-lead { font-family: var(--t-face); text-transform: none; font-style: normal; letter-spacing: 0; } .st .ay-sheet { max-width: 640px; } .st .ay-scrim { background: var(--st-scrim); } .st .ay-wear-pic { background: color-mix(in srgb, var(--ay-ink) 5%, transparent); } .st .ay-wear-working span { background: color-mix(in srgb, var(--ay-sheet) 88%, transparent); } /* the price */ .st-figure { white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; } .st-por { font-size: 0.86em; color: var(--ay-soft); } .st-striking { display: inline-block; width: 64px; height: 0.8em; background: color-mix(in srgb, var(--ay-ink) 10%, transparent); } /* the nav */ /* A store's name in Arabic or Hebrew, in a bar whose typewriter face has neither: its fallback set the letters a typewriter's width apart, and Arabic's unjoined (Vitrine, Bench, Loupe). A mono label face names these first (--l-name, lib/store/templates.ts); Latin never reaches them. */ @font-face { font-family: "St Arabic Fall"; src: local("Geeza Pro"), local("GeezaPro"), local("Noto Sans Arabic"), local("Noto Naskh Arabic"), local("Segoe UI"), local("Arial"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: "St Hebrew Fall"; src: local("Arial Hebrew"), local("ArialHebrew"), local("Noto Sans Hebrew"), local("Segoe UI"), local("Arial"); unicode-range: U+0590-05FF, U+FB1D-FB4F; } .st-nav .st-brand:not(.st-brand-mark) { font-family: var(--l-name, var(--l-face)); } /* Hebrew and Arabic take no Latin tracking and no slant made up from an upright face */ .st-nav .st-brand[data-script]:not(.st-brand-mark) { letter-spacing: 0 !important; font-style: normal !important; } /* in a typewriter bar the space between words is the typewriter's, far wider than the Hebrew or Arabic face's own: closer */ .st:is([data-template="vitrine"], [data-template="bench"], [data-template="loupe"], [data-template="provenance"], [data-template="helix"]) .st-nav .st-brand[data-script]:not(.st-brand-mark) { word-spacing: -0.3em; } .st-nav { z-index: 8; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--nav-h); padding: 0 var(--g); font-family: var(--l-face); font-size: var(--l-size); text-transform: var(--l-case); letter-spacing: var(--l-track); } .st-nav nav { display: flex; gap: clamp(12px, 2vw, 28px); } .st-nav nav a, .st-brand { display: inline-flex; align-items: center; min-height: 44px; } .st-brand { max-width: 52vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: 44px; } .st-brand-mark { font-size: 24px; line-height: 44px; text-transform: none; } @media (hover: hover) { .st-nav nav a:hover { text-decoration: underline; text-underline-offset: 4px; } } .st-nav[data-nav="bar"] { position: sticky; top: 0; background: var(--ay-ground); border-bottom: 1px solid var(--ay-hair); } .st-nav[data-nav="centre"] { position: sticky; top: 0; background: var(--ay-ground); border-bottom: 1px solid var(--ay-hair); } .st-nav[data-nav="centre"] .st-brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 40vw; } .st-nav[data-nav="centre"] nav { flex: 1; } .st-nav[data-nav="centre"] nav a:last-child:not(:first-child) { margin-left: auto; } /* A centred name has no room beside two links on a phone: the first and last stay, and the page scrolls to the rest. */ @media (max-width: 560px) { .st-nav[data-nav="centre"] nav:has(a:nth-child(3)) a:nth-child(2) { display: none; } } .st-nav[data-nav="corner"], .st-nav[data-nav="whisper"] { position: fixed; left: 0; right: 0; top: 0; pointer-events: none; } .st-nav[data-nav="corner"] a, .st-nav[data-nav="whisper"] a { pointer-events: auto; } .st-nav[data-blend] { mix-blend-mode: difference; color: #fff; } /* Words scrolling under words read as neither. Over a dark room the bar fades into its ground; a blending one stays at the top of the page. */ .st-nav[data-nav="corner"]:not([data-blend]) { background: linear-gradient(var(--ay-ground) 62%, transparent); } .st-nav[data-nav="corner"][data-blend] { position: absolute; } .st-nav[data-nav="whisper"] { justify-content: center; } .st-nav[data-nav="whisper"] nav { position: absolute; right: var(--g); } .st-nav[data-nav="whisper"] nav a:not(:first-child) { display: none; } @media (min-width: 700px) { .st-nav[data-nav="whisper"] nav a:not(:first-child) { display: inline-flex; } } /* It stands at the head of the page and stays there: fixed, it crossed every name and paragraph going under it. */ .st-nav[data-nav="pill"] { position: absolute; left: 50%; top: 10px; width: max-content; max-width: calc(100vw - 20px); height: 46px; padding: 0 18px; gap: 18px; transform: translateX(-50%); border-radius: 999px; background: var(--ay-ink); color: var(--ay-ground); font-weight: 600; } .st-nav[data-nav="pill"] .st-brand { max-width: 46vw; } .st-nav[data-nav="pill"] .st-brand:not(.st-brand-mark) { font-family: var(--d-face); font-size: 17px; font-weight: var(--d-weight); letter-spacing: var(--d-track); } @media (max-width: 560px) { .st-nav[data-nav="pill"] nav a:nth-child(n + 3) { display: none; } } .st-nav[data-nav="letterhead"] { position: relative; height: 68px; border-bottom: 3px double var(--ay-ink); } .st-nav[data-nav="letterhead"] .st-brand:not(.st-brand-mark) { font-family: var(--d-face); font-size: 26px; font-style: var(--d-style); font-weight: var(--d-weight); letter-spacing: var(--d-track); text-transform: var(--d-case); line-height: 44px; } @media (max-width: 560px) { .st-nav[data-nav="letterhead"] nav a:nth-child(n + 3) { display: none; } } /* A way to ask stands at the end of the bar; on a phone only the first word and it stay. */ .st-nav[data-ask] nav a:last-child { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--st-accent); } @media (max-width: 560px) { .st-nav[data-ask] nav a:not(:first-child):not(:last-child) { display: none !important; } .st-nav[data-ask] nav a:last-child { display: inline-flex !important; } .st-nav[data-ask] .st-brand { max-width: 30vw; } } /* A name too long for its bar on a phone breaks onto two balanced lines in the bar's height, never an ellipsis (components/store/fit-name.ts sets the room and the size, and data-fit). "few": a bar's middle links give way to it, as a centred bar's do. Cut only sideways, never a mark above or below a line. */ @media (max-width: 560px) { .st-nav[data-fit] .st-brand:not(.st-brand-mark) { display: flex; align-items: center; white-space: normal; text-wrap: balance; overflow: clip visible; text-overflow: clip; line-height: 1.15; text-align: start; } .st-nav[data-fit]:is([data-nav="centre"], [data-nav="running"], [data-nav="ribbon"], [data-nav="whisper"]) .st-brand:not(.st-brand-mark) { justify-content: center; text-align: center; } .st-nav[data-fit="few"] nav a:not(:first-child):not(:last-child) { display: none !important; } /* a centred name too long for the middle: only the last link stays, and the name takes the rest of the bar, centred in it */ /* which link stays: the booking link where the bar has one, else PIECES (the shop, set before the name); QUESTIONS goes first */ .st-nav[data-fit="few"]:is([data-nav="centre"], [data-nav="running"], [data-nav="ribbon"])[data-ask] nav a:not(:last-child) { display: none !important; } .st-nav[data-fit="few"]:is([data-nav="centre"], [data-nav="running"], [data-nav="ribbon"]):not([data-ask]) nav a:not(:first-child) { display: none !important; } .st-nav[data-fit="few"]:is([data-nav="centre"], [data-nav="running"], [data-nav="ribbon"]):not([data-ask]) nav { order: -1; } /* Salon hides its booking link on a phone: PIECES stays, before the name */ .st:is(:has(.st-hero[data-hero="salon"]), :has(.st-pp[data-page="salon"])) .st-nav[data-fit="few"][data-nav="centre"][data-ask] nav a:not(:first-child) { display: none !important; } .st:is(:has(.st-hero[data-hero="salon"]), :has(.st-pp[data-page="salon"])) .st-nav[data-fit="few"][data-nav="centre"][data-ask] nav a:first-child { display: inline-flex !important; } .st:is(:has(.st-hero[data-hero="salon"]), :has(.st-pp[data-page="salon"])) .st-nav[data-fit="few"][data-nav="centre"][data-ask] nav { order: -1; } .st-nav[data-fit="few"]:is([data-nav="centre"], [data-nav="running"], [data-nav="ribbon"]) nav { flex: none; } .st-nav[data-fit="few"]:is([data-nav="centre"], [data-nav="running"], [data-nav="ribbon"]) .st-brand:not(.st-brand-mark) { position: static !important; left: auto !important; top: auto !important; transform: none !important; flex: 1 1 auto; min-width: 0; } .st-nav[data-fitted] .st-brand:not(.st-brand-mark) { overflow: visible; } } /* the stage */ .st-stage { position: relative; width: 100%; height: 100%; height: round(down, 100%, 2px); container-type: size; touch-action: pan-y; } .st-stage [data-stage], .st-stage [data-stage] div, .st-stage canvas { touch-action: pan-y !important; } .st-poster { transition: opacity 500ms var(--ay-ease); } .st-poster img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; object-fit: cover; } .st-poster[data-tint] img { mix-blend-mode: multiply; } .st-poster[data-lighten] img { mix-blend-mode: lighten; } .st-stage .st-poster { position: absolute; left: 50%; top: 50%; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); transform: translate(-50%, -50%); pointer-events: none; } /* a pale photograph where the piece can never be drawn, on a colour or the dark: a print with a keyline, well inside its stage and clear of the words */ .st-stage .st-poster[data-framed] { width: min(58cqw, 58cqh); height: min(58cqw, 58cqh); border-radius: 3px; overflow: hidden; outline: 1px solid color-mix(in srgb, currentColor 42%, transparent); outline-offset: clamp(8px, 2.4cqmin, 16px); } /* Persona's print is its own tilted card, as its features hang theirs */ .st[data-template="persona"] .st-stage .st-poster[data-framed] { border-radius: 22px; outline: 0; transform: translate(-50%, -50%) rotate(-4deg); box-shadow: 0 18px 44px color-mix(in srgb, #000 30%, transparent); } .st-poster[data-print] { box-sizing: border-box; padding: 10%; background: none !important; } .st-poster[data-print] img { border-radius: 3px; outline: 1px solid color-mix(in srgb, currentColor 36%, transparent); outline-offset: 6px; mix-blend-mode: normal !important; } /* the live piece comes up over its picture, then the picture goes: never a moment with neither */ .st-stage .st-poster[data-gone] { opacity: 0; transition: opacity 120ms linear 240ms; } .st-live { position: absolute; inset: 0; opacity: 0; transition: opacity 240ms linear; } .st-live[data-drawn] { opacity: 1; } .st-standin { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 12%; text-align: center; font-family: var(--d-face); font-size: 22px; color: var(--ay-soft); pointer-events: none; transition: opacity 500ms var(--ay-ease); } .st-standin[data-gone] { opacity: 0; } .st-hero .st-hint { display: none; } .st-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); white-space: nowrap; pointer-events: none; opacity: 0.8; } .st-stage[data-light="pool"]::before { content: ""; position: absolute; left: 50%; top: 50%; width: 130cqmin; height: 130cqmin; transform: translate(-50%, -50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--st-accent) 15%, transparent), color-mix(in srgb, var(--st-accent) 5%, transparent) 58%, transparent); pointer-events: none; } .st-stage[data-light="pool"]:not(:has(.st-live[data-drawn])) { mix-blend-mode: lighten; } .st-stage[data-light="pool"] .st-poster img { -webkit-mask-image: radial-gradient(closest-side, #000 84%, transparent); mask-image: radial-gradient(closest-side, #000 84%, transparent); } .st-stage[data-light="plate"] { background: var(--st-panel); } /* rings of light round the piece: a soft glow and two fine circles, breathing, never over it */ .st-stage[data-light="halo"]::before { content: ""; position: absolute; left: 50%; top: 50%; width: 92cqmin; height: 92cqmin; margin: -46cqmin 0 0 -46cqmin; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, #fff 72%, transparent), color-mix(in srgb, #fff 34%, transparent) 62%, transparent); outline: 1px solid color-mix(in srgb, var(--st-accent) 26%, transparent); outline-offset: 0; pointer-events: none; animation: st-breathe 8s ease-in-out infinite alternate; } .st-stage[data-light="halo"]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 112cqmin; height: 112cqmin; margin: -56cqmin 0 0 -56cqmin; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--st-accent) 16%, transparent); pointer-events: none; animation: st-breathe 11s ease-in-out infinite alternate-reverse; } @keyframes st-breathe { from { transform: scale(0.985); } to { transform: scale(1.015); } } /* words engraved round a circle, turning slowly */ .st-ins { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; animation: st-turn 180s linear infinite; } .st-ins circle { fill: none; stroke: var(--ay-ink); stroke-width: 2; opacity: 0.7; } .st-ins text { font-family: var(--l-face); font-size: 31px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--ay-ink); } @keyframes st-turn { to { transform: rotate(360deg); } } /* a pale photograph keyed out of its paper on a pale page (#st-key, ./StoreScroll; lib/store/photo.ts): over words or a glow, never a box. A colour takes a real cut-out, never this. */ .st-poster[data-key] img { filter: url(#st-key); clip-path: inset(1px); } /* images, as the treatment has them, in tiles */ .st-no-photo { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 12%; text-align: center; background: color-mix(in srgb, var(--ay-ink) 5%, transparent); color: var(--ay-soft); font-family: var(--d-face); } .st-tile-pic, .st-ft-pic > span, .st-ct-pic { display: block; overflow: hidden; } .st-tile-pic .st-poster, .st-ft-pic .st-poster, .st-ct-pic .st-poster { width: 100%; aspect-ratio: 1; } .st[data-image="plate"] .st-tile-pic, .st[data-image="plate"] .st-ft-pic > span { background: var(--st-panel); } /* Close in, and the whole piece still in the picture. */ .st[data-image="crop"] .st-tile-pic img, .st[data-image="crop"] .st-ft-pic img { transform: scale(1.14); } .st[data-image="mono"] .st-tile-pic img, .st[data-image="mono"] .st-ft-pic img { filter: grayscale(1) contrast(1.06); transition: filter 300ms linear; } @media (hover: hover) { .st[data-image="mono"] a:hover img { filter: none; } } .st[data-image="niche"] .st-tile-pic, .st[data-image="niche"] .st-ft-pic > span { border-radius: 999px 999px 0 0; } .st-tile-pic img { transition: transform 500ms var(--ay-ease), opacity 300ms linear; } @media (hover: hover) { .st-tile:hover .st-tile-pic img { transform: scale(1.03); } .st[data-image="crop"] .st-tile:hover .st-tile-pic img { transform: scale(1.2); } } /* the tile */ .st-tile { display: block; } .st-tile-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; padding-top: 8px; } .st-tile-name { flex: 1 1 60%; min-width: 0; } .st-figure, .st-tile-price { font-variant-numeric: lining-nums; } /* the sections */ .st-sec { padding: var(--sec) var(--g) 0; content-visibility: auto; contain-intrinsic-size: auto 900px; } .st-grid-head { font-size: clamp(30px, calc(6vw * var(--d-scale)), 96px); margin-bottom: calc(var(--sec) * 0.4); } .st-story-head { font-size: clamp(30px, calc(5.4vw * var(--d-scale)), 88px); } .st-story-text p + p { margin-top: 1em; } .st-faq-head { margin-bottom: 18px; } .st-faq-list details { border-top: 1px solid var(--ay-hair); } .st-faq-list details:last-child { border-bottom: 1px solid var(--ay-hair); } .st-faq-list summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 16px; padding: 18px 0; min-height: 48px; } .st-faq-list summary::-webkit-details-marker { display: none; } .st-faq-q { flex: 1; } .st-faq-list summary::after { content: "+"; color: var(--ay-soft); } .st-faq-list details[open] summary::after { content: "\2212"; } .st-faq-list details p { padding: 0 0 20px; max-width: 42em; color: var(--ay-soft); } .st-sec[data-kind="contact"] { text-align: left; } .st-sec[data-kind="contact"] a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ay-hair); } /* the foot: locked */ .st-foot { padding: var(--sec) var(--g) 28px; } .st-foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; border-top: 1px solid var(--ay-hair); padding-top: 14px; } .st-foot-row a { text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 12px 0; margin: -12px 0; } .st-foot-sample { margin-top: 12px !important; font-size: 12.5px; color: var(--ay-soft); max-width: 48em; } .st-ribbon { margin: 22px 0 0 !important; padding-top: 12px; border-top: 1px solid var(--ay-hair); } .st-ribbon a { color: inherit; text-decoration: none; display: inline-block; padding: 10px 0; margin: -10px 0; } .st-ribbon .st-ribbon-go { text-decoration: underline; text-underline-offset: 3px; } .st-ribbon a:hover .st-ribbon-go, .st-ribbon a:focus-visible .st-ribbon-go { color: var(--ay-ink); } .st-foot-giant { --fit-cap: 60svh; white-space: nowrap; margin: 0 0 12px; text-align: center; overflow: hidden; } .st-said { position: fixed; z-index: 9; left: 0; right: 0; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; pointer-events: none; font-size: 14px; } .st-said { width: fit-content; max-width: calc(100vw - 32px); margin: 0 auto !important; padding: 10px 16px; background: var(--ay-ink); color: var(--ay-ground); font-family: var(--l-face); } /* the piece's page: the blocks every layout arranges */ .st-pp { position: relative; } /* The stage and the words in a box of their own, so a sticky stage stops at the foot of the words and never rides over what follows. */ .st-p-top { display: contents; } .st-p-stage { position: relative; height: 62svh; min-height: 340px; overflow: hidden; } .st-p-stage .st-stage { position: relative; z-index: 1; } .st-p-body { padding: 24px var(--g) 0; } .st-p-kicker { display: flex; justify-content: space-between; gap: 12px; } .st-p-kicker a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ay-hair); display: inline-block; padding: 12px 0; margin: -12px 0; } .st-p-name { margin-top: 14px !important; font-size: clamp(36px, calc(9.4vw * var(--d-scale)), 72px); } .st-p-lines { margin-top: 14px !important; font-size: calc(var(--t-size) + 3px); line-height: 1.35; } .st-metals-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding: 2px 0; border-top: 1px solid var(--ay-hair); border-bottom: 1px solid var(--ay-hair); } .st-metals { display: inline-flex; } .st-metal { width: 44px; height: 44px; padding: 0; border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .st-metal span { width: 20px; height: 20px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14); outline: 1px solid transparent; outline-offset: 3px; transition: outline-color 120ms linear; } .st-metal[aria-checked="true"] span { outline-color: var(--ay-ink); } /* locked: the price, Wear it, Buy. At the thumb on a phone, wherever the layout puts it on a laptop */ .st-bar { position: fixed; z-index: 7; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 10px var(--g) calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--ay-ground); border-top: 1px solid var(--ay-hair); } .st-price { flex: 1 1 auto; min-width: 0; font-family: var(--l-face); font-size: 17px; font-weight: 500; line-height: 1.15; } .st-bar .st-btn { flex: none; padding: 0 14px; font-size: 13.5px; } /* In a preview the price never gives way to the buttons (it sat under "Wear it" in Vitrine's mono at 390): the closed button says "Preview only" on a phone, and it is the one that gives way if a row is still too tight. A store at its own address keeps its own bar. */ /* Every store, a phone: the price is never squeezed or clipped by the buttons (Vitrine's mono, Hallmark, Persona and Keepsake at 360). The buttons are one pair; where the row can't hold the price and the pair, the pair goes under the price, to the right, as it is. Wherever it fits (every direction from 414) nothing moves. On a laptop the pair isn't a box at all, so each direction lays its two buttons out as before. */ .st-bar-acts { display: contents; } @media (max-width: 899px) { .st-bar { flex-wrap: wrap; } .st-bar .st-price { flex: 1 0 auto; white-space: nowrap; } .st-bar-acts { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; } /* a centred piece page centres the pair under its centred price (on one line the price fills it, so nothing moves) */ .st-pp:is([data-page="vow"], [data-page="immersive"], [data-page="entry"], [data-page="still"]) .st-bar-acts { margin-right: auto; } } .st-buy-short { display: none; } @media (max-width: 599px) { .st-buy-long { display: none; } .st-buy-short { display: inline; } } .st[data-route="piece"] .st-foot { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } /* where the bar can take two lines, the foot stays clear of both */ @media (max-width: 413px) { .st[data-route="piece"] .st-foot { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); } } .st-p-story { margin-top: 30px; max-width: 34em; } .st-p-story p + p { margin-top: 0.9em; } .st-p-source { font-size: 13px; color: var(--ay-soft); } .st-p-facts { margin-top: 26px; } .st-p-facts > div { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-top: 1px solid var(--ay-hair); } .st-p-facts > div:last-child { border-bottom: 1px solid var(--ay-hair); } .st-p-facts dt { flex: none; white-space: nowrap; } .st-p-facts dd { text-align: right; font-size: 14px; } /* A name's tails stay clear of the line under it. */ .st-p-name + .st-alt, .st-hero-title .st-alt { margin-top: 0.3em; } .st-send { margin-top: 12px; } .st-p-next { display: block; margin-top: var(--sec); padding: 22px var(--g); border-top: 1px solid var(--ay-hair); } .st-p-next-name { display: block; margin-top: 6px; font-size: clamp(34px, calc(8vw * var(--d-scale)), 110px); } @media (min-width: 900px) { .st.ay { --nav-h: 56px; } .st-bar { position: static; padding: 0; margin-top: 26px; background: none; border: 0; flex-wrap: wrap; } .st-bar .st-price { flex-basis: 100%; font-size: 22px; margin-bottom: 8px; } .st-bar .st-btn { flex: 1 1 0; min-height: 52px; font-size: 14px; } .st[data-route="piece"] .st-foot { padding-bottom: 28px; } } /* a way to ask, on a piece's page */ .st-p-ask { margin-top: 12px; } .st-p-ask .st-btn { width: 100%; } /* more of its kind, at the foot of a piece's page */ .st-related { padding: var(--sec) var(--g) 0; } .st-related > h2 { font-size: clamp(24px, 3vw, 40px); margin-bottom: 16px; } .st-related .st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 10px; } .st-related .st-tile-pic { background: var(--st-panel); border-radius: 10px; } .st-related .st-tile-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; font-size: 14px; line-height: 1.3; } .st-related .st-tile-name { font-weight: 500; } .st-related .st-tile-price { font-weight: 500; text-align: right; } .st-related .st-tile-kind { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; color: var(--ay-soft); font-size: 13px; } .st-related .st-sample-price { font-size: 11px; font-weight: 400; text-align: left; } .st-dots { display: inline-flex; gap: 3px; } .st-dots i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14); } @media (min-width: 900px) { .st-related .st-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } } /* reveals: scroll-driven, on the compositor, nothing hidden without them */ @keyframes st-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes st-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes st-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .st[data-reveal="rise"] :is(.st-cell, .st-ct > li, .st-ft, .st-story-text, .st-story-head, .st-faq-list) { animation: st-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; } .st[data-reveal="fade"] :is(.st-cell, .st-ct > li, .st-ft, .st-story-text, .st-story-head, .st-faq-list) { animation: st-fade linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; } .st[data-reveal="slow"] :is(.st-cell, .st-ct > li, .st-ft, .st-story-text, .st-story-head, .st-faq-list) { animation: st-rise linear both; animation-timeline: view(); animation-range: entry 5% cover 28%; } } } /* a first screen's words come up once */ @media (prefers-reduced-motion: no-preference) { .st[data-reveal="slow"] .st-hero .st-d, .st[data-reveal="rise"] .st-hero .st-d { animation: st-in 700ms var(--ay-ease) both; } .st[data-reveal="fade"] .st-hero .st-d { animation: st-fade 700ms linear both; } .st[data-route="piece"]:not([data-reveal="none"]) .st-p-head { animation: st-in 360ms var(--ay-ease) both; } } @media (prefers-reduced-motion: reduce) { .st *, .st *::before, .st *::after { transition: none !important; animation: none !important; } } .st-poster[data-tint]:is(.st-fn-top *, .st-bn-bench *, .st-hero[data-hero="loupe"] *, .st-pp[data-page="bench"] .st-p-stage *, .st-pp[data-page="report"] .st-p-stage *, .st-pp[data-page="pick"] .st-p-stage *) { background: var(--sf-tint) !important; } .st-poster[data-tint]:is(.st-fn-top *, .st-bn-bench *, .st-hero[data-hero="loupe"] *, .st-pp[data-page="bench"] .st-p-stage *, .st-pp[data-page="report"] .st-p-stage *, .st-pp[data-page="pick"] .st-p-stage *, .st-band *, .st-mx *, .st-pr *, .st-fc-pic *) { clip-path: inset(1px); } .st-bn-ruler { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 10px; height: 15px; border-bottom: 1px solid currentColor; opacity: 0.42; pointer-events: none; color: var(--ay-ink); background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 7px) left bottom / 100% 5px no-repeat, repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 35px) left bottom / 100% 9px no-repeat, repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 70px) left bottom / 100% 15px no-repeat; } .st-bn-mark { display: inline-flex; align-items: center; justify-content: center; margin-left: 8px; padding: 1px 8px; border: 1.5px solid currentColor; border-radius: 50% / 46%; font-family: var(--l-face); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; line-height: 1.25; } .st-bn-made { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-family: var(--l-face); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; } .st-as-dot { flex: none; display: inline-block; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16), inset -4px -5px 8px rgba(0, 0, 0, 0.14), inset 3px 4px 6px rgba(255, 255, 255, 0.55); } .st-mk { display: grid; margin-top: 18px; border-top: 1px solid var(--ay-ink); } .st-mk li { display: grid; grid-template-columns: 30px 5.4em minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ay-hair); font-size: 15px; line-height: 1.35; } .st-mk-n { font-family: var(--d-face); font-size: 14px; color: var(--ay-soft); } .st-mk .st-l { color: var(--ay-ink); } .st-mk-v { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; } .st-pp[data-page="bench"] .st-p-stage { height: 56svh; margin: 12px var(--g) 0; border-radius: 6px; background: var(--sf, var(--ay-sheet)); } .st-pp[data-page="bench"] .st-p-stage > .st-stage { position: absolute; inset: 3% 3% 34px; width: auto; height: auto; } .st-pp[data-page="bench"] .st-p-name { font-size: clamp(40px, 11vw, 92px); line-height: 1; } .st-pp[data-page="bench"] .st-p-lines { font-size: calc(var(--t-size) + 4px); } @media (max-width: 899px) { .st-pp[data-page="bench"] .st-bar .st-price { min-width: auto; } } @media (max-width: 399px) { .st-pp[data-page="bench"] .st-bar { gap: 6px; } .st-pp[data-page="bench"] .st-bar .st-btn { padding: 0 9px; font-size: 12.5px; letter-spacing: 0; } } .st-pp-tag { margin-top: 16px !important; display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--ay-hair); } .st-pp-tag .st-as-dot { margin-right: 2px; } @media (min-width: 900px) { .st-pp[data-page="bench"] .st-p-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } .st-pp[data-page="bench"] .st-p-stage { position: sticky; top: calc(var(--nav-h) + 12px); height: calc(100svh - var(--nav-h) - 24px); margin: 12px 0 12px var(--g); } .st-pp[data-page="bench"] .st-p-body { padding: 28px var(--g) 0 clamp(24px, 3vw, 56px); } .st-pp[data-page="bench"] .st-p-name { font-size: clamp(48px, 5vw, 96px); } } .st-poster[data-tint]:is(.st-fn-top *, .st-bn-bench *, .st-hero[data-hero="loupe"] *, .st-pp[data-page="bench"] .st-p-stage *, .st-pp[data-page="report"] .st-p-stage *, .st-pp[data-page="pick"] .st-p-stage *) { background: var(--sf-tint) !important; } .st-poster[data-tint]:is(.st-fn-top *, .st-bn-bench *, .st-h