/* Atelier-1111 product page, in the app's own design: dark only, 1px rules,
   square corners, cyan for what you choose and focus, pink for what acts.
   Silkscreen sets the name and headings, Departure Mono everything else.
   Shadows are hatched, never blurred: 2px lines on a 5px repeat, kept off
   the element by a 2px ring of page colour. */

@font-face{font-family:"Departure Mono";src:url('../assets/fonts/departure-mono.woff2') format('woff2');font-display:swap}
@font-face{font-family:"Silkscreen";src:url('fonts/silkscreen.woff2') format('woff2');font-display:swap}

:root{
  --page:#0e0e10;--plate:#151518;--raised:#1d1d21;--hover:#25252a;--line:#3a3a42;
  --ash:#85858d;--ink:#d4d4d0;--cyan:#25f4ee;--pink:#fe2c55;--on-accent:#0e0e10;
  --focus-a:#8ffbf6;--focus-b:#19c4d0;
  --focus-ring:0 0 0 2px var(--page),-1px -1px 0 2px var(--focus-a),0 0 0 3px var(--focus-b),0 0 10px 2px rgba(37,244,238,.28);
  --rule:1px solid var(--line);
  --hatch-pink:repeating-linear-gradient(-45deg,var(--pink) 0 2px,transparent 2px 5px);
  --hatch-cyan:repeating-linear-gradient(-45deg,var(--cyan) 0 2px,transparent 2px 5px);
  --frames:90ms steps(2,end);
  --display:"Silkscreen",var(--mono);
  --mono:"Departure Mono",ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* The page colour lives on body alone, so it reaches the canvas and the
   fixed backdrop at z-index -1 still shows through. */
body{background:var(--page);color:var(--ink);font:14px/1.6 var(--mono);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
::selection{background:var(--pink);color:var(--on-accent)}
img{display:block;width:100%;height:auto}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.ic{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;vertical-align:-1px}

/* A thin thumb in a wide gutter, like the app. */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--page)}
::-webkit-scrollbar-thumb{background:var(--line);border:4px solid var(--page)}
::-webkit-scrollbar-thumb:hover{background:var(--ash)}
@supports not selector(::-webkit-scrollbar){html{scrollbar-color:var(--line) var(--page);scrollbar-width:thin}}

/* ── The name, as background: outlined, vertical, fixed to the left edge.
   Read bottom to top. Sections with their own fill pass over it. ──────── */
.backdrop{position:fixed;left:20px;top:0;bottom:0;z-index:-1;display:flex;align-items:center;justify-content:center;
  writing-mode:vertical-rl;transform:rotate(180deg);pointer-events:none;user-select:none;white-space:nowrap;
  font:min(10vh,88px)/.9 var(--display);text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1px var(--ash);opacity:.45}

/* Out-of-focus light behind everything: two broad washes for contrast and a
   few soft discs spread over the page, pink and cyan, fixed while the page
   scrolls. Blurred once as a single layer; it never repaints. */
body::before{content:"";position:fixed;inset:-80px;z-index:-2;pointer-events:none;filter:blur(22px);
  background:
    radial-gradient(circle 110px at 85% 12%,rgba(254,44,85,0.29) 0 30%,rgba(254,44,85,0) 100%),
    radial-gradient(circle 40px at 60% 5%,rgba(254,44,85,0.2) 0 30%,rgba(254,44,85,0) 100%),
    radial-gradient(circle 60px at 97% 44%,rgba(254,44,85,0.19) 0 30%,rgba(254,44,85,0) 100%),
    radial-gradient(circle 46px at 28% 62%,rgba(254,44,85,0.12) 0 30%,rgba(254,44,85,0) 100%),
    radial-gradient(circle 80px at 74% 90%,rgba(254,44,85,0.16) 0 30%,rgba(254,44,85,0) 100%),
    radial-gradient(circle 130px at 5% 80%,rgba(37,244,238,0.19) 0 30%,rgba(37,244,238,0) 100%),
    radial-gradient(circle 50px at 20% 16%,rgba(37,244,238,0.13) 0 30%,rgba(37,244,238,0) 100%),
    radial-gradient(circle 56px at 91% 72%,rgba(37,244,238,0.16) 0 30%,rgba(37,244,238,0) 100%),
    radial-gradient(circle 40px at 47% 97%,rgba(37,244,238,0.14) 0 30%,rgba(37,244,238,0) 100%),
    radial-gradient(circle 34px at 42% 36%,rgba(37,244,238,0.09) 0 30%,rgba(37,244,238,0) 100%),
    radial-gradient(ellipse 55% 50% at 88% 10%,rgba(254,44,85,.09),rgba(254,44,85,0) 70%),
    radial-gradient(ellipse 50% 55% at 4% 90%,rgba(37,244,238,.07),rgba(37,244,238,0) 70%),
    radial-gradient(ellipse 40% 40% at 80% 96%,rgba(254,44,85,.05),rgba(254,44,85,0) 70%)}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero{padding-top:64px}
.tag{display:inline-block;border:var(--rule);background:var(--plate);color:var(--ash);padding:5px 9px;font:11px var(--mono);letter-spacing:.12em;text-transform:uppercase}
h1{font:clamp(26px,5.6vw,84px)/1.04 var(--display);text-transform:uppercase;margin:24px 0 28px;letter-spacing:-.01em}
/* The last full stop takes the wordmark's pink. */
h1 .dot{color:var(--pink)}
/* One left edge for the whole hero: headline, intro, downloads, fine print. */
.hero-row{display:grid;gap:32px}
.sub{font-size:16px;line-height:1.6;max-width:60ch;color:var(--ink)}
.sub em{font-style:normal;color:var(--ash)}

/* ── Downloads: the app's Generate button. Pink, hatched; on hover the
   hatch goes, the face turns ink and the label splits once. ──────────── */
.get{display:grid;gap:18px;isolation:isolate}
.dl-rows{display:flex;flex-wrap:wrap;gap:18px 24px}
.dl-rows .dl-row{flex:0 1 auto;min-width:300px}
.dl-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr);box-shadow:0 0 0 2px var(--page)}
.dl-row--split{grid-template-columns:minmax(0,1fr) auto}
.dl-row::before{content:"";position:absolute;inset:0;z-index:-1;transform:translate(7px,7px);background:var(--hatch-pink);pointer-events:none}
.dl-row:has(.dl:hover)::before{visibility:hidden}
.dl{display:flex;align-items:center;gap:14px;min-height:62px;padding:12px 18px;background:var(--pink);color:var(--on-accent);text-decoration:none;
  transition:background var(--frames),color var(--frames)}
.dl + .dl{border-left:1px solid rgba(14,14,16,.3)}
.dl b{display:block;font:15px/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em;font-weight:400}
.dl small{display:block;font:11px var(--mono);letter-spacing:.04em;opacity:.75;margin-top:4px}
.dl--alt{justify-content:center;padding:12px 20px}
.os{width:22px;height:22px;flex:none;fill:currentColor}
.dl:hover{background:var(--ink);color:var(--on-accent)}
.dl:hover b{text-shadow:-2px 0 0 var(--cyan),2px 0 0 var(--pink);animation:splitIn 120ms steps(1,end) 1}
.dl:active{transform:translate(3px,3px)}
.dl:focus-visible{position:relative;z-index:1}
@keyframes splitIn{0%{text-shadow:-5px 0 0 var(--cyan),5px 0 0 var(--pink)}50%{text-shadow:-1px 0 0 var(--cyan),1px 0 0 var(--pink)}}

.get .fine{font:11px/1.7 var(--mono);color:var(--ash);letter-spacing:.02em}
.get .fine a,.get .fine b{color:var(--ink);font-weight:400}
.get .fine a{text-decoration-color:var(--line);text-underline-offset:3px}
.get .fine a:hover{color:var(--cyan);text-decoration-color:currentColor}
.links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:-6px}
.links a{display:inline-flex;align-items:center;gap:6px}

/* ── The app, as a window: square, ruled, its offset block hatched ───── */
.stage{margin-top:56px;padding-bottom:80px;isolation:isolate}
.window{position:relative;border:var(--rule);background:var(--plate);box-shadow:0 0 0 2px var(--page)}
.window::before{content:"";position:absolute;inset:-1px;transform:translate(12px,12px);z-index:-1;background:var(--hatch-cyan);opacity:.55}
.titlebar{display:flex;align-items:stretch;justify-content:space-between;height:36px;border-bottom:var(--rule);background:var(--page);color:var(--ash);font:11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.titlebar .app{display:flex;align-items:center;gap:10px;padding:0 14px}
.titlebar .app i{width:12px;height:12px;border:1px solid var(--ink);position:relative}
.titlebar .app i::after{content:"";position:absolute;right:-4px;top:-4px;width:4px;height:4px;background:var(--pink)}
.controls{display:flex}
.controls i{width:44px;position:relative;border-left:var(--rule);color:var(--ash)}
.controls i::before,.controls i::after{content:"";position:absolute;left:50%;top:50%;background:currentColor}
.controls .min::before{width:10px;height:1px;transform:translate(-50%,-50%)}
.controls .max::before{width:10px;height:10px;background:none;border:1px solid currentColor;transform:translate(-50%,-50%)}
.controls .close::before,.controls .close::after{width:13px;height:1px;transform:translate(-50%,-50%) rotate(45deg)}
.controls .close::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* ── How it works: one plate across the page, read left to right ───────── */

/* ── Providers: a wall of their own marks ──────────────────────────────── */
.providers{padding:64px 0 72px}
.providers h2{font:11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ash);margin-bottom:14px;font-weight:400}
.logos{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:var(--rule)}
.logos li{display:flex;align-items:center;gap:14px;padding:22px 20px;background:var(--plate);font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  transition:background var(--frames),color var(--frames)}
.logos li:hover{background:var(--raised);color:var(--cyan)}
.logos svg,.mask{width:28px;height:28px;flex:none;fill:currentColor}
.mask{background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.mask--higgsfield{--m:url('logos/higgsfield-mask.png')}
.note{margin-top:14px;font:11px var(--mono);color:var(--ash);letter-spacing:.04em}

/* ── Footer ────────────────────────────────────────────────────────────── */
.foot{border-top:var(--rule);background:var(--plate);padding:22px 0}
.foot p{font:11px/1.7 var(--mono);letter-spacing:.04em}
.foot a{text-decoration-color:var(--line);text-underline-offset:3px}
.foot a:hover{color:var(--cyan);text-decoration-color:currentColor}
.foot .fine{color:var(--ash);margin-top:6px}

/* Narrower than the name plus its margin: the content steps right to keep a
   strip for the outlined name, rather than running over it. */
@media (min-width:641px) and (max-width:1400px){
  .wrap{width:auto;margin-left:120px;margin-right:24px}
}
@media (max-width:900px){
  .hero-row{gap:28px}
  .logos{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .backdrop{left:4px;font-size:min(9vh,64px);opacity:.22}
  .dl-rows .dl-row{flex:1 1 100%;min-width:0}
  .stage{padding-bottom:48px}
  .titlebar{height:28px}
  .controls i{width:30px}
  .window::before{transform:translate(7px,7px)}
  .dl b{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .dl:active{transform:none}
}