/* gaglioneandrea.com: una pagina sola, come jasonmarder.com. SF Pro su Apple, font di sistema altrove. */
:root{
  --bg:#fff;
  --fg:#000005;
  --muted:#6e6e73;
  --link:#1770d7;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --round:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#000;--fg:#f5f5f7;--muted:#98989d;--link:#4da3ff;color-scheme:dark}
}
:root[data-theme="dark"]{--bg:#000;--fg:#f5f5f7;--muted:#98989d;--link:#4da3ff;color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}

*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:17px;line-height:1.5;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .3s,color .3s}
main{padding:clamp(48px,9vh,80px) 0 0}
p{margin:0}

/* titolo enorme: SF Pro condensato e pesante; lo script lo adatta alla larghezza, qualunque sia il font */
.name{margin:0 auto;padding:0 20px;text-align:center;font-weight:800;font-stretch:75%;font-variation-settings:"wdth" 75;
  text-transform:uppercase;letter-spacing:-.015em;line-height:.88;font-size:min(160px,19vw)}
.name span{display:block;width:max-content;max-width:none;margin:0 auto}
.aka{margin:clamp(14px,2.4vw,22px) 0 0;text-align:center;font-family:var(--round);font-weight:600;font-size:clamp(19px,2.6vw,24px);letter-spacing:-.01em;color:var(--muted)}
.aka b{font-weight:700;color:var(--fg)}

.copy{max-width:calc(608px + 40px);margin:clamp(56px,9vw,96px) auto 0;padding:0 20px}
.copy p + p{margin-top:28px}
.copy .why{color:var(--muted)}
.copy .why i{font-style:italic;color:var(--fg)}
a{color:var(--link);text-decoration:underline dashed 1px;text-underline-offset:4px;transition:opacity .2s}
a:hover{opacity:.75}
.soon{color:var(--muted)}

footer{max-width:calc(608px + 40px);margin:56px auto 0;padding:0 20px calc(48px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px}
.links{display:flex;gap:22px}
.right{display:flex;align-items:baseline;gap:18px}
.copyright{font-size:13px;font-weight:500;font-stretch:75%;font-variation-settings:"wdth" 75;text-transform:uppercase;letter-spacing:.02em;color:var(--muted)}
.theme{padding:0;border:0;background:none;font:inherit;font-size:13px;color:var(--muted);cursor:pointer;text-decoration:underline dotted 1px;text-underline-offset:3px}
.theme:hover{color:var(--fg)}

/* simbolo: impronta della mano nella pasta; il colore della pasta segue il testo, i solchi lo sfondo */
.mark{display:block;color:var(--fg)}
.mark .cut{fill:var(--bg);transition:fill .3s}