/* The Art of Minecraft — single-screen homepage */
:root{
  --static-paper:#fbf7f1;
  --static-ink:#37343d;
  --static-muted:#67616b;
  --static-purple:#8b76d8;
}
html{overflow:hidden;background:var(--static-paper)}
body.static-home{
  margin:0;
  width:100%;
  height:100svh;
  overflow:hidden;
  background:var(--static-paper);
  color:var(--static-ink);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
body.static-home *{box-sizing:border-box}
body.static-home a{color:inherit;text-decoration:none}
body.static-home button{font:inherit}
body.static-home:before,
body.static-home .art-wash,
body.static-home>.art-footer{display:none!important}
.static-page{width:100%;height:100svh;overflow:hidden}

.static-stage{
  position:relative;
  width:100%;
  height:100svh;
  min-height:0;
  overflow:hidden;
  isolation:isolate;
  background-image:url('/assets/taomc/home-hero-scene-v2.jpg');
  background-size:cover;
  background-position:center center;
}
.static-stage:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,rgba(255,250,244,.95) 0%,rgba(255,250,244,.87) 25%,rgba(255,250,244,.48) 42%,rgba(255,250,244,.08) 61%,rgba(255,250,244,0) 100%);
}
.static-stage:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 23%,rgba(255,255,255,0) 76%,rgba(25,30,34,.06)),
    radial-gradient(circle at 9% 25%,rgba(255,255,255,.28),transparent 25%);
}
.static-hero-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(29,32,35,.03))}

.static-nav{
  position:absolute;
  z-index:8;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:4px;
  padding:6px;
  border-radius:999px;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 9px 28px rgba(70,63,77,.10);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.static-nav a{
  padding:10px 22px;
  border-radius:999px;
  color:#5c5663;
  font-size:13px;
  font-weight:750;
  white-space:nowrap;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.static-nav a:hover{background:rgba(245,240,249,.96);color:#625194;transform:translateY(-1px)}
.static-nav a.is-active{background:rgba(237,230,248,.97);color:#66559a}

.static-hero-copy{
  position:absolute;
  z-index:4;
  left:clamp(34px,5.4vw,106px);
  top:clamp(118px,15vh,172px);
  width:min(610px,46vw);
}
.static-script{
  margin:0 0 14px;
  color:#88779f;
  font:italic clamp(23px,1.9vw,34px)/1.15 "Segoe Print","Bradley Hand",cursive;
  text-shadow:0 2px 14px rgba(255,255,255,.6);
}
.static-hero-copy h1{margin:0;display:grid;gap:8px;line-height:.86}
.static-title-dark{
  font-family:"Arial Black",Impact,Inter,sans-serif;
  font-size:clamp(54px,5vw,96px);
  letter-spacing:.012em;
  color:#37343d;
  text-shadow:0 2px 2px rgba(255,255,255,.3);
}
.static-title-pastel{
  font-family:"Arial Black",Impact,Inter,sans-serif;
  font-size:clamp(64px,5.7vw,110px);
  letter-spacing:.004em;
  background:linear-gradient(90deg,#eeb3b8 0%,#f2d49f 24%,#b9d2a5 45%,#add5dd 65%,#cfb8dd 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 2px 0 rgba(255,255,255,.22));
}
.static-lead{
  max-width:560px;
  margin:18px 0 0;
  color:#625e69;
  font-size:clamp(15px,1.05vw,19px);
  line-height:1.48;
  text-shadow:0 1px 8px rgba(255,255,255,.5);
}
.static-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.static-btn{
  min-height:54px;
  padding:0 24px;
  border-radius:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  font-size:15px;
  font-weight:800;
  border:1px solid rgba(197,187,192,.76);
  box-shadow:0 10px 26px rgba(66,58,75,.10);
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease;
}
.static-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(66,58,75,.15)}
.static-btn-primary{background:linear-gradient(180deg,#9988df,#846fce);color:#fff;border-color:#907bd7}
.static-btn-secondary{background:rgba(255,255,255,.92);color:#474250}
.static-gamepad{width:18px;height:13px;border:3px solid currentColor;border-radius:8px;display:inline-block;color:#fff;position:relative}
.static-gamepad:before,.static-gamepad:after{content:"";position:absolute;background:currentColor}
.static-gamepad:before{width:6px;height:2px;left:3px;top:3px;box-shadow:2px -2px 0 currentColor,2px 2px 0 currentColor}
.static-gamepad:after{width:3px;height:3px;border-radius:50%;right:2px;top:2px;box-shadow:-3px 3px 0 currentColor}

.static-server-pill{
  margin-top:16px;
  width:min(390px,100%);
  min-height:70px;
  padding:0 17px;
  border-radius:16px;
  border:1px solid rgba(209,200,197,.85);
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 28px rgba(74,64,71,.10);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:15px;
  color:#403b47;
  text-align:left;
  cursor:pointer;
  backdrop-filter:blur(8px);
}
.static-online-dot{width:15px;height:15px;border-radius:50%;background:#5bb96c;box-shadow:0 0 0 6px rgba(91,185,108,.13)}
.static-server-copy strong{display:block;font-size:15px;line-height:1.15}
.static-server-copy small{display:block;margin-top:4px;color:#77717b;font-size:12px}
.static-copy-glyph{font-size:27px;color:#6f6874}

.static-card-rack{
  position:absolute;
  z-index:6;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  width:min(calc(100% - 52px),1450px);
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  padding:16px;
  border-radius:25px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.80);
  box-shadow:0 18px 52px rgba(69,58,65,.15);
  backdrop-filter:blur(11px);
  -webkit-backdrop-filter:blur(11px);
}
.static-card{
  position:relative;
  min-height:176px;
  padding:17px 16px 15px;
  border-radius:18px;
  border:1px solid rgba(216,208,205,.84);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  color:#3c3744;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  overflow:hidden;
  cursor:pointer;
  font:inherit;
}
.static-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(68,57,65,.10);border-color:rgba(189,179,181,.96)}
.static-card-mint{background:linear-gradient(180deg,#f3f7f0,#f4f7f1)}
.static-card-blue{background:linear-gradient(180deg,#eef4fb,#edf3fa)}
.static-card-sand{background:linear-gradient(180deg,#fbf4e6,#faf3e5)}
.static-card-blush{background:linear-gradient(180deg,#fbeef4,#faedf3)}
.static-card-lilac{background:linear-gradient(180deg,#f2eefb,#f1edfa)}
.static-card-icon{height:52px;display:flex;align-items:center;justify-content:center}
.static-card-icon img{width:49px;height:49px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 5px 5px rgba(50,44,52,.10))}
.static-card h2{margin:10px 0 6px;font-size:18px;line-height:1.08;letter-spacing:-.02em}
.static-card p{margin:0;color:#6c6670;font-size:12px;line-height:1.38}
.static-card small{margin:-2px 0 3px;color:#887f88;font-size:11px}
.static-card-arrow{position:absolute;right:14px;bottom:11px;font-size:27px;line-height:1;color:#4d4752}

/* The homepage itself never scrolls. Secondary text opens as a modal instead. */
.static-info-modal{
  position:fixed;
  inset:0;
  z-index:1300;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(52,47,54,.28);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.static-info-modal.hidden{display:none}
.static-info-dialog{
  position:relative;
  width:min(560px,calc(100vw - 34px));
  max-height:min(76svh,620px);
  overflow:auto;
  padding:38px 38px 34px;
  border-radius:25px;
  border:1px solid rgba(205,195,191,.82);
  background:#fffdf9;
  box-shadow:0 28px 90px rgba(61,49,55,.24);
  color:#3d3842;
}
.static-info-close{position:absolute;right:18px;top:14px;border:0;background:transparent;color:#80777e;font-size:30px;line-height:1;cursor:pointer}
.static-info-kicker{display:inline-block;color:#967f91;font-size:10px;font-weight:850;letter-spacing:.18em}
.static-info-dialog h2{margin:10px 36px 13px 0;font-size:31px;line-height:1.05;letter-spacing:-.035em}
.static-info-body{color:#69626a;font-size:14px;line-height:1.7}
.static-info-body p{margin:0}
.static-info-body ul{margin:4px 0 0;padding-left:19px}
.static-info-body li+li{margin-top:7px}

@media (max-height:800px) and (min-width:821px){
  .static-nav{top:12px}
  .static-nav a{padding:8px 18px;font-size:12px}
  .static-hero-copy{top:88px;width:min(555px,46vw)}
  .static-script{font-size:23px;margin-bottom:10px}
  .static-title-dark{font-size:clamp(48px,4.45vw,78px)}
  .static-title-pastel{font-size:clamp(56px,5vw,90px)}
  .static-lead{font-size:14px;margin-top:14px;max-width:510px}
  .static-actions{margin-top:18px}
  .static-btn{min-height:46px;padding:0 20px;font-size:13px}
  .static-server-pill{min-height:60px;margin-top:12px}
  .static-card-rack{bottom:12px;padding:12px;gap:10px}
  .static-card{min-height:148px;padding:13px 12px 11px}
  .static-card-icon{height:42px}.static-card-icon img{width:40px;height:40px}
  .static-card h2{font-size:16px;margin:8px 0 5px}
  .static-card p{font-size:11px}.static-card small{font-size:10px}
}

@media (max-width:820px){
  .static-stage{background-position:62% center}
  .static-stage:before{background:linear-gradient(90deg,rgba(255,250,244,.94) 0%,rgba(255,250,244,.82) 55%,rgba(255,250,244,.24) 85%,rgba(255,250,244,.03) 100%)}
  .static-nav{top:12px;max-width:calc(100% - 20px);overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
  .static-nav::-webkit-scrollbar{display:none}
  .static-nav a{padding:9px 14px;font-size:11px}
  .static-hero-copy{left:22px;top:86px;width:min(610px,88vw)}
  .static-script{font-size:22px;margin-bottom:10px}
  .static-title-dark{font-size:clamp(44px,10vw,68px)}
  .static-title-pastel{font-size:clamp(50px,11.5vw,78px)}
  .static-lead{font-size:14px;max-width:90%}
  .static-actions{margin-top:18px;gap:9px}
  .static-btn{min-height:48px;padding:0 18px;font-size:13px}
  .static-server-pill{width:min(360px,88vw);min-height:62px;margin-top:11px}
  .static-card-rack{
    left:14px;
    right:14px;
    bottom:12px;
    transform:none;
    width:auto;
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:190px;
    overflow-x:auto;
    padding:11px;
    gap:9px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .static-card-rack::-webkit-scrollbar{display:none}
  .static-card{min-height:144px;padding:12px 11px;scroll-snap-align:start}
  .static-card-icon{height:40px}.static-card-icon img{width:39px;height:39px}
  .static-card h2{font-size:15px;margin:7px 0 4px}.static-card p{font-size:10.5px}.static-card small{font-size:9.5px}
}

@media (max-width:540px){
  .static-stage{background-position:66% center}
  .static-stage:before{background:linear-gradient(90deg,rgba(251,247,241,.80),rgba(251,247,241,.54) 70%,rgba(251,247,241,.10))}
  .static-hero-copy{left:15px;top:82px;width:calc(100vw - 30px)}
  .static-script{font-size:19px}
  .static-title-dark{font-size:38px}
  .static-title-pastel{font-size:44px}
  .static-lead{font-size:13px;line-height:1.42;max-width:96%}
  .static-actions{display:flex;flex-wrap:nowrap}
  .static-btn{min-height:44px;padding:0 14px;font-size:11px;border-radius:13px}
  .static-server-pill{width:100%;min-height:58px}
  .static-server-copy strong{font-size:12px}.static-server-copy small{font-size:10px}
  .static-card-rack{grid-auto-columns:164px}
  .static-info-dialog{padding:32px 22px 28px}.static-info-dialog h2{font-size:25px}
}