/* Lucid Lake studio site. One navy, one cream; amber marks state and the primary action; gold marks Support.
   Fonts: Jost 500 for names (tracked caps), Atkinson Hyperlegible Next for everything else, nothing under 15 px. */
@font-face { font-family: Jost; src: url(fonts/jost-latin.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: Atkinson; src: url(fonts/atkinson-hyperlegible-next-latin-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Atkinson; src: url(fonts/atkinson-hyperlegible-next-latin-500.woff2) format("woff2"); font-weight: 500 700; font-display: swap; }

:root {
  --navy: #1C2340; --cream: 239 230 210; --amber: 247 192 96; --gold: #C9A45A;
  --ink: rgb(var(--cream) / .94); --soft: rgb(var(--cream) / .84); --dim: rgb(var(--cream) / .7);
  --hair: rgb(var(--cream) / .25); --hair2: rgb(var(--cream) / .5);
  --accent: var(--amber);
  --glass: rgb(28 35 64 / .8); --dense: rgb(28 35 64 / .93);
  --ease: cubic-bezier(.2, .6, .3, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--navy); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; gap: 14px; padding: 14px 18px 12px;
  background: var(--navy) url(chart.svg) right center / auto 130% no-repeat fixed;
  color: var(--ink); font: 400 16px/1.5 Atkinson, system-ui, sans-serif; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid rgb(var(--amber)); outline-offset: 2px; border-radius: 6px; }
img, video { display: block; max-width: 100%; }
svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
main { flex: 1; min-width: 0; }

.glass { background: var(--glass); -webkit-backdrop-filter: blur(12px) saturate(.9); backdrop-filter: blur(12px) saturate(.9); border: 1px solid var(--hair); border-radius: 14px; box-shadow: 0 2px 14px rgb(6 12 18 / .35); }
.word { font: 500 34px/1.05 Jost, sans-serif; letter-spacing: .3em; text-transform: uppercase; margin: 0; }
.cap { white-space: nowrap; font: 500 15px/1 Atkinson, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin: 0; }

/* top bar: a slim capsule; the products, then the pages; Support and Jump at the end */
.bar { display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 6px; border-radius: 22px; position: relative; z-index: 5; }
.bar .brand { display: flex; align-items: center; gap: 10px; padding: 0 12px 0 6px; font: 500 17px/1 Jost, sans-serif; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; }
.bar .brand img { width: 28px; height: 28px; }
.bar nav { display: flex; gap: 2px; }
.seg { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 16px; font-size: 16px; letter-spacing: .04em; color: var(--soft); transition: background .3s var(--ease), color .3s var(--ease); white-space: nowrap; }
.seg:hover { background: rgb(var(--cream) / .1); color: var(--ink); }
.seg[aria-current] { background: rgb(var(--cream) / .94); color: var(--navy); }
.seg svg.i { opacity: .8; }
.seg.prod img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; border: 1px solid var(--hair2); }
.bar .sep { width: 1px; height: 20px; background: var(--hair); margin: 0 6px; align-self: center; }
.bar .gap { flex: 1; }
.seg.support { color: var(--gold); }
.seg.support .st { opacity: .6; }
.kbd { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; border: 1px solid var(--hair2); border-radius: 6px; font: 400 15px/1 Atkinson, sans-serif; color: var(--soft); }

/* buttons: pills, one height; the primary is lit, never solid */
.pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 18px; border: 1px solid var(--hair2); font-size: 16px; letter-spacing: .04em; color: var(--ink); transition: background .3s var(--ease), border-color .3s var(--ease); white-space: nowrap; }
.pill:hover { background: rgb(var(--cream) / .1); }
.pill.go { background: rgb(var(--accent) / .16); border-color: rgb(var(--accent) / .95); color: rgb(var(--accent)); }
.pill.go:hover { background: rgb(var(--accent) / .26); }
.acts { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }

.state { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; letter-spacing: .04em; color: var(--soft); white-space: nowrap; }
.state i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgb(var(--accent)); flex: none; }
.state.live i { background: rgb(var(--accent)); box-shadow: 0 0 8px rgb(var(--accent) / .7); }
.mediatag { position: absolute; right: 12px; top: 12px; font-size: 15px; letter-spacing: .04em; color: var(--soft); background: var(--dense); border-radius: 6px; padding: 2px 8px; z-index: 1; }

/* the stage: one window that shows a product's film, a glass plate in its corner */
.win { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--hair); background: #141a33; box-shadow: 0 2px 14px rgb(6 12 18 / .35); }
.film { position: absolute; inset: 0; transition: background .6s; }
.film [data-id] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.film .on { opacity: 1; }
.film .contain { object-fit: contain; }
.plate { position: absolute; left: 12px; bottom: 12px; padding: 14px 16px; max-width: calc(100% - 24px); }
.pbody { display: grid; gap: 10px; }
.pbody.in { animation: rise .6s var(--ease); }
.pbody .top { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.pbody p { margin: 0; font-size: 18px; color: var(--soft); }
.track { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgb(var(--cream) / .18); }
.track i { display: block; height: 100%; width: 0; background: rgb(var(--cream) / .9); }
.win .mediatag { opacity: 0; transition: opacity .45s; } .win .mediatag.on { opacity: 1; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

/* product rows: one per product; 2 or 12, same row */
.prods { list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; overflow: auto; }
.prods a { width: 100%; display: grid; grid-template-columns: 88px 1fr auto; gap: 12px; align-items: center; padding: 6px 10px 6px 6px; border-radius: 10px; border: 1px solid transparent; transition: background .3s var(--ease), border-color .3s var(--ease); }
.prods a:hover { background: rgb(var(--cream) / .07); }
.prods a[aria-current] { background: rgb(var(--amber) / .12); border-color: rgb(var(--amber) / .7); }
.prods img { width: 88px; height: 50px; object-fit: cover; border-radius: 6px; }
.prods b { display: block; font: 500 19px/1.1 Jost, sans-serif; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 5px; }
.prods .kbd { border-color: var(--hair); color: var(--dim); }

/* blog rows: date | title with its #tags; dense, so many posts show at a glance */
.log { display: grid; margin: 0; padding: 0; list-style: none; }
.log li { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 0 12px; padding: 7px 16px; border-top: 1px solid rgb(var(--cream) / .1); transition: background .3s var(--ease); }
.log li:first-child { border-top: 0; }
.log li:hover { background: rgb(var(--cream) / .07); }
.log time { color: var(--dim); font-size: 15px; line-height: 1.4; padding-top: 1px; white-space: nowrap; }
.log .t { font-size: 16px; line-height: 1.4; margin: 0; }
.log .t > a { font-weight: 500; }
.log .t > a::after { content: ""; position: absolute; inset: 0; }   /* the whole row opens the post */
.log .tg { position: relative; z-index: 1; font-size: 15px; color: var(--dim); white-space: nowrap; margin-left: 4px; }
.log .tg:hover { color: rgb(var(--accent)); }
.log .sum { grid-column: 2; margin: 4px 0 0; color: var(--soft); font-size: 16px; }
.log.wide li { grid-template-columns: 110px 1fr; padding: 12px 18px; }
.log.wide .t { font-size: 18px; }
.panel > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 16px 6px; }
.panel > header a { font-size: 15px; color: var(--soft); }
.panel > header a:hover { color: var(--ink); }

/* home: the stage on the left, products over the blog on the right */
body.home { height: 100vh; }
.home main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); gap: 14px; min-height: 0; }
.home .win { min-height: 280px; }
.home .side { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.home .shelf { flex: 0 1 auto; max-height: 58%; display: flex; flex-direction: column; min-height: 0; }
.home .book { flex: 1 1 0; display: flex; flex-direction: column; min-height: 120px; }
.home .book .log { overflow: auto; }

footer { display: flex; justify-content: space-between; gap: 8px 22px; align-items: center; color: var(--dim); font-size: 15px; flex-wrap: wrap; }
footer .facts { display: flex; gap: 8px 22px; flex-wrap: wrap; margin: 0 0 0 auto; }
footer a:hover { color: var(--ink); }
.legend { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin: 0; }
.legend span { display: inline-flex; gap: 7px; align-items: center; }
.legend .kbd { border-color: var(--hair); color: var(--dim); }

/* a product's page: one line of who it is, then its gallery and its posts */
.phead .pbody { gap: 12px; }
.phead .word { font-size: 44px; }

/* inner pages: one column of panels, 1100 px at most */
.page { display: grid; gap: 14px; max-width: 1100px; margin: 0 auto; width: 100%; align-content: start; }
.page.narrow { max-width: 820px; }
.panel { min-width: 0; }
.pad { padding: 22px 24px; }
.head { display: grid; gap: 12px; }
h1 { margin: 0; }
.head h1:not(.word) { font: 500 34px/1.2 Atkinson, sans-serif; }
.head .lede { margin: 0; font-size: 18px; color: var(--soft); }
.prose { max-width: 68ch; }
.prose p, .prose li { font-size: 18px; line-height: 1.6; }
.prose p:first-child { margin-top: 0; } .prose p:last-child { margin-bottom: 0; }
.prose a, .post a { color: rgb(var(--amber)); text-decoration: underline; text-decoration-color: rgb(var(--amber) / .4); text-underline-offset: 3px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; padding: 4px 16px 16px; }
figure { margin: 0; }
figure img, figure video { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--hair); background: #141a33; }
figcaption { margin-top: 8px; font-size: 15px; color: var(--dim); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips a { height: 32px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 16px; border: 1px solid var(--hair2); font-size: 15px; color: var(--soft); }
.chips a:hover { background: rgb(var(--cream) / .1); }
.chips a[aria-current] { background: rgb(var(--amber) / .16); border-color: rgb(var(--amber) / .95); color: rgb(var(--amber)); }

/* a post: one readable column */
.meta { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; margin: 0; color: var(--dim); font-size: 15px; }
.meta a:hover { color: var(--ink); }
.post { max-width: 70ch; margin-top: 22px; }
.post > :first-child { margin-top: 0; }
.post p, .post li { font-size: 18px; line-height: 1.65; }
.post h2 { font: 500 24px/1.3 Atkinson, sans-serif; margin: 1.8em 0 .5em; }
.post code { font-size: .92em; background: rgb(var(--cream) / .08); border-radius: 4px; padding: 1px 5px; }
.post figure { margin: 1.6em 0; }
.post .tablewrap { overflow-x: auto; margin: 1.4em 0; }
.post table { border-collapse: collapse; font-size: 16px; min-width: 100%; }
.post th, .post td { text-align: left; padding: 8px 12px; border-bottom: 1px solid rgb(var(--cream) / .14); vertical-align: top; }
.post thead th { color: var(--dim); font-weight: 500; font-size: 15px; letter-spacing: .04em; }
.post .about-product, .post .byline { color: var(--soft); font-size: 16px; }
.post .about-product { margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--hair); }
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.photos img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 600px) { .photos { grid-template-columns: 1fr; } }
.head + .prose { margin-top: 18px; }

/* jump palette */
.jump { position: fixed; inset: 0; z-index: 20; display: none; background: rgb(12 16 32 / .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.jump.open { display: block; }
.jump .box { width: min(560px, calc(100vw - 32px)); margin: 14vh auto 0; background: var(--dense); overflow: hidden; animation: rise .45s var(--ease); }
.jump input { width: 100%; height: 52px; padding: 0 18px; background: none; border: 0; border-bottom: 1px solid var(--hair); color: var(--ink); font: 400 18px Atkinson, sans-serif; outline: none; }
.jump input::placeholder { color: var(--dim); }
.jump ul { list-style: none; margin: 0; padding: 6px; max-height: 52vh; overflow: auto; }
.jump li { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 17px; }
.jump li small { font-size: 15px; color: var(--dim); letter-spacing: .04em; }
.jump li code { font: inherit; font-size: 15px; color: var(--dim); }
.jump li.sel { background: rgb(var(--amber) / .16); box-shadow: inset 0 0 0 1px rgb(var(--amber) / .6); }
.jump .foot { display: flex; gap: 16px; padding: 9px 18px; border-top: 1px solid var(--hair); color: var(--dim); font-size: 15px; }
.toast { position: fixed; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 30; padding: 8px 16px; font-size: 16px; opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); background: var(--dense); }
.toast.on { opacity: 1; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media (max-width: 900px) {
  body { padding: 10px; gap: 10px; background-size: auto 60%; }
  body.home { height: auto; }
  .home main { display: flex; flex-direction: column; gap: 10px; }
  .home .side { display: contents; }
  .home .win { aspect-ratio: 4 / 5; min-height: 0; }
  .home .shelf { max-height: none; } .home .book { flex: none; }
  .word { font-size: 28px; }   .prods .kbd { display: none; }
      .pad { padding: 18px; }
  .head h1:not(.word) { font-size: 28px; }
  .log.wide li { grid-template-columns: 56px 1fr; padding: 10px 16px; }
}
@media (max-width: 900px) {
  .bar nav .seg span, .seg.support span, .bar .brand span { display: none; }
  .seg { padding: 0 8px; gap: 0; }
  .bar { gap: 0; padding: 0 4px; }
  .bar .brand { padding: 0 6px 0 4px; }
  .legend { display: none; }
  .jumpbtn .kbd { display: none; }
}