/* ==========================================================================================================
   Look "lit", 2026-11-12: the page is lit like a set (Tae: "it feels kind of flat", then "Push it further").
   Layout concept: near-black, slightly warm; every section is dark until its own lamp comes up as it scrolls in, a warm
   source on one side or a cool one on the other, and falls off into the dark again; the product pictures are the
   brightest things on the page and stand off it over their own pool of light; amber is a practical lamp, small, bright
   and rare: one phrase in a page's first headline, the main button, the small labels and whatever is switched on.
   Tae on this version: "Yes, make it live". It is the site's look: site/build.py loads this file after site.css on
   every page. Everything of the look is in this one file; SR_LOOK=plain builds the site without it, as it looked on
   2026-11-11, into dist-plain/.
   ========================================================================================================== */
:root{
  --surface:#060709; --panel:#101216; --raise:#1a1d22; --line:#262a30; --line-soft:#ffffff0f;
  --ink:#f6f2eb; --ink-2:#8f8b84; --lit:#ffe9cc; --muted:#9a9ea5; --dim:#6e737a;
  --warm:#f2a648; --cool:#8fbbe6;
  --glass:rgba(16,18,21,.6);
  --t-xl:clamp(32px,4.5vw,58px);
  --edge:#ffffff2e #ffffff14 #ffffff08;                      /* a panel's border: brightest on top, where the light comes from */
  --lift:0 70px 140px -50px #000,0 30px 60px -28px #000d;    /* a picture standing off the page */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 .96  0 0 0 0 .9  0 0 0 .02 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");   /* fine grain, in backgrounds only: keeps soft gradients from banding */
}

/* headlines: emphasis by light, not by colour. The plain words step back, the key phrase is lit warm white */
h2{font-weight:500;letter-spacing:-.045em;line-height:1.02}
h2:has(em),.quote:has(em){color:var(--ink-2)}
h2 em,.quote em{color:var(--lit)}
.post-body h2{font-weight:600;letter-spacing:-.03em;line-height:1.1}
/* a section's opening: the label with a short rule (as in the hero), a large headline, the text under it */
.head{grid-template-columns:1fr;gap:20px;align-items:start;margin-bottom:clamp(36px,5vw,64px)}
.head h2{max-width:26ch}
.head p{max-width:58ch;color:#aeb2b8;font-size:17px;line-height:1.65}
.head .label.amber,.guide-copy .label{display:flex;align-items:center;gap:12px}
.head .label.amber::before,.guide-copy .label::before{content:"";flex:none;width:28px;height:1px;background:currentColor}
.lede{color:#d4d5d7}

/* sections: dark, with one lamp each. Warm from the right on plain sections, cool from the left on the others, and a
   little of the other colour as fill from the opposite corner. No bands of grey and no rules between them. */
.band,.band.tint{position:relative;isolation:isolate;padding-block:clamp(84px,11vw,168px);border-top:0;border-image:none;background:none}
/* The lamps have a fixed size and sit near the top of a section, so a very long section (the Features page is one) gets a
   lamp at its head and stays dark below, not one huge smear. The light never reaches a section's top or bottom edge:
   no seams between sections. */
.band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--grain),radial-gradient(min(760px,62vw) 500px at 80% 400px,#f2a64830,transparent 70%),radial-gradient(min(560px,50vw) 400px at 4% 720px,#8fbbe614,transparent 70%);background-repeat:repeat,no-repeat,no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 150px,#000 calc(100% - 150px),transparent);mask-image:linear-gradient(180deg,transparent,#000 150px,#000 calc(100% - 150px),transparent)}
.band.tint::before{background:var(--grain),radial-gradient(min(760px,62vw) 500px at 20% 400px,#8fbbe628,transparent 70%),radial-gradient(min(560px,50vw) 400px at 96% 720px,#f2a6481f,transparent 70%);background-repeat:repeat,no-repeat,no-repeat}
/* the lamps come up as a section scrolls in, and its picture settles into place (where the browser can tie an animation to
   scrolling; elsewhere everything is simply lit) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .band::before{animation:lights-up linear both;animation-timeline:view();animation-range:entry 5% cover 36%}
    .views-stage,.profile-frame,.env-img,.guide-frame,.sheet-doc,.motion{animation:settle linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
  }
}
@keyframes lights-up{from{opacity:.2}to{opacity:1}}
@keyframes settle{from{opacity:.6;translate:0 30px;scale:.985}to{opacity:1;translate:0 0;scale:1}}

/* the top of the home page: a stronger shaft of light, and the amber phrase glows like a lamp that is on */
.hero{background:radial-gradient(ellipse 80% 62% at 70% 45%,color-mix(in srgb,var(--glow) 22%,transparent),transparent 70%),radial-gradient(48% 60% at 0% 0%,#8fbbe614,transparent 70%),var(--surface)}
.hero h1{font-size:clamp(42px,5.1vw,74px)}
.hero h1 em{filter:drop-shadow(0 0 26px #f2a64859)}
.beam{background:linear-gradient(90deg,transparent 20%,#fff4e314 38%,#fff4e328 50%,#fff4e314 62%,transparent 80%)}
.page-hero::after{background:linear-gradient(90deg,var(--surface) 25%,#06070999 65%,#06070966),linear-gradient(0deg,var(--surface),transparent 50%)}
.page-hero{border-bottom:0}
.announce{background:#040506}
.site-head{background:rgba(6,7,9,.66);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}
.site-foot{background:#040506}

/* pictures of the app stand off the page: a lit top edge, a deep shadow and a pool of warm light on the floor under them */
.views-stage,.profile-frame,.motion,.shot,.post-cover{border-color:var(--edge);box-shadow:var(--lift),0 90px 150px -70px #f2a64866,0 0 170px -60px #f2a64840}
.guide-frame{border-color:var(--edge);box-shadow:var(--lift),0 90px 150px -60px #f2a64873,0 0 170px -50px #f2a6484d,0 0 0 6px #ffffff06}
.guide{grid-template-columns:minmax(0,1fr) minmax(0,480px)}
@media(max-width:900px){.guide{grid-template-columns:1fr}}
.sheet-doc{box-shadow:0 70px 140px -40px #000,0 90px 150px -70px #f2a64866}
.post-body figure img,.post-body figure video{border-color:var(--edge)}
.post-body figure video{box-shadow:var(--lift),0 90px 150px -70px #f2a64866}
.post-chapters button{background:linear-gradient(180deg,#ffffff0d,#ffffff04 60%),var(--glass);border-color:var(--edge)}
/* what stands under a post's video (the chapter buttons, the caption) is drawn above the video's shadow: a browser can draw a video with controls in a layer of its own, shadow included, over what follows it */
.post-body figure video~*{position:relative;z-index:1}

/* panels: dark glass with a lit top edge. They catch a little light from the pointer (--mx, --my are set by site.js) */
.glass,.post-card,.founder,.artist,.cta{--mx:72%;--my:0%}
.glass{background:radial-gradient(340px circle at var(--mx) var(--my),#ffe9cc14,transparent 68%),linear-gradient(180deg,#ffffff0d,#ffffff04 60%),var(--glass);border-color:var(--edge);box-shadow:inset 0 1px 0 #ffffff14,0 40px 90px -40px #000d}
.post-card,.founder,.artist{background:radial-gradient(380px circle at var(--mx) var(--my),#ffe9cc12,transparent 68%),linear-gradient(180deg,#15171b,#0c0e10);border-color:var(--edge)}
.post-card{transition:border-color .25s,transform .25s,box-shadow .25s}
.post-card:hover,.post-card:focus-visible{border-color:#f2a64859;transform:translateY(-3px);box-shadow:0 40px 80px -40px #000,0 0 80px -30px #f2a64859}
/* the closing call to action is the last lamp on the page */
.cta{padding:clamp(40px,6vw,88px) clamp(28px,5vw,72px);border-radius:24px;border-color:var(--edge);background:radial-gradient(560px circle at var(--mx) var(--my),#f2a64842,transparent 64%),radial-gradient(90% 130% at 0% 100%,#8fbbe616,transparent 62%),linear-gradient(180deg,#15171b,#0a0b0d);box-shadow:var(--lift),0 100px 170px -80px #f2a64859}
.cta h2{font-size:clamp(30px,4.4vw,58px);letter-spacing:-.045em}

/* buttons: the main one glows like a lamp that is on; the others are glass */
.btn{border-radius:10px;border-color:#ffffff1f;background:linear-gradient(180deg,#ffffff10,#ffffff05);transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}
.btn.primary{background:linear-gradient(180deg,#ffc67c,#f2a648 52%,#e4942f);border-color:#ffd08f #f0a243 #d98a27;color:#1c1206;box-shadow:inset 0 1px 0 #fff8,0 16px 40px -14px #f2a648cc}
.btn.primary:hover{background:linear-gradient(180deg,#ffd193,#f7b055 52%,#eb9c37);border-color:#ffdba6 #f5ad52 #df9230;box-shadow:inset 0 1px 0 #fff9,0 20px 52px -14px #f2a648e6}
.btn.ghost{background:#ffffff08}
.hero .actions .btn,.cta .btn{padding:14px 22px}