/* ============================================================
   Pure Games — puregames.gg
   ============================================================ */

:root{
  --bg:#000;
  --fg:#fff;
  --muted:rgba(255,255,255,.52);
  --faint:rgba(255,255,255,.30);
  --line:rgba(255,255,255,.10);

  --container:84rem;
  --pad:clamp(1.5rem,4vw,3.5rem);

  --font-text:"Segoe UI Variable Text","Segoe UI",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Segoe UI Variable Display","Segoe UI",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

html{color-scheme:dark;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-text);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{background:#fff;color:#000}

:where(a,button):focus-visible{
  outline:1px solid var(--fg);
  outline-offset:4px;
  border-radius:2px;
}

/* ------------------------------------------------------------
   Stage — full viewport, content anchored to the edges
   ------------------------------------------------------------ */

.stage{
  display:flex;
  flex-direction:column;
  min-height:100dvh;
  max-width:var(--container);
  margin-inline:auto;
  padding:var(--pad);
}

.mark{display:block;width:auto;fill:currentColor;flex:none;height:2.5rem}

.stage > header{flex:none}

/* ------------------------------------------------------------
   Name block — sits low, not centred
   ------------------------------------------------------------ */

.identity{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block:clamp(3rem,9vh,6rem);
}

.identity h1{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(2.75rem,8vw,6.5rem);
  font-weight:600;
  letter-spacing:-.05em;
  line-height:.95;
}

.identity .line{
  margin:clamp(1.25rem,2.2vw,1.75rem) 0 0;
  max-width:42ch;
  font-size:clamp(.9375rem,1.15vw,1.0625rem);
  line-height:1.6;
  color:var(--muted);
  text-wrap:pretty;
}

/* ------------------------------------------------------------
   Foot
   ------------------------------------------------------------ */

.foot{
  flex:none;
  padding-top:clamp(1.5rem,3vw,2rem);
  border-top:1px solid var(--line);
}

.foot-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1.25rem 2.5rem;
}

.reach{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.5rem 1.25rem;
}

.tag{
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--faint);
}

.handle{
  appearance:none;
  margin:0;padding:0;border:0;background:none;
  font:inherit;
  font-size:.9375rem;
  color:var(--muted);
  cursor:pointer;
  transition:color .18s var(--ease);
}
.handle:hover{color:var(--fg)}
.handle[data-state]{color:var(--fg)}

/* Shared confirmation — sits after the handles so it can never overlap one. */
.copied{
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--faint);
  white-space:nowrap;
  opacity:0;
  transition:opacity .18s var(--ease);
}
.copied[data-on]{opacity:1}

.meta{
  display:flex;
  align-items:baseline;
  gap:1.5rem;
  font-size:.75rem;
  color:var(--faint);
}
.meta a{color:var(--faint);text-decoration:none;transition:color .18s var(--ease)}
.meta a:hover{color:var(--fg)}

.fine{
  margin:clamp(1.5rem,3vw,2rem) 0 0;
  max-width:64ch;
  font-size:.6875rem;
  line-height:1.6;
  color:rgba(255,255,255,.22);
  text-wrap:pretty;
}

/* ------------------------------------------------------------
   Inner pages
   ------------------------------------------------------------ */

.page-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}

.page-head .mark{height:2.25rem;color:var(--fg)}

.back{
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--faint);
  text-decoration:none;
  transition:color .18s var(--ease);
}
.back:hover{color:var(--fg)}

.prose{
  flex:1;
  max-width:62ch;
  padding-block:clamp(3.5rem,10vh,6rem);
}

.prose h1{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(2.25rem,5.5vw,3.5rem);
  font-weight:600;
  letter-spacing:-.045em;
  line-height:1.02;
}

.prose .stamp{
  margin:1rem 0 0;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--faint);
}

.prose h2{
  margin:2.5rem 0 .5rem;
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:600;
  letter-spacing:-.015em;
}

.prose p{
  margin:0 0 1rem;
  color:var(--muted);
  line-height:1.75;
  text-wrap:pretty;
}
.prose p:last-child{margin-bottom:0}

.prose .lede{
  margin-top:2rem;
  padding-top:2rem;
  border-top:1px solid var(--line);
}

.prose a{
  color:var(--fg);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.22);
  transition:border-color .18s var(--ease);
}
.prose a:hover{border-bottom-color:var(--fg)}

.notfound{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block:clamp(4rem,14vh,8rem);
}

.notfound .stamp{
  margin:0;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--faint);
}

.notfound h1{
  margin:1rem 0 0;
  font-family:var(--font-display);
  font-size:clamp(2.5rem,7vw,5rem);
  font-weight:600;
  letter-spacing:-.05em;
  line-height:.95;
}

.notfound a{
  margin-top:2rem;
  width:fit-content;
  font-size:.9375rem;
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.22);
  padding-bottom:2px;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.notfound a:hover{color:var(--fg);border-bottom-color:var(--fg)}

/* ------------------------------------------------------------
   Narrow
   ------------------------------------------------------------ */

@media (max-width:38rem){
  .foot-row{flex-direction:column;align-items:flex-start;gap:1.5rem}
}

/* ------------------------------------------------------------
   Entrance
   ------------------------------------------------------------ */

@media (prefers-reduced-motion:no-preference){
  .stage > *{animation:fade .7s var(--ease) both}
  .identity{animation-delay:.08s}
  .foot{animation-delay:.16s}
}

@keyframes fade{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}