:root{
    --bg: #0f0f0e;          /* soft near-black */
    --fg: #d7d3c7;          /* soft phosphor */
    --muted:#b8b4aa;
    --mono: "Terminus", "DejaVu Sans Mono", "Fira Mono", "Roboto Mono", "Courier New", monospace;
  }

  html,body{height:100%;margin:0;background:var(--bg);font-family:var(--mono);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--fg);}

  body, h1, p, a { text-shadow: 0 0 1px rgba(215,210,196,0.28), 0 0 6px rgba(215,175,90,0.03); }

  #crt {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;        /* always full-screen */
    z-index: 99999;       /* above page */
    pointer-events: none; /* keep page interactive */
    mix-blend-mode: overlay;
    opacity: 0.78;
    display:block;
  }

  .page {
    position: relative;
    z-index: 1;
    max-width:1100px;
    margin: 28px auto;
    padding: 32px;
    box-sizing:border-box;
    display:grid;
    gap:28px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    min-height: 100vh; 
  }

  header { grid-column:1/-1; text-align:center; }
  h1 { margin:12px 0 8px; font-size:2.1rem; color:var(--fg); }
  p { margin:0; color:var(--muted); line-height:1.5; }

  .imgbox img{
    width:100%;
    height:auto;
    display:block;
    border-radius:6px;
    border:1px solid rgba(255,255,255,0.04);
    box-shadow: 0 8px 30px rgba(0,0,0,0.55);
    object-fit:cover;
  }

  a { color: var(--fg); text-decoration:none; padding-right:1ch; position:relative; }
  a:hover{ background: rgba(255,255,255,0.04); }
  .crt-caret { display:inline-block; width:1ch; opacity:0; margin-left:4px; transform:translateY(-1px); font-weight:700; }

  footer { grid-column:1/-1; text-align:center; color:var(--muted); font-size:.9rem; margin-top:10px; }

  @media (max-width:600px){
    .page{padding:20px;gap:18px;}
    h1{font-size:1.6rem;}
  }


iframe.youtube-safe {
    position: relative;
    z-index: 10000;
    isolation: isolate; /* force separate stacking context */
    background: black;   
}