/* Home layout v2 (preview): the still life at the very top, then the Garden Signal, The Gathered, The Signals. */ html[data-home=v2]{--ts-gold:#b8935a} /* ---------- 1. the still life at the top ---------- */ html[data-home=v2] body #garden.top-still{position:relative;padding:104px var(--pad) clamp(40px,7vh,72px)!important;background:var(--ink);scroll-margin-top:0} html[data-home=v2] #garden.top-still .ts-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(28px,4vw,64px);max-width:1280px;margin:0 auto;align-items:end} html[data-home=v2] body #garden.top-still .gd-track{position:relative;height:auto!important;isolation:isolate;display:block} html[data-home=v2] body #garden.top-still .gd-track{height:230vh!important} html[data-home=v2] body #garden.top-still.gd-static .gd-track{height:auto!important} html[data-home=v2] body #garden.top-still .gd-stage{position:relative!important;top:auto;height:auto!important;overflow:visible!important;background:transparent!important} /* t4: the Still life / Code / Form story runs on scroll by default again (as in a05c0d9b): sticky painting, canvas over it */ html[data-home=v2] body #garden.top-still:not(.gd-static) .gd-stage{position:sticky!important;top:96px;z-index:2} html[data-home=v2] body #garden.top-still .gd-stage picture{position:relative!important;inset:auto!important;top:auto!important;bottom:auto!important;left:auto;right:auto;display:block;width:100%;height:auto!important; -webkit-mask-image:none!important;mask-image:none!important;transition:none!important;box-sizing:border-box;padding:var(--mat-t,0) var(--mat-x,0) var(--mat-b,0)} html[data-home=v2] body #garden.top-still .gd-stage .gd-img{position:static!important;inset:auto!important;display:block;width:100%!important;height:auto!important;aspect-ratio:16/9;object-fit:contain!important} /* the painting ends cleanly on a thin antique-gold hairline (no fade over the pinecones) */ html[data-home=v2] body #garden.top-still .gd-stage picture::after{content:"";position:absolute;left:var(--mat-x,0);right:var(--mat-x,0);bottom:var(--mat-b,0);height:1px;background:var(--ts-gold);opacity:.85;pointer-events:none} html[data-home=v2] body #garden.top-still .gd-cap{display:none!important} html[data-home=v2] body #garden.top-still .gd-bar{position:static!important;padding:14px 0 0!important;background:transparent!important;border:0!important;justify-content:flex-start!important} html[data-home=v2] body #garden.top-still .gd-bar.is-open{justify-content:center!important} html[data-home=v2] body #garden.top-still .gd-open{min-height:40px;padding:0 16px;font-size:10.5px} html[data-home=v2] body #garden.top-still.gd-static .gd-stage{height:auto!important} /* the why line */ html[data-home=v2] #garden.top-still .ts-why{align-self:end;padding-bottom:calc(var(--gd-bar-h,54px) + 4px);max-width:30ch} html[data-home=v2] #garden.top-still .ts-line{margin:0;font-family:SG,system-ui,sans-serif;font-weight:300;font-size:clamp(28px,2.9vw,42px);line-height:1.12;letter-spacing:-.01em;color:var(--bone);text-wrap:balance} html[data-home=v2] #garden.top-still .ts-l2{display:block;margin-top:.35em;color:var(--sig)} html[data-home=v2] #garden.top-still .ts-by{margin:18px 0 0;font-size:11px;letter-spacing:.16em} html[data-home=v2] #garden.top-still .ts-by a{color:var(--mut);text-decoration:none} html[data-home=v2] #garden.top-still .ts-by a:hover,html[data-home=v2] #garden.top-still .ts-by a:focus-visible{color:var(--sig)} html[data-home=v2] #garden.top-still .ts-go{margin:26px 0 0;font-size:11px;letter-spacing:.16em;text-transform:uppercase} html[data-home=v2] #garden.top-still .ts-go a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--sig);text-decoration:none;border-bottom:1px solid transparent} html[data-home=v2] #garden.top-still .ts-go a:hover,html[data-home=v2] #garden.top-still .ts-go a:focus-visible{border-bottom-color:currentColor} /* the room around the painting (the painting itself is never tinted) */ html[data-home=v2] #garden.top-still .gd-track::before,html[data-home=v2] #garden.top-still .gd-track::after{content:"";position:absolute;pointer-events:none;z-index:-1} html[data-home=v2]:not([data-theme]) #garden.top-still .gd-stage picture,html[data-home=v2][data-theme=night] #garden.top-still .gd-stage picture{box-shadow:0 0 70px 26px rgba(24,14,8,.55)} html[data-home=v2][data-theme=gallery] #garden.top-still .gd-track::before{left:-14%;right:-14%;top:-104px;height:min(82%,480px);background:radial-gradient(ellipse 50% 72% at 50% 0,rgba(255,255,255,.17) 0%,rgba(255,255,255,.09) 38%,rgba(255,255,255,.035) 62%,rgba(255,255,255,.01) 80%,rgba(255,255,255,0) 92%)} html[data-home=v2][data-theme=gallery] #garden.top-still .gd-track::after{left:36%;right:36%;top:-16px;height:6px;z-index:2;border-radius:2px;background:linear-gradient(180deg,#3a3a3a,#141414);box-shadow:0 3px 12px rgba(255,255,255,.28)} html[data-home=v2][data-theme=gallery] #garden.top-still .gd-stage picture{box-shadow:0 2px 3px rgba(0,0,0,.75),0 18px 30px rgba(0,0,0,.7)} html[data-home=v2][data-theme=northlight] #garden.top-still{--mat-t:20px;--mat-x:20px;--mat-b:32px} html[data-home=v2][data-theme=northlight] #garden.top-still .gd-stage picture{background:linear-gradient(135deg,#faf8f3 0%,#f5f3ee 60%,#f0eee8 100%);box-shadow:0 0 0 1px rgba(40,30,20,.10),8px 12px 26px rgba(40,30,20,.22),2px 3px 4px rgba(40,30,20,.12)} html[data-home=v2][data-theme=northlight] #garden.top-still .gd-stage .gd-img{box-shadow:0 0 0 2px #fffefb,0 0 0 3px rgba(70,52,34,.16)} html[data-home=v2][data-theme=sunflower] #garden.top-still{--mat-t:18px;--mat-x:18px;--mat-b:26px} html[data-home=v2][data-theme=sunflower] #garden.top-still .gd-stage picture{background-color:#4e240c;background-image:radial-gradient(circle,rgba(150,78,24,.85) 0 1.3px,transparent 1.9px),radial-gradient(circle,rgba(110,52,16,.8) 0 1px,transparent 1.5px);background-size:8px 8px,8px 8px;background-position:0 0,4px 4px;box-shadow:-14px 18px 34px rgba(70,40,10,.30)} html[data-home=v2]:is([data-theme=grown],[data-theme=overgrown]) #garden.top-still{--mat-t:16px;--mat-x:16px;--mat-b:24px;position:relative} html[data-home=v2]:is([data-theme=grown],[data-theme=overgrown]) #garden.top-still .gd-stage picture{background:#24100a;box-shadow:inset 0 0 0 1px rgba(122,52,16,.6),-10px 14px 28px rgba(90,40,8,.30)} html[data-home=v2][data-theme=lamplight] #garden.top-still .gd-track::before{left:-30%;top:-160px;width:110%;height:140%;background:radial-gradient(circle at 8% 6%,rgba(255,176,92,.20) 0%,rgba(255,147,41,.10) 30%,rgba(255,147,41,.03) 55%,rgba(255,147,41,0) 72%)} html[data-home=v2][data-theme=lamplight] #garden.top-still .gd-stage picture{box-shadow:18px 24px 44px rgba(0,0,0,.6)} /* phone: full width, edge to edge, shown whole; frames show only as top and bottom edges */ @media (max-width:759px){ html[data-home=v2] body #garden.top-still{padding:72px 0 36px!important} html[data-home=v2] #garden.top-still .ts-grid{display:block} html[data-home=v2] body #garden.top-still .gd-stage .gd-img{aspect-ratio:9/16} html[data-home=v2] body #garden.top-still:not(.gd-static) .gd-stage{top:64px} html[data-home=v2] body #garden.top-still .gd-bar{padding:12px var(--pad) 0!important} html[data-home=v2] #garden.top-still .ts-why{padding:22px var(--pad) 0;max-width:none} html[data-home=v2] #garden.top-still .ts-line{font-size:29px} html[data-home=v2] #garden.top-still .ts-go{margin-top:16px} html[data-home=v2]:not([data-theme]) #garden.top-still .gd-stage picture,html[data-home=v2][data-theme=night] #garden.top-still .gd-stage picture{box-shadow:none} html[data-home=v2][data-theme=northlight] #garden.top-still,html[data-home=v2][data-theme=sunflower] #garden.top-still,html[data-home=v2]:is([data-theme=grown],[data-theme=overgrown]) #garden.top-still{--mat-x:0px;--mat-t:12px;--mat-b:18px} html[data-home=v2]:is([data-theme=grown],[data-theme=overgrown]) #garden.top-still::after{display:none} html[data-home=v2][data-theme=northlight] #garden.top-still .gd-stage .gd-img{box-shadow:0 -2px 0 #fffefb,0 2px 0 #fffefb} html[data-home=v2][data-theme=gallery] #garden.top-still .gd-track::before{left:0;right:0;top:-72px} html[data-home=v2][data-theme=gallery] #garden.top-still .gd-track::after{left:30%;right:30%;top:-12px} html[data-home=v2][data-theme=lamplight] #garden.top-still .gd-track::before{left:-40%;width:140%} html[data-home=v2] #garden.top-still .gd-stage picture{box-shadow:none!important} } /* ---------- 2. Garden Signal: the old title block is carried by the why line above ---------- */ html[data-home=v2] body .hero .hero-title,html[data-home=v2] body .hero .hero-sub,html[data-home=v2] body .hero .tie-line,html[data-home=v2] body .hero .now-pair{display:none!important} /* ---------- 3. The Gathered ---------- */ html[data-home=v2] body #gathered{position:relative;padding:clamp(56px,9vh,104px) var(--pad) clamp(40px,7vh,80px);background:var(--ink);border-top:1px solid var(--line)} html[data-home=v2] #gathered .gath-head{max-width:1280px;margin:0 auto clamp(20px,3vh,32px)} html[data-home=v2] #gathered .gath-head .k{margin:0 0 10px} html[data-home=v2] #gathered .gath-head h2{margin:0} html[data-home=v2] body #gathered .gath-hero{position:relative;height:auto!important;min-height:0!important;overflow:visible!important;max-width:1280px;margin:0 auto;padding:0} /* ---------- 4. The Signals: one large plate per Signal ---------- */ html[data-home=v2] body #archive{height:auto!important} html[data-home=v2] body #archive .arch-sticky{position:relative!important;top:auto!important;height:auto!important;overflow:visible!important} html[data-home=v2] body #archive .arch-progress{display:none!important} html[data-home=v2] body #archive .strip{display:flex!important;flex-direction:column!important;gap:clamp(48px,8vh,96px)!important;transform:none!important;overflow:visible!important;width:auto!important;max-width:1280px;margin:0 auto!important;padding:clamp(24px,4vh,40px) var(--pad) clamp(40px,6vh,72px)!important;scroll-snap-type:none!important} html[data-home=v2] body #archive .strip>li.card{width:auto!important;max-width:none!important;flex:none!important;margin:0!important;display:block;position:relative} html[data-home=v2] body #archive .strip>li.card>button,html[data-home=v2] body #archive .strip>li.card>a.card-next-link{display:grid!important;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-auto-rows:min-content;column-gap:clamp(24px,3.5vw,56px);align-content:start;width:100%;text-align:left} html[data-home=v2] body #archive .strip>li.card .c-frame{grid-column:1;grid-row:1/span 6;width:100%!important;height:auto!important;aspect-ratio:16/9;margin:0!important} html[data-home=v2] body #archive .strip>li.card .c-frame img,html[data-home=v2] body #archive .strip>li.card .c-frame video{width:100%;height:100%;object-fit:cover} html[data-home=v2] body #archive .strip>li.card>button>:not(.c-frame),html[data-home=v2] body #archive .strip>li.card>a>:not(.c-frame){grid-column:2} html[data-home=v2] body #archive .strip>li.card .c-meta{margin-top:4px!important} html[data-home=v2] body #archive .strip>li.card .c-meta h3{font-size:clamp(28px,2.6vw,40px)!important;line-height:1.08} html[data-home=v2] body #archive .strip>li.card .c-actions{margin-left:calc((100% - clamp(24px,3.5vw,56px)) * 7 / 12 + clamp(24px,3.5vw,56px))!important;width:auto!important} html[data-home=v2] body #archive .strip>li.card:nth-child(even)>button,html[data-home=v2] body #archive .strip>li.card:nth-child(even)>a.card-next-link{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} html[data-home=v2] body #archive .strip>li.card:nth-child(even) .c-frame{grid-column:2} html[data-home=v2] body #archive .strip>li.card:nth-child(even)>button>:not(.c-frame),html[data-home=v2] body #archive .strip>li.card:nth-child(even)>a>:not(.c-frame){grid-column:1;grid-row:auto} html[data-home=v2] body #archive .strip>li.card:nth-child(even) .c-actions{margin-left:0!important;max-width:calc((100% - clamp(24px,3.5vw,56px)) * 5 / 12)} html[data-home=v2] body #archive .strip>li.v2-genesis.v2-live .c-frame video{opacity:1!important;visibility:visible!important} @media (max-width:759px){ html[data-home=v2] body #archive .strip{gap:0!important;padding:8px 0 24px!important} html[data-home=v2] body #archive .strip>li.card{min-height:calc(100svh - 72px);display:flex!important;flex-direction:column;justify-content:center;padding:24px var(--pad)!important;box-sizing:border-box;border-top:1px solid var(--line)} html[data-home=v2] body #archive .strip>li.card>button,html[data-home=v2] body #archive .strip>li.card>a.card-next-link,html[data-home=v2] body #archive .strip>li.card:nth-child(even)>button,html[data-home=v2] body #archive .strip>li.card:nth-child(even)>a.card-next-link{display:block!important} html[data-home=v2] body #archive .strip>li.card .c-actions,html[data-home=v2] body #archive .strip>li.card:nth-child(even) .c-actions{margin-left:0!important;max-width:none} } /* ---------- 6. About: the painting's story ---------- */ html[data-home=v2] #about .ga-cap{max-width:62ch;margin:clamp(28px,5vh,48px) 0} html[data-home=v2] #about .ga-cap p{font-size:17px;line-height:1.6;color:var(--bone);opacity:.88;margin:0 0 14px} html[data-home=v2] #about .ga-cap .ga-acts{display:inline-block;margin-left:4px;font-size:11px;letter-spacing:.1em} html[data-home=v2] #about .ga-cap .ga-watch{background:none;border:0;padding:0;color:var(--sig);cursor:pointer;font:inherit;letter-spacing:inherit} /* Garden Signal, desktop: the art and its name on the left, Code and Form on the right (art size unchanged) */ @media (min-width:1024px){ html[data-home=v2][data-lay=v1] body .hero .hero-ui{grid-template-areas:"piece cf" "piece why" "piece print" "kick print" "pn print" "meta cta" "act cta" "what sub" ". sub"!important;grid-template-columns:356px minmax(0,640px)!important;grid-template-rows:auto!important;min-height:0!important} html[data-home=v2][data-lay=v1] body .hero .hero-ui>.cl-print{max-width:560px;width:100%} html[data-home=v2][data-lay=v1] body .hero .hero-ui>.form-why{max-width:46ch;margin-top:14px!important} html[data-home=v2][data-lay=v1] body .hero .hero-cta{align-self:start!important;flex-direction:row!important;margin-top:28px!important} html[data-home=v2][data-lay=v1] body .hero .hero-sub.cl-host{align-self:start;margin-top:18px!important;max-width:420px} } /* t3 QA: the active "Yours" chip reads in every room (theme accent fill) */ html[data-theme] body .hm-pill.is-on,html[data-theme] body .hm-pill[aria-pressed="true"],html[data-theme] body .gtb-t[aria-pressed=true]{background:var(--sig)!important;color:var(--ink)!important;border-color:var(--sig)!important;opacity:1!important}@media (max-width:760px){html[data-home=v2]:is([data-theme=sunflower],[data-theme=northlight],:is([data-theme=grown],[data-theme=overgrown])) body .hero .hero-ui>.kick{margin-top:18px!important}} /* light rooms: the Signal plates and the scroll-revealed manifesto words keep readable contrast */ @media (max-width:759px){html[data-home=v2]:is([data-theme=sunflower],[data-theme=northlight],:is([data-theme=grown],[data-theme=overgrown])) body #archive .strip>.card{background:rgba(255,248,228,.62)!important;border-color:color-mix(in srgb,var(--sig) 45%,transparent)!important} html[data-home=v2]:is([data-theme=sunflower],[data-theme=northlight],:is([data-theme=grown],[data-theme=overgrown])) body .thumb{background:rgba(255,248,228,.9)!important}} html:is([data-theme=sunflower],[data-theme=northlight],:is([data-theme=grown],[data-theme=overgrown])) .manifesto .wd:not(.on){color:var(--mut)!important} html:is([data-theme=sunflower],[data-theme=northlight],:is([data-theme=grown],[data-theme=overgrown])) .skip{color:#fff8e4!important} /* Yours chip: active state reads clearly in every room */ html[data-theme] body .hero #heroMine .hm-pill.is-on,html[data-theme] body .hero #heroMine .hm-pill[aria-pressed=true],html[data-theme] body #heroMine .hm-pill.is-on,html[data-theme] body .gtb .gtb-t[aria-pressed=true]{background:var(--sig)!important;color:var(--sig-ink,var(--ink))!important;border-color:var(--sig)!important;opacity:1!important} html[data-theme=gallery] body .hero #heroMine .hm-pill.is-on,html[data-theme=gallery] body .gtb .gtb-t[aria-pressed=true]{background:#f2f2f2!important;color:#0a0a0a!important;border-color:#f2f2f2!important} html[data-theme=gallery] body .hero #heroMine#heroMine .hm-pill.is-on.is-on{background:#f2f2f2!important;color:#0a0a0a!important;border-color:#f2f2f2!important} /* ---------- t3q: one painting size in every room. Mats and frames sit outside the painting and take from the wall ---------- */ html[data-home=v2] body #garden.top-still .gd-stage picture{padding:0!important;background:none!important} html[data-home=v2] body #garden.top-still .gd-stage picture::before{content:"";position:absolute;top:calc(-1 * var(--mat-t,0px));bottom:calc(-1 * var(--mat-b,0px));left:calc(-1 * var(--mat-x,0px));right:calc(-1 * var(--mat-x,0px));z-index:-1;pointer-events:none} html[data-home=v2] body #garden.top-still .gd-stage picture::after{left:calc(-1 * var(--mat-x,0px));right:calc(-1 * var(--mat-x,0px));bottom:calc(-1 * var(--mat-b,0px) - 1px)} html[data-home=v2] body #garden.top-still .gd-bar{padding-top:calc(var(--mat-b,0px) + 14px)!important} html[data-home=v2][data-theme=northlight] body #garden.top-still .gd-stage picture,html[data-home=v2][data-theme=sunflower] body #garden.top-still .gd-stage picture,html[data-home=v2]:is([data-theme=grown],[data-theme=overgrown]) body #garden.top-still .gd-stage picture{box-shadow:none!important} html[data-home=v2][data-theme=northlight] body #garden.top-still .gd-stage picture::before{background:linear-gradient(135deg,#faf8f3 0%,#f5f3ee 60%,#f0eee8 100%);box-shadow:0 0 0 1px rgba(40,30,20,.10),8px 12px 26px rgba(40,30,20,.22),2px 3px 4px rgba(40,30,20,.12)} html[data-home=v2][data-theme=sunflower] body #garden.top-still .gd-stage picture::before{background-color:#4e240c;background-image:radial-gradient(circle,rgba(150,78,24,.85) 0 1.3px,transparent 1.9px),radial-gradient(circle,rgba(110,52,16,.8) 0 1px,transparent 1.5px);background-size:8px 8px,8px 8px;background-position:0 0,4px 4px;box-shadow:-14px 18px 34px rgba(70,40,10,.30)} html[data-home=v2]:is([data-theme=grown],[data-theme=overgrown]) body #garden.top-still .gd-stage picture::before{background:#24100a;box-shadow:inset 0 0 0 1px rgba(122,52,16,.6),-10px 14px 28px rgba(90,40,8,.30)} /* desktop: the painting is sized by height (about 78vh, never cropped); the why lines take the open column beside it */ @media (min-width:760px){ html[data-home=v2] #garden.top-still{--ph:min(78vh,calc((100vw - 2 * var(--pad,54px) - clamp(28px,4vw,64px) - 240px) * 9 / 16))} html[data-home=v2] #garden.top-still .ts-grid{grid-template-columns:auto minmax(240px,520px);max-width:none;justify-content:center} html[data-home=v2] body #garden.top-still .gd-stage picture{width:calc(var(--ph) * 16 / 9)!important;max-width:none} html[data-home=v2] #garden.top-still .ts-line{font-size:clamp(26px,2.2vw,42px)} } /* phone (t4): the first why line starts right under the painting; it shares the track's cell and scrolls up beneath the sticky painting as the story runs */ @media (max-width:759px){ html[data-home=v2] body #garden.top-still .ts-grid{display:grid;grid-template-columns:minmax(0,1fr)} html[data-home=v2] body #garden.top-still .gd-track{grid-row:1;grid-column:1;z-index:1;pointer-events:none} html[data-home=v2] body #garden.top-still .gd-track .gd-stage{pointer-events:auto} html[data-home=v2] body #garden.top-still:not(.gd-static) .ts-why{grid-row:1;grid-column:1;align-self:start;margin-top:var(--stg-h,0px);position:relative;z-index:0} html[data-home=v2] body #garden.top-still.gd-static .ts-why{grid-row:2} html[data-home=v2] body #garden.top-still .ts-why{padding-top:calc(var(--mat-b,0px) + 10px)} } } /* Night: the selected chip is solid gold with dark ink; the others stay outlined */ html[data-theme=night] body .hero #heroMine .hm-pill.is-on,html[data-theme=night] body .gtb .gtb-t[aria-pressed=true]{background:#de9e34!important;color:#0b0d10!important;border-color:#de9e34!important} @media (max-width:759px){html[data-home=v2] body #archive .strip{min-width:0!important;max-width:100%!important;box-sizing:border-box}html[data-home=v2] body #archive .strip>li.card{min-width:0!important;max-width:100%!important}} /* t4: the why line stays beside the painting while the story runs (desktop); "Look beneath the painting" follows the why line */ @media (min-width:760px){ html[data-home=v2] body #garden.top-still:not(.gd-static) .ts-why{position:sticky;top:96px;align-self:start;box-sizing:border-box;height:calc(var(--stg-h,var(--ph)));padding-bottom:0;display:flex;flex-direction:column;justify-content:flex-end} } html[data-home=v2] body #garden.top-still .ts-why .gd-bar{position:static!important;padding:18px 0 0!important;justify-content:flex-start!important} html[data-home=v2] body #garden.top-still .ts-why .gd-bar.is-open{justify-content:flex-start!important} html[data-home=v2] body #garden.top-still .ts-why .gd-bar .gd-open{margin-left:-16px} /* t4: on phone the painting is opaque while the story runs, so the why line passes cleanly beneath it */ @media (max-width:759px){html[data-home=v2] body #garden.top-still:not(.gd-static) .gd-stage{background:var(--ink)!important}} /* t4: the hero shows the Signals: a small framed Signal beside the why line that slowly crossfades between them */ html[data-home=v2] #garden .ts-sig{display:block;margin-top:22px;width:min(100%,300px);color:inherit;text-decoration:none} html[data-home=v2] #garden .ts-sig-f{position:relative;display:block;aspect-ratio:16/9;padding:5px;background:var(--ink);box-shadow:0 0 0 1px var(--ts-gold),0 6px 18px rgba(0,0,0,.28);overflow:hidden} html[data-home=v2] #garden .ts-sig-f img{position:absolute;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);object-fit:cover;opacity:0;transition:opacity 1.6s ease} html[data-home=v2] #garden .ts-sig-f img.is-on{opacity:1} html[data-home=v2] #garden .ts-sig-c{display:flex;flex-direction:column;gap:3px;margin-top:9px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase} html[data-home=v2] #garden .ts-sig-k{color:var(--sig)} html[data-home=v2] #garden .ts-sig-t{color:var(--bone);font-size:12px} html[data-home=v2] #garden .ts-sig:hover .ts-sig-t,html[data-home=v2] #garden .ts-sig:focus-visible .ts-sig-t{text-decoration:underline;text-underline-offset:3px} html[data-home=v2] #garden .ts-sig:focus-visible{outline:2px solid var(--sig);outline-offset:4px} @media (prefers-reduced-motion:reduce){html[data-home=v2] #garden .ts-sig-f img{transition:none}} @media (max-width:759px){ html[data-home=v2] body #garden.top-still .ts-why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44%);column-gap:16px;align-items:start} html[data-home=v2] body #garden.top-still .ts-why>.ts-line{grid-column:1 / -1} html[data-home=v2] body #garden.top-still .ts-why>.ts-by,html[data-home=v2] body #garden.top-still .ts-why>.ts-go,html[data-home=v2] body #garden.top-still .ts-why>.gd-bar{grid-column:1} html[data-home=v2] body #garden.top-still .ts-why>.ts-sig{grid-column:2;grid-row:2 / span 3;margin-top:18px;width:100%} html[data-home=v2] body #garden.top-still .ts-why>.gd-bar.is-open{grid-column:1 / -1;grid-row:5} html[data-home=v2] #garden .ts-sig-c{font-size:9.5px;letter-spacing:.1em} html[data-home=v2] #garden .ts-sig-t{font-size:11px} } /* t4: the story, right after the hero: one heading, one short line, a drawn golden-angle spiral */ html[data-home=v2] body .ts-story{padding:clamp(56px,10vh,110px) var(--pad);background:var(--ink)} html[data-home=v2] .ts-story .wy-in{display:grid;grid-template-columns:auto minmax(0,560px);gap:clamp(28px,5vw,72px);align-items:center;justify-content:center;max-width:1100px;margin:0 auto} html[data-home=v2] .ts-story .wy-sp{width:clamp(150px,18vw,230px);height:auto;fill:var(--sig);opacity:.9} html[data-home=v2] .ts-story .wy-h{margin:8px 0 0;font-family:SG,system-ui,sans-serif;font-weight:300;font-size:clamp(30px,3.4vw,52px);line-height:1.05;letter-spacing:-.02em;color:var(--bone)} html[data-home=v2] .ts-story .wy-h .o{color:var(--sig)} html[data-home=v2] .ts-story .wy-l{margin:16px 0 0;max-width:46ch;color:var(--bone)} @media (max-width:759px){html[data-home=v2] .ts-story .wy-in{grid-template-columns:1fr;justify-items:start;gap:22px}html[data-home=v2] .ts-story .wy-sp{width:128px}} /* t4: Signal Origins right after the Garden Signal; side by side on desktop (heading left, the ideas right) */ html[data-home=v2] body .origins .ori-hd>.k{display:flex;justify-content:center} @media (min-width:1000px){ html[data-home=v2] body section.origins{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,6vw,104px);align-items:start;text-align:left;padding-left:max(var(--pad),calc((100vw - 1280px) / 2));padding-right:max(var(--pad),calc((100vw - 1280px) / 2))} html[data-home=v2] body section.origins>.ori-hd{grid-column:1;grid-row:1 / span 12;position:sticky;top:110px} html[data-home=v2] body section.origins>:not(.ori-hd){grid-column:2;min-width:0} html[data-home=v2] body .origins .ori-hd>.k{justify-content:flex-start} html[data-home=v2] body .origins .ori-hd .lede{margin:0;max-width:34ch} html[data-home=v2] body .origins .ori-hd h2{text-align:left} } /* t4: the story is compact on desktop */ @media (min-width:760px){html[data-home=v2] body .ts-story{padding:clamp(48px,8vh,96px) var(--pad)}} /* t4: a short page. Folded sections show one heading and one short line; More opens the rest */ html[data-home=v2] body .v2-fold:not(.is-open)>.v2-fx,html[data-home=v2] body main section.v2-fsec.v2-fsec:not(.is-open),html[data-home=v2] body #goldenTurn.v2-fsec:not(.is-open),html[data-home=v2] body #gtb.v2-fsec:not(.is-open){display:none!important} html[data-home=v2] body section.v2-fold:not(.is-open){padding-top:clamp(40px,7vh,72px)!important;padding-bottom:clamp(40px,7vh,72px)!important;min-height:0!important;height:auto!important} html[data-home=v2] body .v2-fold:not(.is-open) .v2-fl{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} html[data-home=v2] body .v2-more{margin:18px 0 0;display:flex;justify-content:inherit} html[data-home=v2] body .v2-more button{min-height:44px;padding:0 18px;border:1px solid var(--line-hi);background:transparent;color:var(--sig);font:inherit;font-size:11px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer} html[data-home=v2] body .v2-more button:hover{border-color:var(--sig)} html[data-home=v2] body .v2-more button:focus-visible{outline:2px solid var(--sig);outline-offset:3px} html[data-home=v2] body #origins:not(.ori-all) #oriList>li:nth-child(n+6),html[data-home=v2] body #origins:not(.ori-all) #tuner,html[data-home=v2] body #origins:not(.ori-all) #oriCredited{display:none!important} html[data-home=v2] body #origins{padding-top:clamp(48px,8vh,96px)!important;padding-bottom:clamp(48px,8vh,96px)!important} html[data-home=v2] body .join>.note{display:none} /* t4: folded grid sections lay out as one column; Collect keeps its line and its button */ html[data-home=v2] body section.v2-fold:not(.is-open){display:block!important} html[data-home=v2] body #collect.v2-fold:not(.is-open) .col-facts{display:none!important} html[data-home=v2] body #collect.v2-fold:not(.is-open) .col-head{max-width:none} html[data-home=v2] body .about.v2-fold:not(.is-open) .manifesto{font-size:clamp(20px,1.9vw,28px)!important;line-height:1.3;max-width:52ch} /* t4: one heading size for every section (the existing display face), so the page reads evenly */ html[data-home=v2] body #oriH,html[data-home=v2] body #gathH,html[data-home=v2] body #archH,html[data-home=v2] body #colH,html[data-home=v2] body #connH,html[data-home=v2] body #joinH,html[data-home=v2] body #sugH,html[data-home=v2] body #whyH{font-size:clamp(34px,3.6vw,56px)!important;line-height:1.02!important;letter-spacing:-.02em} html[data-home=v2] body #joinH span{display:inline!important} html[data-home=v2] body section.join:not(.suggest){padding-top:clamp(48px,8vh,96px)!important;padding-bottom:clamp(48px,8vh,96px)!important;min-height:0!important} /* t4: The Signals as one row of cards on desktop (art first, then the title and its short line) */ @media (min-width:1000px){ html[data-home=v2] body #archive #strip{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,36px);align-items:start} html[data-home=v2] body #archive #strip>li.card{min-height:0!important;display:block!important;width:auto!important;min-width:0!important;max-width:none!important;margin:0!important;padding:0!important} html[data-home=v2] body #archive #strip>li.card>button,html[data-home=v2] body #archive #strip>li.card>a.card-next-link{display:flex!important;flex-direction:column;align-items:stretch;width:100%!important;gap:10px;grid-template-columns:none!important} html[data-home=v2] body #archive #strip>li.card>button>*,html[data-home=v2] body #archive #strip>li.card>a.card-next-link>*{width:100%!important;max-width:none!important;grid-column:auto!important;grid-row:auto!important;margin-left:0!important;margin-right:0!important} html[data-home=v2] body #archive #strip>li.card .c-frame{order:-1} html[data-home=v2] body #archive #strip>li.card .c-meta{flex-wrap:wrap;gap:4px 12px} html[data-home=v2] body #archive #strip>li.card .mg-art,html[data-home=v2] body #archive #strip>li.card .mg-cv{width:96px!important;height:96px!important;flex:0 0 96px} html[data-home=v2] body #archive #strip>li.card .mg-card{height:auto!important;gap:14px;align-items:start} html[data-home=v2] body #archive #strip>li.card .mg-note.mg-full{display:none!important} html[data-home=v2] body #archive #strip>li.card .c-actions{flex-wrap:wrap;width:100%!important;margin:12px 0 0!important} } html[data-home=v2] body section:is(#origins,#gathered,#archive,.about,.join:not(.suggest)){position:relative} /* t4 Overgrown fabric: a tossed sunflower print on the wall; every text block sits on a solid gold panel so it reads (the print never runs under text or art) */ html[data-theme=overgrown] body{background:#f6b52b url(/assets/garden/overgrown-fabric.svg) 0 0/560px 560px repeat!important} html[data-theme=overgrown] body .hud{background:#f6b52b!important} html[data-theme=overgrown][data-home=v2] body main>section:not(.top-still):not(.hero),html[data-theme=overgrown][data-home=v2] body footer{background:#f6b52b!important;margin:clamp(22px,3.4vw,48px) clamp(12px,3vw,48px)!important;border-radius:6px;box-shadow:0 0 0 1px rgba(42,22,10,.14),0 10px 28px rgba(70,40,10,.16)} html[data-theme=overgrown][data-home=v2] #garden.top-still .ts-why{background:#f6b52b;border-radius:6px;box-shadow:0 0 0 1px rgba(42,22,10,.14),0 10px 28px rgba(70,40,10,.16);padding:22px 24px 20px!important;box-sizing:border-box} @media (max-width:759px){html[data-theme=overgrown] body{background-size:400px 400px!important}html[data-theme=overgrown][data-home=v2] #garden.top-still .ts-why{border-radius:0;box-shadow:none}} html[data-home=v2] .ts-story .wy-in{grid-template-columns:auto minmax(0,520px) auto;max-width:1180px} html[data-home=v2] .ts-story .wy-ph{margin:0;width:clamp(180px,17vw,260px)} html[data-home=v2] .ts-story .wy-ph img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border:1px solid color-mix(in srgb,var(--bone) 22%,transparent);box-shadow:0 10px 26px rgba(0,0,0,.22)} html[data-home=v2] .ts-story .wy-ph figcaption{margin-top:10px;font-size:11px;letter-spacing:.06em;line-height:1.4;color:var(--bone)} @media (max-width:759px){ html[data-home=v2] .ts-story .wy-in{grid-template-columns:minmax(0,1fr) 46%;gap:18px 16px;align-items:start} html[data-home=v2] .ts-story .wy-sp{grid-column:1;grid-row:2;align-self:center;justify-self:center;width:min(128px,100%)} html[data-home=v2] .ts-story .wy-t{grid-column:1/-1} html[data-home=v2] .ts-story .wy-ph{grid-column:2;grid-row:2;width:100%} html[data-home=v2] .ts-story .wy-in::before{grid-column:1;grid-row:2;align-self:center;justify-self:center} } /* t4 contrast: the waiting stage words and the Signal plate tags read at 4.5:1 or better in the light rooms */ html:is([data-theme=northlight],[data-theme=sunflower],[data-theme=grown],[data-theme=overgrown]) .stg:not([data-at=form]) .s-f,html:is([data-theme=northlight],[data-theme=sunflower],[data-theme=grown],[data-theme=overgrown]) .stg:not([data-at=code]):not([data-at=form]) .s-c{opacity:1!important;color:var(--mut)!important} html[data-theme=northlight] body .c-tag{background:#f3f1eb!important;color:#3e2c1a!important} html[data-home=v2] body main>section{max-width:100%} /* ===== t5 ===== */ /* hero: the pinned row under the painting (phone: first-screen actions; desktop: a quiet scroll cue) */ html[data-home=v2] #garden .ts-pin{display:none} html[data-home=v2] body #garden.top-still:not(.gd-static) .ts-pin{position:absolute;left:0;right:0;top:calc(100% + var(--mat-b,0px) + 12px);margin:0;display:flex;align-items:center;gap:22px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;z-index:3} html[data-home=v2] #garden .ts-pin a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--sig);text-decoration:none;border-bottom:1px solid transparent} html[data-home=v2] #garden .ts-pin a:hover,html[data-home=v2] #garden .ts-pin a:focus-visible{border-bottom-color:currentColor} html[data-home=v2] #garden .ts-cue{color:var(--mut);font-size:10.5px;letter-spacing:.2em} html[data-home=v2] #garden .ts-cue-a{display:inline-block;animation:tsCue 2.4s ease-in-out infinite} @keyframes tsCue{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}} @media (prefers-reduced-motion:reduce){html[data-home=v2] #garden .ts-cue-a{animation:none}} @media (min-width:760px){html[data-home=v2] body #garden.top-still:not(.gd-static) .ts-pin a{display:none}} @media (max-width:759px){ html[data-home=v2] body #garden.top-still:not(.gd-static) .ts-pin{top:100%;padding:12px var(--pad) 8px;background:var(--ink);gap:18px;flex-wrap:nowrap} html[data-home=v2] body #garden.top-still:not(.gd-static) .ts-pin .ts-cue{display:none} html[data-home=v2] body #garden.top-still:not(.gd-static) .ts-why{padding-top:calc(var(--mat-b,0px) + 74px)} html[data-home=v2] body #garden.top-still:not(.gd-static) .ts-why>.ts-go{display:none} html[data-home=v2] #garden .ts-pin a{font-size:10.5px;letter-spacing:.12em;white-space:nowrap} } html[data-home=v2] #garden .ts-go .ts-share{margin-left:22px} @media (min-width:760px){html[data-home=v2] #garden .ts-go{display:flex;flex-wrap:wrap;column-gap:22px}html[data-home=v2] #garden .ts-go .ts-share{margin-left:0}} /* 2. dark panels in the light rooms keep light ink */ html:is([data-theme=northlight],[data-theme=grown],[data-theme=overgrown],[data-theme=sunflower]) body #sketch, html:is([data-theme=northlight],[data-theme=grown],[data-theme=overgrown],[data-theme=sunflower]) body #sketch :is(#skH,.sk-h,.sk-cap,p.note,.note,.sk-b,#skSave,#skCopy,.sk-stg i){color:#f3ece0!important} html:is([data-theme=northlight],[data-theme=grown],[data-theme=overgrown],[data-theme=sunflower]) body #sketch :is(#skShare,.sk-p,.sk-dot,.sk-stg i[aria-current]){color:#e8b04a!important} html:is([data-theme=northlight],[data-theme=grown],[data-theme=overgrown],[data-theme=sunflower]) body #sketch .sk-b{border-color:rgba(243,236,224,.5)!important;background-color:transparent!important} html:is([data-theme=northlight],[data-theme=grown],[data-theme=overgrown],[data-theme=sunflower]) body #sketch #skShare{border-color:#e8b04a!important} html:is([data-theme=northlight],[data-theme=grown],[data-theme=overgrown],[data-theme=sunflower]) body .thumb .th-s{color:#f3ece0!important} html:is([data-theme=northlight],[data-theme=grown],[data-theme=overgrown],[data-theme=sunflower]) body .c-tag:not(.c-latest){color:#f3ece0!important;background-color:rgba(16,14,12,.88)!important} html:is([data-theme=northlight],[data-theme=grown],[data-theme=overgrown],[data-theme=sunflower]) body .c-play-badge{color:#f3ece0!important} /* 8. disabled sketch buttons stay readable (3:1 or better) in every room */ html body #sketch .sk-b:disabled,html body #sketch .sk-b[aria-disabled=true]{opacity:.62!important} /* 9. switcher disc: a 1px ring in the light rooms */ html[data-theme=northlight] body .rpl{box-shadow:0 0 0 1px #8a7a62;border-radius:50%} html:is([data-theme=grown],[data-theme=overgrown]) body .rpl{box-shadow:0 0 0 1px #6b4a10;border-radius:50%} html[data-theme=sunflower] body .rpl{box-shadow:0 0 0 1px #7a5a10;border-radius:50%} /* 4. room name label: under the disc on desktop, hidden on phone */ html body .rpl-lb{right:0!important;left:auto!important;top:56px!important;transform:none!important} @media (max-width:759px){html body .rpl-lb{display:none!important}} /* 5. room popup on phone: under the header, top centre */ @media (max-width:759px){html body .rpt{top:80px!important;bottom:auto!important}} /* 6. Velocity plate: tag then badge, top-left inside the frame */ html body #archive .card .c-frame:has(img[src*=velocity]) .c-tag{top:12px!important;left:12px!important;bottom:auto!important;right:auto!important} html body #archive .card .c-frame:has(img[src*=velocity]) .c-play-badge{top:46px!important;left:12px!important;bottom:auto!important;right:auto!important} /* Curator: thinner frame in the yellow rooms */ html[data-home=v2][data-theme=sunflower] #garden.top-still,html[data-home=v2]:is([data-theme=grown],[data-theme=overgrown]) #garden.top-still{--mat-t:8px;--mat-x:8px;--mat-b:12px} @media (max-width:759px){html[data-home=v2][data-theme=sunflower] #garden.top-still,html[data-home=v2]:is([data-theme=grown],[data-theme=overgrown]) #garden.top-still{--mat-t:6px;--mat-x:0px;--mat-b:9px}} /* Curator: in Overgrown the print keeps a clean margin around the painting and the Signal art */ html[data-home=v2][data-theme=overgrown] body #garden.top-still .gd-stage picture::before{box-shadow:0 0 0 22px #f6b52b} html[data-home=v2][data-theme=overgrown] body #garden .ts-sig-f{box-shadow:0 0 0 1px var(--ts-gold),0 0 0 16px #f6b52b} html[data-home=v2][data-theme=overgrown] body #archive .card .c-frame{box-shadow:0 0 0 14px #f6b52b} /* Community: 44px tap targets on phone */ @media (max-width:759px){ html body :is(#shareBtn,#htSave,#htStory,#cfBtn,#ygGathToggle,#ygGathBtn,#ygBkInline,#ygDlCertSampleBtn,.gd-open,.hm-pill,.yg-sp){min-height:44px!important;min-width:44px!important;box-sizing:border-box} html body :is(#cfBtn,#ygGathToggle,.hm-pill,.yg-sp){display:inline-flex!important;align-items:center;justify-content:center} } /* Community: the sticky Suggest is a live button in every room */ html:is([data-theme=northlight],[data-theme=grown],[data-theme=overgrown],[data-theme=sunflower]) body .thumb .th-s{background:#2a160a!important;box-shadow:inset 0 0 0 1px #e8b04a!important} /* Community: the copy notice never sits over the open menu */ html:has(#menuPanel:not([hidden])) body .toast{opacity:0!important;visibility:hidden!important;pointer-events:none!important} /* Community: Origins jumps to the open suggest field */ html[data-home=v2] .origins .ori-go{margin:18px 0 6px} html[data-home=v2] .origins .ori-go .btn-s{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px} /* Community: the visit count stays a quiet second line */ html body [data-gt-day][data-hero]{font-size:10px;letter-spacing:.08em} /* footer Artist link: small and quiet, every width */ html body footer .foot-artist{display:inline} /* Design 7: phone room seams, a 120px dithered fade into the room colour */ @media (max-width:759px){ html[data-home=v2] body main>section:nth-of-type(even):not(.hero):not(#why){isolation:isolate;background:linear-gradient(180deg,transparent 120px,color-mix(in srgb,var(--deep) 85%,transparent) 120px,transparent calc(120px + 32%))!important} html[data-home=v2] body main>section:nth-of-type(even):not(.hero):not(#why)::after{content:"";position:absolute;left:0;right:0;top:0;height:120px;z-index:-1;pointer-events:none;background:color-mix(in srgb,var(--deep) 85%,transparent);-webkit-mask:url(/assets/garden/seam-dither.svg) 0 0/8px 120px repeat-x;mask:url(/assets/garden/seam-dither.svg) 0 0/8px 120px repeat-x} } /* Community: Your Garden Signal in the desktop nav, compact below 1440 */ @media (max-width:1599px){html body nav[aria-label=Primary] .nv-x{display:none}} @media (min-width:760px) and (max-width:1439px){ html[data-home] body header.hud>nav[aria-label=Primary]{gap:12px!important} html[data-home] body header.hud>nav[aria-label=Primary]>a:not(.hud-cta){letter-spacing:.05em!important} } @media (min-width:760px) and (max-width:1365px){html[data-home] body header.hud>nav[aria-label=Primary]>a:not(.hud-cta){font-size:13px!important}} html body #sketch #skShare,html body #sketch #skShare *{color:#f2c46b!important} @media (max-height:700px){html body nav#menuPanel>a{min-height:46px!important;height:auto!important}} /* t5: the why panel never runs up under the header; it grows downward when its text needs room */ @media (min-width:760px){html[data-home=v2] body #garden.top-still:not(.gd-static) .ts-why{height:auto!important;min-height:var(--stg-h,var(--ph))}} /* t6 (RP Design spec): phone first screen. 56px header, the whole painting sized by height, a 112px text block under it */ @media (max-width:759px){ html[data-home=v2] body #hud{height:56px!important;padding-top:8px!important;padding-bottom:8px!important;box-sizing:border-box} html[data-home=v2] body #hud .mark{height:40px!important} html[data-home=v2] body #hud :is(.sndc,.rpl,#menuBtn){width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;position:relative} html[data-home=v2] body #hud :is(.sndc,.rpl,#menuBtn)::before{content:"";position:absolute;inset:-2px;border-radius:50%} html[data-home=v2] body #hud #sndMcap{top:52px!important} html[data-home=v2] body #garden.top-still{padding-top:56px!important;--ph6:max(min(calc(100svh - 56px - 112px - var(--mat-b,0px)),177.78vw),calc(82vw * 16 / 9 - var(--mat-b,0px)))} html[data-home=v2] body #garden.top-still:not(.gd-static) .gd-stage{top:56px!important;width:max-content!important;max-width:100%;margin-inline:auto!important;height:auto!important;justify-self:center} html[data-home=v2] body #garden.top-still:not(.gd-static) .gd-stage picture{width:auto!important;height:var(--ph6)!important;display:block} html[data-home=v2] body #garden.top-still:not(.gd-static) .gd-stage .gd-img{height:var(--ph6)!important;width:auto!important;max-width:100%;aspect-ratio:9/16;object-fit:contain} html[data-home=v2] body #garden.top-still:not(.gd-static) .gd-stage .gd-cv{inset:0!important;width:100%!important;height:100%!important} html[data-home=v2] body #garden.top-still:not(.gd-static) .ts-pin{display:none!important} html[data-home=v2] body #garden.top-still:not(.gd-static) .ts-why{padding-top:calc(var(--mat-b,0px) + 12px)!important;padding-bottom:env(safe-area-inset-bottom,0px)} html[data-home=v2] body #garden.top-still .ts-why .ts-line{font-size:15px!important;line-height:20px!important;text-wrap:balance;margin:0!important;letter-spacing:0} html[data-home=v2] body #garden.top-still .ts-why .ts-line .ts-l2{font-size:inherit!important;line-height:inherit!important} html[data-home=v2] body #garden.top-still .ts-why .ts-by{margin-top:6px!important;font-size:11px!important;line-height:14px!important;letter-spacing:.12em!important;text-transform:uppercase;grid-column:1/-1} html[data-home=v2] body #garden.top-still:not(.gd-static) .ts-why>.ts-go{display:flex!important;flex-wrap:wrap;column-gap:18px;row-gap:0;margin-top:-3px!important;grid-column:1/-1;grid-row:3;font-size:11px!important} html[data-home=v2] body #garden.top-still .ts-why>.ts-go a{display:inline-flex!important;align-items:center;min-height:44px;padding-block:15px;box-sizing:border-box;font-size:11px!important;line-height:14px} html[data-home=v2] body #garden.top-still .ts-why>.ts-sig{grid-row:4/span 2!important} html[data-home=v2] body #garden.top-still .ts-why>.gd-bar{grid-row:4} } @media (min-width:430px) and (max-width:759px){html[data-home=v2] body #garden.top-still .ts-why .ts-line{font-size:16px!important;line-height:21px!important}} @media (max-width:759px){ html[data-home=v2] body #garden.top-still .ts-why .ts-line .ts-l2{margin:0!important;padding:0!important} html[data-home=v2] body #garden.top-still:not(.gd-static) .ts-why>.ts-go{column-gap:14px!important;flex-wrap:nowrap} html[data-home=v2] body #garden.top-still .ts-why>.ts-go a{letter-spacing:.06em!important;white-space:nowrap} } html[data-theme=overgrown]{background:#f6b52b!important} html[data-theme=grown]{background-color:var(--wall,#f6b52b)} html[data-theme=overgrown] body{background:transparent!important} html[data-home=v2]:is([data-theme=grown],[data-theme=overgrown]) #garden.top-still::after{content:none!important;display:none!important} html[data-home=v2] body .ts-story .wy-sp{display:none!important} /* Overgrown: every text block in the story sits on a solid gold panel with a clear margin (the panels already cover the main sections) */ html[data-theme=overgrown][data-home=v2] body #garden.top-still .ts-story :is(.wy-in,.hg-in,.ts-st,.st-card,article){background:#f6b52b} /* ===== t7 (RP Design check of t5) ===== */ /* 3. the join divider shows whole: the section clips sideways only */ html body section#join.join{overflow:visible!important;overflow-x:clip!important} /* 2. tablets in portrait: the tall painting, whole, about 70vh and centred, with the why lines under it (as on phone). The why column is the painting's width, so the lines pass cleanly beneath the painting while the story runs. */ @media (min-width:760px) and (max-aspect-ratio:3/4){ html[data-home=v2] #garden.top-still{--ph7:min(70svh,calc((100vw - 2 * var(--pad,54px) - 2 * var(--mat-x,0px)) * 16 / 9));--pw7:calc(var(--ph7) * 9 / 16)} html[data-home=v2] body #garden.top-still .ts-grid{grid-template-columns:minmax(0,1fr)!important;justify-content:stretch} html[data-home=v2] body #garden.top-still .gd-track{grid-row:1;grid-column:1;z-index:1;pointer-events:none} html[data-home=v2] body #garden.top-still .gd-track .gd-stage{pointer-events:auto;width:var(--pw7)!important;max-width:100%;margin-inline:auto} html[data-home=v2] body #garden.top-still:not(.gd-static) .gd-stage{top:88px!important} html[data-home=v2] body #garden.top-still .gd-stage picture{width:var(--pw7)!important;max-width:100%} html[data-home=v2] body #garden.top-still .gd-stage .gd-img{aspect-ratio:9/16} html[data-home=v2] body #garden.top-still:not(.gd-static) .ts-why{grid-row:1;grid-column:1;align-self:start;position:relative!important;top:auto!important;height:auto!important;min-height:0!important;margin:calc(var(--stg-h,0px) + var(--mat-b,0px) + 2px) auto 0;z-index:0;display:block} html[data-home=v2] body #garden.top-still.gd-static .ts-why{grid-row:2;margin:calc(var(--mat-b,0px) + 2px) auto 0} html[data-home=v2] body #garden.top-still .ts-why{width:calc(var(--pw7) + 2 * var(--mat-x,0px));max-width:100%!important;padding-top:22px!important;box-sizing:border-box} html[data-home=v2] body #garden.top-still .ts-pin{display:none!important} html[data-home=v2][data-theme=lamplight] body #garden.top-still .gd-track::before{left:-30%;width:170%} } /* 5. Sunflower phones: the hero wall meets the page in a 120px dithered fade, top and bottom */ @media (max-width:759px){ html[data-theme=sunflower] body #top :is(.rpd-sf-wall,.rpd-sf-bloom,.rpd-sf-burn),html[data-theme=sunflower] body #top.hero::before{ -webkit-mask:url(/assets/garden/seam-dither.svg) 0 0/8px 120px repeat-x,linear-gradient(#000,#000) 0 120px/100% calc(100% - 240px) no-repeat,url(/assets/garden/seam-dither-up.svg) 0 100%/8px 120px repeat-x; mask:url(/assets/garden/seam-dither.svg) 0 0/8px 120px repeat-x,linear-gradient(#000,#000) 0 120px/100% calc(100% - 240px) no-repeat,url(/assets/garden/seam-dither-up.svg) 0 100%/8px 120px repeat-x} } /* 7. the painting never fades while the scroll story runs: no glaze in any theme (still.js sets --show for the old peel) */ html[data-home=v2] body #garden.top-still .gd-stage picture,html[data-home=v2] body #garden.top-still .gd-stage .gd-img{opacity:1!important;filter:none!important;mix-blend-mode:normal!important} /* 1. Overgrown phones: the painting's clean margin stops at the frame's bottom edge, so it never sits over the first h1 line */ @media (max-width:759px),(max-aspect-ratio:3/4){html[data-home=v2][data-theme=overgrown] body #garden.top-still .gd-stage picture::before{clip-path:inset(-22px -22px 0 -22px)}} /* t7 anchors: every in-page link lands below the sticky header (56px phone, 88px wide) */ html body #top{scroll-margin-top:72px}html body #topic{scroll-margin-top:120px} @media (min-width:760px){html body #top,html body #how,html body #origins,html body #suggest,html body #archive,html body #about,html body #collect,html body #join{scroll-margin-top:104px}html body #topic{scroll-margin-top:150px}} /* t7 scroll: the sigil column (52px) is held from first paint, so the origin rows do not rewrap and push the page down when the sigils arrive */ html body .ori-list{grid-template-columns:52px minmax(0,1fr) auto} /* t7 scroll: the Suggest kicker keeps room for its 44px mark from first paint (no late push) */ html body main section#suggest > .k{min-height:44px} /* t8 why flower: one ember-black bloom (pre-rendered, no filters), set beside the garden photo, never over text */ html[data-home=v2] body .ts-story .wy-in::before{content:"";display:block;width:clamp(150px,15vw,210px);aspect-ratio:1;background:url(/assets/garden/photo/sf-ember-240.webp) center/contain no-repeat;background-image:-webkit-image-set(url(/assets/garden/photo/sf-ember-240.webp) 1x,url(/assets/garden/photo/sf-ember-480.webp) 2x);background-image:image-set(url(/assets/garden/photo/sf-ember-240.webp) 1x,url(/assets/garden/photo/sf-ember-480.webp) 2x);align-self:center;justify-self:center} html[data-theme=gallery][data-home=v2] body .ts-story .wy-in::before{background-image:url(/assets/garden/photo/sf-ember-gray-240.webp);background-image:-webkit-image-set(url(/assets/garden/photo/sf-ember-gray-240.webp) 1x,url(/assets/garden/photo/sf-ember-gray-480.webp) 2x);background-image:image-set(url(/assets/garden/photo/sf-ember-gray-240.webp) 1x,url(/assets/garden/photo/sf-ember-gray-480.webp) 2x)} @media (max-width:759px){html[data-home=v2] body .ts-story .wy-in::before{width:min(132px,100%);grid-column:1;grid-row:2}} /* t8 Overgrown footer: the same ember bloom, small, on the panel edge */ html[data-theme=overgrown][data-home=v2] body footer{position:relative} html[data-theme=overgrown][data-home=v2] body footer::before{content:"";position:absolute;left:50%;top:0;transform:translate(-50%,-50%);width:44px;height:44px;background:url(/assets/garden/photo/sf-ember-96.webp) center/contain no-repeat;pointer-events:none} /* t8 lag: no blur behind the fixed thumb links (they are already near-opaque), no giant will-change layer on phones */ html body .thumb a{-webkit-backdrop-filter:none!important;backdrop-filter:none!important} @media (max-width:759px){html body .strip{will-change:auto}} /* t8 seed-spiral divider (isolated block): one inline symbol, in normal flow at the top of each divided section */ .rp-sym{position:absolute;width:0;height:0;overflow:hidden} html body .rp-div{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto 56px;color:#c9a14a;pointer-events:none;position:static} html body .rp-div::before,html body .rp-div::after{content:"";width:48px;height:1px;background:currentColor;opacity:.4} html body .rp-div svg{display:block;width:28px;height:28px;flex:none} html body main>section:has(>.rp-div){padding-top:56px!important} @media (min-width:760px){html body .rp-div{margin-bottom:88px}html body .rp-div::before,html body .rp-div::after{width:96px}html body .rp-div svg{width:36px;height:36px}html body main>section:has(>.rp-div){padding-top:88px!important}} html[data-theme=northlight] body .rp-div{color:#8a5a14} html:is([data-theme=grown],[data-theme=sunflower]) body .rp-div{color:#6b4a10} html[data-theme=overgrown] body .rp-div{color:#5a3a0c} html[data-theme=night] body .rp-div{color:#c9a14a} html[data-theme=lamplight] body .rp-div{color:#d4a24c} html[data-theme=gallery] body .rp-div{color:#b8b8b8} /* t8 CLS: reserve the archive kicker's drawn mark (39px) before sketch.js inserts it */ html body .arch-head>.k{display:flex;align-items:center;min-height:39px} /* t8 curator: a soft warm spotlight lifts the wall behind the hero painting in Night and Studio (the art itself is untouched) */ html:is([data-theme=night],[data-theme=gallery])[data-home=v2] body #garden.top-still .gd-stage{background-image:radial-gradient(ellipse 62% 58% at 50% 46%,rgba(255,206,140,.085),rgba(255,206,140,.03) 55%,transparent 78%)} /* t8 first screen: the Genesis line under the why line (byline type, theme accent); phones win back its height from the block's top pad and the link row's upper tap pad, so the painting and the Signals row keep their place */ html[data-home=v2] body #garden.top-still .ts-why>.ts-gen{grid-column:1/-1;margin:8px 0 0;font:500 11px/14px JBM,ui-monospace,monospace;letter-spacing:.04em} html[data-home=v2] body #garden.top-still .ts-gen a{color:var(--code);text-decoration:none} html[data-home=v2] body #garden.top-still .ts-gen a:hover,html[data-home=v2] body #garden.top-still .ts-gen a:focus-visible{text-decoration:underline;text-underline-offset:3px} @media (max-width:759px){ html[data-home=v2] body #garden.top-still .ts-why>.ts-gen{margin-top:4px;letter-spacing:.02em} html[data-home=v2] body #garden.top-still .ts-why{padding-top:4px!important} html[data-theme=overgrown][data-home=v2] body #garden.top-still .ts-why{padding-top:13px!important} html[data-home=v2] body #garden.top-still .ts-why>.ts-go a{padding-top:5px!important;padding-bottom:25px!important} } @media (max-width:389px){html[data-home=v2] body #garden.top-still .ts-why>.ts-gen{letter-spacing:0}} @media (max-width:759px){ html[data-home=v2] body #garden.top-still .ts-why>.ts-gen{grid-row:2;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:clip} html[data-home=v2] body #garden.top-still .ts-why>.ts-by{grid-row:3} html[data-home=v2] body #garden.top-still:not(.gd-static) .ts-why>.ts-go,html[data-home=v2] body #garden.top-still .ts-why>.ts-go{grid-row:4!important} html[data-home=v2] body #garden.top-still .ts-why>.ts-sig{grid-row:5/span 2!important} html[data-home=v2] body #garden.top-still .ts-why>.gd-bar{grid-row:5} html[data-home=v2] body #garden.top-still .ts-why>.gd-bar.is-open{grid-row:6} } @media (max-width:389px){html[data-home=v2] body #garden.top-still .ts-why>.ts-gen{letter-spacing:-.02em}} @media (max-width:759px){html[data-home=v2] body #garden.top-still .ts-why>.ts-gen{font-size:10px;font-weight:400;white-space:normal;overflow:visible}} /* t8 unified gallery frame: thin frame, fine mat line, soft shadow (ring shadows only, no layout change, pixels untouched) */ html[data-home=v2]{--fr-c:#3a2412;--fr-m:#f6efdc;--fr-l:rgba(58,36,18,.38);--fr-s:rgba(40,22,8,.34)} html[data-home=v2]:is([data-theme=night],[data-theme=lamplight]){--fr-c:#7a6038;--fr-m:#16120e;--fr-l:rgba(222,170,80,.38);--fr-s:rgba(0,0,0,.6)} html[data-home=v2][data-theme=gallery]{--fr-c:#5a5a5a;--fr-m:#121212;--fr-l:rgba(255,255,255,.22);--fr-s:rgba(0,0,0,.6)} html[data-home=v2] body #garden.top-still .gd-stage picture::before,html[data-home=v2] body #garden.top-still .gd-stage picture::after{display:none!important} html[data-home=v2] body #garden.top-still .gd-stage picture{box-shadow:none!important} html[data-home=v2] body #garden.top-still img.gd-img{box-shadow:0 0 0 1px var(--fr-l),0 0 0 9px var(--fr-m),0 0 0 11px var(--fr-c),0 22px 40px -12px var(--fr-s)!important;border:0!important;outline-offset:13px} html[data-home=v2] .ts-sig-f{background:var(--fr-m)!important;box-shadow:0 0 0 2px var(--fr-c),0 10px 22px -8px var(--fr-s)!important;border:0!important} html[data-home=v2] .ts-sig-f img{box-shadow:0 0 0 1px var(--fr-l)} html[data-home=v2] #hmTh{border-color:var(--fr-l)!important;box-shadow:0 0 0 4px var(--fr-m),0 0 0 6px var(--fr-c),0 10px 22px -8px var(--fr-s)!important} html[data-home=v2] .ts-story .wy-ph img{border:1px solid var(--fr-l)!important;box-shadow:0 0 0 6px var(--fr-m),0 0 0 8px var(--fr-c),0 14px 28px -10px var(--fr-s)!important} @media (max-width:759px){html[data-home=v2] body #garden.top-still img.gd-img{box-shadow:0 0 0 1px var(--fr-l),0 0 0 5px var(--fr-m),0 0 0 6px var(--fr-c),0 14px 26px -10px var(--fr-s)!important}} /* t8 Sunflower: soft 120px fade at the top of Origins */ html[data-home=v2][data-theme=sunflower] body #origins{position:relative;isolation:isolate;border-top:0!important} html[data-home=v2][data-theme=sunflower] #origins::after{content:"";position:absolute;left:0;right:0;top:0;height:120px;background:linear-gradient(to bottom,rgba(248,214,92,.7),rgba(248,214,92,0));pointer-events:none;z-index:-1} /* t9 phone pin: the why block pins directly under the pinned painting, so nothing scrolls behind the art; both release together at the end of the story */ @media (max-width:759px){html[data-home=v2] body #garden.top-still:not(.gd-static) .ts-why{position:sticky!important;top:calc(56px + var(--stg-h,0px))!important;align-self:start;z-index:3;margin-bottom:calc(-1 * var(--why-h,0px))!important}} @media (max-width:759px){html[data-home=v2] body #garden.top-still:not(.gd-static) .ts-grid{padding-bottom:var(--why-h,0px)}} /*EMB-START*/ /* t10 ember plates: the ember-black sunflower as a small art piece on a burnt-ember plate, in normal flow at the end of a few sections (never over text, art untinted) */ html[data-theme=overgrown][data-home=v2] :is(#gathered,#archive,#collect)::after{content:"";display:block;width:112px;height:112px;margin:48px auto 28px;border-radius:3px;background:url("/assets/garden/photo/sf-ember-240.webp") center/84% no-repeat,radial-gradient(circle at 50% 46%,#3b1b0c 0%,#22100a 58%,#140906 100%);background-image:-webkit-image-set(url("/assets/garden/photo/sf-ember-240.webp") 1x,url("/assets/garden/photo/sf-ember-480.webp") 2x),radial-gradient(circle at 50% 46%,#3b1b0c 0%,#22100a 58%,#140906 100%);background-image:image-set(url("/assets/garden/photo/sf-ember-240.webp") 1x,url("/assets/garden/photo/sf-ember-480.webp") 2x),radial-gradient(circle at 50% 46%,#3b1b0c 0%,#22100a 58%,#140906 100%);box-shadow:0 0 0 1px rgba(201,150,74,.42),0 10px 22px -10px rgba(20,8,2,.55);pointer-events:none} @media (min-width:760px){html[data-theme=overgrown][data-home=v2] :is(#gathered,#archive,#collect)::after{width:144px;height:144px;margin-top:64px;margin-bottom:40px}} /*EMB-END*/ /* t10 hero: larger Genesis thumbnail and a View Genesis link to the film page */ html[data-home=v2] #garden .ts-vg{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone);text-decoration:underline;text-decoration-color:var(--sig);text-underline-offset:4px} html[data-home=v2] #garden .ts-vg:hover,html[data-home=v2] #garden .ts-vg:focus-visible{color:var(--sig)} @media (min-width:760px) and (min-aspect-ratio:3/4){html[data-home=v2] #garden.top-still{--ph:min(78vh,calc((100vw - 2 * var(--pad,54px) - clamp(28px,4vw,64px) - 280px) * 9 / 16))}html[data-home=v2] body #garden.top-still .ts-grid{grid-template-columns:auto minmax(280px,520px)}}@media (min-width:760px){html[data-home=v2] body #garden.top-still .ts-why>.ts-sig{width:min(100%,360px)}} @media (max-width:759px){ html[data-home=v2] body #garden.top-still .ts-why{grid-template-columns:minmax(0,1fr) minmax(0,52%)} html[data-home=v2] body #garden.top-still .ts-why>.ts-vg{grid-column:1;grid-row:6;align-self:end;margin-top:0;min-height:40px;font-size:10.5px;letter-spacing:.12em} } /* t10: a little less empty space above and below the seed-spiral dividers (still centered, equal lines) */ html body .rp-div{margin-bottom:40px}html body main>section:has(>.rp-div){padding-top:40px!important} @media (min-width:760px){html body .rp-div{margin-bottom:64px}html body main>section:has(>.rp-div){padding-top:64px!important}} /* t11 (RP Design, final): phone type at a 12px minimum, 44px taps, Genesis thumbnail at full width, 8px frame rails around the pinned painting */ @media (max-width:759px){ html[data-home=v2] body #hud{padding-top:6px!important;padding-bottom:6px!important} html[data-home=v2] body #hud :is(.sndc,.rpl,#menuBtn){width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important} html[data-home=v2] body #hud #sndMcap{font-size:12px!important;letter-spacing:.06em!important} html[data-home=v2] body #garden.top-still .ts-why>.ts-gen{white-space:normal!important;overflow:visible!important;text-overflow:clip} html[data-home=v2] body #garden.top-still .ts-why>.ts-gen>a{display:inline-flex;align-items:center;min-height:44px;font-size:12px!important;line-height:16px!important;letter-spacing:.04em} html[data-home=v2] body #garden.top-still .ts-why .ts-by,html[data-home=v2] body #garden.top-still .ts-why .ts-by a{font-size:12px!important;line-height:16px!important} html[data-home=v2] body #garden.top-still .ts-why>.ts-go,html[data-home=v2] body #garden.top-still .ts-why>.ts-go a,html[data-home=v2] body #garden.top-still .ts-why>.ts-go a span{font-size:12px!important} html[data-home=v2] body #garden.top-still .ts-why{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important} html[data-home=v2] body #garden.top-still .ts-why>.ts-sig{grid-column:1 / -1!important;grid-row:5!important;width:100%!important;margin-top:10px!important} html[data-home=v2] body #garden.top-still .ts-why>.ts-vg{grid-column:1!important;grid-row:6!important;align-self:center;min-height:44px;font-size:12px!important;letter-spacing:.1em} html[data-home=v2] body #garden.top-still .ts-why>.gd-bar{grid-column:2!important;grid-row:6!important;align-self:center;justify-self:end} html[data-home=v2] body #garden.top-still .ts-why>.gd-bar.is-open{grid-column:1 / -1!important;grid-row:7!important} html[data-home=v2] body #garden.top-still .ts-why .gd-open{font-size:12px!important;min-height:44px} html[data-home=v2] #garden .ts-sig-c{font-size:12px!important;letter-spacing:.1em} html[data-home=v2] #garden .ts-sig-k,html[data-home=v2] #garden .ts-sig-t{font-size:12px!important} html[data-home=v2] body p.c-story,html[data-home=v2] body .why-blk .wy-1,html[data-home=v2] body .why-blk .wy-2{font-size:16px!important;line-height:24px!important} html[data-home=v2] body .why-blk b,html[data-home=v2] body .cover-gold span,html[data-home=v2] body .cf-ph b{font-size:max(12px,1em)!important} html[data-home=v2] body a.u.tl{display:inline-block;min-height:44px;padding-block:9px;box-sizing:border-box} html[data-home=v2] body :is(.c-page,.c-watch){display:inline-flex!important;align-items:center;min-height:44px;font-size:12px!important} html[data-home=v2] body .c-play-badge,html[data-home=v2] body .rpt-k,html[data-home=v2] body .wy-ph figcaption,html[data-home=v2] body .v2-more button,html[data-home=v2] body .ht-meta,html[data-home=v2] body .ht-meta *,html[data-home=v2] body .ht-hook,html[data-home=v2] body .form-why,html[data-home=v2] body .hero-ui .kick,html[data-home=v2] body .cl-lab{font-size:12px!important} html[data-home=v2] body #garden.top-still{padding-top:64px!important;--ph6:max(min(calc(100svh - 64px - 8px - 112px - var(--mat-b,0px)),177.78vw),calc(82vw * 16 / 9 - var(--mat-b,0px)))} html[data-home=v2] body #garden.top-still:not(.gd-static) .gd-stage{top:64px!important} html[data-home=v2] body #garden.top-still:not(.gd-static) .ts-why{top:calc(64px + var(--stg-h,0px) + 8px)!important;margin-top:8px} } @media (max-width:759px){ html[data-home=v2] body #garden.top-still .ts-why>.ts-sig.ts-sig{margin-inline:-6px!important;width:calc(100% + 12px)!important} html[data-home=v2] body main :is(.c-page.c-page.c-page,.c-watch.c-watch.c-watch){display:inline-flex!important;align-items:center!important;min-height:44px!important;font-size:12px!important} html[data-home=v2] body main :is(.c-play-badge.c-play-badge.c-play-badge,.ht-hook.ht-hook.ht-hook,.cl-lab.cl-lab.cl-lab){font-size:12px!important} html[data-home=v2] body main .cf-ph.cf-ph span b{font-size:12px!important} } @media (max-width:759px){ html[data-home=v2] body main #archive .card .c-actions :is(.c-page,.c-watch){font-size:12px!important;line-height:1!important;min-height:44px!important;display:inline-flex!important;align-items:center!important} html[data-home=v2] body main #archive .card .c-play-badge{font-size:12px!important} html[data-home=v2] body main #top .cf-ph span b{font-size:12px!important} } /* t11 dividers: Origins gets its own centered row; every divided section starts the same distance above its divider (40px phone, 64px desktop) */ html body main>section#origins>.rp-div{grid-column:1 / -1!important;justify-self:center;width:100%} html body main>section:is(#origins,#gathered,#archive,#about,#join,#how,#collect,#suggest,#connections):has(>.rp-div){padding-top:40px!important;border-top-width:0!important} @media (min-width:760px){html body main>section:is(#origins,#gathered,#archive,#about,#join,#how,#collect,#suggest,#connections):has(>.rp-div){padding-top:64px!important}} /* t11 lamplight: the warm glow fades to 0 well inside its own box, so no hard edge */ html[data-home=v2][data-theme=lamplight] body #garden.top-still .gd-track::before{background:radial-gradient(ellipse 88% 46% at 8% 6%,rgba(255,176,92,.20) 0%,rgba(255,147,41,.10) 30%,rgba(255,147,41,.03) 52%,rgba(255,147,41,0) 70%)!important} /* t11 (RP Code & QA): the pinned block under the painting holds only the Genesis line and the headline, so it always fits the screen; the rest follows in .ts-rest */ @media (max-width:759px){ html[data-home=v2] body #garden.top-still{--ph6:min(calc(100svh - 64px - 8px - 104px - var(--mat-b,0px)),177.78vw)} html[data-home=v2] body #garden.top-still:not(.gd-static) .ts-why{padding-top:6px!important;padding-bottom:4px!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;row-gap:0} html[data-home=v2] body #garden.top-still .ts-why>.ts-gen{grid-row:1!important;grid-column:1!important;margin:0!important} html[data-home=v2] body #garden.top-still .ts-why>.ts-line{grid-row:2!important;grid-column:1!important} html[data-home=v2] body #garden .ts-rest{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;align-items:center;padding:10px 24px 8px;max-width:520px;margin:0 auto} html[data-home=v2] body #garden .ts-rest>.ts-by{grid-column:1 / -1;margin:0!important;font-size:12px!important;line-height:16px!important;text-transform:uppercase;letter-spacing:.12em} html[data-home=v2] body #garden .ts-rest>.ts-by a{display:inline-flex;align-items:center;min-height:44px;font-size:12px!important} html[data-home=v2] body #garden .ts-rest>.ts-go{grid-column:1 / -1;display:flex!important;flex-wrap:wrap;column-gap:20px;margin:0!important;font-size:12px!important} html[data-home=v2] body #garden .ts-rest>.ts-go a{display:inline-flex!important;align-items:center;min-height:44px;font-size:12px!important;line-height:16px} html[data-home=v2] body #garden .ts-rest>.ts-sig{grid-column:1 / -1;width:100%!important;margin:10px 0 0!important} html[data-home=v2] body #garden .ts-rest>.ts-vg{grid-column:1;min-height:44px;margin:0;font-size:12px!important;letter-spacing:.1em} html[data-home=v2] body #garden .ts-rest>.gd-bar{grid-column:2;justify-self:end;margin:0} html[data-home=v2] body #garden .ts-rest>.gd-bar.is-open{grid-column:1 / -1} html[data-home=v2] body #garden .ts-rest .gd-open{font-size:12px!important;min-height:44px} } @media (max-width:389px){html[data-home=v2] body #garden .ts-rest{padding-inline:16px}} @media (max-width:759px){ html[data-home=v2] body #garden .ts-rest>.ts-go a{margin:0!important;padding-inline:0!important} html[data-home=v2] body #garden .ts-rest>.ts-vg{grid-column:1 / -1} html[data-home=v2] body #garden .ts-rest>.gd-bar{grid-column:1 / -1;justify-self:start;margin-top:6px} html[data-home=v2] body #garden .ts-rest .gd-open{white-space:nowrap} } /* t11 taps on tablet and desktop */ html[data-home=v2] body #garden .ts-why>.ts-gen>a,html[data-home=v2] body #garden a.ts-vg{display:inline-flex!important;align-items:center;min-height:44px!important} html[data-home=v2] body #garden .gd-open{min-height:44px!important} html[data-home=v2] body main #archive .card .c-actions :is(.c-page,.c-watch){display:inline-flex!important;align-items:center!important;min-height:44px!important} html[data-home=v2] body main #top #htBtns.ht-btns>button{min-height:44px!important} @media (min-width:760px){html[data-home=v2] body section.origins>.rp-div{grid-row:1!important}html[data-home=v2] body section.origins>.ori-hd{grid-row:2 / span 12}} @media (min-width:760px){html[data-home=v2] body .ts-by{font-size:12px!important}} /* t12: ember sunflower plates in every theme (matches overgrown) */ html[data-home=v2] body main>:is(#gathered,#archive,#collect)::after{content:"";display:block;grid-column:1/-1;justify-self:center;width:112px;height:112px;margin:48px auto 28px;border-radius:3px;background:url("/assets/garden/photo/sf-ember-240.webp") center/84% no-repeat,radial-gradient(circle at 50% 46%,#3b1b0c 0%,#22100a 58%,#140906 100%);background-image:-webkit-image-set(url("/assets/garden/photo/sf-ember-240.webp") 1x,url("/assets/garden/photo/sf-ember-480.webp") 2x),radial-gradient(circle at 50% 46%,#3b1b0c 0%,#22100a 58%,#140906 100%);background-image:image-set(url("/assets/garden/photo/sf-ember-240.webp") 1x,url("/assets/garden/photo/sf-ember-480.webp") 2x),radial-gradient(circle at 50% 46%,#3b1b0c 0%,#22100a 58%,#140906 100%);box-shadow:0 0 0 1px rgba(201,150,74,.42),0 10px 22px -10px rgba(20,8,2,.55);pointer-events:none;position:static;filter:none;opacity:1} @media (min-width:760px){html[data-home=v2] body main>:is(#gathered,#archive,#collect)::after{width:144px;height:144px;margin-top:64px;margin-bottom:40px}} html[data-theme=sunflower][data-home=v2] body main>:is(#gathered,#archive,#collect)::after{box-shadow:0 0 0 1px rgba(122,74,20,.5),0 10px 22px -10px rgba(60,30,4,.5)} html[data-theme=northlight][data-home=v2] body main>:is(#gathered,#archive,#collect)::after{box-shadow:0 0 0 1px rgba(120,96,60,.45),0 10px 22px -10px rgba(30,24,16,.45)} html[data-theme=grown][data-home=v2] body main>:is(#gathered,#archive,#collect)::after{box-shadow:0 0 0 1px rgba(110,62,12,.5),0 10px 22px -10px rgba(50,24,2,.5)} html:is([data-theme=night],[data-theme=lamplight])[data-home=v2] body main>:is(#gathered,#archive,#collect)::after{box-shadow:0 0 0 1px rgba(201,150,74,.55),0 0 28px -6px rgba(201,120,50,.22)} html[data-theme=gallery][data-home=v2] body main>:is(#gathered,#archive,#collect)::after{background:url("/assets/garden/photo/sf-ember-gray-240.webp") center/84% no-repeat,radial-gradient(circle at 50% 46%,#2c2c2c 0%,#1a1a1a 58%,#101010 100%);background-image:-webkit-image-set(url("/assets/garden/photo/sf-ember-gray-240.webp") 1x,url("/assets/garden/photo/sf-ember-gray-480.webp") 2x),radial-gradient(circle at 50% 46%,#2c2c2c 0%,#1a1a1a 58%,#101010 100%);background-image:image-set(url("/assets/garden/photo/sf-ember-gray-240.webp") 1x,url("/assets/garden/photo/sf-ember-gray-480.webp") 2x),radial-gradient(circle at 50% 46%,#2c2c2c 0%,#1a1a1a 58%,#101010 100%);box-shadow:0 0 0 1px rgba(210,210,210,.3),0 0 28px -6px rgba(255,255,255,.08)} /* t12 overgrown: cut-out ember sunflowers framing the card edges (plain images, no filters, no scripts) */ html[data-theme=overgrown][data-home=v2] body main>section#why,html[data-theme=overgrown][data-home=v2] body main>section#origins,html[data-theme=overgrown][data-home=v2] body main>section#gathered,html[data-theme=overgrown][data-home=v2] body main>section#archive,html[data-theme=overgrown][data-home=v2] body main>section#how,html[data-theme=overgrown][data-home=v2] body main>section#about,html[data-theme=overgrown][data-home=v2] body main>section#collect,html[data-theme=overgrown][data-home=v2] body main>section#connections,html[data-theme=overgrown][data-home=v2] body main>section#join,html[data-theme=overgrown][data-home=v2] body main>section#suggest{position:relative;isolation:isolate} html[data-theme=overgrown][data-home=v2] body main>section#why::before,html[data-theme=overgrown][data-home=v2] body main>section#origins::before,html[data-theme=overgrown][data-home=v2] body main>section#gathered::before,html[data-theme=overgrown][data-home=v2] body main>section#archive::before,html[data-theme=overgrown][data-home=v2] body main>section#how::before,html[data-theme=overgrown][data-home=v2] body main>section#about::before,html[data-theme=overgrown][data-home=v2] body main>section#collect::before,html[data-theme=overgrown][data-home=v2] body main>section#connections::before,html[data-theme=overgrown][data-home=v2] body main>section#join::before,html[data-theme=overgrown][data-home=v2] body main>section#suggest::before{content:"";position:absolute;top:-10px;bottom:-10px;left:-12px;right:-12px;z-index:-1;pointer-events:none;background-repeat:no-repeat;filter:none;opacity:1} @media (min-width:760px){html[data-theme=overgrown][data-home=v2] body main>section#why::before,html[data-theme=overgrown][data-home=v2] body main>section#origins::before,html[data-theme=overgrown][data-home=v2] body main>section#gathered::before,html[data-theme=overgrown][data-home=v2] body main>section#archive::before,html[data-theme=overgrown][data-home=v2] body main>section#how::before,html[data-theme=overgrown][data-home=v2] body main>section#about::before,html[data-theme=overgrown][data-home=v2] body main>section#collect::before,html[data-theme=overgrown][data-home=v2] body main>section#connections::before,html[data-theme=overgrown][data-home=v2] body main>section#join::before,html[data-theme=overgrown][data-home=v2] body main>section#suggest::before{top:-22px;bottom:-22px;left:calc(-1*min(3vw,48px));right:calc(-1*min(3vw,48px))}} html[data-theme=overgrown][data-home=v2] body main>:is(#gathered,#archive,#collect)::after{background:url("/assets/garden/photo/sf-ember-240.webp") center/contain no-repeat;background-image:-webkit-image-set(url("/assets/garden/photo/sf-ember-240.webp") 1x,url("/assets/garden/photo/sf-ember-480.webp") 2x);background-image:image-set(url("/assets/garden/photo/sf-ember-240.webp") 1x,url("/assets/garden/photo/sf-ember-480.webp") 2x);box-shadow:none;border-radius:0} @media (max-width:759px){ html[data-theme=overgrown][data-home=v2] body main>section#why::before{background-image:url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp");background-position:right -39px bottom 18%,right -27px top 22%;background-size:71px 71px,54px 54px} html[data-theme=overgrown][data-home=v2] body main>section#origins::before{background-image:url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp");background-position:right -38px top -10px,left -37px bottom 20%;background-size:76px 76px,67px 67px} html[data-theme=overgrown][data-home=v2] body main>section#gathered::before{background-image:url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp");background-position:left -34px top 26%,right -38px bottom -12px,right -25px top 12%;background-size:68px 68px,76px 76px,50px 50px} html[data-theme=overgrown][data-home=v2] body main>section#archive::before{background-image:url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp");background-position:left -38px top -10px,right -39px top 18%,left -27px top 40%,right -38px top 62%,left -39px bottom 8%;background-size:76px 76px,71px 71px,54px 54px,76px 76px,71px 71px} html[data-theme=overgrown][data-home=v2] body main>section#how::before{background-image:url("/assets/garden/photo/sf-ember-480.webp");background-position:right -32px top 50%;background-size:64px 64px} html[data-theme=overgrown][data-home=v2] body main>section#about::before{background-image:url("/assets/garden/photo/sf-ember-480.webp");background-position:left -38px bottom -12px;background-size:76px 76px} html[data-theme=overgrown][data-home=v2] body main>section#collect::before{background-image:url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp");background-position:right -38px top -10px,left -37px top 38%,right -27px bottom 16%;background-size:76px 76px,67px 67px,54px 54px} html[data-theme=overgrown][data-home=v2] body main>section#connections::before{background-image:url("/assets/garden/photo/sf-ember-480.webp");background-position:left -30px top 50%;background-size:60px 60px} html[data-theme=overgrown][data-home=v2] body main>section#join::before{background-image:url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp");background-position:left -38px top -10px,right -39px bottom -10px;background-size:76px 76px,71px 71px} html[data-theme=overgrown][data-home=v2] body main>section#suggest::before{background-image:url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp");background-position:right -38px top 30%,left -27px bottom -8px;background-size:76px 76px,54px 54px} } @media (min-width:760px) and (max-width:1023px){ html[data-theme=overgrown][data-home=v2] body main>section#why::before{background-image:url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp");background-position:right -56px bottom 18%,right -38px top 22%;background-size:102px 102px,76px 76px} html[data-theme=overgrown][data-home=v2] body main>section#origins::before{background-image:url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp");background-position:right -54px top -10px,left -53px bottom 20%;background-size:108px 108px,96px 96px} html[data-theme=overgrown][data-home=v2] body main>section#gathered::before{background-image:url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp");background-position:left -49px top 26%,right -54px bottom -12px,right -35px top 12%;background-size:98px 98px,108px 108px,70px 70px} html[data-theme=overgrown][data-home=v2] body main>section#archive::before{background-image:url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp");background-position:left -54px top -10px,right -56px top 18%,left -38px top 40%,right -54px top 62%,left -56px bottom 8%;background-size:108px 108px,102px 102px,76px 76px,108px 108px,102px 102px} html[data-theme=overgrown][data-home=v2] body main>section#how::before{background-image:url("/assets/garden/photo/sf-ember-480.webp");background-position:right -46px top 50%;background-size:92px 92px} html[data-theme=overgrown][data-home=v2] body main>section#about::before{background-image:url("/assets/garden/photo/sf-ember-480.webp");background-position:left -54px bottom -12px;background-size:108px 108px} html[data-theme=overgrown][data-home=v2] body main>section#collect::before{background-image:url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp");background-position:right -54px top -10px,left -53px top 38%,right -38px bottom 16%;background-size:108px 108px,96px 96px,76px 76px} html[data-theme=overgrown][data-home=v2] body main>section#connections::before{background-image:url("/assets/garden/photo/sf-ember-480.webp");background-position:left -43px top 50%;background-size:86px 86px} html[data-theme=overgrown][data-home=v2] body main>section#join::before{background-image:url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp");background-position:left -54px top -10px,right -56px bottom -10px;background-size:108px 108px,102px 102px} html[data-theme=overgrown][data-home=v2] body main>section#suggest::before{background-image:url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp");background-position:right -54px top 30%,left -38px bottom -8px;background-size:108px 108px,76px 76px} } @media (min-width:1024px){ html[data-theme=overgrown][data-home=v2] body main>section#why::before{background-image:url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp");background-position:right -83px bottom 18%,right -56px top 22%;background-size:151px 151px,112px 112px} html[data-theme=overgrown][data-home=v2] body main>section#origins::before{background-image:url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp");background-position:right -80px top -10px,left -78px bottom 20%;background-size:160px 160px,142px 142px} html[data-theme=overgrown][data-home=v2] body main>section#gathered::before{background-image:url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp");background-position:left -72px top 26%,right -80px bottom -12px,right -52px top 12%;background-size:144px 144px,160px 160px,104px 104px} html[data-theme=overgrown][data-home=v2] body main>section#archive::before{background-image:url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp");background-position:left -80px top -10px,right -83px top 18%,left -56px top 40%,right -80px top 62%,left -83px bottom 8%;background-size:160px 160px,151px 151px,112px 112px,160px 160px,151px 151px} html[data-theme=overgrown][data-home=v2] body main>section#how::before{background-image:url("/assets/garden/photo/sf-ember-480.webp");background-position:right -68px top 50%;background-size:136px 136px} html[data-theme=overgrown][data-home=v2] body main>section#about::before{background-image:url("/assets/garden/photo/sf-ember-480.webp");background-position:left -80px bottom -12px;background-size:160px 160px} html[data-theme=overgrown][data-home=v2] body main>section#collect::before{background-image:url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp");background-position:right -80px top -10px,left -78px top 38%,right -56px bottom 16%;background-size:160px 160px,142px 142px,112px 112px} html[data-theme=overgrown][data-home=v2] body main>section#connections::before{background-image:url("/assets/garden/photo/sf-ember-480.webp");background-position:left -64px top 50%;background-size:128px 128px} html[data-theme=overgrown][data-home=v2] body main>section#join::before{background-image:url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp");background-position:left -80px top -10px,right -83px bottom -10px;background-size:160px 160px,151px 151px} html[data-theme=overgrown][data-home=v2] body main>section#suggest::before{background-image:url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp");background-position:right -80px top 30%,left -56px bottom -8px;background-size:160px 160px,112px 112px} } /* t13: no plate in any theme, the cut-out ember flower only (transparent edges) */ html[data-home=v2] body main>:is(#gathered,#archive,#collect)::after,html[data-home=v2][data-theme] body main>:is(#gathered,#archive,#collect)::after{background:url("/assets/garden/photo/sf-ember-240.webp") center/contain no-repeat;background-image:-webkit-image-set(url("/assets/garden/photo/sf-ember-240.webp") 1x,url("/assets/garden/photo/sf-ember-480.webp") 2x);background-image:image-set(url("/assets/garden/photo/sf-ember-240.webp") 1x,url("/assets/garden/photo/sf-ember-480.webp") 2x);box-shadow:none;border-radius:0;outline:0} html[data-home=v2][data-theme=gallery] body main>:is(#gathered,#archive,#collect)::after{background:url("/assets/garden/photo/sf-ember-gray-240.webp") center/contain no-repeat;background-image:-webkit-image-set(url("/assets/garden/photo/sf-ember-gray-240.webp") 1x,url("/assets/garden/photo/sf-ember-gray-480.webp") 2x);background-image:image-set(url("/assets/garden/photo/sf-ember-gray-240.webp") 1x,url("/assets/garden/photo/sf-ember-gray-480.webp") 2x);box-shadow:none} /* t14: dark ember plate with hidden RP story marks (pinecone spirals, seed spirals, seed to sprout to bloom, RP keyboard mark), all 7 themes */ html[data-home=v2][data-theme] body main>section:is(#gathered,#archive,#collect)::after{background:url("/assets/garden/photo/sf-ember-240.webp") center/84% no-repeat,url("/assets/garden/photo/ember-plate-v19r-240.webp") center/cover no-repeat;background-image:-webkit-image-set(url("/assets/garden/photo/sf-ember-240.webp") 1x,url("/assets/garden/photo/sf-ember-480.webp") 2x),-webkit-image-set(url("/assets/garden/photo/ember-plate-v19r-240.webp") 1x,url("/assets/garden/photo/ember-plate-v19r-480.webp") 2x);background-image:image-set(url("/assets/garden/photo/sf-ember-240.webp") 1x,url("/assets/garden/photo/sf-ember-480.webp") 2x),image-set(url("/assets/garden/photo/ember-plate-v19r-240.webp") 1x,url("/assets/garden/photo/ember-plate-v19r-480.webp") 2x);border-radius:3px;outline:0;filter:none;box-shadow:0 0 0 1px rgba(201,150,74,.42),0 10px 22px -10px rgba(20,8,2,.55)} html[data-home=v2][data-theme=gallery] body main>section:is(#gathered,#archive,#collect)::after{background:url("/assets/garden/photo/sf-ember-gray-240.webp") center/84% no-repeat,url("/assets/garden/photo/ember-plate-gray-v19r-240.webp") center/cover no-repeat;background-image:-webkit-image-set(url("/assets/garden/photo/sf-ember-gray-240.webp") 1x,url("/assets/garden/photo/sf-ember-gray-480.webp") 2x),-webkit-image-set(url("/assets/garden/photo/ember-plate-gray-v19r-240.webp") 1x,url("/assets/garden/photo/ember-plate-gray-v19r-480.webp") 2x);background-image:image-set(url("/assets/garden/photo/sf-ember-gray-240.webp") 1x,url("/assets/garden/photo/sf-ember-gray-480.webp") 2x),image-set(url("/assets/garden/photo/ember-plate-gray-v19r-240.webp") 1x,url("/assets/garden/photo/ember-plate-gray-v19r-480.webp") 2x);box-shadow:0 0 0 1px rgba(210,210,210,.3),0 0 28px -6px rgba(255,255,255,.08)} html[data-home=v2][data-theme=sunflower] body main>section:is(#gathered,#archive,#collect)::after{box-shadow:0 0 0 1px rgba(122,74,20,.5),0 10px 22px -10px rgba(60,30,4,.5)} html[data-home=v2][data-theme=northlight] body main>section:is(#gathered,#archive,#collect)::after{box-shadow:0 0 0 1px rgba(120,96,60,.45),0 10px 22px -10px rgba(30,24,16,.45)} html[data-home=v2]:is([data-theme=grown],[data-theme=overgrown]) body main>section:is(#gathered,#archive,#collect)::after{box-shadow:0 0 0 1px rgba(110,62,12,.5),0 10px 22px -10px rgba(50,24,2,.5)} html[data-home=v2]:is([data-theme=night],[data-theme=lamplight]) body main>section:is(#gathered,#archive,#collect)::after{box-shadow:0 0 0 1px rgba(201,150,74,.55),0 0 28px -6px rgba(201,120,50,.22)} /* t15 overgrown: cut-out ember edge flowers framing the home hero (behind the art and text, gutters only) */ html[data-theme=overgrown][data-home=v2] body main>section#garden{isolation:isolate} html[data-theme=overgrown][data-home=v2] body main>section#garden::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;filter:none;opacity:1} @media (max-width:759px){ html[data-theme=overgrown][data-home=v2] body main>section#garden::before{background-image:url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp");background-position:left -54px top 120px,right -70px top 250px,left -47px top 420px,right -62px top 590px,left -70px top 880px,right -50px top 1180px,left -62px top 1480px,right -74px top 1780px,left -42px bottom 430px,right -66px bottom 300px,left -55px bottom 130px,right -41px bottom 30px;background-size:64px 64px,80px 80px,56px 56px,72px 72px,80px 80px,60px 60px,72px 72px,84px 84px,64px 64px,88px 88px,76px 76px,60px 60px;background-repeat:no-repeat} html[data-theme=overgrown][data-home=v2] body main>section#garden .ts-why{isolation:isolate} html[data-theme=overgrown][data-home=v2] body main>section#garden .ts-why::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp");background-position:left -36px top -12px,right -50px bottom -18px;background-size:56px 56px,70px 70px;background-repeat:no-repeat} } @media (min-width:760px) and (max-width:1023px){html[data-theme=overgrown][data-home=v2] body main>section#garden::before{background-image:url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp");background-position:left -60px top 130px,right -48px top 90px,left -42px top 460px,right -74px top 380px,left -74px top 820px,right -42px top 760px,left -50px top 1250px,right -66px top 1150px,left -66px top 1700px,right -52px top 1600px,left -42px top 2080px,right -66px top 2030px;background-size:90px 90px,76px 76px,70px 70px,104px 104px,104px 104px,70px 70px,80px 80px,96px 96px,96px 96px,80px 80px,70px 70px,96px 96px;background-repeat:no-repeat}} @media (min-width:1024px){html[data-theme=overgrown][data-home=v2] body main>section#garden::before{background-image:url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp"),url("/assets/garden/photo/sf-ember-480.webp");background-position:left -82px top 130px,right -66px top 86px,left -54px top 470px,right -104px top 380px,left -104px top 800px,right -54px top 740px,left -66px top 1230px,right -90px top 1120px,left -90px top 1680px,right -60px top 1560px,left -54px top 2060px,right -82px top 1990px;background-size:128px 128px,110px 110px,96px 96px,150px 150px,150px 150px,96px 96px,110px 110px,136px 136px,136px 136px,104px 104px,96px 96px,128px 128px;background-repeat:no-repeat}} /* t16: anchor jumps show reveal-on-scroll parts at once */ .js .rv.rv-now,.js .rv.rv-now h2,.js h2.rv.rv-now{transition:none!important;opacity:1!important;transform:none!important;clip-path:none!important} /* t16: one ember plate only, at the end of Collect, in the six plated themes; Overgrown stays plateless (cut-out flowers only) */ html[data-home=v2]:not([data-theme=overgrown]) body main>section:is(#gathered,#archive)::after{content:none!important;display:none!important} html[data-home=v2][data-theme=overgrown] body main>section:is(#gathered,#archive,#collect)::after{background:url("/assets/garden/photo/sf-ember-240.webp") center/contain no-repeat;background-image:-webkit-image-set(url("/assets/garden/photo/sf-ember-240.webp") 1x,url("/assets/garden/photo/sf-ember-480.webp") 2x);background-image:image-set(url("/assets/garden/photo/sf-ember-240.webp") 1x,url("/assets/garden/photo/sf-ember-480.webp") 2x);box-shadow:none;border-radius:0;outline:0} /* t16: a card film never shows as an empty black box before it has a source (tap focus on iPhone, hover start on desktop) */ #archive .c-frame video:not([src]){opacity:0!important;visibility:hidden!important} /* t16 Garden Signal, desktop: the form column is exactly the painting size (--pz) and the gap clears the frame, so Code and Form never sit on the art or its frame */ @media (min-width:1024px){ html[data-home=v2][data-lay=v1] body .hero .hero-ui{grid-template-columns:var(--pz,410px) minmax(0,560px)!important;column-gap:clamp(64px,5.6vw,88px)!important} html[data-home=v2][data-lay=v1] body .hero .hero-ui>.kick{margin-top:44px!important} } /* t16 QA: desktop small text reads at 13px or larger */ @media (min-width:760px){html body :is(.hud-cta,.snd-word .snd-lb,.snd-word .snd-st,.snd-word .snd-cap,.ts-cue,.ts-cue-a,#hkChips button,.v2-more button,.wy-ph figcaption,.cl-lab,.ht-btns button,#htBtns>button,#shareBtn,#htSave,#htStory,.sv-facts,p#n){font-size:13px!important}} /* t16 QA: tap targets 44px */ html body .foot-mk{min-width:44px}html body .skip{min-height:44px;display:inline-flex;align-items:center} /* t16: "Look beneath the painting" stays on one line on desktop */ @media (min-width:1024px){html[data-home=v2] body #garden .gd-open{white-space:nowrap}} /* t16b: Velocity card is a quiet "being worked on" panel in the room's own tones (no art) */ #archive .card-next .c-frame{background:color-mix(in srgb,var(--sig) 20%,var(--void,#f3ead6))!important} #archive .vs-wip{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(circle at 50% 46%,color-mix(in srgb,var(--sig) 30%,transparent) 0,transparent 62%),color-mix(in srgb,var(--sig) 20%,var(--void,#f3ead6));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sig) 45%,transparent)} #archive .vs-wip .vs-mark{width:30%;max-width:120px;aspect-ratio:1;fill:var(--sig);opacity:.85} #archive .vs-wip .vs-k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone);opacity:.9} #archive .card-next .c-frame .c-play-badge{display:none!important} #archive .vs-wip{padding-top:18px} #archive .vs-wip .vs-k{font-size:13px;opacity:1} /* t16c: Velocity placeholder piece (pure code canvas) and its caption */ #archive .card-next .c-frame .vs-cv{position:absolute;inset:0;width:100%;height:100%;display:block;background:linear-gradient(135deg,#0d3446,#1d2436 55%,#4a2410)} #archive .card-next .c-frame .vs-cap{position:absolute;left:12px;bottom:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff3dc;background:rgba(10,14,24,.62);padding:5px 8px;pointer-events:none} @media (min-width:760px){#archive .card-next .c-frame .vs-cap{font-size:13px}} /* t16c: "Look beneath the painting" fits its panel on one line */ @media (min-width:1024px){html[data-home=v2] body #garden .gd-open{width:max-content!important;max-width:100%;box-sizing:border-box;letter-spacing:.03em!important;padding-left:8px!important;padding-right:8px!important;margin-left:0!important}} /* t16d: Velocity card is the three starting studies (Ignition, Creation and Fracture, The Horizon) in a slow crossfade; reduced motion shows Study 1 */ #archive .card-next .c-frame .vs-xf{position:absolute;inset:0} #archive .card-next .c-frame .vs-xf>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:vsx 15s infinite} #archive .card-next .c-frame .vs-xf>.vs-cap{opacity:0;animation:vsx 15s infinite} #archive .card-next .c-frame .vs-xf>:nth-child(1),#archive .card-next .c-frame .vs-xf>:nth-child(2){animation-delay:0s} #archive .card-next .c-frame .vs-xf>:nth-child(3),#archive .card-next .c-frame .vs-xf>:nth-child(4){animation-delay:5s} #archive .card-next .c-frame .vs-xf>:nth-child(5),#archive .card-next .c-frame .vs-xf>:nth-child(6){animation-delay:10s} @keyframes vsx{0%{opacity:0}6%{opacity:1}33%{opacity:1}39%{opacity:0}100%{opacity:0}} #archive .card-next .c-frame .vs-xf>:nth-child(1){opacity:1} @media (prefers-reduced-motion:reduce){#archive .card-next .c-frame .vs-xf>*{animation:none!important;opacity:0}#archive .card-next .c-frame .vs-xf>:nth-child(-n+2){opacity:1}} #archive .card-next .c-frame .vs-xf>.vs-cap{animation-name:vsc} @keyframes vsc{0%,6%{opacity:0}7%,33%{opacity:1}33.5%,100%{opacity:0}} /* t19 (RP Design): the ember sunflower is drawn on the framed garden photo as a composed pair; the old grid cell flower stays off */ html[data-home=v2] body .ts-story .wy-in::before{content:none!important;display:none!important} /* t19 (RP Design): double-window mat diptych, one gold frame, ember LEFT, garden photo RIGHT, shared caption */ html[data-home=v2] body .ts-story .wy-ph{--h:clamp(320px,26.25vw,420px);--m:9px;display:grid!important;grid-template-columns:calc(var(--h)*.4) calc(var(--h)*.8);column-gap:var(--m);padding:var(--m);width:auto!important;max-width:none!important;margin:0 0 40px!important;background:var(--fr-m);border:1px solid var(--fr-l);box-shadow:0 0 0 2px var(--fr-c),0 14px 28px -10px var(--fr-s);position:relative;justify-self:center;align-self:center} html[data-home=v2] body .ts-story .wy-ph::before,html[data-home=v2] body .ts-story figure.wy-ph::before{content:""!important;display:block!important;position:static;grid-column:1;grid-row:1;width:auto;height:var(--h);aspect-ratio:auto;padding:0;background:#170d07 url(/assets/garden/photo/sf-ember-240.webp) 50% 40%/86% auto no-repeat;background-image:-webkit-image-set(url(/assets/garden/photo/sf-ember-240.webp) 1x,url(/assets/garden/photo/sf-ember-480.webp) 2x);background-image:image-set(url(/assets/garden/photo/sf-ember-240.webp) 1x,url(/assets/garden/photo/sf-ember-480.webp) 2x);box-shadow:inset 0 0 0 1px rgba(201,150,74,.22);filter:none;pointer-events:none} html[data-home=v2][data-theme=gallery] body .ts-story .wy-ph::before{background-color:#151515;background-image:url(/assets/garden/photo/sf-ember-gray-240.webp);background-image:-webkit-image-set(url(/assets/garden/photo/sf-ember-gray-240.webp) 1x,url(/assets/garden/photo/sf-ember-gray-480.webp) 2x);background-image:image-set(url(/assets/garden/photo/sf-ember-gray-240.webp) 1x,url(/assets/garden/photo/sf-ember-gray-480.webp) 2x)} html[data-home=v2] body .ts-story .wy-ph picture{grid-column:2;grid-row:1;display:block;min-width:0} html:root body .ts-story .wy-ph img,html:root body .ts-story .wy-ph picture img{width:100%!important;height:var(--h)!important;aspect-ratio:auto!important;object-fit:cover;border:0!important;box-shadow:none!important} html[data-home=v2] body .ts-story .wy-ph figcaption{position:absolute;left:0;top:100%;margin-top:14px!important;width:100%;padding:0!important;text-align:center} @media (max-width:759px){html[data-home=v2] body .ts-story .wy-ph{--h:266px;--m:6px;grid-column:1/-1!important;grid-row:auto!important}} @media (min-width:760px) and (max-width:1199px){html[data-home=v2] body .ts-story .wy-in{grid-template-columns:1fr!important}html[data-home=v2] body .ts-story .wy-ph{--h:380px;--m:8px;grid-column:1/-1!important;grid-row:2!important;margin-top:28px!important}} /* t19 v19s (RP Design final): ember plate = CSS ground + grain, untinted sunflower, one vector overlay (pinecones + RP keyboard lockup), one outer line */ html[data-home=v2][data-theme]:not([data-theme=overgrown]) body main>section:is(#gathered,#archive,#collect)::after{--s:216px;width:var(--s)!important;height:var(--s)!important;box-sizing:border-box!important;border:0!important;border-radius:0!important;margin:80px auto 56px!important;background-image:url(/assets/garden/photo/plate-v19z2.svg),url(/assets/garden/photo/sf-ember-480.webp),url(/assets/garden/photo/sf-shadow-v19s.webp),url(/assets/garden/photo/plate-grain-v19s.svg),radial-gradient(circle at 50% 42%,#3a1a0b 0%,#27130a 48%,#150904 100%)!important;background-image:url(/assets/garden/photo/plate-v19z2.svg),image-set(url(/assets/garden/photo/sf-ember-240.webp) 1x,url(/assets/garden/photo/sf-ember-480.webp) 2x),url(/assets/garden/photo/sf-shadow-v19s.webp),url(/assets/garden/photo/plate-grain-v19s.svg),radial-gradient(circle at 50% 42%,#3a1a0b 0%,#27130a 48%,#150904 100%)!important;background-size:100% 100%,64% auto,80% auto,216px 216px,100% 100%!important;background-position:0 0,calc(var(--s)*.15) calc(var(--s)*.10),calc(var(--s)*.07) calc(var(--s)*.02),0 0,0 0!important;background-repeat:no-repeat,no-repeat,no-repeat,repeat,no-repeat!important;background-blend-mode:normal,normal,normal,overlay,normal!important;background-clip:border-box!important;background-origin:border-box!important;background-color:transparent!important;outline:1px solid rgba(201,150,74,.70)!important;outline-offset:6px!important;box-shadow:inset 0 1px 0 rgba(255,196,120,.07),0 2px 5px rgba(10,4,1,.35),0 18px 30px -18px rgba(10,4,1,.6)!important;filter:none!important} @media (max-width:759px){html[data-home=v2][data-theme]:not([data-theme=overgrown]) body main>section:is(#gathered,#archive,#collect)::after{--s:168px;margin:56px auto 40px!important}} html[data-home=v2][data-theme=gallery][data-home=v2]:not([data-theme=overgrown]) body main>section:is(#gathered,#archive,#collect)::after{background-image:url(/assets/garden/photo/plate-gray-v19z2.svg),url(/assets/garden/photo/sf-ember-gray-480.webp),url(/assets/garden/photo/sf-shadow-v19s.webp),url(/assets/garden/photo/plate-grain-v19s.svg),radial-gradient(circle at 50% 42%,#2a2a2a 0%,#1c1c1c 48%,#111111 100%)!important;background-image:url(/assets/garden/photo/plate-gray-v19z2.svg),image-set(url(/assets/garden/photo/sf-ember-gray-240.webp) 1x,url(/assets/garden/photo/sf-ember-gray-480.webp) 2x),url(/assets/garden/photo/sf-shadow-v19s.webp),url(/assets/garden/photo/plate-grain-v19s.svg),radial-gradient(circle at 50% 42%,#2a2a2a 0%,#1c1c1c 48%,#111111 100%)!important;outline-color:rgba(200,200,200,.45)!important} html[data-home=v2][data-theme]:is([data-theme=grown],[data-theme=northlight],[data-theme=sunflower]):not([data-theme=overgrown]) body main>section:is(#gathered,#archive,#collect)::after{outline-color:rgba(138,106,46,.85)!important} html[data-home=v2][data-theme]:is([data-theme=night],[data-theme=lamplight]):not([data-theme=overgrown]) body main>section:is(#gathered,#archive,#collect)::after{box-shadow:inset 0 1px 0 rgba(255,196,120,.07),0 2px 5px rgba(10,4,1,.35),0 16px 28px -16px rgba(0,0,0,.75)!important} /* t17: Velocity studies hold full strength between studies (Study 1 stays as the base, no dimming); the caption is always shown */ #archive .card-next .c-frame .vs-xf>img:nth-child(1){animation:none!important;opacity:1!important} #archive .card-next .c-frame .vs-xf>img:nth-child(3){animation-name:vsx2} @keyframes vsx2{0%{opacity:0}6%{opacity:1}39%{opacity:1}45%{opacity:0}100%{opacity:0}} #archive .card-next .c-frame .vs-xf>.vs-cap{background:rgba(10,14,24,.78)} #archive .card-next .c-frame .vs-xf>.vs-cap{opacity:0;animation:vsc3 15s steps(1,end) infinite!important} #archive .card-next .c-frame .vs-xf>.vs-cap:nth-child(2){opacity:1;animation-delay:.5s!important}#archive .card-next .c-frame .vs-xf>.vs-cap:nth-child(4){animation-delay:5.5s!important}#archive .card-next .c-frame .vs-xf>.vs-cap:nth-child(6){animation-delay:10.5s!important} @keyframes vsc3{0%{opacity:1}33.33%{opacity:0}100%{opacity:0}} @media (max-width:759px){#archive .card-next .c-frame .vs-cap{font-size:12px!important}} @media (prefers-reduced-motion:reduce){#archive .card-next .c-frame .vs-xf>.vs-cap{animation:none!important;opacity:0!important}#archive .card-next .c-frame .vs-xf>.vs-cap:nth-child(2){opacity:1!important}} /* t18 curator frames. Stills: warm ivory mat (never pure white), thin dark walnut/bronze outer line, soft shadow. Dark themes: deep charcoal mat. Gallery stays grayscale. */ html[data-home=v2]{--fr-c:#3b2a1c;--fr-m:#e6dcc5;--fr-l:rgba(59,42,28,.42);--fr-s:rgba(40,24,10,.28)} html[data-home=v2][data-theme=northlight]{--fr-m:#e0d8c4} html[data-home=v2]:is([data-theme=night],[data-theme=lamplight]){--fr-c:#6e5634;--fr-m:#1d1a17;--fr-l:rgba(222,170,80,.3);--fr-s:rgba(0,0,0,.55)} html[data-home=v2][data-theme=gallery]{--fr-c:#555;--fr-m:#1b1b1b;--fr-l:rgba(255,255,255,.18);--fr-s:rgba(0,0,0,.6)} html[data-home=v2] body #garden.top-still img.gd-img{box-shadow:0 0 0 1px var(--fr-l),0 0 0 9px var(--fr-m),0 0 0 10px var(--fr-c),0 18px 34px -14px var(--fr-s)!important} html[data-home=v2] body .ts-story .wy-ph img{border:1px solid var(--fr-l)!important;box-shadow:0 0 0 7px var(--fr-m),0 0 0 8px var(--fr-c),0 14px 28px -12px var(--fr-s)!important} @media (max-width:759px){html[data-home=v2] body #garden.top-still img.gd-img{box-shadow:0 0 0 1px var(--fr-l),0 0 0 5px var(--fr-m),0 0 0 6px var(--fr-c),0 12px 24px -10px var(--fr-s)!important}} /* Garden Signal form: the same ivory mat, thinner (rooms.js margins 18 to 10), walnut line, soft shadow */ html[data-home=v2]:is([data-theme=sunflower],[data-theme=grown],[data-theme=overgrown]) body #rpdLayer .rpd-sf-mat{background:var(--fr-m)!important;box-shadow:inset 0 0 0 1px var(--fr-l),0 0 0 1px var(--fr-c)!important} html[data-home=v2][data-theme=northlight] body #rpdLayer .rpd-mat{background:var(--fr-m)!important;box-shadow:0 0 0 1px var(--fr-c),0 14px 28px -12px var(--fr-s)!important} html[data-home=v2][data-theme=northlight] body #rpdLayer .rpd-bevel{background:#ebe3d0!important;box-shadow:0 0 0 1px var(--fr-l)!important} /* Films: no mat, a thin dark hairline and a soft shadow */ html[data-home=v2] body #archive .card .c-frame{border:1px solid rgba(26,18,10,.78)!important;box-shadow:0 12px 26px -12px var(--fr-s)!important} html[data-home=v2]:is([data-theme=night],[data-theme=lamplight],[data-theme=gallery]) body #archive .card .c-frame{border-color:rgba(0,0,0,.9)!important;box-shadow:0 0 0 1px rgba(255,236,200,.08),0 14px 28px -12px rgba(0,0,0,.7)!important} html[data-home=v2][data-theme=overgrown] body #archive .card .c-frame{box-shadow:0 0 0 14px #f6b52b,0 12px 26px -12px var(--fr-s)!important} html[data-home=v2] body #archive .card .c-frame video:not(.is-on){opacity:0!important} /* t18: Velocity button stays on one line */ html[data-home=v2] body #archive .card-next .c-actions a{white-space:nowrap} /* t18: top line under the painting */ html[data-home=v2] body #garden.top-still .ts-why>.ts-seed{margin:8px 0 0;font-size:clamp(15px,1.1vw,17px);line-height:1.45;color:inherit} /* t18: shorter scroll scene under the painting on desktop (still life, code and form still all show), so no long empty band before Why */ @media (min-width:1024px){html[data-home=v2] body #garden.top-still:not(.gd-static) .gd-track{height:170vh!important}html[data-home=v2] body #garden.top-still{padding-bottom:32px!important}html[data-home=v2] body main>section#why{margin-top:24px!important}} /* t18 design: one frame language. 1px antique gold line around a dark inner mat, art never cropped */ :root:root[data-theme],html[data-home=v2],html{--fr-c:#8a6a2e;--fr-m:rgb(26,18,11);--fr-l:#8a6a2e;--fr-s:rgba(20,12,4,.45)} :root:root:root[data-theme=gallery]{--fr-c:#8a6a2e;--fr-m:#141414;--fr-l:#8a6a2e;--fr-s:rgba(0,0,0,.6)} html[data-home=v2] body #garden.top-still img.gd-img{box-shadow:0 0 0 9px var(--fr-m),0 0 0 10px var(--fr-c),0 18px 34px -14px var(--fr-s)!important;border:0!important} html[data-home=v2] body .ts-sig-f{background:var(--fr-m)!important;box-shadow:0 0 0 1px var(--fr-c),0 10px 22px -8px var(--fr-s)!important;border:0!important} html[data-home=v2] body .ts-sig-f img{box-shadow:none!important} html[data-home=v2] body #hmTh{border-color:var(--fr-m)!important;box-shadow:0 0 0 6px var(--fr-m),0 0 0 7px var(--fr-c),0 10px 22px -8px var(--fr-s)!important} html[data-home=v2] body .ts-story .wy-ph img,html body .wy-ph img{border:0!important;box-shadow:0 0 0 6px var(--fr-m),0 0 0 7px var(--fr-c),0 14px 28px -12px var(--fr-s)!important} html body #rpdLayer .rpd-sf-mat,html[data-home=v2] body #rpdLayer .rpd-sf-mat{background:var(--fr-m)!important;background-image:none!important;box-shadow:0 0 0 1px var(--fr-c)!important} html[data-home=v2][data-theme=northlight] body #rpdLayer .rpd-mat{background:var(--fr-m)!important;box-shadow:0 0 0 1px var(--fr-c),0 14px 28px -12px var(--fr-s)!important} html[data-home=v2][data-theme=northlight] body #rpdLayer .rpd-bevel{background:var(--fr-m)!important;box-shadow:none!important} html body #archive .card .c-frame,html[data-home=v2] body #archive .card .c-frame,html[data-theme] body #archive .card .c-frame.c-frame{border:6px solid var(--fr-m)!important;background:var(--fr-m)!important;background-color:var(--fr-m)!important;box-shadow:0 0 0 1px var(--fr-c),0 12px 26px -12px var(--fr-s)!important;clip-path:none!important} html body #archive .card .c-frame>img,html body #archive .card .c-frame>video{object-fit:contain!important;background:var(--fr-m)!important} html body #archive .card:hover .c-frame img{transform:none!important} html body .sv-stage,html[data-theme] body .sv-stage{border:6px solid var(--fr-m)!important;background:var(--fr-m)!important;box-shadow:0 0 0 1px var(--fr-c),0 14px 30px -14px var(--fr-s)!important} html body .sv-stage video{background:var(--fr-m)!important} @media (max-width:759px){html[data-home=v2] body #garden.top-still img.gd-img{box-shadow:0 0 0 6px var(--fr-m),0 0 0 7px var(--fr-c),0 12px 24px -10px var(--fr-s)!important}html body a.u{padding-block:15px;margin-block:-15px}} /* t18 design: tablet 600-1024, painting scrolls with the page so the Why text never slides behind it */ @media (min-width:600px) and (max-width:1024px){html[data-home=v2] body #garden.top-still .gd-track{height:auto!important}html[data-home=v2] body #garden.top-still:not(.gd-static) .gd-stage{position:relative!important;top:auto!important}html[data-home=v2] body #garden.top-still:not(.gd-static) .ts-why{position:relative!important;top:auto!important;height:auto!important;margin-bottom:0!important;z-index:3}html[data-home=v2] body #garden.top-still .gd-track{grid-row:1!important;align-self:start!important}html[data-home=v2] body #garden.top-still:not(.gd-static) .ts-why{grid-row:2!important;margin-top:28px!important}} /* t19: room for the flower beside the photo so it never sits on the Why text */ /* t19: diptych, ember sunflower framed LEFT, garden photo RIGHT, one shared caption */ /* t19: Collect head is not sticky while folded, so the More button always stays below the text */ html[data-home=v2] body #collect.v2-fold:not(.is-open) .col-head{position:static!important} /* t24: header. 24px clear between the wordmark and the nav at every width, no clipping 1024 to 1920 in all 7 themes */ html body header.hud>a.mark{flex-shrink:0;margin-inline-end:24px!important} @media (min-width:1100px) and (max-width:1365px){html[data-home] body header.hud>nav[aria-label=Primary]{gap:9px!important}} @media (min-width:1100px) and (max-width:1209px){html[data-home] body header.hud .wm{display:none!important}} /* t25: with the 12px nav the name fits from 1210 up */ @media (min-width:1100px) and (max-width:1199px){html[data-home] body header.hud>nav[aria-label=Primary]>a:not(.hud-cta){letter-spacing:.01em!important}} @media (min-width:1440px) and (max-width:1599px){html[data-home] body header.hud>nav[aria-label=Primary]{gap:12px!important}html[data-home] body header.hud>nav[aria-label=Primary]>a:not(.hud-cta){letter-spacing:.05em!important}} /* t24: Collect. The TRANSIENTLABS link sits inline in its sentence; the 44px tap area lives on ::before */ html[data-home=v2] body #collect a.u.tl{display:inline;min-height:0;padding:0;border-bottom:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;position:relative} html[data-home=v2] body #collect a.u.tl::before{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)} /* t24: calmer band under the home hero */ @media (min-width:1000px){html[data-home=v2] body #garden{padding-bottom:16px!important}html[data-home=v2] body main>section#why{padding-top:40px!important}} /* t24: phone rhythm at 390 */ @media (max-width:759px){ html[data-home=v2] body main>section:not(#garden){padding-block:clamp(48px,8vw,96px)!important} html[data-home=v2] body main>section#archive{padding-bottom:48px!important} html[data-home=v2] body #gathH{margin-bottom:12px!important} html[data-home=v2] body #joinH{line-height:1.05!important} } /* t25: Collect link on one line, 44px tap kept on ::before */ html[data-home=v2] body #collect a.u.tl{white-space:nowrap} /* t25: header nav 1100 to 1365, 12px words with 15px gaps */ @media (min-width:1100px) and (max-width:1365px){html[data-home] body header.hud>nav[aria-label=Primary]{gap:15px!important}html[data-home] body header.hud>nav[aria-label=Primary]>a:not(.hud-cta){font-size:12px!important;letter-spacing:.02em!important}} /* t25: phone, less empty space under the hero and in Signal Works */ @media (max-width:759px){html[data-home=v2] body #garden{padding-bottom:48px!important}html[data-home=v2] body main>section#why{margin-top:0!important}html[data-home=v2] body #archive .strip>li{min-height:0!important;height:auto!important}html[data-home=v2] body #archive .arch-progress{display:none}} /* t25: Collect with More open at 1000px and up, the tiles sit in the right column */ @media (min-width:1000px){html[data-home=v2] body #collect>.v2-more{grid-column:1/-1;grid-row:2}html[data-home=v2] body #collect.is-open>.col-grid{grid-column:2;grid-row:1}} /* ===== t26 ===== */ /* 1. back half: a quiet preview line (and thumb) above each More; hidden once open */ html[data-home=v2] body .v2-fold>.v2-peek{display:flex;align-items:center;gap:12px;margin:14px 0 0;font-size:14px;line-height:1.45;color:color-mix(in srgb,var(--mut) 60%,var(--bone) 40%);max-width:62ch} html[data-home=v2] body .v2-fold>.v2-peek img{flex:none;width:64px;height:36px;object-fit:contain;display:block;outline:1px solid var(--line);outline-offset:-1px} html[data-home=v2] body .v2-fold.is-open>.v2-peek{display:none!important} html[data-home=v2] body .v2-fold>.v2-peek+.v2-more{margin-top:14px} @media (min-width:1000px){html[data-home=v2] body #collect>.v2-peek{grid-column:1/-1;grid-row:2}html[data-home=v2] body #collect>.v2-peek~.v2-more{grid-row:3}} /* 2. one wall label on every Signal card: title, date, medium, edition or status */ html[data-home=v2] body #archive #strip>li.card .c-meta{display:block!important} html[data-home=v2] body #archive #strip>li.card .c-wall{display:flex;flex-direction:column;gap:2px;margin:8px 0 0;font-size:12px;line-height:1.5;letter-spacing:.04em;color:color-mix(in srgb,var(--mut) 70%,var(--bone) 30%)} /* 3. the plate gets a small quiet label (plate art unchanged) */ html[data-home=v2] body main>section#collect{position:relative;--pb:64px} html[data-home=v2] body #collect>.plate-cap{position:absolute;left:0;right:0;bottom:calc(var(--pb) + 22px);margin:0;text-align:center;font-size:12px;letter-spacing:.08em;color:color-mix(in srgb,var(--mut) 70%,var(--bone) 30%);pointer-events:none} html[data-home=v2][data-theme=overgrown] body #collect>.plate-cap{display:none} /* 4. hero: the Genesis card goes horizontal from 1280 up so the opening screen ends level with the painting */ @media (min-width:1280px){html[data-home=v2] body #garden.top-still .ts-why .ts-sig{display:grid!important;grid-template-columns:120px 1fr;column-gap:14px;align-items:center;margin-top:18px!important} html[data-home=v2] body #garden.top-still .ts-why .ts-sig>:first-child{grid-row:1/span 3;width:120px!important;height:auto!important;margin:0!important} html[data-home=v2] body #garden.top-still .ts-why .ts-go{margin-top:16px!important}} /* 5. rhythm: even 64/64 on desktop; phone hero 48; no dead space after the last Archive card */ @media (min-width:1000px){html[data-home=v2] body main>section:is(#why,#archive,#origins,#gathered,.why-band,#how,#about,#collect,#connections,#join,#suggest){padding-top:64px!important;padding-bottom:64px!important}} @media (max-width:759px){html[data-home=v2] body #garden.top-still{padding-bottom:48px!important} html[data-home=v2] body #archive #strip{padding-bottom:0!important} html[data-home=v2] body #archive .arch-sticky{padding-bottom:0!important}} /* 6. Collect open: the three tiles stack in one column beside the text from 1000 up */ @media (min-width:1000px){html[data-home=v2] body #collect.is-open>.col-grid{grid-template-columns:minmax(0,1fr)!important;grid-auto-rows:1fr!important;align-self:stretch} html[data-home=v2] body #collect.is-open>.col-grid>*{grid-column:1!important;grid-row:auto!important}} @media (min-width:1280px) and (max-width:1599px){html[data-home=v2] body #garden.top-still .ts-why .ts-sig{grid-template-columns:96px 1fr;margin-top:10px!important} html[data-home=v2] body #garden.top-still .ts-why .ts-sig>:first-child{width:96px!important}} @media (min-width:1280px) and (max-width:1399px){html[data-home=v2] body #garden.top-still .ts-why .ts-by{margin-top:10px!important} html[data-home=v2] body #garden.top-still .ts-why .ts-go{margin-top:10px!important} html[data-home=v2] body #garden.top-still .ts-why .ts-vg{margin-top:4px!important} html[data-home=v2] body #garden.top-still .ts-why .gd-bar{padding-top:4px!important}} @media (max-width:999px){html[data-home=v2] body main>section#collect{--pb:48px}} @media (max-width:759px){html[data-home=v2] body #collect>.plate-cap{bottom:calc(var(--pb) + 12px)}} @media (min-width:1000px){html[data-home=v2] body #collect.is-open>.v2-peek~.v2-more{grid-row:2}} html[data-home=v2] body #about.v2-fold:not(.is-open)>.manifesto{margin-bottom:0!important} html[data-home=v2] body #collect.v2-fold:not(.is-open)>.v2-peek{margin-top:16px} /* ===== t27 ===== */ /* 1. back-half thumbs read as small artworks, not icons */ html[data-home=v2] body .v2-fold>.v2-peek{gap:18px} html[data-home=v2] body .v2-fold>.v2-peek img{width:160px;height:90px} @media (max-width:759px){html[data-home=v2] body .v2-fold>.v2-peek img{width:112px;height:63px}html[data-home=v2] body .v2-fold>.v2-peek{gap:14px}} /* 2. Why columns get a thumb in the same style */ html[data-home=v2] body .why-band .v2-th{display:block;width:160px;height:90px;object-fit:contain;margin:0 0 14px;outline:1px solid var(--line);outline-offset:-1px} @media (max-width:759px){html[data-home=v2] body .why-band .v2-th{width:112px;height:63px}} /* 3. the sunflower plate hangs closer to Collect and Connections */ html[data-home=v2][data-theme]:not([data-theme=overgrown]) body main>section#collect#collect::after{margin:48px auto 44px!important} html[data-home=v2]:not([data-theme=overgrown]) body main>section#collect#collect{padding-bottom:24px!important;--pb:24px} html[data-home=v2] body #collect#collect>.plate-cap{bottom:calc(var(--pb) + 12px)} @media (max-width:759px){html[data-home=v2][data-theme]:not([data-theme=overgrown]) body main>section#collect#collect::after{margin:36px auto 32px!important} html[data-home=v2] body #collect#collect>.plate-cap{bottom:calc(var(--pb) + 4px)}} /* t28 */ html[data-home=v2] body #garden a.ts-col{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;min-height:44px!important;margin-top:12px;padding:8px 16px;border:1px solid var(--sig);color:var(--bone);background:transparent;font-size:12px!important;line-height:1.35;letter-spacing:.08em;text-align:center;text-transform:uppercase;text-decoration:none;white-space:normal;box-sizing:border-box;max-width:100%;transition:background .2s,color .2s} html[data-home=v2] body #garden a.ts-col:hover,html[data-home=v2] body #garden a.ts-col:focus-visible{background:var(--sig);color:var(--ink,#0b0b0b)} html[data-home=v2] body #garden .ts-why>a.ts-col{grid-column:1 / -1} html body section#joinOld{display:none!important} html .conn .cn-anc{display:block;height:0} html body .conn .cn-head:has(+.cn-lede){margin-bottom:clamp(16px,2vw,24px)} html body .conn .cn-lede{max-width:1440px;margin:0 auto clamp(28px,4vw,48px)} @media (max-width:759px){html body #connections .cn-lede a.u{padding-block:18px!important;margin-block:-18px!important}} html body .hero .pl-why{display:none!important} /* t29 hero level */ @media (min-width:1000px){ html[data-home=v2] body #garden.top-still .ts-why{flex-flow:row wrap!important;align-content:flex-start;align-items:center} html[data-home=v2] body #garden.top-still .ts-why>*{flex:0 0 100%;max-width:100%} html[data-home=v2] body #garden.top-still .ts-why>a.ts-vg{flex:0 0 auto!important;margin:8px 10px 0 0!important;font-size:12px!important;letter-spacing:.04em!important} html[data-home=v2] body #garden.top-still .ts-why>a.ts-col{flex:1 1 0!important;min-width:0;margin:8px 0 0!important;padding:4px 6px!important;letter-spacing:.04em!important;line-height:1.3} html[data-home=v2] body #garden.top-still .ts-why.ts-lv{min-height:var(--ph);align-content:space-between} html[data-home=v2] body #garden.top-still .ts-why.ts-lv>*{margin-top:0!important;margin-bottom:0!important} html[data-home=v2] body #garden.top-still .ts-why.ts-lv>a.ts-vg{margin-right:10px!important} } /* t30: 1000-1279 hero, compact Signal card so the column ends with the painting */ @media (min-width:1000px) and (max-width:1279.98px){ html[data-home=v2] body #garden.top-still .ts-why>a.ts-sig{display:grid!important;grid-template-columns:96px minmax(0,1fr)!important;column-gap:14px!important;align-items:center} html[data-home=v2] body #garden.top-still .ts-why>a.ts-sig .ts-sig-f{width:96px!important;height:auto!important} html[data-home=v2] body #garden.top-still .ts-why>a.ts-sig .ts-sig-f img{width:86px!important;height:44px!important;object-fit:cover} html[data-home=v2] body #garden.top-still .ts-why>.ts-by{flex:0 0 auto!important;max-width:none;margin-left:0!important;margin-right:0!important;padding-left:0!important;text-align:left!important} html[data-home=v2] body #garden.top-still .ts-why{justify-content:flex-start!important} html[data-home=v2] body #garden.top-still .ts-why>.ts-go{display:contents!important} html[data-home=v2] body #garden.top-still .ts-why>.ts-go>a{flex:0 0 auto;margin:0} html[data-home=v2] body #garden.top-still .ts-why>.ts-go>a:first-child{margin-left:22px!important} html[data-home=v2] body #garden.top-still .ts-why>.ts-go>a.ts-share{flex:0 0 100%} html[data-home=v2] body #garden.top-still .ts-why>.gd-bar{padding-top:0!important;padding-bottom:0!important} } /* t31 */ html[data-home=v2] body #collect+section#connections{padding-top:40px!important} @media (max-width:759px){html[data-home=v2] body #collect+section#connections{padding-top:32px!important}} html body section.conn>span#join.cn-anc{display:block!important;padding:0!important;margin:0!important;height:0!important;border:0!important} @media (min-width:1000px) and (max-width:1024.98px){ html[data-home=v2] body #garden.top-still .gd-track,html[data-home=v2] body #garden.top-still:not(.gd-static) .gd-track{height:auto!important} html[data-home=v2] body #garden.top-still .gd-stage picture{width:100%!important;max-width:100%!important} html[data-home=v2] body #garden.top-still .ts-grid{grid-template-columns:minmax(0,1fr)!important;justify-items:center} html[data-home=v2] body #garden.top-still .gd-track{width:min(100%,760px)!important;justify-self:center;grid-column:1!important} html[data-home=v2] body #garden.top-still .ts-why{width:min(100%,760px)!important;justify-self:center;grid-column:1!important;justify-content:flex-start!important;max-width:100%!important;padding-top:24px!important;padding-right:100px!important;box-sizing:border-box;align-self:start} html[data-home=v2] body #garden.top-still .gd-bar .gd-open{margin-left:0!important} } /* t32: Velocity thumb in Plant an idea is 1.5x the other section thumbs */ html[data-home=v2] body #suggest.v2-fold>.v2-peek img{width:240px;height:135px} @media (max-width:759px){html[data-home=v2] body #suggest.v2-fold>.v2-peek img{width:168px;height:94.5px}} @media (max-width:359px){html[data-home=v2] body #suggest.v2-fold>.v2-peek img{width:140px;height:78.75px}}