/* Simples — front page (one-screen version, 2026-09-03).
   Three entries + one line. Built only from tokens in simples.css: hairlines,
   mono labels, the four glyphs, the two easings. No new colours. */

/* ---- entries ---------------------------------------------------------- */
.home-entries{padding-top:0}
.entries{display:flex;flex-direction:column;border-top:1px solid var(--hairline)}
.entry{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:"top top" "t arr" "d arr";gap:8px 16px;padding:28px 0 30px;border-bottom:1px solid var(--hairline);color:var(--black)}
.entry:hover{color:var(--black)}
.entry-top{grid-area:top;display:flex;align-items:center;gap:12px}
.entry-top .glyph{width:10px;height:10px;transition:transform 480ms cubic-bezier(.2,.7,.2,1),fill var(--t-fast)}
.entry-t{grid-area:t;font-size:40px;font-weight:300;line-height:1.15;letter-spacing:0.04em;transition:transform 480ms cubic-bezier(.2,.7,.2,1)}
.entry-d{grid-area:d;color:var(--grey-60);font-size:14px;max-width:32ch}
.entry .arr{grid-area:arr;align-self:end;font-size:24px;font-weight:300;line-height:1;transition:transform 320ms cubic-bezier(.2,.7,.2,1),color var(--t-fast)}
.entry::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform 320ms cubic-bezier(.2,.7,.2,1)}
.entry:hover::after,.entry:focus-visible::after{transform:scaleX(1)}
.entry:hover .arr,.entry:focus-visible .arr{transform:translateX(8px);color:var(--signal)}
.entry:hover .entry-t{transform:translateX(8px)}
.entry:hover .glyph{fill:var(--signal);transform:rotate(90deg) scale(1.3)}
.entry:focus-visible{outline:none}
.entry:focus-visible .entry-t{color:var(--signal)}

@media (min-width:768px){
  .entries{flex-direction:row;border-top:0;gap:24px}
  .entry{flex:1;grid-template-columns:1fr auto;grid-template-areas:"top top" "t t" "d arr";border-bottom:0;border-top:1px solid var(--hairline);padding:24px 0 0;gap:20px 12px;min-height:220px;align-content:start}
  .entry::after{top:-1px;bottom:auto}
  .entry-t{font-size:56px}
  .entry .arr{align-self:end;justify-self:end}
}
@media (min-width:1200px){
  .entries{gap:32px}
  .entry{padding-top:32px;min-height:280px;gap:28px 16px}
  .entry-t{font-size:72px}
  .entry-d{font-size:15px}
}

/* ---- intro line ------------------------------------------------------- */
.home-intro{padding-top:var(--pad-y)}
.intro-grid{display:flex;flex-direction:column;gap:20px}
.intro-body{display:flex;flex-direction:column;gap:28px}
@media (min-width:1200px){
  .intro-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
  .intro-grid>.label{grid-column:span 4}
  .intro-body{grid-column:5/span 7;gap:36px}
}

/* ---- hero stage (three.js, 2026-09-08) --------------------------------------
   Transparent WebGL canvas. Phones: a 16:9 block under the headline.
   Desktop: anchored to the lower right of the hero, behind the text layer. */
.hero{position:relative}
.hero-stage{position:relative;width:100%;aspect-ratio:16/9;margin:8px 0 24px;opacity:0;transition:opacity 900ms ease 200ms;pointer-events:none;z-index:0}
.hero-stage.is-ready{opacity:1}
.hero-stage canvas{display:block;width:100%!important;height:100%!important}
.hero-main,.hero-foot{position:relative;z-index:1}
@media (min-width:768px){.hero-stage{margin:0 0 24px;max-width:640px;align-self:flex-end}}
@media (min-width:1200px){
  .hero-stage{position:absolute;right:0;bottom:56px;width:56%;max-width:900px;margin:0;aspect-ratio:16/9}
}