/* Shared by soon.html (light) and night-soon.html (dark): swappable-backplate concepts and the BETA stamp. */

/* Theme tokens */
.sc{--sc-fg:var(--text);--sc-2:var(--text-2);--sc-3:var(--text-3);--sc-line:var(--line);--sc-line2:var(--line-strong);--sc-bg:var(--bg-raise);--sc-sunk:var(--bg-sunk,transparent);--sc-font:var(--brand);--sc-head:var(--brand);--sc-r:20px}
.soon--night .sc{--sc-fg:var(--ink);--sc-2:var(--dim);--sc-3:var(--dim);--sc-line:var(--line);--sc-line2:var(--line);--sc-bg:var(--panel);--sc-sunk:transparent;--sc-font:var(--mono);--sc-head:var(--display);--sc-r:14px}

/* Intro, grid, note */
.sc{display:block}
.sc-intro{max-width:62ch;font-size:16px;line-height:1.55;color:var(--sc-2)}
.sc-intro{margin-top:10px}.sc-intro:first-child{margin-top:20px}
.sc-system{margin:clamp(24px,3vw,40px) 0 0;border-radius:var(--sc-r);overflow:hidden;background:#e6e6e4}
.sc-system img{display:block;width:100%;height:auto}
.sc-grid{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.sc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media (min-width:1100px){.sc-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}.sc-grid>.sc-card{grid-column:span 2}}
.sc-note{margin-top:18px;font-size:13px;color:var(--sc-3)}

/* Card: a concept render (4:5) on top, or a line icon when there is no render yet */
.sc-card{display:grid;align-content:start;min-width:0;border-radius:var(--sc-r);background:var(--sc-bg);box-shadow:0 0 0 1px var(--sc-line);overflow:hidden}
.sc-media{margin:0;aspect-ratio:4/5;overflow:hidden;background:#e6e6e4}
.sc-media img{display:block;width:100%;height:100%;object-fit:cover}
.sc-body{display:grid;align-content:start;justify-items:start;gap:8px;min-width:0;padding:18px 20px 22px}
.sc-icon{width:44px;height:44px;margin:22px 0 0 20px;fill:none;stroke:var(--sc-fg);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sc-card--text .sc-body{padding-top:12px}
.sc-tag{padding:3px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--sc-line2);font:600 11px/1.5 var(--sc-font);letter-spacing:.06em;text-transform:uppercase;color:var(--sc-2)}
.sc-card h3{font-family:var(--sc-head);font-size:clamp(20px,1.7vw,24px);color:var(--sc-fg)}
.sc-text{font-size:15px;line-height:1.5;color:var(--sc-2)}
/* Phones: each picture card becomes a row, picture on the left */
@media (max-width:639px){
  .sc-card--pic{grid-template-columns:minmax(0,40%) minmax(0,1fr);align-items:center}
  .sc-card--pic .sc-media{align-self:stretch;height:100%;aspect-ratio:auto;min-height:150px}
  .sc-card--pic .sc-body{padding:14px 16px}
  .sc-card--pic h3{font-size:19px}
  .sc-card--pic .sc-text{font-size:14px}
}
/* Lead card: a full row, the render beside the text */
@media (min-width:640px){
  .sc-card--lead{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center}
  .sc-card--lead .sc-body{gap:12px;padding:clamp(24px,4vw,64px)}
  .sc-card--lead h3{font-size:clamp(30px,3.4vw,46px);line-height:1.04}
  .sc-card--lead .sc-text{font-size:clamp(16px,1.4vw,19px);max-width:30ch}
}
@media (min-width:1100px){.sc-grid>.sc-card--lead{grid-column:1/-1;grid-template-columns:minmax(0,440px) minmax(0,1fr)}}
/* Last-row balancing (set by soon-concepts.js): a lone card becomes a full row, two leftovers share the row */
@media (min-width:640px) and (max-width:1099px){.sc-full2{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center}.sc-full2 .sc-body{padding:clamp(20px,3vw,40px)}}
@media (min-width:1100px){
  .sc-grid>.sc-full3{grid-column:1/-1;grid-template-columns:minmax(0,440px) minmax(0,1fr);align-items:center}
  .sc-grid>.sc-half3{grid-column:span 3;grid-template-columns:minmax(0,46%) minmax(0,1fr);align-items:center}
  .sc-full3 .sc-body,.sc-half3 .sc-body{padding:clamp(20px,2.4vw,36px)}
}
.sc-card--wide{grid-template-columns:minmax(0,1fr)}
@media (min-width:1100px){.sc-card--wide .sc-media{aspect-ratio:16/9}}
/* Concepts without a render yet: a plain list under the cards */
.sc-more{margin-top:clamp(28px,3vw,40px)}
.sc-more__title{font-family:var(--sc-head);font-size:clamp(18px,1.5vw,21px);color:var(--sc-fg)}
.sc-more__list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:0 32px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.sc-more__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sc-card--line{display:grid;gap:4px;padding:14px 0;border-radius:0;background:none;box-shadow:none;border-top:1px solid var(--sc-line)}
.sc-card--line b{font:600 16px/1.3 var(--sc-font-b,inherit);color:var(--sc-fg)}
.sc-card--line span{font-size:15px;line-height:1.5;color:var(--sc-2)}
.soon--night .sc-media{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.soon--night .sc-media img{filter:brightness(.9)}

/* BETA stamp: ink colour is the host's color; rotated, slightly transparent, lands once with a slam */
.stamp{display:block;width:100%;height:auto;overflow:visible;transform:rotate(-9deg);opacity:.9}
body.soon:not(.soon--night) .stamp{mix-blend-mode:multiply}
.soon--night .stamp{opacity:.88}
@media (prefers-reduced-motion:no-preference){.stamp{animation:sc-stamp-slam .72s .5s both}}
@keyframes sc-stamp-slam{
  0%{opacity:0;transform:rotate(-2deg) scale(1.75);animation-timing-function:cubic-bezier(.55,0,.85,.4)}
  56%{opacity:.93;transform:rotate(-9deg) scale(.965);animation-timing-function:cubic-bezier(.2,.7,.3,1)}
  76%{transform:rotate(-9deg) scale(1.012)}
  100%{opacity:.9;transform:rotate(-9deg) scale(1)}
}