/* Wizbang Sites: designs for one-owner sites (505_looks.sql). html[data-look] is set by core.js from settings.look.
   Each design is a whole point of view: its own type, colors, banner (lookHero() in solo.js) and section treatments,
   built over the shared solo.css so every section still works. The owner's color (--amber) stays the accent.
     gallery    artists: white walls, art hung with museum labels, an elegant serif, one quiet accent
     merch      clothing brands: a streetwear drop, heavy outlines, a condensed poster face, stickers and stamps
     stage      musicians: a gig poster, a spotlit stage, tour dates as ticket stubs, records sliding out of sleeves
     studio     coaches: calm and editorial, sage and paper, an arched portrait, generous pull quotes
     workbench  makers: a plaster workshop wall with a grid, hang-tag products, typewriter prices, a ruler
     bloom      anyone, leaning soft: a fashion serif, a drifting glow, glass cards, pictures that open as you reach them
     forge      anyone, leaning strong: condensed type, steel and bronze, a spotlight, a marquee, numbered sections
     command    veterans, contractors, trades: navy and olive, contour lines, a radar ring, a viewfinder photo */

/* =========================================================================================== GALLERY */
html[data-look="gallery"] {
  --ground: #FBFBFA; --panel: #FFFFFF; --panel-2: #F4F4F2; --line: #E6E6E2; --line-2: #D2D2CC;
  --cream: #1B1B1A; --cream-2: #474744; --muted: #6E6E69; --dim: #92928C;
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif; --body: 'Geist', system-ui, sans-serif;
  --hw: 500; --ht: -0.01em; --radius: 2px; --deep: #1B1B1A;
}
html[data-look="gallery"][data-theme="dark"] { --ground: #121211; --panel: #1A1A19; --panel-2: #20201E; --line: #2C2C2A; --line-2: #3A3A37; --cream: #F1F0EC; --cream-2: #C9C8C2; --muted: #9C9B95; --deep: #0B0B0A; }
html[data-look="gallery"] body { background: var(--ground); }
html[data-look="gallery"] .site-header { background: color-mix(in srgb, var(--ground) 92%, transparent); border-bottom-color: transparent; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html[data-look="gallery"] .site-header .logo-name { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 26px; letter-spacing: 0; }
html[data-look="gallery"] .site-mono { display: none; }
html[data-look="gallery"] .btn { border-radius: 0; font-weight: 500; letter-spacing: .01em; box-shadow: none; }
html[data-look="gallery"] .btn-amber { background: var(--cream); color: var(--ground); }
html[data-look="gallery"] .btn-amber:hover { background: var(--amber); color: var(--on-accent); filter: none; }
html[data-look="gallery"] .btn-ghost { background: transparent; border-color: var(--cream); }
html[data-look="gallery"] .sx-h { font-size: clamp(40px, 5vw, 72px); font-weight: 500; line-height: 1; }
html[data-look="gallery"] .tone-alt { background: var(--ground); }
html[data-look="gallery"] .tone-alt + .tone-alt, html[data-look="gallery"] .tone-base + .tone-base { border-top: 0; }
html[data-look="gallery"] .sx + .sx > .sx-in { background: linear-gradient(var(--cream), var(--cream)) 0 0 / 48px 1px no-repeat; padding-top: clamp(36px, 5vw, 64px); }
html[data-look="gallery"] .tone-ink { background: var(--panel-2); color: var(--cream); }
html[data-look="gallery"] .tone-ink .sx-h, html[data-look="gallery"] .qc-q blockquote { color: var(--cream); }
html[data-look="gallery"] .qc-q blockquote { font-style: italic; font-weight: 500; }
html[data-look="gallery"] .qc-q figcaption { color: var(--muted); }
html[data-look="gallery"] .qc-mark { background: transparent; color: var(--amber); border: 1px solid var(--line-2); }
html[data-look="gallery"] .qc-btn { color: var(--cream); border-color: var(--line-2); }
html[data-look="gallery"] .qc-dot { background: var(--line-2); }
/* the banner */
.lk-gallery { padding: clamp(40px, 6vw, 88px) 0 clamp(40px, 6vw, 80px); background: var(--ground); }
.lk-g-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(32px, 5vw, 80px); align-items: end; }
@media (max-width: 860px) { .lk-g-top { grid-template-columns: 1fr; } }
.lk-gallery .hx-title { font-size: clamp(64px, 11vw, 168px); font-weight: 500; line-height: .86; letter-spacing: -0.02em; max-width: none; }
.lk-gallery .hx-title .rw:last-child > span { font-style: italic; }
.lk-gallery .hx-sub { margin-top: 0; font-size: 18px; }
.lk-gallery .hx-acts { margin-top: 24px; }
.lk-g-wall { margin: clamp(40px, 6vw, 80px) 0 0; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 28px; align-items: end; }
@media (max-width: 860px) { .lk-g-wall { grid-template-columns: 1fr; } }
.lk-g-pic { position: relative; overflow: hidden; background: var(--panel-2); aspect-ratio: 16 / 9; }
.lk-g-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); opacity: 0; transition: transform 2.4s cubic-bezier(.2, .7, .1, 1), opacity 1.4s ease; }
.solo-ready .lk-g-pic img, .solo-still .lk-g-pic img { transform: none; opacity: 1; }
.lk-g-label { display: grid; gap: 4px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); font-size: 13px; color: var(--muted); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.lk-g-label b { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 20px; color: var(--cream); }
/* the shop: work hung with labels instead of product cards */
html[data-look="gallery"] .shp-card { background: transparent; border: 0; box-shadow: none; border-radius: 0; transform: none !important; }
html[data-look="gallery"] .shp-card:hover { box-shadow: none; }
html[data-look="gallery"] .shp-pic { background: var(--panel-2); border-radius: 0; padding: 9%; box-shadow: none; }
html[data-look="gallery"] .shp-pic img { box-shadow: 0 2px 3px rgba(0,0,0,.12), 0 18px 30px -16px rgba(0,0,0,.45); transition: transform .8s cubic-bezier(.2, .7, .1, 1); }
html[data-look="gallery"] .shp-card:hover .shp-pic img { transform: translateY(-4px); }
html[data-look="gallery"] .shp-name b { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 24px; }
html[data-look="gallery"] .shp-txt small { font-size: 13.5px; }
html[data-look="gallery"] .shp-ship { display: none; }
html[data-look="gallery"] .shp-card .shp-badge { background: transparent; color: var(--muted); border: 0; box-shadow: none; font-weight: 500; padding: 0; position: static; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; margin: 14px 0 -4px; }
html[data-look="gallery"] .shp-card .shp-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
html[data-look="gallery"] .shp-card.gone .shp-badge::before { background: #C0392B; }
html[data-look="gallery"] .shp-buy { border-radius: 0; background: transparent; color: var(--cream); border: 1px solid var(--cream); }
html[data-look="gallery"] .shp-buy:hover { background: var(--cream); color: var(--ground); }
html[data-look="gallery"] .shp-price { font-family: var(--body); font-weight: 500; }
/* the salon hang */
html[data-look="gallery"] .gx { columns: 3 300px; column-gap: 28px; }
html[data-look="gallery"] .gx-item { border-radius: 0; margin-bottom: 28px; background: transparent; box-shadow: 0 2px 3px rgba(0,0,0,.1), 0 20px 34px -20px rgba(0,0,0,.5); }
html[data-look="gallery"] .gx-item:hover img { transform: scale(1.02); }
html[data-look="gallery"] :is(.fx-card, .pr-card, .kx-tile, .sc-row) { border-radius: 0; box-shadow: none; }
html[data-look="gallery"] .sux { background: var(--panel-2); color: var(--cream); border-radius: 0; }
html[data-look="gallery"] .sux::before { border-color: color-mix(in srgb, var(--amber) 14%, transparent); }
html[data-look="gallery"] .sux .sx-h { color: var(--cream); }
html[data-look="gallery"] .sux-ico { background: var(--panel); color: var(--amber); }
html[data-look="gallery"] .prs-track { font-family: var(--serif); font-style: italic; }

/* =========================================================================================== MERCH DROP */
html[data-look="merch"] {
  --ground: #F4F4F0; --panel: #FFFFFF; --panel-2: #EAEAE4; --line: #141414; --line-2: #141414;
  --cream: #141414; --cream-2: #3B3B38; --muted: #5E5E59; --dim: #85857F;
  --serif: 'Anton', 'Impact', 'Arial Narrow', sans-serif; --body: 'Space Grotesk', system-ui, sans-serif;
  --hw: 400; --ht: 0; --hs: 100%; --radius: 0px; --deep: #141414; --bw: 2.5px;
}
html[data-look="merch"][data-theme="dark"] { --ground: #141414; --panel: #1E1E1D; --panel-2: #262624; --line: #F4F4F0; --line-2: #F4F4F0; --cream: #F4F4F0; --cream-2: #CFCFC8; --muted: #A6A69F; --deep: #000; }
html[data-look="merch"] body { background: var(--ground); }
html[data-look="merch"] .site-header { background: var(--ground); border-bottom: var(--bw) solid var(--line); }
html[data-look="merch"] .site-header .logo-name { font-family: var(--serif); font-weight: 400; font-size: 26px; letter-spacing: .01em; }
html[data-look="merch"] .site-mono { border-radius: 0; font-family: var(--serif); font-weight: 400; }
html[data-look="merch"] .btn { border-radius: 0; border: var(--bw) solid var(--line); font-weight: 700; box-shadow: 4px 4px 0 var(--line); transition: transform .12s, box-shadow .12s; }
html[data-look="merch"] .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--line); filter: none; }
html[data-look="merch"] .btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--line); }
html[data-look="merch"] .btn-ghost { background: var(--panel); color: var(--cream); }
html[data-look="merch"] .sx-h { font-size: clamp(48px, 7vw, 104px); line-height: .92; max-width: 14ch; }
html[data-look="merch"] .tone-alt { background: var(--panel); }
html[data-look="merch"] .tone-alt + .tone-alt, html[data-look="merch"] .tone-base + .tone-base { border-top: var(--bw) solid var(--line); }
html[data-look="merch"] .sx { border-top: var(--bw) solid var(--line); }
html[data-look="merch"] .tone-ink { background: var(--amber); color: var(--on-accent); }
html[data-look="merch"] .tone-ink .sx-h, html[data-look="merch"] .qc-q blockquote { color: var(--on-accent); }
html[data-look="merch"] .qc-q figcaption { color: var(--on-accent); opacity: .8; }
html[data-look="merch"] .qc-mark { background: var(--line); color: var(--ground); border-radius: 0; }
html[data-look="merch"] .qc-btn { border-radius: 0; border: var(--bw) solid var(--on-accent); color: var(--on-accent); }
html[data-look="merch"] .qc-dot { background: color-mix(in srgb, var(--on-accent) 35%, transparent); border-radius: 0; }
html[data-look="merch"] .qc-dot[aria-current="true"] { background: var(--on-accent); }
html[data-look="merch"] .nb { font-family: var(--body); font-weight: 700; border-bottom: var(--bw) solid var(--line); }
/* the banner */
.lk-merch { padding: clamp(28px, 4vw, 56px) 0 0; background: var(--ground); }
.lk-m-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding-bottom: clamp(36px, 5vw, 64px); }
@media (max-width: 860px) { .lk-m-grid { grid-template-columns: 1fr; } }
.lk-m-name { display: grid; font-size: clamp(76px, 13.5vw, 210px); line-height: .84; letter-spacing: -0.005em; max-width: none; color: var(--cream); }
.lk-m-w { display: block; transform: translateY(40%); opacity: 0; transition: transform .7s cubic-bezier(.2, .9, .2, 1.15), opacity .5s; transition-delay: calc(var(--i) * 90ms + 60ms); }
.lk-m-w:nth-child(even) { color: var(--amber); -webkit-text-stroke: 0; }
.solo-ready .lk-m-w, .solo-still .lk-m-w { transform: none; opacity: 1; }
.lk-merch .hx-sub { font-size: 18px; max-width: 30em; color: var(--cream-2); }
.lk-m-block { position: relative; background: var(--amber); border: var(--bw) solid var(--line); box-shadow: 10px 10px 0 var(--line); aspect-ratio: 1 / 1.05; overflow: visible; }
.lk-m-pic { position: absolute; inset: 0; overflow: hidden; }
.lk-m-pic { inset: 14px; border: var(--bw) solid var(--line); }
.lk-m-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.lk-m-block:hover .lk-m-pic img { transform: scale(1.04) rotate(-1deg); }
.lk-m-sticker { position: absolute; width: 132px; height: 132px; left: -38px; top: -34px; z-index: 2; animation: lkSpin 14s linear infinite; }
.lk-m-sticker svg { width: 100%; height: 100%; }
.lk-m-sticker circle { fill: var(--cream); }
.lk-m-sticker text { fill: var(--ground); font: 700 13.5px var(--body); letter-spacing: .12em; text-transform: none; }
@keyframes lkSpin { to { transform: rotate(360deg); } }
.lk-merch .tk { background: var(--cream); color: var(--ground); border-top: var(--bw) solid var(--line); font-family: var(--serif); }
.lk-merch .tk-run span { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 32px); letter-spacing: .02em; }
.lk-merch .tk-dot { color: var(--amber); }
/* the drop countdown */
html[data-look="merch"] .sx-countdown { background: var(--amber); color: var(--on-accent); }
html[data-look="merch"] .sx-countdown .sx-h { color: var(--on-accent); }
html[data-look="merch"] .cd-n { background: var(--panel); color: var(--cream); border: var(--bw) solid var(--line); border-radius: 0; box-shadow: 6px 6px 0 var(--line); font-family: var(--serif); }
html[data-look="merch"] .cd-n b, html[data-look="merch"] .cd-n strong { font-family: var(--serif); font-weight: 400; }
/* the shop: hard-edged cards, tilted stickers, a stamp when it's gone */
html[data-look="merch"] .shp-card { background: var(--panel); border: var(--bw) solid var(--line); border-radius: 0; box-shadow: 6px 6px 0 var(--line); transition: transform .15s, box-shadow .15s; }
html[data-look="merch"] .shp-card:hover { transform: translate(-3px, -3px) !important; box-shadow: 10px 10px 0 var(--amber); }
html[data-look="merch"] .shp-pic { border-radius: 0; border-bottom: var(--bw) solid var(--line); }
html[data-look="merch"] .shp-pic img { transition: transform .4s ease; }
html[data-look="merch"] .shp-card:hover .shp-pic img { transform: scale(1.06) rotate(-1.5deg); }
html[data-look="merch"] .shp-name b { font-family: var(--serif); font-weight: 400; font-size: 26px; letter-spacing: .01em; }
html[data-look="merch"] .shp-price { font-family: var(--serif); font-weight: 400; font-size: 30px; }
html[data-look="merch"] .shp-card .shp-badge { border-radius: 0; background: var(--cream); color: var(--ground); border: 0; transform: rotate(-4deg); font-weight: 700; box-shadow: 3px 3px 0 var(--amber); }
html[data-look="merch"] .shp-buy { border-radius: 0; border: var(--bw) solid var(--line); box-shadow: 3px 3px 0 var(--line); font-weight: 700; }
html[data-look="merch"] .shp-card.gone .shp-pic::after { content: 'Sold out'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-12deg); white-space: nowrap; padding: 6px 18px; border: 4px solid #D7261E; color: #D7261E;
  font: 400 clamp(28px, 3vw, 40px)/1 var(--serif); background: color-mix(in srgb, var(--panel) 70%, transparent); }
html[data-look="merch"] .shp-card.gone .shp-pic img { filter: grayscale(.9) contrast(.9); }
html[data-look="merch"] .stx-n, html[data-look="merch"] .sp-n { font-family: var(--serif); font-weight: 400; }
html[data-look="merch"] :is(.fx-card, .pr-card, .kx-tile, .sc-row, .fq-item, .sux) { border-radius: 0; border: var(--bw) solid var(--line); box-shadow: 6px 6px 0 var(--line); }
html[data-look="merch"] .sux { background: var(--cream); color: var(--ground); }
html[data-look="merch"] .sux .sx-h { color: var(--ground); }
html[data-look="merch"] .sux::before { border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
html[data-look="merch"] .input, html[data-look="merch"] input, html[data-look="merch"] textarea, html[data-look="merch"] select { border-radius: 0 !important; }

/* =========================================================================================== STAGE */
html[data-look="stage"] {
  --ground: #F1EEF4; --panel: #FFFFFF; --panel-2: #E8E3EE; --line: #DCD4E4; --line-2: #C7BCD3;
  --cream: #20142B; --cream-2: #4A3D57; --muted: #6E6279; --dim: #958A9F;
  --serif: 'Big Shoulders Display', 'Arial Narrow', sans-serif; --body: 'Geist', system-ui, sans-serif;
  --hw: 900; --ht: 0; --radius: 10px; --deep: #1B1024;
}
html[data-look="stage"][data-theme="dark"] { --ground: #140B1B; --panel: #1E1328; --panel-2: #261A31; --line: #33253F; --line-2: #45354F; --cream: #F4EEF8; --cream-2: #CFC4D9; --muted: #A497B0; --deep: #0C0612; }
html[data-look="stage"] body { background: var(--ground); }
html[data-look="stage"] .site-header .logo-name { font-family: var(--serif); font-weight: 800; font-size: 28px; text-transform: none; letter-spacing: .01em; }
html[data-look="stage"] .sx-h { font-size: clamp(54px, 7.5vw, 112px); line-height: .88; letter-spacing: 0; }
html[data-look="stage"] .btn { border-radius: 999px; font-weight: 600; }
html[data-look="stage"] .tone-ink { background: var(--deep); }
/* the banner */
.lk-stage { min-height: min(92vh, 860px); display: flex; flex-direction: column; justify-content: flex-end; background: var(--deep); color: #fff; --sx: 64%; --sy: 30%; }
.lk-s-bg { position: absolute; inset: 0; z-index: -1; }
.lk-s-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; filter: grayscale(1) contrast(1.15) brightness(.9); transform: scale(1.08); transition: transform 3s cubic-bezier(.2, .7, .1, 1); }
.solo-ready .lk-s-bg img, .solo-still .lk-s-bg img { transform: scale(1); }
.lk-s-tint { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--deep) 50%, transparent) 0%, transparent 30%, color-mix(in srgb, var(--deep) 92%, transparent) 88%), color-mix(in srgb, var(--amber) 72%, #3A1250); mix-blend-mode: multiply; }
.lk-s-spot { position: absolute; inset: 0; background: radial-gradient(circle at var(--sx) var(--sy), rgba(255, 236, 200, .42), transparent 34%); mix-blend-mode: screen; transition: background .2s; }
.lk-s-in { padding: 140px 0 clamp(48px, 6vw, 80px); }
.lk-stage .hx-title { color: #fff; font-size: clamp(88px, 15vw, 240px); line-height: .8; font-weight: 900; max-width: 8ch; text-shadow: 0 6px 40px rgba(0,0,0,.35); }
.lk-stage .hx-sub { color: rgba(255,255,255,.86); max-width: 32em; }
.lk-stage .btn-ghost { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lk-stage .lk-where { display: inline-flex; gap: 8px; align-items: center; margin-top: 22px; color: rgba(255,255,255,.75); font-size: 15px; }
.lk-s-now { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 22px; padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); font-weight: 600; font-size: 15px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lk-eq { display: inline-flex; gap: 3px; align-items: flex-end; height: 16px; }
.lk-eq i { width: 3px; height: 100%; border-radius: 2px; background: var(--amber); transform-origin: bottom; animation: lkEq 1s ease-in-out infinite; }
.lk-eq i:nth-child(2) { animation-delay: -.3s; } .lk-eq i:nth-child(3) { animation-delay: -.6s; } .lk-eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes lkEq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.lk-stage .tk { background: var(--amber); color: var(--on-accent); }
.lk-stage .tk-run span { font-family: var(--serif); font-weight: 800; font-size: clamp(22px, 2.4vw, 30px); }
/* tour dates as ticket stubs */
html[data-look="stage"] .sc-row { position: relative; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(32, 20, 43, .06); overflow: hidden; }
html[data-look="stage"] .sc-date { font-family: var(--serif); font-weight: 900; border-right: 2px dashed var(--line-2); }
html[data-look="stage"] .sc-name { font-family: var(--serif); font-weight: 800; font-size: clamp(24px, 2.4vw, 32px); }
html[data-look="stage"] .sc-row::before, html[data-look="stage"] .sc-row::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--ground); left: var(--stub, 108px); }
html[data-look="stage"] .sc-row::before { top: -9px; } html[data-look="stage"] .sc-row::after { bottom: -9px; }
html[data-look="stage"] .tone-alt .sc-row::before, html[data-look="stage"] .tone-alt .sc-row::after { background: var(--panel); }
html[data-look="stage"] .tone-alt .sc-row { background: var(--ground); }
/* records slide out of their sleeves */
html[data-look="stage"] .shp-card { border-radius: 14px; }
html[data-look="stage"] .shp-card[data-cat="Records" i] .shp-pic { overflow: visible; background: transparent; }
html[data-look="stage"] .shp-card[data-cat="Records" i] .shp-pic::before { content: ''; position: absolute; inset: 4% 4% 4% 4%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, var(--amber) 0 13%, #111 13.5% 15%, #1a1a1a 15.5% 30%, #222 30.5% 31%, #1a1a1a 31.5% 46%, #262626 46.5% 47%, #151515 47.5%);
  transform: translateX(12%); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
html[data-look="stage"] .shp-card[data-cat="Records" i] .shp-pic img { position: relative; z-index: 1; box-shadow: 0 14px 24px -14px rgba(0,0,0,.6); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
html[data-look="stage"] .shp-card[data-cat="Records" i]:hover .shp-pic::before { transform: translateX(30%) rotate(120deg); }
html[data-look="stage"] .shp-card[data-cat="Records" i]:hover .shp-pic img { transform: translateX(-8%); }
html[data-look="stage"] .shp-name b { font-family: var(--serif); font-weight: 800; font-size: 25px; }
html[data-look="stage"] .kx-tile { border-radius: 999px; padding: 16px 22px 16px 16px; }
html[data-look="stage"] .stx-n { font-family: var(--serif); font-weight: 900; }

/* =========================================================================================== STUDIO */
html[data-look="studio"] {
  --ground: #F2F4EF; --panel: #FFFFFF; --panel-2: #E9EDE5; --line: #DCE2D6; --line-2: #C8D1C0;
  --cream: #1F2A23; --cream-2: #46534A; --muted: #66726A; --dim: #8D978F;
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif; --body: 'Figtree', system-ui, sans-serif;
  --hw: 400; --ht: -0.02em; --radius: 22px; --deep: #1F2A23;
}
html[data-look="studio"][data-theme="dark"] { --ground: #121813; --panel: #19211B; --panel-2: #1F2922; --line: #2A352D; --line-2: #36433A; --cream: #EEF2EB; --cream-2: #C5CEC3; --muted: #97A297; --deep: #0B100C; }
html[data-look="studio"] body { background: var(--ground); }
html[data-look="studio"] .site-header { background: color-mix(in srgb, var(--ground) 90%, transparent); border-bottom-color: transparent; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html[data-look="studio"] .site-header .logo-name { font-family: var(--serif); font-weight: 500; font-size: 24px; letter-spacing: -0.01em; }
html[data-look="studio"] .site-mono { border-radius: 50%; }
html[data-look="studio"] .btn { border-radius: 999px; font-weight: 600; }
html[data-look="studio"] .sx-h { font-weight: 400; font-size: clamp(40px, 5.2vw, 70px); line-height: 1.02; }
html[data-look="studio"] .tone-alt { background: var(--panel); }
html[data-look="studio"] .tone-ink { background: var(--panel-2); color: var(--cream); }
html[data-look="studio"] .tone-ink .sx-h, html[data-look="studio"] .qc-q blockquote { color: var(--cream); }
html[data-look="studio"] .qc-q blockquote { font-weight: 400; font-style: italic; font-size: clamp(30px, 3.6vw, 50px); line-height: 1.18; }
html[data-look="studio"] .qc-q figcaption { color: var(--muted); }
html[data-look="studio"] .qc-btn { color: var(--cream); border-color: var(--line-2); }
html[data-look="studio"] .qc-dot { background: var(--line-2); }
html[data-look="studio"] :is(.fx-card, .pr-card, .kx-tile, .sc-row, .shp-card) { border-radius: 24px; border-color: var(--line); box-shadow: 0 1px 2px rgba(31,42,35,.04), 0 18px 40px -28px rgba(31,42,35,.35); }
html[data-look="studio"] .pr-card { transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
html[data-look="studio"] .pr-card:hover { transform: translateY(-6px); }
html[data-look="studio"] .pr-price { font-family: var(--serif); font-weight: 400; }
html[data-look="studio"] .stx-n { font-family: var(--serif); font-weight: 400; font-style: italic; }
html[data-look="studio"] .sux { border-radius: 32px; }
/* the banner */
.lk-studio { padding: clamp(36px, 5vw, 72px) 0 clamp(56px, 7vw, 104px); background: var(--ground); }
.lk-st-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
@media (max-width: 860px) { .lk-st-grid { grid-template-columns: 1fr; } .lk-st-pic { order: -1; max-width: 420px; } }
.lk-studio .hx-title { font-size: clamp(60px, 8.6vw, 128px); font-weight: 400; line-height: .92; letter-spacing: -0.035em; max-width: 9ch; }
.lk-studio .hx-title .rw:last-child > span { font-style: italic; color: var(--amber); }
.lk-studio .lk-where { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 7px 14px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: 14px; color: var(--cream-2); }
.lk-st-pic { position: relative; justify-self: center; width: 100%; max-width: 480px; }
.lk-st-sun { position: absolute; width: 74%; aspect-ratio: 1; border-radius: 50%; right: -8%; top: -6%; background: color-mix(in srgb, var(--amber) 22%, var(--ground)); animation: lkBreathe 9s ease-in-out infinite; }
@keyframes lkBreathe { 50% { transform: scale(1.06) translate(-2%, 2%); } }
.lk-st-arch { position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px 28px 28px; overflow: hidden; background: var(--panel-2); box-shadow: 0 30px 60px -36px rgba(31,42,35,.55); }
.lk-st-arch img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 2.2s cubic-bezier(.2, .7, .1, 1); }
.solo-ready .lk-st-arch img, .solo-still .lk-st-arch img { transform: none; }
.lk-st-note { position: absolute; left: -10%; bottom: 9%; padding: 14px 18px; border-radius: 18px; background: var(--panel); box-shadow: 0 20px 40px -24px rgba(31,42,35,.5); font-weight: 600; font-size: 15px; max-width: 80%; }
@media (max-width: 860px) { .lk-st-note { left: 4%; } }
.lk-st-note .lk-status { display: inline-flex; align-items: center; gap: 10px; }
/* steps as a path */
html[data-look="studio"] .sp-n { font-family: var(--serif); font-style: italic; font-weight: 400; background: transparent; color: var(--amber); border: 1px solid var(--line-2); }

/* =========================================================================================== WORKBENCH */
html[data-look="workbench"] {
  --ground: #E9E8E3; --panel: #F6F5F1; --panel-2: #DEDCD5; --line: #C9C6BC; --line-2: #B3AFA3;
  --cream: #24221F; --cream-2: #4B4842; --muted: #6C685F; --dim: #8F8A80;
  --serif: 'Archivo', 'Arial Narrow', sans-serif; --body: 'Archivo', system-ui, sans-serif; --mono: 'Courier Prime', 'Courier New', monospace;
  --hw: 800; --hs: 72%; --ht: -0.01em; --radius: 4px; --deep: #2A2723; --kraft: #C9A877;
}
html[data-look="workbench"][data-theme="dark"] { --ground: #1C1B19; --panel: #24231F; --panel-2: #2C2A26; --line: #3A3832; --line-2: #4A4740; --cream: #EFEDE7; --cream-2: #CBC7BD; --muted: #A09B90; --deep: #111; --kraft: #8C744F; }
html[data-look="workbench"] body { background-color: var(--ground);
  background-image: linear-gradient(color-mix(in srgb, var(--cream) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--cream) 5%, transparent) 1px, transparent 1px);
  background-size: 28px 28px; }
html[data-look="workbench"] :is(.tone-base, .tone-alt, .tone-plain) { background: transparent; }
html[data-look="workbench"] .tone-alt + .tone-alt, html[data-look="workbench"] .tone-base + .tone-base { border-top: 0; }
html[data-look="workbench"] .site-header { background: color-mix(in srgb, var(--ground) 94%, transparent); border-bottom: 1px dashed var(--line-2); }
html[data-look="workbench"] .site-header .logo-name { font-family: var(--serif); font-stretch: 72%; font-weight: 800; font-size: 26px; }
html[data-look="workbench"] .btn { border-radius: 4px; font-weight: 700; }
html[data-look="workbench"] .sx-h { font-size: clamp(46px, 6.4vw, 96px); line-height: .9; font-stretch: 72%; }
html[data-look="workbench"] .sx-head::after { content: ''; display: block; flex-basis: 100%; height: 12px; margin-top: 8px;
  background: repeating-linear-gradient(90deg, var(--cream-2) 0 1px, transparent 1px 12px), repeating-linear-gradient(90deg, var(--cream-2) 0 1px, transparent 1px 60px);
  background-size: 100% 6px, 100% 12px; background-repeat: no-repeat; background-position: 0 0, 0 0; opacity: .35; }
html[data-look="workbench"] .nb { background: var(--kraft); color: #2A2116; font-family: var(--mono); font-weight: 700; }
html[data-look="workbench"] .tone-ink { background: var(--deep); }
/* the banner */
.lk-workbench { padding: clamp(32px, 5vw, 72px) 0 0; }
.lk-w-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-bottom: clamp(44px, 6vw, 80px); }
@media (max-width: 860px) { .lk-w-grid { grid-template-columns: 1fr; } }
.lk-workbench .hx-title { font-size: clamp(64px, 10vw, 152px); font-stretch: 72%; font-weight: 800; line-height: .86; max-width: 8ch; }
.lk-workbench .lk-status { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; font-family: var(--mono); font-size: 15px; }
.lk-w-board { position: relative; padding: 18px; }
.lk-w-pic { position: relative; background: #fff; padding: 12px 12px 44px; box-shadow: 0 2px 3px rgba(0,0,0,.12), 0 24px 40px -24px rgba(0,0,0,.5); transform: rotate(2deg); transition: transform .5s cubic-bezier(.2, .8, .2, 1.3); }
.lk-w-board:hover .lk-w-pic { transform: rotate(0deg) translateY(-4px); }
.lk-w-pic img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.lk-w-pic .tape { position: absolute; width: 110px; height: 30px; background: color-mix(in srgb, var(--kraft) 70%, rgba(255,255,255,.4)); opacity: .9; z-index: 2; }
.lk-w-pic .tape.t1 { left: -26px; top: 14px; transform: rotate(-38deg); }
.lk-w-pic .tape.t2 { right: -26px; top: 14px; transform: rotate(38deg); }
.lk-w-stamp { position: absolute; width: 138px; height: 138px; right: -6px; bottom: -14px; transform: rotate(-14deg); opacity: .88; z-index: 3; }
.lk-w-stamp svg { width: 100%; height: 100%; overflow: visible; }
.lk-w-stamp circle { fill: none; stroke: var(--amber); stroke-width: 3; }
.lk-w-stamp text { fill: var(--amber); font: 700 11px var(--mono); letter-spacing: .06em; }
.lk-w-ruler { height: 34px; border-top: 2px solid var(--cream); background:
  repeating-linear-gradient(90deg, var(--cream) 0 2px, transparent 2px 100px) 0 0 / 100% 22px no-repeat,
  repeating-linear-gradient(90deg, var(--cream) 0 1px, transparent 1px 20px) 0 0 / 100% 12px no-repeat,
  var(--kraft); }
/* products on hang tags */
html[data-look="workbench"] .shp-card { background: var(--panel); border: 1px solid var(--line-2); border-radius: 4px 4px 4px 4px; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 14px 26px -18px rgba(0,0,0,.4); }
html[data-look="workbench"] .shp-pic { border-radius: 2px; margin: 10px 10px 0; }
html[data-look="workbench"] .shp-txt { position: relative; }
html[data-look="workbench"] .shp-foot { position: relative; margin: 0 10px 10px; padding: 12px 14px; background: var(--kraft); color: #2A2116; border-radius: 4px 14px 14px 4px; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); padding-right: 30px; }
html[data-look="workbench"] .shp-price { font-family: var(--mono); font-weight: 700; font-size: 22px; color: #2A2116; }
html[data-look="workbench"] .shp-buy { background: #2A2116; color: #F6F5F1; border-radius: 3px; }
html[data-look="workbench"] .shp-name b { font-family: var(--serif); font-stretch: 72%; font-weight: 800; font-size: 25px; }
html[data-look="workbench"] .shp-txt small, html[data-look="workbench"] .shp-ship { font-family: var(--mono); font-size: 13.5px; }
html[data-look="workbench"] .shp-card .shp-badge { font-family: var(--mono); font-weight: 700; border-radius: 2px; background: var(--panel); color: var(--amber); border: 2px solid var(--amber); transform: rotate(-3deg); box-shadow: none; }
/* steps along a ruler */
html[data-look="workbench"] .sp-n { font-family: var(--mono); font-weight: 700; border-radius: 3px; background: var(--kraft); color: #2A2116; }
html[data-look="workbench"] :is(.fx-card, .pr-card, .kx-tile, .sc-row, .fq-item) { border-radius: 4px; background: var(--panel); }
html[data-look="workbench"] .sc-date { font-family: var(--mono); }
html[data-look="workbench"] .gx-item { border-radius: 2px; background: #fff; padding: 10px 10px 30px; box-shadow: 0 2px 3px rgba(0,0,0,.1), 0 18px 30px -20px rgba(0,0,0,.45); }
html[data-look="workbench"] .gx-item:nth-child(odd) { transform: rotate(-1.2deg); } html[data-look="workbench"] .gx-item:nth-child(even) { transform: rotate(1deg); }
html[data-look="workbench"] .sux { background: var(--deep); border-radius: 6px; }

/* =========================================================================================== BLOOM */
/* Soft and polished, for anyone: a fashion-magazine serif, a slow glow behind everything, frosted-glass cards,
   pictures that open as you reach them, a glow that trails the pointer (lookFx() in solo.js). */
html[data-look="bloom"] {
  --ground: #FBF7F4; --panel: #FFFFFF; --panel-2: #F6EDE9; --line: #EFE2DC; --line-2: #E3CFC7;
  --cream: #2A1D21; --cream-2: #5B474B; --muted: #87726F; --dim: #A99590;
  --serif: 'Bodoni Moda', 'Didot', Georgia, serif; --body: 'Instrument Sans', system-ui, sans-serif;
  --hw: 500; --ht: -0.025em; --radius: 20px; --deep: #2A1D21;
  --blush: #F4D9D3; --lilac: #E7DDF2; --peach: #F9E3CF; --glass: rgba(255,255,255,.58); --glass-line: rgba(255,255,255,.85); --glow: rgba(120,60,70,.28);
}
html[data-look="bloom"][data-theme="dark"] {
  --ground: #141012; --panel: #1D1619; --panel-2: #251C20; --line: #33282C; --line-2: #45373C;
  --cream: #F8EFF0; --cream-2: #D8C8CA; --muted: #A99799; --dim: #85777A; --deep: #0D090A;
  --blush: #4A2932; --lilac: #2F2645; --peach: #45301F; --glass: rgba(38,28,32,.55); --glass-line: rgba(255,255,255,.09); --glow: rgba(0,0,0,.55);
}
html[data-look="bloom"] body { background-color: var(--ground);
  background-image: radial-gradient(55vw 45vh at 92% -8%, color-mix(in srgb, var(--blush) 80%, transparent), transparent 70%),
    radial-gradient(45vw 40vh at -8% 38%, color-mix(in srgb, var(--lilac) 70%, transparent), transparent 70%),
    radial-gradient(50vw 40vh at 70% 105%, color-mix(in srgb, var(--peach) 70%, transparent), transparent 70%);
  background-attachment: fixed; }
html[data-look="bloom"] :is(.tone-base, .tone-plain) { background: transparent; }
html[data-look="bloom"] .tone-alt { background: color-mix(in srgb, var(--panel) 45%, transparent); }
html[data-look="bloom"] .tone-alt + .tone-alt, html[data-look="bloom"] .tone-base + .tone-base { border-top: 0; }
html[data-look="bloom"] .site-header { background: color-mix(in srgb, var(--ground) 70%, transparent); border-bottom-color: transparent; -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
html[data-look="bloom"] .site-header .logo-name { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 25px; letter-spacing: -0.01em; }
html[data-look="bloom"] .site-mono { border-radius: 50%; }
html[data-look="bloom"] .btn { border-radius: 999px; font-weight: 600; letter-spacing: .005em; position: relative; overflow: hidden; transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s, background .3s, color .3s; }
html[data-look="bloom"] .btn-amber { background: linear-gradient(120deg, var(--amber), color-mix(in srgb, var(--amber) 62%, #E7A9C0)); color: var(--on-accent); box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--amber) 80%, transparent); }
html[data-look="bloom"] .btn-amber::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .9s cubic-bezier(.2, .7, .1, 1); }
html[data-look="bloom"] .btn-amber:hover { transform: translateY(-2px); filter: none; box-shadow: 0 20px 40px -16px color-mix(in srgb, var(--amber) 90%, transparent); }
html[data-look="bloom"] .btn-amber:hover::after { transform: translateX(120%); }
html[data-look="bloom"] .btn-ghost { background: var(--glass); border-color: var(--glass-line); color: var(--cream); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html[data-look="bloom"] .btn-ghost:hover { transform: translateY(-2px); }
html[data-look="bloom"] .sx-h { font-weight: 500; font-size: clamp(42px, 5.6vw, 80px); line-height: 1; letter-spacing: -0.03em; }
html[data-look="bloom"] .sx-h::before { content: ''; display: block; width: 56px; height: 1px; margin-bottom: 22px; background: linear-gradient(90deg, var(--amber), transparent); }
/* glass cards that lift */
html[data-look="bloom"] :is(.fx-card, .pr-card, .kx-tile, .sc-row, .shp-card, .rv-card, .mb-card, .cl-card, .co-card) {
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 26px; -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 30px 60px -40px var(--glow); }
html[data-look="bloom"] :is(.pr-card, .shp-card, .rv-card, .co-card) { transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .6s; }
html[data-look="bloom"] :is(.pr-card, .shp-card, .rv-card, .co-card):hover { transform: translateY(-8px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 40px 70px -36px var(--glow); }
html[data-look="bloom"] .pr-card.feat { background: linear-gradient(160deg, var(--deep), color-mix(in srgb, var(--amber) 35%, var(--deep))); border-color: transparent; }
html[data-look="bloom"] .pr-price b, html[data-look="bloom"] .stx-n, html[data-look="bloom"] .shp-price { font-family: var(--serif); font-weight: 500; }
html[data-look="bloom"] .pr-tag { border-radius: 999px; }
html[data-look="bloom"] .shp-pic { border-radius: 20px; overflow: hidden; }
html[data-look="bloom"] .shp-pic img { transition: transform 1.2s cubic-bezier(.2, .7, .1, 1); }
html[data-look="bloom"] .shp-card:hover .shp-pic img { transform: scale(1.06); }
html[data-look="bloom"] .shp-name b { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.015em; }
html[data-look="bloom"] .shp-card .shp-badge { border-radius: 999px; background: var(--glass); color: var(--cream); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: none; }
html[data-look="bloom"] .gx-item, html[data-look="bloom"] .tx2-pic { border-radius: 28px; }
html[data-look="bloom"] .tx2-pic { border-radius: 999px 999px 28px 28px; }
html[data-look="bloom"] .tone-ink { background: linear-gradient(135deg, var(--blush), var(--lilac) 60%, var(--peach)); color: var(--cream); }
html[data-look="bloom"] .tone-ink .sx-h, html[data-look="bloom"] .qc-q blockquote { color: var(--cream); }
html[data-look="bloom"] .qc-q blockquote { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(30px, 3.8vw, 54px); line-height: 1.16; }
html[data-look="bloom"] .qc-q figcaption { color: var(--cream-2); }
html[data-look="bloom"] .qc-btn { color: var(--cream); border-color: color-mix(in srgb, var(--cream) 25%, transparent); }
html[data-look="bloom"] .qc-dot { background: color-mix(in srgb, var(--cream) 25%, transparent); }
html[data-look="bloom"] .sux { border-radius: 36px; background: linear-gradient(135deg, var(--amber), color-mix(in srgb, var(--amber) 55%, #B9A0DC)); }
html[data-look="bloom"] .sux::before { border-color: rgba(255,255,255,.14); filter: blur(2px); }
html[data-look="bloom"] .sp-n { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 24px; background: var(--glass); color: var(--amber); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html[data-look="bloom"] .sp li:first-child .sp-n { background: var(--amber); color: var(--on-accent); }
html[data-look="bloom"] .fq-item summary { font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 2vw, 25px); letter-spacing: -0.02em; }
html[data-look="bloom"] .sc-date b { font-family: var(--serif); font-weight: 500; }
html[data-look="bloom"] .nb { background: linear-gradient(90deg, var(--blush), var(--lilac)); color: var(--cream); }
html[data-look="bloom"] .tk { background: var(--glass); border-top: 1px solid var(--glass-line); color: var(--cream); }
html[data-look="bloom"] .tk-run { font-style: italic; }
html[data-look="bloom"] .tk-dot { color: var(--amber); }
/* the banner */
.lk-bloom { position: relative; overflow: clip; padding: clamp(36px, 6vw, 96px) 0 clamp(56px, 7vw, 110px); }
.lk-b-aura { position: absolute; inset: 0; pointer-events: none; }
.lk-b-aura i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .8; animation: lkDrift 24s ease-in-out infinite alternate; }
.lk-b-aura i:nth-child(1) { width: 42vw; height: 42vw; right: -8vw; top: -12vw; background: color-mix(in srgb, var(--amber) 30%, var(--blush)); }
.lk-b-aura i:nth-child(2) { width: 34vw; height: 34vw; left: -10vw; top: 20%; background: var(--lilac); animation-duration: 30s; animation-delay: -8s; }
.lk-b-aura i:nth-child(3) { width: 30vw; height: 30vw; left: 38%; bottom: -14vw; background: var(--peach); animation-duration: 27s; animation-delay: -14s; }
@keyframes lkDrift { 33% { transform: translate(4vw, 3vw) scale(1.08); } 66% { transform: translate(-3vw, 5vw) scale(.94); } 100% { transform: translate(2vw, -3vw) scale(1.04); } }
.lk-b-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
@media (max-width: 860px) { .lk-b-grid { grid-template-columns: 1fr; } .lk-b-pic { order: -1; max-width: 360px; } }
.lk-bloom .hx-title { font-size: clamp(62px, 9.4vw, 148px); font-weight: 500; line-height: .9; letter-spacing: -0.04em; max-width: 9ch; }
.lk-bloom .hx-title .rw:last-child > span { font-style: italic; padding-right: .06em; background: linear-gradient(100deg, var(--amber), color-mix(in srgb, var(--amber) 45%, #B793D8)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lk-bloom .hx-sub { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--cream-2); max-width: 30em; margin-top: 26px; }
.lk-bloom .hx-acts { margin-top: 32px; }
.lk-b-pic { position: relative; justify-self: center; width: 100%; max-width: 480px; perspective: 1200px; }
.lk-b-oval { position: relative; aspect-ratio: 4 / 5; border-radius: 999px; overflow: hidden; background: var(--panel-2);
  box-shadow: 0 50px 90px -50px var(--glow); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(calc(var(--p, 0) * -48px));
  clip-path: inset(100% 0 0 0 round 999px); transition: clip-path 1.7s cubic-bezier(.75, 0, .2, 1) .15s, transform .9s cubic-bezier(.2, .8, .2, 1); }
.lk-b-oval img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); transition: transform 2.6s cubic-bezier(.2, .7, .1, 1) .15s; }
.solo-ready .lk-b-oval, .solo-still .lk-b-oval { clip-path: inset(0 0 0 0 round 999px); }
.solo-ready .lk-b-oval img, .solo-still .lk-b-oval img { transform: none; }
.lk-b-ring { position: absolute; width: 42%; aspect-ratio: 1; right: -10%; top: -6%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--amber) 55%, transparent); z-index: -1; animation: lkTurn 22s linear infinite; }
.lk-b-ring::after { content: ''; position: absolute; width: 12px; height: 12px; border-radius: 50%; left: 50%; top: -6px; margin-left: -6px; background: var(--amber); box-shadow: 0 0 18px var(--amber); }
@keyframes lkTurn { to { transform: rotate(360deg); } }
.lk-b-glass { position: absolute; left: -14%; bottom: 12%; display: grid; gap: 6px; padding: 16px 20px; border-radius: 22px; background: var(--glass); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); box-shadow: 0 24px 50px -28px var(--glow); font-size: 15px; font-weight: 600; color: var(--cream); max-width: 78%; animation: lkFloat 7s ease-in-out infinite; }
@media (max-width: 860px) { .lk-b-glass { left: 4%; bottom: 5%; } }
.lk-b-glass .lk-status, .lk-b-glass .lk-where { display: inline-flex; align-items: center; gap: 9px; }
.lk-b-glass .lk-where { color: var(--cream-2); font-weight: 500; }
@keyframes lkFloat { 50% { transform: translateY(-10px); } }
.lk-b-cursor { position: fixed; left: 0; top: 0; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; pointer-events: none; z-index: 40; opacity: 0; transition: opacity .8s;
  background: radial-gradient(circle, color-mix(in srgb, var(--amber) 16%, transparent), transparent 62%); mix-blend-mode: multiply; }
html[data-theme="dark"] .lk-b-cursor { mix-blend-mode: screen; background: radial-gradient(circle, color-mix(in srgb, var(--amber) 20%, transparent), transparent 62%); }
.lk-b-cursor.on { opacity: 1; }

/* =========================================================================================== FORGE */
/* Bold and strong, for anyone: condensed type, steel and bronze (the owner's color), numbered sections, a photo in
   black and white with color under a spotlight, a marquee, buttons that lean toward the pointer, lit cards. */
html[data-look="forge"] {
  --ground: #EDECE8; --panel: #F8F7F4; --panel-2: #E3E1DC; --line: #D3D0C9; --line-2: #BDB9B0;
  --cream: #121315; --cream-2: #3D3F43; --muted: #66686C; --dim: #8B8D91;
  --serif: 'Barlow Condensed', 'Arial Narrow', sans-serif; --body: 'Inter Tight', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
  --hw: 800; --ht: -0.01em; --radius: 6px; --deep: #111214;
}
html[data-look="forge"][data-theme="dark"] {
  --ground: #0D0E10; --panel: #16171A; --panel-2: #1C1E21; --line: #282A2E; --line-2: #383A3F;
  --cream: #EEECE7; --cream-2: #BEBBB4; --muted: #8E8C87; --dim: #6E6D69; --deep: #08090A;
}
html[data-look="forge"] body { background-color: var(--ground);
  background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--cream) 5%, transparent) 0 1px, transparent 1px calc(100% / 6)); }
html[data-look="forge"] main.solo { counter-reset: lkf; }
html[data-look="forge"] :is(.tone-base, .tone-plain) { background: transparent; }
html[data-look="forge"] .tone-alt { background: color-mix(in srgb, var(--panel-2) 70%, transparent); }
html[data-look="forge"] .tone-alt + .tone-alt, html[data-look="forge"] .tone-base + .tone-base { border-top: 0; }
html[data-look="forge"] .sx + .sx { border-top: 1px solid var(--line); }
html[data-look="forge"] .site-header .logo-name { font-family: var(--serif); font-style: italic; font-weight: 800; font-size: 28px; letter-spacing: -0.01em; }
html[data-look="forge"] .site-mono { border-radius: 4px; }
html[data-look="forge"] .btn { border-radius: 4px; font-weight: 700; letter-spacing: .01em; transition: transform .35s cubic-bezier(.2, .9, .3, 1.3), background .25s, color .25s, box-shadow .25s; }
html[data-look="forge"] .btn-amber { box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 50%, transparent); }
html[data-look="forge"] .btn-amber:hover { filter: none; box-shadow: 0 0 0 6px color-mix(in srgb, var(--amber) 22%, transparent), 0 18px 36px -14px color-mix(in srgb, var(--amber) 80%, transparent); }
html[data-look="forge"] .btn-ghost { background: transparent; border: 1.5px solid currentColor; }
html[data-look="forge"] .sx-head { counter-increment: lkf; }
html[data-look="forge"] .sx-head::before { content: counter(lkf, decimal-leading-zero) ' /'; flex-basis: 100%; font: 500 13px/1 var(--mono); letter-spacing: .08em; color: var(--amber); margin-bottom: 2px; }
html[data-look="forge"] .sx-h { font-size: clamp(50px, 7.2vw, 116px); line-height: .86; letter-spacing: -0.012em; }
html[data-look="forge"] :is(.fx-card, .pr-card, .sc-row, .shp-card, .rv-card, .mb-card, .cl-card, .co-card, .fq-item) { position: relative; }
html[data-look="forge"] :is(.fx-card, .pr-card, .sc-row, .shp-card, .rv-card, .mb-card, .cl-card, .co-card) { border-radius: 6px; background: var(--panel); border: 1px solid var(--line); box-shadow: none; transition: transform .4s cubic-bezier(.2, .8, .2, 1), border-color .3s; }
html[data-look="forge"] :is(.fx-card, .pr-card, .sc-row, .shp-card, .rv-card, .mb-card, .cl-card, .co-card, .fq-item)::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--amber) 20%, transparent), transparent 65%); }
html[data-look="forge"] :is(.fx-card, .pr-card, .sc-row, .shp-card, .rv-card, .mb-card, .cl-card, .co-card, .fq-item):hover::after { opacity: 1; }
html[data-look="forge"] :is(.pr-card, .shp-card, .rv-card, .co-card):hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--amber) 70%, var(--line)); }
html[data-look="forge"] .pr-card.feat { background: var(--deep); border-color: var(--amber); box-shadow: inset 0 3px 0 var(--amber); }
html[data-look="forge"] .pr-tag { border-radius: 3px; font-family: var(--mono); font-weight: 500; }
html[data-look="forge"] .pr-price b, html[data-look="forge"] .shp-price { font-family: var(--serif); font-weight: 800; font-size: 1.25em; }
html[data-look="forge"] .shp-pic { border-radius: 3px; overflow: hidden; }
html[data-look="forge"] .shp-pic img { filter: saturate(.85); transition: transform .8s cubic-bezier(.2, .7, .1, 1), filter .4s; }
html[data-look="forge"] .shp-card:hover .shp-pic img { transform: scale(1.05); filter: none; }
html[data-look="forge"] .shp-name b { font-family: var(--serif); font-weight: 800; font-size: 26px; letter-spacing: 0; }
html[data-look="forge"] .shp-card .shp-badge { border-radius: 3px; font-family: var(--mono); font-weight: 500; background: var(--deep); color: #fff; box-shadow: none; }
html[data-look="forge"] .gx-item, html[data-look="forge"] .tx2-pic { border-radius: 4px; }
html[data-look="forge"] .gx-item img { filter: grayscale(1) contrast(1.08); transition: transform .8s cubic-bezier(.2, .7, .1, 1), filter .5s; }
html[data-look="forge"] .gx-item:hover img { filter: none; }
html[data-look="forge"] .tone-ink { background: var(--deep); background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px calc(100% / 6)); }
html[data-look="forge"] .tone-ink .stx-n { color: var(--amber); }
html[data-look="forge"] .stx-n { font-size: clamp(56px, 7vw, 104px); }
html[data-look="forge"] .qc-q blockquote { font-family: var(--serif); font-style: italic; font-weight: 800; font-size: clamp(36px, 4.6vw, 68px); line-height: 1; letter-spacing: -0.01em; }
html[data-look="forge"] .sux { border-radius: 6px; background: var(--deep); color: #fff; box-shadow: inset 0 3px 0 var(--amber); }
html[data-look="forge"] .sux .sx-h { color: #fff; }
html[data-look="forge"] .sux::before { border-color: color-mix(in srgb, var(--amber) 22%, transparent); border-radius: 0; transform: rotate(45deg); }
html[data-look="forge"] .sp-n { border-radius: 4px; font: 500 18px/1 var(--mono); background: transparent; color: var(--cream); border: 1.5px solid var(--amber); }
html[data-look="forge"] .sp li:first-child .sp-n { background: var(--amber); color: var(--on-accent); }
html[data-look="forge"] .sp h3 { font-family: var(--serif); font-weight: 800; font-size: 28px; letter-spacing: 0; }
html[data-look="forge"] .fq-item summary { font-family: var(--serif); font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: 0; }
html[data-look="forge"] :is(.sc-date, .nb) { font-family: var(--mono); }
html[data-look="forge"] .sc-date b { font-family: var(--serif); font-weight: 800; font-size: 30px; }
html[data-look="forge"] .nb { background: var(--deep); color: #fff; }
html[data-look="forge"] .mb-amt { font-size: 60px; }
/* the banner */
.lk-forge { position: relative; overflow: clip; min-height: min(100svh, 940px); display: flex; flex-direction: column; justify-content: flex-end; padding-top: 150px; background: #0B0C0D; color: #fff; }
.lk-f-bg, .lk-f-mono, .lk-f-color, .lk-f-grid, .lk-f-shade { position: absolute; inset: 0; }
.lk-f-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transform: scale(calc(1.06 + var(--p, 0) * .14)); transition: transform .2s linear; }
.lk-f-mono img { filter: grayscale(1) contrast(1.15) brightness(.95); }
.lk-f-color { opacity: 0; transition: opacity .6s; -webkit-mask: radial-gradient(260px circle at var(--sx, 70%) var(--sy, 40%), #000 25%, transparent 72%); mask: radial-gradient(260px circle at var(--sx, 70%) var(--sy, 40%), #000 25%, transparent 72%); }
.lk-forge.lit .lk-f-color { opacity: 1; }
.lk-f-grid { background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px calc(100% / 6)); }
.lk-f-shade { background: linear-gradient(to top, #0B0C0D 2%, rgba(11,12,13,.55) 40%, rgba(11,12,13,.1) 100%), radial-gradient(60% 50% at 85% 0%, color-mix(in srgb, var(--amber) 30%, transparent), transparent); }
.lk-f-in { position: relative; z-index: 2; padding-bottom: clamp(36px, 5vw, 64px); transform: translateY(calc(var(--p, 0) * -70px)); opacity: calc(1 - var(--p, 0) * 1.2); }
.lk-forge .hx-title { font-size: clamp(76px, 13.5vw, 228px); font-weight: 800; line-height: .8; letter-spacing: -0.02em; color: #fff; max-width: none; }
.lk-forge .hx-title .rw:last-child > span { color: transparent; -webkit-text-stroke: clamp(1.5px, .18vw, 3px) var(--amber); }
.lk-forge .hx-sub { color: rgba(255,255,255,.8); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; max-width: 34em; margin-top: 28px; }
.lk-forge .hx-acts { margin-top: 30px; }
.lk-forge .hx-acts .btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.lk-forge .hx-acts .btn-ghost:hover { background: #fff; color: #111; }
.lk-f-kick { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 26px; font: 500 13px/1.4 var(--mono); letter-spacing: .04em; color: rgba(255,255,255,.75); }
.lk-f-kick .lk-f-live { display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(0,0,0,.25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lk-f-kick .lk-where { display: inline-flex; align-items: center; gap: 8px; }
.lk-f-marquee { position: relative; z-index: 2; overflow: hidden; border-top: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.35); padding: 16px 0; }
.lk-f-track { display: flex; width: max-content; animation: lkMarq 34s linear infinite; translate: calc(var(--p, 0) * -240px) 0; }
.lk-f-run { display: flex; align-items: center; }
.lk-f-run span { font: italic 800 clamp(38px, 5.6vw, 84px)/1 var(--serif); white-space: nowrap; padding-right: .5em; color: #fff; }
.lk-f-run span.o { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.55); }
.lk-f-run span::after { content: ''; display: inline-block; width: .32em; height: .32em; margin-left: .5em; vertical-align: middle; background: var(--amber); transform: rotate(45deg) translateY(-.1em); }
@keyframes lkMarq { to { transform: translateX(-50%); } }
.lk-f-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 1000; background: var(--amber); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* =========================================================================================== COMMAND */
/* For veterans, contractors, trades and anyone who wants it squared away: navy and olive with sage and steel blue,
   the owner's color on the buttons (lava red on the VetWebDev demos), a condensed display face and a typewriter face
   for labels, contour lines, a radar ring and a viewfinder around the photo. */
html[data-look="command"] {
  --ground: #F4F1E8; --panel: #FBFAF6; --panel-2: #ECE8DC; --line: #DDD8CA; --line-2: #C9C3B2;
  --cream: #141A22; --cream-2: #47505C; --muted: #5E6670; --dim: #858C94;
  --serif: 'Saira Semi Condensed', 'Arial Narrow', sans-serif; --body: 'IBM Plex Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --hw: 800; --ht: -0.01em; --radius: 8px; --deep: #0D1826;
  --c-navy: #0D1826; --c-navy2: #132235; --c-olive: #3F4A2C; --c-olive2: #55613A; --c-sage: #A3AE86; --c-steel: #2F4B66; --c-sky: #8FB0CC;
}
html[data-look="command"][data-theme="dark"] {
  --ground: #0B131E; --panel: #111C2A; --panel-2: #172435; --line: #233246; --line-2: #2F4159;
  --cream: #EEF0EA; --cream-2: #C3C9C0; --muted: #98A0A6; --dim: #78808A; --deep: #070D15; --c-olive2: #8A9670;
}
html[data-look="command"] body { background: var(--ground); }
html[data-look="command"] :is(.tone-base, .tone-plain) { background: transparent; }
html[data-look="command"] .tone-alt { background: var(--panel-2); }
html[data-look="command"] .tone-alt + .tone-alt, html[data-look="command"] .tone-base + .tone-base { border-top: 0; }
html[data-look="command"] .site-header .logo-name { font-family: var(--serif); font-weight: 800; font-size: 25px; letter-spacing: .005em; }
html[data-look="command"] .site-mono { border-radius: 6px; background: var(--c-olive); color: #F4F1E8; }
html[data-look="command"] .btn { border-radius: 6px; font-weight: 600; transition: transform .25s cubic-bezier(.2, .9, .3, 1.3), box-shadow .25s, background .2s; }
html[data-look="command"] .btn-amber { box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--amber) 80%, transparent), inset 0 -2px 0 rgba(0, 0, 0, .18); }
html[data-look="command"] .btn-amber:hover { transform: translateY(-2px); filter: brightness(.94); }
html[data-look="command"] .btn-ghost { border: 1.5px solid currentColor; background: transparent; }
html[data-look="command"] .sx-h { font-size: clamp(38px, 4.8vw, 64px); line-height: 1; letter-spacing: -0.01em; }
html[data-look="command"] .sx-h::before { content: ''; display: block; width: 46px; height: 4px; margin-bottom: 18px; background: linear-gradient(90deg, var(--c-olive2) 0 60%, var(--amber) 60%); }
html[data-look="command"] :is(.fx-card, .pr-card, .kx-tile, .sc-row, .shp-card, .rv-card, .mb-card, .cl-card, .co-card, .pp-card, .lx, .tm, .tr, .cap, .cd-block, .ts) { border-radius: 10px; border: 1px solid var(--line); background: var(--panel); box-shadow: none; }
html[data-look="command"] :is(.pp-card, .pr-card, .rv-card, .shp-card, .co-card) { position: relative; overflow: hidden; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s; }
html[data-look="command"] :is(.pp-card, .pr-card, .rv-card, .shp-card, .co-card)::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c-olive2); }
html[data-look="command"] :is(.pp-card, .pr-card, .rv-card, .shp-card, .co-card):nth-child(even)::before { background: var(--c-steel); }
html[data-look="command"] :is(.pp-card, .pr-card, .rv-card, .shp-card, .co-card):hover { transform: translateY(-5px); box-shadow: 0 28px 56px -34px rgba(13, 24, 38, .5); border-color: var(--line-2); }
html[data-look="command"] .pr-card.feat { background: var(--c-navy); color: #fff; border-color: transparent; }
html[data-look="command"] :is(.pr-price b, .stx-n, .shp-price, .pp-value, .cd-v) { font-family: var(--serif); font-weight: 800; }
html[data-look="command"] :is(.cd-k, .cap-k, .pp-when, .pp-role, .tl-when, .sc-date small, .pr-tag, .sv-years) { font-family: var(--mono); font-weight: 500; letter-spacing: .02em; }
html[data-look="command"] .tone-ink { background: var(--c-navy); color: #fff;
  background-image: repeating-radial-gradient(circle at 85% 20%, transparent 0 70px, rgba(143, 176, 204, .06) 70px 71px); }
html[data-look="command"] .tone-ink .stx-n { color: var(--c-sage); }
html[data-look="command"] .stx-n { font-size: clamp(48px, 6vw, 84px); }
html[data-look="command"] .qc-q blockquote { font-family: var(--serif); font-weight: 700; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.08; }
html[data-look="command"] .sp-n { border-radius: 6px; font: 500 18px/1 var(--mono); background: transparent; border: 1.5px solid var(--c-olive2); color: var(--cream); }
html[data-look="command"] .sp li:first-child .sp-n { background: var(--amber); border-color: var(--amber); color: var(--on-accent); }
html[data-look="command"] .sp h3, html[data-look="command"] .fq-item summary { font-family: var(--serif); font-weight: 700; letter-spacing: 0; }
html[data-look="command"] .sp h3 { font-size: 24px; }
html[data-look="command"] .fq-item summary { font-size: clamp(20px, 2vw, 24px); }
html[data-look="command"] .tl-dot { border-radius: 3px; rotate: 45deg; }
html[data-look="command"] .sux { border-radius: 14px; background: var(--c-olive); color: #fff; }
html[data-look="command"] .sux .sx-h { color: #fff; }
html[data-look="command"] .sux .sx-h::before { background: linear-gradient(90deg, var(--c-sage) 0 60%, var(--amber) 60%); }
html[data-look="command"] .nb { background: var(--c-navy); color: #fff; font-family: var(--mono); }
html[data-look="command"] .tk { background: var(--c-olive); border-top: 0; color: #E7EBDA; }
html[data-look="command"] .tk-run { font-family: var(--serif); font-weight: 600; }
html[data-look="command"] .tk-dot { color: var(--c-sage); }
html[data-look="command"] .gx-item, html[data-look="command"] .tx2-pic { border-radius: 8px; }
/* the banner */
.lk-command { position: relative; isolation: isolate; overflow: clip; color: #fff; padding: clamp(110px, 12vw, 150px) 0 0;
  background: radial-gradient(1100px 560px at 80% -10%, #1C3350 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, #2A3520 0%, transparent 60%), #0D1826; }
.lk-c-topo { position: absolute; inset: -10%; z-index: -1; color: #A3AE86; opacity: .2; animation: lkTopo 40s ease-in-out infinite alternate; }
.lk-c-topo svg { width: 100%; height: 100%; }
@keyframes lkTopo { to { transform: translate(-3%, 2%) rotate(1.5deg); } }
.lk-c-grid { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent); mask-image: linear-gradient(to bottom, #000 40%, transparent); }
.lk-c-in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(36px, 5vw, 72px); align-items: center; padding-bottom: clamp(90px, 10vw, 130px); }
@media (max-width: 920px) { .lk-c-in { grid-template-columns: minmax(0, 1fr); } }
.lk-c-badge { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 24px; padding: 8px 14px; border-radius: 999px; background: rgba(163, 174, 134, .12); border: 1px solid rgba(163, 174, 134, .35); color: #D7DEC2; font: 500 13px/1.3 var(--mono); }
.lk-c-live { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 70%, transparent); animation: lkPing 2.2s ease-out infinite; }
@keyframes lkPing { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.lk-command .hx-title { font-size: clamp(56px, 8.4vw, 124px); font-weight: 800; line-height: .9; letter-spacing: -0.012em; color: #fff; max-width: 11ch; }
.lk-command .hx-title .rw:last-child > span { color: #A3AE86; }
.lk-command .hx-sub { color: rgba(255, 255, 255, .8); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; max-width: 34em; margin-top: 24px; }
.lk-command .hx-acts { margin-top: 30px; }
.lk-command .hx-acts .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .4); }
.lk-command .hx-acts .btn-ghost:hover { background: rgba(255, 255, 255, .06); border-color: #fff; }
.lk-c-frame { position: relative; padding: 26px; justify-self: center; width: 100%; max-width: 560px; }
.lk-c-radar { position: absolute; width: 130%; aspect-ratio: 1; left: 50%; top: 50%; translate: -50% -50%; z-index: -1; border-radius: 50%; border: 1px solid rgba(143, 176, 204, .18);
  background: repeating-radial-gradient(circle, transparent 0 56px, rgba(143, 176, 204, .07) 56px 57px); overflow: hidden; }
.lk-c-radar::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg, rgba(163, 174, 134, .26) 40deg, transparent 60deg); animation: lkSweep 6s linear infinite; }
@keyframes lkSweep { to { transform: rotate(360deg); } }
.lk-c-pic { position: relative; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: #132235; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .75); }
.lk-c-pic img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.05); }
.lk-c-pic .lk-mono { min-height: 0; height: 100%; background: #132235; color: #A3AE86; }
.lk-c-scan { position: absolute; left: 0; right: 0; top: 0; height: 30%; background: linear-gradient(to bottom, transparent, rgba(163, 174, 134, .16), transparent); animation: lkScan 5s ease-in-out infinite; pointer-events: none; }
@keyframes lkScan { 0% { translate: 0 -100%; } 100% { translate: 0 340%; } }
.lk-c-br { position: absolute; width: 34px; height: 34px; border: 3px solid #A3AE86; }
.lk-c-br.c-tl { left: 0; top: 0; border-right: 0; border-bottom: 0; } .lk-c-br.c-tr { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.lk-c-br.c-bl { left: 0; bottom: 34px; border-right: 0; border-top: 0; } .lk-c-br.c-br { right: 0; bottom: 34px; border-left: 0; border-top: 0; }
.lk-c-coord { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding-left: 4px; font: 500 13px/1.3 var(--mono); color: rgba(255, 255, 255, .72); }
.lk-c-frame:not(:has(.lk-c-coord)) .lk-c-br.c-bl, .lk-c-frame:not(:has(.lk-c-coord)) .lk-c-br.c-br { bottom: 0; }
.lk-c-chev { position: absolute; left: 0; right: 0; bottom: -1px; height: 56px; background: var(--ground); clip-path: polygon(0 100%, 0 40%, 50% 100%, 100% 40%, 100% 100%); }
.lk-command:has(.tk) .lk-c-chev { display: none; }
.lk-command .tk { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .lk-c-topo, .lk-c-radar::after, .lk-c-scan, .lk-c-live { animation: none !important; } .lk-c-scan { display: none; } }

/* both: pictures and cards open into view as they're reached (lookFx() adds .lk-unveil, then .lk-in) */
html:is([data-look="bloom"], [data-look="command"]) .lk-unveil { clip-path: inset(10% 10% 10% 10% round 40px); opacity: 0; transform: translateY(28px) scale(.97);
  transition: clip-path 1.2s cubic-bezier(.2, .7, .1, 1) var(--d, 0ms), opacity .9s ease var(--d, 0ms), transform 1.2s cubic-bezier(.2, .7, .1, 1) var(--d, 0ms); }
html[data-look="forge"] .lk-unveil { clip-path: inset(100% 0 0 0); transform: translateY(40px);
  transition: clip-path .9s cubic-bezier(.7, 0, .2, 1) var(--d, 0ms), transform .9s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms); }
html[data-look] .lk-unveil.lk-in { clip-path: inset(-80px -80px -80px -80px); opacity: 1; transform: none; }
html[data-look] .lk-unveil.lk-in:hover { transform: translateY(-6px); }
html[data-look] :is(.gx-item, .tx2-pic, .sc-row).lk-unveil.lk-in:hover { transform: none; }

/* light bands: numbers and prices read on them */
html:is([data-look="gallery"], [data-look="studio"], [data-look="bloom"]) .tone-ink :is(.stx-n) { color: var(--cream); }
html:is([data-look="gallery"], [data-look="studio"], [data-look="bloom"]) .tone-ink .stx-i span { color: var(--muted); }
html:is([data-look="gallery"], [data-look="studio"], [data-look="bloom"]) .tone-ink .stx-i + .stx-i { border-left-color: color-mix(in srgb, var(--cream) 18%, transparent); }
html[data-look="merch"] .tone-ink .stx-i span { color: var(--on-accent); opacity: .85; }
html[data-look="merch"] .tone-ink .stx-n { color: var(--on-accent); }
html[data-look] .mb-amt { font-family: var(--serif); font-weight: var(--hw, 400); font-stretch: var(--hs, 100%); }
html[data-look="stage"] .mb-amt, html[data-look="merch"] .mb-amt { font-size: 56px; }

/* =========================================================================================== shared */
.lk-mono { display: grid; place-items: center; width: 100%; height: 100%; min-height: 240px; font: 400 clamp(64px, 10vw, 140px)/1 var(--serif); color: var(--amber); background: var(--panel-2); }
@media (prefers-reduced-motion: reduce) {
  .lk-m-sticker, .lk-eq i, .lk-st-sun, .lk-b-aura i, .lk-b-ring, .lk-b-glass, .lk-f-track { animation: none !important; }
  .lk-b-oval { clip-path: none !important; transform: none !important; } .lk-f-in { transform: none !important; opacity: 1 !important; }
  .lk-b-oval img, .lk-f-bg img { transform: none !important; }
  .lk-g-pic img, .lk-s-bg img, .lk-st-arch img, .lk-m-w { transition: none !important; transform: none !important; opacity: 1 !important; }
}