/* TAN Grandeur (Tan Type, licensed font): drop the file at assets/fonts/tan-grandeur.woff2 */
@font-face { font-family: "TAN Grandeur"; src: url("assets/fonts/tan-grandeur.woff2") format("woff2"), url("assets/fonts/tan-grandeur.otf") format("opentype"); font-display: swap; }
/* Layout: a sticky full-screen stage. Photo 1 stays put; photo 2 slides up over it as you scroll. The diamond wordmark never moves: it sits above both backdrops and below both models. */
:root {
  color-scheme: dark;
  --ink: #050506;          /* behind everything */
  --diamond: #FFFFFF;      /* wordmark stones */
  --silver: #E7E2E3;       /* brand silver */
  --silver-dim: rgba(231, 226, 227, .62);
  --tk-lux: linear-gradient(90deg, #a17d3a 0%, #d6b766 20%, #f3e3b0 38%, #dcbe76 54%, #bb9443 72%, #e0c584 88%, #c29c4e 100%);
  --gold-light: #D4B86A;   /* brand gold, text on dark */
  --font-display: "TAN Grandeur", "Kalnia", "Didot", "Bodoni 72", Georgia, serif;
  --font-body: "GFS Didot", "Didot", Georgia, serif;
  --font-label: "Playfair Display", "Didot", Georgia, serif;
}

body { margin: 0; background: var(--ink); color: var(--silver); font-family: var(--font-body); overflow-x: clip; }

/* full bleed even inside a boxed WordPress/Flatsome content column */
.tk-scroller { position: relative; background: #000; height: 1765svh; width: 100vw; margin-left: calc(50% - 50vw); }
.tk-stage { position: sticky; top: 0; height: 100vh; height: 100lvh; min-height: 520px; overflow: hidden; background: var(--ink); isolation: isolate; }
.tk-stage img.tk-layer, .tk-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; }
.tk-stage img.tk-layer { object-fit: cover; object-position: 52.7% 38%; }
.tk-bg { z-index: 1; animation: rise 1.4s cubic-bezier(.2,.7,.2,1) both; }
#diamonds { z-index: 2; pointer-events: none; }
#front { z-index: 4; pointer-events: none; animation: fade 1s 1.5s both; }
.tk-model { z-index: 3; animation: rise 1.4s cubic-bezier(.2,.7,.2,1) both; }
/* clean hand-over: each outgoing model is cut exactly at the top edge of the photo sliding over it */
.tk-stage { --q1: var(--p1, 0); --q2: var(--p2, 0); }
.tk-model { clip-path: inset(0 0 calc(var(--q1) * 100%) 0); }
/* photos 2 and 3: same stack, pushed down by (1 - progress) and sliding up as you scroll */
.tk-stage img.tk-slide2 { object-position: 31% 38%; transform: translate3d(0, calc((1 - var(--q1)) * 100%), 0); will-change: transform; }
.tk-stage img.tk-slide3 { object-position: 74% 38%; transform: translate3d(0, calc((1 - var(--q2)) * 100%), 0); will-change: transform; }
.tk-bg2, .tk-bg3 { z-index: 1; }
.tk-model2 { z-index: 3; clip-path: inset(0 0 calc(var(--q2) * 100%) 0); }
.tk-model3 { z-index: 3; }
/* hero 4: a black panel slides up over everything, wordmark included (only the menu stays on top) */
.tk-hero4 { position: absolute; inset: 0; z-index: 6; background: #000; transform: translate3d(0, calc((1 - var(--p3, 0)) * 100%), 0); will-change: transform;
  overflow: hidden; isolation: isolate; }
/* PARIS FASHION WEEK: a black sheet with white letters multiplied over the runway film, so the film only shows inside the letters.
   Scrolling on types the words in, then dives into the F until the film fills the screen. */
/* the film only spans the block of words (set from JS), so it stays sharp and the dive ends on a framed picture, not full screen */
/* each film (Paris, New York, Essence of Beauty) is its own black layer; a pair of curtains closes before each new one */
.tk-film { position: absolute; inset: 0; background: #000; isolation: isolate; overflow: hidden; }
.tk-film-ny { z-index: 3; visibility: hidden; }
.tk-film-es { z-index: 5; visibility: hidden; }
.tk-curtain.tk-c2 { z-index: 4; }
.tk-curtain.tk-c3 { z-index: 6; visibility: hidden; }
.tk-curtain.tk-c2.tk-top { transform: translate3d(0, calc((var(--cl2, 0) - 1) * 100%), 0); }
.tk-curtain.tk-c2.tk-bottom { transform: translate3d(0, calc((1 - var(--cl2, 0)) * 100%), 0); }
.tk-curtain { position: absolute; left: 0; right: 0; height: 50.5%; background: #000; z-index: 2; will-change: transform; }
.tk-curtain.tk-top { top: 0; transform: translate3d(0, calc((var(--cl, 0) - 1) * 100%), 0); }
.tk-curtain.tk-bottom { bottom: 0; transform: translate3d(0, calc((1 - var(--cl, 0)) * 100%), 0); }
/* grey under the film: the letters stay readable (silver) while a clip is still loading or missing */
.tk-pfw-video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #8a8a8a; }
.tk-pfw-cut { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; visibility: hidden; pointer-events: none; }
/* the letters are drawn as SVG vectors (laid out from the hidden heading), so they stay sharp however deep the dive goes */
.tk-pfw-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; }
.tk-pfw-svg.tk-cut { mix-blend-mode: multiply; }
.tk-pfw-svg text { font-family: "Playfair Display", Georgia, serif; font-weight: 900; fill: #fff; opacity: 0; transition: opacity .18s linear; }
.tk-pfw-svg text.tk-on { opacity: 1; }
/* under the framed film once the dive has landed: the show's name on the left, a link to the full show on the right */
.tk-film-cap { position: absolute; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; opacity: 0; pointer-events: none;
  font-family: var(--font-body); font-size: clamp(13px, 1.15vw, 17px); letter-spacing: .06em; color: #fff; }
.tk-film-cap.tk-on { pointer-events: auto; }
.tk-film-cap a { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; white-space: nowrap; transition: color .25s; }
.tk-film-cap a:hover, .tk-film-cap a:focus-visible { color: #e0242b; }
.tk-film-cap .tk-show { transition: color .25s; }
.tk-pfw-text { margin: 0; color: #fff; font-family: "Playfair Display", Georgia, serif; font-weight: 900; font-size: var(--pfw-size, 9vw);
  line-height: .98; letter-spacing: -.005em; white-space: nowrap; text-align: center; }
/* hold the heading to its words even when a theme stretches headings (e.g. width:100%): fit() measures these widths */
.tk-pfw-text { width: max-content !important; max-width: none !important; min-width: 0 !important; flex: none !important; padding: 0 !important; text-transform: none !important; }
.tk-pfw-text .tk-w { display: block; width: max-content; margin: 0 auto; }
.tk-pfw-text .tk-ch { opacity: 0; transition: opacity .18s linear; }
.tk-pfw-text .tk-ch.tk-on { opacity: 1; }

/* copy for photos 2 and 3: appears only once its photo has fully landed (blur in), and leaves (blur out) before the next photo starts */
/* after Essence: golden lines rise from the left (Tom's clip, scrubbed by the scroll) and settle into the espresso of the next section */
.tk-gold { position: absolute; inset: 0; z-index: 8; background: #1d0e02; opacity: 0; visibility: hidden; pointer-events: none; }
.tk-gold video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center bottom; display: block; }
.tk-gold-flood { position: absolute; left: 0; right: 0; top: -80%; bottom: 0; overflow: hidden; transform: translate3d(0, 100%, 0); will-change: transform;
  -webkit-mask-image: linear-gradient(transparent 0%, rgba(0,0,0,.12) 10%, rgba(0,0,0,.38) 20%, rgba(0,0,0,.7) 31%, #000 44.4%);
  mask-image: linear-gradient(transparent 0%, rgba(0,0,0,.12) 10%, rgba(0,0,0,.38) 20%, rgba(0,0,0,.7) 31%, #000 44.4%); }
.tk-gold-flood b { position: absolute; left: 0; right: 0; bottom: 0; height: 55.556%; will-change: transform; background: var(--tk-lux); }
.tk-next { position: relative; z-index: 3; width: 100vw; margin: -45svh 0 0 calc(50% - 50vw); min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden;
  background: var(--tk-lux); color: #2b1d0a; padding: 4vh 0 6vh; box-sizing: border-box; }
.tk-next-in { width: 100%; opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.tk-next.tk-on .tk-next-in { opacity: 1; transform: none; }
.tk-next-logo { display: block; width: clamp(130px, 12vw, 180px); height: auto; margin: 0 auto 14px; }
.tk-next h2 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-weight: 400; font-size: clamp(34px, 5vw, 68px); line-height: 1.02; letter-spacing: .02em; color: #241806; }
.tk-next a { display: inline-block; margin-top: 26px; font-family: var(--font-label); font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: #241806; text-decoration: none;
  padding-bottom: 6px; border-bottom: 1px solid rgba(36,24,6,.55); transition: color .3s, border-color .3s; }
.tk-next a:hover { color: #e0242b; border-color: #e0242b; }
/* orbit deck: the cards sit on a ring; the front one is big, the neighbours swing back and turn toward it */
.tk-orbit { --ch: min(58svh, 600px); --cw: calc(var(--ch) * 2 / 3); position: relative; height: var(--ch); margin: 5vh auto 0; perspective: 1700px;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; outline: none; }
.tk-orbit.tk-drag { cursor: grabbing; }
.tk-orbit-ring { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.tk-orbit.tk-drag .tk-orbit-ring { transform: scale(.95); }
.tk-card { position: absolute; left: 50%; top: 0; width: var(--cw); height: var(--ch); margin: 0 0 0 calc(var(--cw) / -2); border-radius: 30px; overflow: hidden;
  background: #1a1208; box-shadow: 0 34px 60px -26px rgba(36,20,2,.55), 0 0 0 1px rgba(255,246,220,.16) inset; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tk-card img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.tk-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #1d1203; opacity: var(--dim, 0); pointer-events: none; }
.tk-orbit-foot { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 3.4vh; font-family: "Playfair Display", Georgia, serif; color: #241806; }
.tk-orbit-num { min-width: 2.2em; margin: 0; font-size: 15px; font-style: italic; letter-spacing: .08em; line-height: 22px; }
.tk-orbit-num.tk-tot { opacity: .5; }
/* navigation: small cut stones on a hairline; the current look is a filled, larger stone with a glint */
.tk-orbit-dots { position: relative; display: inline-flex; align-items: center; gap: 20px; margin: 0; padding: 0 4px; height: 22px; }
html.tk-on-gold body #top-link, html.tk-on-gold body a#top-link.back-to-top, html.tk-on-gold body .back-to-top { color: #241806 !important; border-color: #241806 !important; background: transparent !important; }
html.tk-on-gold body #top-link:hover, html.tk-on-gold body a#top-link.back-to-top:hover, html.tk-on-gold body .back-to-top:hover { color: #e0242b !important; border-color: #e0242b !important; }
html.tk-on-gold body #top-link i, html.tk-on-gold body .back-to-top i, html.tk-on-gold body #top-link svg { color: inherit !important; fill: currentColor; }
.tk-orbit-dots::before { content: ""; position: absolute; left: -14px; right: -14px; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(36,24,6,.4) 18%, rgba(36,24,6,.4) 82%, transparent); }
/* the theme styles every <button> (margins, min-height, line-height, shadows), so this one is pinned down */
.tk-orbit-dots button { position: relative; display: block; flex: none; width: 22px !important; height: 22px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; line-height: 0 !important; font-size: 0 !important; vertical-align: middle; cursor: pointer; }
.tk-orbit-dots button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -4.5px 0 0 -4.5px; border: 1px solid rgba(36,24,6,.6);
  background: #e3c77f; transform: rotate(45deg) scale(1); transition: transform .5s cubic-bezier(.2,.7,.2,1), background .5s, border-color .5s, box-shadow .5s; }
.tk-orbit-dots button:hover::before { border-color: #241806; transform: rotate(45deg) scale(1.2); }
.tk-orbit-dots button.tk-on::before { background: radial-gradient(circle at 38% 38%, #ff8a8d 0%, #e0242b 38%, #9e0f15 78%, #5c070b 100%); border-color: #241806; transform: rotate(45deg) scale(1.65);
  box-shadow: 0 0 0 3px rgba(255,244,214,.55), 0 4px 10px -2px rgba(36,20,2,.45); }


@media (max-width: 700px) { .tk-orbit { --ch: min(56svh, 118vw); } .tk-card { border-radius: 24px; } }
/* footer: the designer, his words and the showroom, on the same champagne gold */
.tk-foot2 { position: relative; z-index: 3; width: 100vw; margin-left: calc(50% - 50vw); min-height: 60vh; box-sizing: border-box; overflow: hidden; background: var(--tk-lux); color: #241806;
  font-family: var(--font-body); display: flex; align-items: stretch; }
.tk-foot2 * { box-sizing: border-box; }
/* the live theme restyles headings, quotes and lists (white, capitals, wider spacing), so the footer text is pinned down */
.tk-foot2 h2, .tk-foot2 p, .tk-foot2 blockquote, .tk-foot2 dl, .tk-foot2 dt, .tk-foot2 dd, .tk-foot2 span { text-transform: none !important; font-weight: 400 !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; filter: none; }
.tk-foot2 .tk-foot2-name { color: #1a1104 !important; letter-spacing: .04em !important; }
.tk-foot2 .tk-foot2-quote { color: #2b1d0a !important; }
.tk-foot2 .tk-foot2-kicker, .tk-foot2 .tk-foot2-sign, .tk-foot2 .tk-foot2-info dt { color: #5e4316 !important; text-transform: uppercase !important; }
.tk-foot2 .tk-foot2-info dd { color: #241806 !important; letter-spacing: .02em !important; font-size: 15px !important; white-space: nowrap; }
.tk-foot2 .tk-foot2-base span { color: rgba(36,24,6,.7) !important; }
.tk-foot2-orn { position: absolute; left: 50%; top: 0; width: min(560px, 70vw); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(36,24,6,.45), transparent); }
.tk-foot2-orn::after { content: ""; position: absolute; left: 50%; top: -4px; width: 7px; height: 7px; margin-left: -4.5px; border: 1px solid rgba(36,24,6,.6); background: #e3c77f; transform: rotate(45deg); }
.tk-foot2-in { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: clamp(24px, 4vw, 64px); }
.tk-foot2-text { align-self: center; padding: 9vh 0 7vh; }
.tk-foot2-kicker { margin: 0 0 14px; font-family: "Playfair Display", Georgia, serif; font-size: 12px; letter-spacing: .42em; text-transform: uppercase; color: #5e4316; }
.tk-foot2-name { margin: 0; padding-top: .5em; font-family: "TAN Grandeur", "Playfair Display", Georgia, serif; font-weight: 400; font-size: clamp(36px, 4.2vw, 62px); line-height: 1.1; letter-spacing: .04em; color: #1a1104; }
.tk-foot2-quote { position: relative; margin: 44px 0 0; padding: 0 0 0 30px; max-width: 34rem; font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: clamp(19px, 1.75vw, 26px); line-height: 1.5; color: #2b1d0a; border-left: 1px solid rgba(36,24,6,.35); }
.tk-foot2-quote::before { content: "\201C"; position: absolute; left: 24px; top: -.62em; font-size: 2.4em; line-height: 1; color: rgba(36,24,6,.16); pointer-events: none; }
.tk-foot2-sign { display: block; margin-top: 14px; font-style: normal; font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: #5e4316; }
.tk-foot2-info { display: grid; grid-template-columns: auto auto auto; justify-content: space-between; gap: 22px clamp(28px, 3.4vw, 56px); margin: 46px 0 0; padding: 26px 0 0; border-top: 1px solid rgba(36,24,6,.28); }
.tk-foot2-info div { min-width: 0; }
.tk-foot2-info dt { margin: 0 0 8px; font-family: "Playfair Display", Georgia, serif; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: #6b4d1a; }
.tk-foot2-info dd { margin: 0; font-size: 15px; line-height: 1.6; color: #241806; }
.tk-foot2-info a { color: #241806 !important; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: color .3s, background-size .4s; }
.tk-foot2-info a:hover { color: #e0242b !important; background-size: 100% 1px; }
.tk-foot2-base { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 40px; font-size: 12px; letter-spacing: .12em; color: rgba(36,24,6,.7); }
.tk-foot2-base img { display: block; width: 108px; height: auto; margin: 0; }
.tk-foot2-pic { position: relative; align-self: end; height: min(74vh, 780px); min-height: 420px; display: flex; justify-content: center; }
.tk-foot2-pic img { position: relative; display: block; height: 100%; width: auto; max-width: none; margin: 0; filter: drop-shadow(0 22px 34px rgba(36,20,2,.3)); }
.tk-foot2-social { display: flex; gap: 10px; margin-left: auto; }
.tk-foot2-social a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(36,24,6,.45); color: #241806 !important; transition: color .3s, border-color .3s, background .3s; }
.tk-foot2-social a:hover { color: #e0242b !important; border-color: #e0242b; background: rgba(255,248,226,.35); }
.tk-foot2-social svg { width: 17px; height: 17px; fill: currentColor; display: block; }
@media (min-width: 901px) and (max-width: 1300px) {
  .tk-foot2-info { grid-template-columns: auto auto; justify-content: start; column-gap: 48px; }
  .tk-foot2-info div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .tk-foot2-in { grid-template-columns: 1fr; gap: 0; }
  .tk-foot2-text { order: 2; padding: 30px 0 8vh; text-align: center; }
  .tk-foot2-pic { order: 1; height: 56vh; min-height: 340px; margin-top: 6vh; border-bottom: 1px solid rgba(36,24,6,.28); }
  .tk-foot2-social { margin: 8px 0 0; }
  .tk-foot2-name { margin-top: 26px; }
  .tk-foot2-quote { margin: 24px auto 0; padding: 0; border-left: 0; }
  .tk-foot2-quote::before { left: 50%; transform: translateX(-50%); top: -.78em; }
  .tk-foot2 .tk-foot2-info dd { white-space: normal; }
  .tk-foot2-info { grid-template-columns: 1fr; text-align: center; margin-top: 34px; gap: 20px; }
  .tk-foot2-base { justify-content: center; flex-direction: column; gap: 10px; }
}
.tk-copy { position: absolute; inset: 0; z-index: 5; pointer-events: none; display: flex; align-items: flex-start; will-change: opacity, filter, transform; }
.tk-copy.tk-right { text-align: right; }
/* desktop: left-hand copy hangs from the stem of the T just under the name; right-hand copy ends flush with KARA, just under COUTURE */
.tk-copy p { position: absolute; }
.tk-copy.tk-left p { left: var(--wm-stem, 12vw); top: calc(var(--wm-base, 52vh) + var(--wm-cap, 200px) * .2); }
.tk-copy.tk-right p { right: calc(100% - var(--wm-right, 88vw)); top: calc(var(--wm-sub, 62vh) + var(--wm-cap, 200px) * .2); }
.tk-copy { --c: 0; transition: opacity .5s ease-out, filter .5s ease-out, transform .5s ease-out; }
.tk-copy.tk-on { --c: 1; }
.tk-copy { opacity: var(--c); filter: blur(calc((1 - var(--c)) * 14px)); transform: translate3d(0, calc((1 - var(--c)) * 18px), 0); }
.tk-copy p { margin: 0; max-width: 30rem; font-family: var(--font-label); font-size: clamp(16px, 1.25vw, 21px); line-height: 1.75; color: rgba(231,226,227,.88); text-shadow: 0 1px 14px rgba(0,0,0,.45); }
.tk-veil { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(to bottom, rgba(5,5,6,.55), rgba(5,5,6,0) 18%, rgba(5,5,6,0) 78%, rgba(5,5,6,.6)); }
@keyframes rise { from { opacity: 0; transform: scale(1.035); } to { opacity: 1; transform: none; } }


.tk-foot { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
  padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px));
  animation: fade 1s 2s both; }
.tk-foot p { margin: 0; font-family: var(--font-label); font-style: italic; font-size: 15px; color: var(--silver-dim); }
.tk-cta { font-family: var(--font-label); font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--silver); text-decoration: none;
  padding: 14px 26px; border: 1px solid rgba(231,226,227,.45); transition: border-color .3s, color .3s; }
.tk-cta:hover, .tk-cta:focus-visible { border-color: var(--gold-light); color: var(--gold-light); outline: none; }
/* scroll cue: small vertical "Scroll" label on the right edge with a hairline that a soft light runs down; gone once the story starts */
.tk-scroll { position: absolute; z-index: 5; right: max(30px, env(safe-area-inset-right, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
  display: flex; flex-direction: column; align-items: center; gap: 14px; pointer-events: none;
  opacity: calc(1 - var(--p1, 0) * 5); transition: opacity .3s; }
.tk-scroll > * { animation: fade 1s 2.3s both; }
.tk-scroll-txt { writing-mode: vertical-rl; font-family: var(--font-label); font-size: 10.5px; letter-spacing: .38em; text-transform: uppercase; color: rgba(231,226,227,.62); }
.tk-scroll-line { position: relative; width: 1px; height: 56px; background: rgba(231,226,227,.18); overflow: hidden; }
.tk-scroll-line::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 22px;
  background: linear-gradient(transparent, rgba(231,226,227,.95), transparent); animation: tkDrip 2.4s cubic-bezier(.6,0,.4,1) 2.6s infinite; transform: translateY(-22px); }
@keyframes tkDrip { 0% { transform: translateY(-22px); } 70%, 100% { transform: translateY(56px); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 860px) {
  .tk-foot { justify-content: center; }
  .tk-foot p { display: none; }
  /* phones: the scroll cue sits low on the right, clear of the browser bar */
  .tk-scroll { right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 100lvh - 100svh + 22px); gap: 10px; }
  .tk-scroll-line { height: 40px; }
}
/* phones and tablets held upright: shift each model aside to make room for its copy */
@media (max-aspect-ratio: 19/20) {
  .tk-stage img.tk-slide2 { object-position: 41% 38%; }
  .tk-stage img.tk-slide3 { object-position: 64% 38%; }
  .tk-copy p { max-width: 47%; font-size: clamp(12.5px, 3.4vw, 16px); line-height: 1.65; }
  /* both copies start a clear gap below COUTURE, wherever the wordmark ends up on this screen */
  .tk-copy.tk-left p { left: 5.5vw; top: calc(var(--wm-sub, 46vh) + max(30px, var(--wm-cap, 90px) * .45)); }
  .tk-copy.tk-right p { right: 8.5vw; top: calc(var(--wm-sub, 46vh) + max(30px, var(--wm-cap, 90px) * .45)); max-width: 46%; }
}
@media (prefers-reduced-motion: reduce) {
  .tk-bg, .tk-model, .tk-foot, .tk-scroll > *, .tk-scroll-line::after, #front { animation: none; }
}