/* Lazycodegames - studio pages (home, support, legal, 404).
   Direction: "the name as a monument" (tasteskill seed 1030123162). Panchang for the name, Switzer for reading.
   The game pages add their own stylesheet on top of the shared reset in this file. */

@font-face{font-family:"Panchang";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/panchang-700.woff2) format("woff2")}
@font-face{font-family:"Switzer";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/switzer-400.woff2) format("woff2")}
@font-face{font-family:"Switzer";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/switzer-500.woff2) format("woff2")}

:root{
  --bg:#111310; --surface:#1a1d18; --surface-2:#22261f; --ink:#eeeeee; --muted:#aeb2a6; --accent:#c1fa4b; --accent-ink:#111310;
  --paper:#ebebeb; --paper-ink:#111310; --paper-muted:#55594f;
  --font-display:"Panchang","Arial Black",system-ui,sans-serif;
  --font-text:"Switzer",system-ui,-apple-system,"Segoe UI",sans-serif;
  --step-small:clamp(0.8125rem,0.79rem + 0.1vw,0.875rem);
  --step-body:clamp(1.0625rem,1rem + 0.25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.05rem + 0.75vw,1.75rem);
  --step-head:clamp(1.75rem,1.4rem + 1.2vw,2.5rem);
  --margin:clamp(1rem,2.2vw,2rem);
  --gutter:clamp(1rem,2vw,2rem);
  --ease-out:cubic-bezier(0.22,1,0.36,1); --ease-expo:cubic-bezier(0.16,1,0.3,1); --ease-in-out:cubic-bezier(0.76,0,0.24,1); --ease-soft:cubic-bezier(0.33,1,0.68,1);
  --t-press:140ms; --t-hover:180ms; --t-ui:240ms;
  color-scheme:dark;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-text);font-size:var(--step-body);line-height:1.55;font-kerning:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul[class],ol[class]{padding:0;list-style:none}
img,video,svg,picture{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
:target{scroll-margin-top:5rem}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
h1,h2,h3{text-wrap:balance;hyphens:none;font-weight:inherit}
p{text-wrap:pretty}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--margin);top:.75rem;z-index:50;background:var(--accent);color:var(--accent-ink);padding:.7rem 1rem;font-weight:500;text-decoration:none;clip-path:inset(50%);white-space:nowrap}
.skip:focus{clip-path:none}

/* ---------- buttons and links ---------- */
.button{display:inline-flex;align-items:center;gap:.6em;min-height:3.25rem;padding:0 1.5rem;background:var(--accent);color:var(--accent-ink);font-weight:500;text-decoration:none;white-space:nowrap;border-radius:0;transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease,color var(--t-hover) ease}
.button:active{transform:scale(.97)}
.button svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-ui) var(--ease-out)}
.button.disabled{cursor:default;background:var(--surface-2);color:var(--muted)}
.button.disabled:active{transform:none}
.link{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.22em;text-decoration-thickness:.07em;transition:text-decoration-color var(--t-hover) ease,color var(--t-hover) ease}
@media (hover:hover) and (pointer:fine){
  .button:not(.disabled):hover{background:var(--ink);color:var(--bg)}
  .button:not(.disabled):hover svg{transform:translate(2px,-2px)}
  .link:hover{text-decoration-color:currentColor}
}

/* ---------- header bar ---------- */
.bar{position:absolute;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.4rem var(--margin)}
.bar .mark{font-weight:500;text-decoration:none;letter-spacing:-.01em}
.bar nav{display:flex;gap:clamp(1rem,2.4vw,2.25rem)}
.bar nav a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.3em;text-decoration-thickness:.08em;transition:text-decoration-color var(--t-hover) ease}
.bar nav a[aria-current]{text-decoration-color:currentColor}
@media (hover:hover) and (pointer:fine){.bar nav a:hover{text-decoration-color:currentColor}}
.bar .menu{display:none;min-height:44px;padding:0 .25rem;font-weight:500}
.bar.solid{position:relative}
@media (max-width:40rem){
  .js .bar .menu{display:block}
  .js .bar nav{display:none}
  .js .bar.is-open{background:var(--bg);flex-wrap:wrap}
  .js .bar.is-open nav{display:flex;flex-direction:column;gap:0;width:100%;order:3;padding-top:.5rem}
  .js .bar.is-open nav a{font-size:var(--step-lead);padding:.55rem 0}
  .bar nav{flex-wrap:wrap;gap:.25rem 1rem}
}

/* ---------- entrances (content stays visible without JavaScript) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-expo);transition-delay:calc(var(--i,0) * 80ms)}
  .js [data-reveal].is-in{opacity:1;transform:none}
  .js .shutter[data-reveal]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1100ms var(--ease-in-out);transition-delay:calc(var(--i,0) * 80ms)}
  .js .shutter[data-reveal] img{transform:scale(1.12);transition:transform 1500ms var(--ease-soft)}
  .js .shutter[data-reveal].is-in{clip-path:inset(0)}
  .js .shutter[data-reveal].is-in img{transform:none}
  .js .rise{opacity:0;transform:translateY(18px);animation:rise 900ms var(--ease-expo) forwards}
  .js .rise-1{animation-delay:120ms}.js .rise-2{animation-delay:220ms}.js .rise-3{animation-delay:320ms}.js .rise-4{animation-delay:420ms}
  .js .mono-line{display:block;transform:translateY(40%);opacity:0;animation:lineup 1100ms var(--ease-expo) forwards}
  .js .mono-line + .mono-line{animation-delay:120ms}
}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes lineup{to{opacity:1;transform:none}}

/* =====================================================================
   HOME
   ===================================================================== */

/* ---------- hero: the name as a monument ---------- */
.hero{position:relative;min-height:max(40rem,min(100svh,62vw));overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;padding:0 var(--margin)}
.hero-copy{grid-row:1;grid-column:1;padding-top:clamp(6rem,11vh,8rem)}
.hero-copy p{font-size:var(--step-lead);line-height:1.3;max-width:34ch}
.hero-copy .button{margin-top:2rem}
.hero-games{grid-row:1;grid-column:2;justify-self:end;align-self:start;display:flex;gap:clamp(.75rem,1.4vw,1.25rem);padding-top:clamp(6rem,11vh,8rem)}
.hero-games a{display:block;text-decoration:none;width:clamp(8rem,14.5vw,14rem)}
.hero-games .thumb{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--surface)}
.hero-games img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease-soft)}
.hero-games span.cap{display:block;margin-top:.6rem;font-size:1rem;line-height:1.35}
@media (hover:hover) and (pointer:fine){.hero-games a:hover img{transform:scale(1.04)}}
.monument{grid-row:3;grid-column:1/-1;margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:12vw;line-height:.8;letter-spacing:-.02em;white-space:nowrap;transform-origin:50% 100%}
.monument .mono-line{display:block;width:max-content}
.monument .l2{margin-bottom:-.1em;color:var(--accent)}
@media (max-width:40rem){
  .hero{min-height:max(42rem,100svh);grid-template-columns:1fr;padding-right:calc(var(--mono-w,9rem) + var(--margin) + .75rem)}
  .hero-copy{padding-top:5.5rem}
  .hero-copy p{font-size:1.1875rem;line-height:1.35}
  .hero-copy .button{margin-top:1.5rem}
  .hero-games{grid-row:2;grid-column:1;justify-self:start;padding-top:2rem;flex-direction:column;gap:1.25rem}
  .hero-games a{width:100%;max-width:13rem}
  .hero-games .thumb{aspect-ratio:16/10}
  .monument{position:absolute;grid-area:auto;top:4.75rem;bottom:0;right:calc(var(--margin) + 6px);writing-mode:vertical-rl;font-size:22vw}
  .monument .mono-line{width:auto;height:max-content}
  .monument .l2{margin:0 0 0 -.06em}
}

/* ---------- work: titles torn at the seam ---------- */
.work{position:relative;background:var(--bg)}
.work-head{padding:clamp(5rem,9vw,8rem) var(--margin) 2rem;font-size:var(--step-head);line-height:1.05;letter-spacing:-.01em;font-weight:500}
.proj{position:relative;height:190svh}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
.pane{position:relative;overflow:hidden;background:var(--surface)}
.pane .move{position:absolute;left:0;right:0;top:-24svh;height:148svh}
.pane img{width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(1.05)}
.pane-r img.zoom{object-position:20% 42%}
.pane picture{display:block;height:100%}
.seam{position:absolute;inset:0 0 auto 0;height:calc(100svh - var(--foot-h));z-index:4;display:grid;place-items:center;text-align:center;padding:0 var(--margin)}
.stage{--foot-h:clamp(7rem,15vh,9rem)}
.seam-title{grid-area:1/1;font-family:var(--font-display);font-weight:700;text-transform:uppercase;line-height:.84;letter-spacing:-.02em;font-size:clamp(3rem,10.4vw,10.5rem);color:var(--paper)}
.seam-title .tear{position:relative;display:block}
.seam-title .half-l{display:block;clip-path:inset(-10% 50% -10% -10%)}
.seam-title .tear::after{content:attr(data-text);white-space:pre;position:absolute;inset:0;clip-path:inset(-10% -10% -10% 50%);transform:translate3d(0,var(--tr,0px),0)}
.seam-foot{position:absolute;left:0;right:0;bottom:0;z-index:5;height:var(--foot-h);display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;padding:0 var(--margin);background:var(--bg)}
.seam-meta{font-size:var(--step-lead);line-height:1.25;max-width:34ch}
.seam-link{display:inline-flex;align-items:center;min-height:44px;font-weight:500;color:var(--accent);flex:none}
.seam-link svg{width:1em;height:1em;margin-left:.4em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.seam-link:hover svg{transform:translate(3px,-3px)}}
@media (max-width:40rem){
  .stage{--foot-h:9.5rem}
  .seam-title{font-size:12.5vw}
  .seam-foot{flex-direction:column;align-items:flex-start;justify-content:center;gap:.25rem}
  .seam-meta{font-size:1.0625rem}
}
@media (prefers-reduced-motion:reduce){.pane .move,.seam-title .half-l,.seam-title .tear::after{transform:none!important}}

/* ---------- about: portrait as drop cap ---------- */
.about{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);padding:clamp(7rem,13vw,11rem) var(--margin)}
.about h2{grid-column:3/-1;font-size:var(--step-head);line-height:1.05;font-weight:500;letter-spacing:-.01em;margin-bottom:2.5rem}
.facts{grid-column:1/3;grid-row:2;display:grid;gap:1.25rem;align-content:start;font-size:1rem;line-height:1.4;padding-top:.4rem}
.facts dt{color:var(--muted)}
.facts dd{color:var(--ink)}
.bio{grid-column:3/-1;grid-row:2}
.bio p{font-size:clamp(1.375rem,1rem + 1.1vw,1.75rem);line-height:1.25;letter-spacing:-.01em;max-width:none}
.bio p.bio-more{margin-top:1.75rem;font-size:var(--step-lead);line-height:1.4;max-width:46ch;letter-spacing:0}
.bio .drop{float:left;width:3.66em;height:3.66em;margin:.18em .5em 0 0;overflow:hidden}
.bio .drop img{width:100%;height:100%;object-fit:cover}
.bio strong{font-weight:500}
@media (max-width:48rem){
  .about h2,.bio{grid-column:1/-1}
  .facts{grid-column:1/-1;grid-row:3;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.5rem}
  .facts div:last-child{grid-column:1/-1}
  .bio p{font-size:1.1875rem;line-height:1.45}
  .bio p.bio-more{font-size:1.1875rem}
  .bio .drop{width:5.8em;height:5.8em}
  .bio .drop{width:4.9em;height:4.9em}
}

/* ---------- contact: display rows ---------- */
.contact h2{font-size:var(--step-head);line-height:1.05;font-weight:500;letter-spacing:-.01em;padding:0 var(--margin) 2.5rem}
.rows{display:block}
.rows li{display:block;background:var(--bg)}
.rows li:nth-child(odd){background:var(--surface)}
.row{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;min-height:clamp(5.25rem,10vw,9.5rem);padding:0 var(--margin) clamp(.9rem,1.6vw,1.5rem) calc(var(--margin) + .25rem);font-size:clamp(1.75rem,5.4vw,5rem);line-height:1;letter-spacing:-.025em;text-decoration:none;overflow-wrap:anywhere}
a.row{transition:color var(--t-hover) ease,background-color var(--t-hover) ease}
a.row .go{flex:none;width:.6em;height:.6em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.0;transform:translate(-8px,8px);transition:opacity var(--t-ui) ease,transform var(--t-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  a.row:hover{color:var(--accent)}
  a.row:hover .go{opacity:1;transform:none}
}
a.row:focus-visible .go{opacity:1;transform:none}
.row small{display:block;font-size:1rem;letter-spacing:0;line-height:1.4;color:var(--muted);max-width:26ch;text-align:right;padding-bottom:.25rem}
.row.hello{background:var(--accent);color:var(--accent-ink);justify-content:flex-start;gap:.35em}
.rows li.hello-li{background:var(--accent)}
.row.hello .round{display:inline-grid;place-items:center;width:.9em;height:.9em;border-radius:50%;background:var(--accent-ink);color:var(--accent);transform:translateY(-.08em);transition:transform var(--t-ui) var(--ease-out)}
.row.hello .round svg{width:.45em;height:.45em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){a.row.hello:hover{color:var(--accent-ink)}a.row.hello:hover .round{transform:translate(.08em,-.16em)}}
@media (max-width:40rem){
  .row{font-size:clamp(1.5rem,8.6vw,2.5rem);min-height:5.25rem;flex-wrap:wrap;align-items:flex-end;padding-top:1rem}
  .row small{text-align:left;max-width:none;width:100%;padding:0}
  .row .email{font-size:clamp(1.5rem,8.6vw,2.5rem)}
}

/* ---------- studio footer: invitation over a cropped name ---------- */
.foot{position:relative;background:var(--paper);color:var(--paper-ink);overflow:hidden;padding:clamp(5rem,9vw,8rem) var(--margin) 0}
.foot ::selection{background:var(--paper-ink);color:var(--paper)}
.foot :focus-visible{outline-color:var(--paper-ink)}
.foot-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.invite{grid-column:1/10}
.invite h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(1.75rem,5.4vw,5rem);line-height:.95;letter-spacing:-.02em;white-space:nowrap}
.invite .button{margin-top:2rem;background:var(--paper-ink);color:var(--paper)}
@media (hover:hover) and (pointer:fine){.invite .button:hover{background:var(--accent);color:var(--accent-ink)}}
.foot-links{grid-column:10/-1;display:grid;gap:.55rem;align-content:start}
.foot-links a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.25em;transition:text-decoration-color var(--t-hover) ease;justify-self:start}
@media (hover:hover) and (pointer:fine){.foot-links a:hover{text-decoration-color:currentColor}}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;margin-top:clamp(5rem,10vw,9rem);font-size:var(--step-small);line-height:1.4;color:var(--paper-muted)}
.foot-legal p{max-width:none}
.foot-legal a{color:var(--paper-ink)}
.foot-name{margin-top:1rem;font-family:var(--font-display);font-weight:700;text-transform:uppercase;white-space:nowrap;font-size:7vw;line-height:.8;letter-spacing:-.02em;max-width:none}
.foot-name > span{display:block;width:max-content;height:.6em;overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .foot-name > span{transform-origin:0 100%;animation:grow linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    @keyframes grow{from{transform:scale(.94)}to{transform:none}}
  }
}
@media (max-width:48rem){
  .invite,.foot-links{grid-column:1/-1}
  .invite h2{font-size:6.9vw}
  .invite .button{width:100%;justify-content:center}
  .foot-links{margin-top:2.5rem;grid-template-columns:1fr 1fr;gap:.6rem 1rem;font-size:.9375rem}
  .foot-name > span{height:auto}
  .foot-name > span > span{display:block}
  .foot-name > span > span:last-child{height:.6em;overflow:hidden}
}

/* =====================================================================
   DOCUMENTS: support, privacy, terms, 404
   ===================================================================== */
.doc-page{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);padding:clamp(7.5rem,12vw,10rem) var(--margin) clamp(6rem,10vw,9rem)}
.doc-side{grid-column:1/5}
.doc-side-in{position:sticky;top:2rem}
.doc-side h1{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(1.75rem,1.2rem + 2.1vw,3.25rem);line-height:1;letter-spacing:-.02em}
.doc-side .updated{margin-top:1.25rem;color:var(--muted);font-size:var(--step-small)}
.doc-side .crumb{display:inline-flex;align-items:center;min-height:44px;margin-bottom:1.25rem;font-weight:500}
.doc-side .toc{margin-top:2.5rem;display:grid;gap:.35rem;font-size:var(--step-small)}
.doc-side .toc a{color:var(--muted);text-decoration:none;transition:color var(--t-hover) ease}
@media (hover:hover) and (pointer:fine){.doc-side .toc a:hover{color:var(--ink)}}
.doc{grid-column:6/-1;max-width:44rem}
.doc > p,.doc li{font-size:1.125rem;line-height:1.65}
.doc > p{max-width:66ch}
.doc > p + p{margin-top:1em}
.doc h2{font-size:var(--step-lead);line-height:1.2;font-weight:500;letter-spacing:-.01em;margin:3rem 0 1rem}
.doc h2:first-child{margin-top:0}
.doc ul{margin:1rem 0;padding-left:1.25rem}
.doc li + li{margin-top:.45em}
.doc ul.summary{list-style:none;padding:1.5rem 1.75rem;background:var(--surface);display:grid;gap:.6rem}
.doc ul.summary li{margin:0}
.doc a{color:var(--accent);text-underline-offset:.2em;text-decoration-thickness:.07em}
.doc strong{font-weight:500}
.doc .lede{font-size:var(--step-lead);line-height:1.35;max-width:36ch}
@media (max-width:56rem){
  .doc-side,.doc{grid-column:1/-1}
  .doc-side-in{position:static}
  .doc-side .toc{display:none}
  .doc{margin-top:2.5rem}
}

/* support */
.mailbox{display:block;margin:2.5rem 0 1rem;padding:1.75rem;background:var(--accent);color:var(--accent-ink);text-decoration:none}
.mailbox span{display:block;font-size:var(--step-small)}
.mailbox strong{display:block;font-size:clamp(1.25rem,1rem + 1.6vw,2.25rem);line-height:1.1;letter-spacing:-.02em;font-weight:500;overflow-wrap:anywhere;margin-top:.35rem}
.doc .mailbox{color:var(--accent-ink)}
.mailbox-note{color:var(--muted)}
.faq{display:grid;gap:.375rem;margin-top:1rem}
.faq details{background:var(--surface)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:3.5rem;padding:.85rem 1.25rem;cursor:pointer;list-style:none;font-weight:500;font-size:1.125rem;transition:background-color var(--t-hover) ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;transition:transform var(--t-ui) var(--ease-out)}
.faq details[open] summary .pm{transform:rotate(45deg)}
@media (hover:hover) and (pointer:fine){.faq summary:hover{background:var(--surface-2)}}
.faq details > div{padding:0 1.25rem 1.25rem}
.faq details p{font-size:1.0625rem;line-height:1.6;max-width:62ch}
.faq details p + p{margin-top:.75em}

/* 404 */
.lost{min-height:max(36rem,88svh);display:grid;align-content:end;padding:8rem var(--margin) 3rem;overflow:hidden}
.lost .num{font-family:var(--font-display);font-weight:700;font-size:clamp(6rem,26vw,24rem);line-height:.8;letter-spacing:-.03em;color:var(--accent);margin:0}
.lost h1{font-size:var(--step-head);font-weight:500;line-height:1.1;margin-top:2rem}
.lost p{margin-top:.75rem;font-size:var(--step-lead);line-height:1.3;max-width:34ch}
.lost .btns{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;margin-top:2rem}

/* game legal pages: a light touch of each game's world above a plain document */
.game-band{padding:clamp(6.5rem,10vw,8rem) var(--margin) clamp(2.5rem,5vw,4rem)}
.game-band a{display:inline-flex;align-items:center;min-height:44px;font-weight:500}
.game-band .band-name{display:block;margin-top:.5rem;font-size:clamp(2.75rem,9vw,8rem);line-height:.85;letter-spacing:-.03em}
.has-band .doc-page{padding-top:clamp(3.5rem,6vw,5rem)}
body:has(.tb-band) .bar{color:#0f1a1d}