/* czumiu v63. black ground, red text, white accents. everything in latent sans, sentence case. bigger: wide layout, large type. */

@font-face{font-family:"Latent Sans";src:url("fonts/LatentSansCZ.ttf") format("truetype");font-display:block}

:root{
  --bg:#0c0a09; --red:#e5392b; --white:#ece6d8; --dim:#6f6a62;
  --latent:"Latent Sans","Comic Sans MS",ui-rounded,cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--red);font-family:var(--latent);
  font-size:2.56rem;line-height:1.4;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-style:normal;color:var(--white)}
::selection{background:var(--red);color:var(--bg)}
:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.wrap{max-width:min(90vw,1920px);margin:0 auto;padding:0 clamp(1.2rem,5vw,3.5rem)}

/* header: thin, just the mark and the way in */
.head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem 2rem;flex-wrap:wrap;
  padding:clamp(1.4rem,3vw,2.2rem) 0 clamp(2rem,5vh,3.2rem)}
.mark{display:inline-flex;align-items:center;gap:.55rem;color:var(--red)}
.mark svg{width:32px;height:32px;display:block}
.mark b{font-weight:400;font-size:2rem;letter-spacing:-.01em}
.tag{color:var(--white);font-size:2.24rem;line-height:1.35;max-width:34ch}
/* home lead line, sits at the top of main above the work */
.intro{color:var(--white);font-weight:400;font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.28;
  letter-spacing:-.01em;max-width:36ch;margin:0 0 clamp(1rem,3vh,2rem)}
.nav{display:flex;gap:1.3rem 2rem;flex-wrap:wrap;font-size:2rem}
.nav a{color:var(--white);opacity:.72;transition:color .12s,opacity .12s}
.nav a:hover{color:var(--red);opacity:1}

/* a work section: big red title (the link), then the work, then one short line */
.work{padding:clamp(2rem,5vh,3.6rem) 0}
.work__title{display:inline-block;color:var(--red);font-size:clamp(5.2rem,14vw,10rem);line-height:.9;letter-spacing:-.01em}
a.work__title:hover{color:var(--white)}
.work__title .arw{font-size:.5em;vertical-align:.28em;opacity:.7}
.cap{margin-top:clamp(1rem,2.5vh,1.6rem);max-width:40ch;color:var(--red);font-size:2.48rem;line-height:1.36}
.cap a{color:var(--red);border-bottom:2px solid var(--white)}
.cap a:hover{color:var(--white)}

/* media: flush on black, no outlines */
.feat{margin-top:clamp(1.1rem,3vh,1.8rem);line-height:0}
.feat video,.feat img{width:100%;height:auto}

/* a paragraph beside a portrait visual (stacks on mobile) */
.pair{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:center}
.pair__media{line-height:0}
.pair__media img{width:100%;height:auto}

/* latent sans page: the animated cover is the heading; the download button sits under it */
.cover{margin:0 0 clamp(1.3rem,3vh,2rem);line-height:0}
.cover img{width:100%;height:auto}
.cta{margin-bottom:clamp(1.6rem,5vh,3rem)}
.btn{display:inline-block;padding:.5em 1.05em;border:3px solid var(--red);color:var(--red);
  font-family:var(--latent);font-size:clamp(2rem,3.4vw,2.6rem);line-height:1;
  transition:color .12s,background-color .12s}
.btn:hover,.btn:focus-visible{background:var(--red);color:var(--bg)}

/* falling letters + the editable "hello, friend" specimen sitting over them */
.specimen{position:relative;margin-top:clamp(1.1rem,3vh,1.8rem)}
.field{position:relative;overflow:hidden;background:#000;height:clamp(360px,62vh,680px)}
.field .g{position:absolute;top:0;left:0;font-family:var(--latent);color:var(--red);line-height:1;
  white-space:nowrap;user-select:none;-webkit-user-select:none;opacity:0;
  transform:translate(-50%,-50%);will-change:transform,opacity}
.word{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:0 4vw;text-align:center;color:var(--red);font-family:var(--latent);
  font-size:var(--ws,clamp(3rem,12vw,9rem));line-height:1.05;letter-spacing:-.01em;
  outline:none;cursor:text;caret-color:var(--white);white-space:pre-wrap;overflow-wrap:anywhere}
.word:focus{color:var(--white)}
.word.is-typing{caret-color:transparent}
.grid{margin-top:clamp(1rem,2.5vh,1.5rem);display:grid;gap:clamp(.6rem,1.4vw,1rem);
  grid-template-columns:repeat(3,1fr)}
/* a live shader: the canvas runs it; a looping video of the shader is the no-webgl fallback under it */
.shot{position:relative;aspect-ratio:1/1;overflow:hidden;background:#000;line-height:0;cursor:pointer}
.shot .shadervid,.shot canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.shot .shadervid{object-fit:cover}
.two{margin-top:clamp(1.1rem,3vh,1.8rem);display:grid;gap:clamp(.7rem,1.6vw,1.1rem);grid-template-columns:1fr 1fr}
.two .feat{margin-top:0}

/* an embedded playable game: click the poster to load it, then a corner button fills the screen.
   capped so the whole board always fits on screen; the fullscreen button is the big view */
.gameframe{position:relative;aspect-ratio:4/3;overflow:hidden;background:#000;margin-top:clamp(1.1rem,3vh,1.8rem);
  max-width:min(100%,calc(82vh * 4 / 3));margin-left:auto;margin-right:auto}
.gameframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.gameframe__play{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;
  background:#000 center/cover no-repeat;display:flex;align-items:flex-end;justify-content:center;padding-bottom:11%}
.gameframe__play span{background:var(--red);color:var(--bg);font-family:var(--latent);
  font-size:clamp(2.2rem,4vw,3rem);line-height:1;padding:.34em .9em;transition:background-color .12s}
.gameframe__play:hover span,.gameframe__play:focus-visible span{background:var(--white)}
.gameframe__fs{position:absolute;top:.7rem;right:.7rem;z-index:2;border:2px solid var(--white);
  background:rgba(0,0,0,.55);color:var(--white);font-family:var(--latent);font-size:1.7rem;line-height:1;
  padding:.28em .5em;cursor:pointer;transition:background-color .12s,color .12s,border-color .12s}
.gameframe__fs:hover,.gameframe__fs:focus-visible{background:var(--red);color:var(--bg);border-color:var(--red)}

/* contact, closing */
.say{padding:clamp(3rem,8vh,5.5rem) 0 clamp(1.4rem,4vh,2.4rem);border-top:1px solid var(--red);margin-top:clamp(2rem,5vh,3.5rem)}
.say__line{color:var(--red);font-size:clamp(4rem,10vw,6.8rem);line-height:1}
.say__line a{border-bottom:3px solid var(--white)}
.say__line a:hover{color:var(--white)}
.links{margin-top:1.4rem;display:flex;gap:1.2rem 1.6rem;flex-wrap:wrap;font-size:1.15rem}
.links a{color:var(--white);opacity:.75}
.links a:hover{color:var(--red);opacity:1}
.colophon{padding:1.2rem 0 clamp(2rem,5vh,3rem);color:var(--dim);font-size:1.4rem;line-height:1.45;max-width:52ch}
.colophon em{color:var(--white)}

/* latent sans page: the essay set in the font, plus a live tester and the glyph set */
.prose{color:var(--red);font-size:2.64rem;line-height:1.5;max-width:92ch}
.prose+.prose{margin-top:1.05rem}
.prose em{color:var(--white)}
.prose a{color:var(--red);border-bottom:2px solid var(--white)}
.prose a:hover{color:var(--white)}
/* the word "free" downloads the font */
.cap a.freelink,.prose a.freelink{color:var(--white);border-bottom:3px solid var(--red);transition:color .12s,background-color .12s}
.cap a.freelink:hover,.prose a.freelink:hover{background:var(--red);color:var(--bg)}
.pull{color:var(--red);font-family:var(--latent);font-size:clamp(3.8rem,9.2vw,6rem);line-height:1.04;max-width:18ch;margin:clamp(1.8rem,4vh,2.8rem) 0}
.tester{margin:clamp(1.6rem,4vh,2.6rem) 0}
.tester__field{display:block;width:100%;border:0;background:transparent;color:var(--red);font-family:var(--latent);
  font-size:var(--ts,clamp(2.2rem,8vw,5rem));line-height:1.14;resize:none;outline:none;overflow:hidden}
.tester__field::placeholder{color:var(--red);opacity:.45}
.tester__range{-webkit-appearance:none;appearance:none;display:block;margin-top:1.8rem;
  width:min(100%,340px);height:3px;background:var(--dim);border-radius:2px;cursor:pointer}
.tester__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;
  border-radius:50%;background:var(--red);border:3px solid var(--bg);cursor:grab;transition:background-color .12s}
.tester__range::-webkit-slider-thumb:active{background:var(--white);cursor:grabbing}
.tester__range::-moz-range-track{height:3px;background:var(--dim);border-radius:2px}
.tester__range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--red);border:3px solid var(--bg);cursor:grab}
.tester__range::-moz-range-thumb:active{background:var(--white)}
.posters{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.6rem,1.4vw,1rem);margin-top:clamp(1.1rem,3vh,1.8rem)}
.posters img{width:100%;height:auto}
.glyphs{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(48px,5vw,72px),1fr));gap:1px;
  background:#2a221f;border:1px solid #2a221f;margin:clamp(1.4rem,3vh,2rem) auto}
.glyphs span{display:flex;align-items:center;justify-content:center;aspect-ratio:1;background:var(--bg);color:var(--white);
  font-size:clamp(1.3rem,2.6vw,1.8rem);cursor:pointer;position:relative;transition:transform .12s ease,background-color .12s,color .12s}
/* the hovered glyph lifts and enlarges over its neighbours; click copies it */
.glyphs span:hover{transform:scale(1.85);z-index:2;background:var(--red);color:var(--bg)}
.glyphs span.copied{background:var(--white);color:var(--bg)}
.glyphinfo{color:var(--dim);font-size:1.5rem;line-height:1.3;min-height:1.5em;margin-bottom:clamp(.6rem,1.6vh,1rem)}
.glyphinfo b{color:var(--white);font-weight:400}

@media(max-width:680px){
  /* landscape phones get two-up tiles instead of one giant column taller than the screen */
  .grid{grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}
  .two{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
  .pair{grid-template-columns:1fr;gap:clamp(1rem,3vh,1.6rem)}
  .posters{grid-template-columns:1fr 1fr}
  .head{padding-bottom:1.2rem}
  /* the header was a 285px tower on a 320px phone; shrink the mark and nav, keep taps over 44px */
  .mark{padding:.25em 0}
  .mark svg{width:24px;height:24px}
  .mark b{font-size:1.5rem}
  .nav{font-size:1.45rem;gap:.5rem .8rem}
  .nav a{display:inline-block;padding:.4em .15em}
  /* the desktop type is deliberately huge; at 375px that collapses body copy to ~15 chars/line,
     so bring the reading sizes down to a legible ~28 while the section titles stay big */
  body{font-size:1.5rem}
  .prose{font-size:1.55rem;line-height:1.5}
  .cap{font-size:1.5rem}
  .tag{font-size:1.5rem}
  .intro{font-size:1.8rem}
  /* footer contact links: grow the tap area past 44px on touch (they were 26px) */
  .links{font-size:1.55rem;gap:.7rem 1.2rem}
  .links a{display:inline-block;padding:.5em .35em}
  /* the email line's 4rem floor made hello@czumiu.com 467px wide on a 375px phone */
  .say__line{font-size:clamp(1.8rem,8.6vw,4rem)}
}
/* folded-phone widths: the 5.2rem title floor overruns a 280px screen */
@media(max-width:320px){
  .work__title{font-size:4.2rem}
}
/* very wide screens: the wrap is capped at 1920px, and the reading type scales up
   so full-width paragraphs stay near 90 characters a line instead of stretching to 160 */
@media(min-width:2200px){
  .prose{font-size:3.3rem}
  .cap{font-size:3rem}
  .tag{font-size:2.7rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}