:root{
    --bg-deep:#141347;
    --ink:#f1f0ff;
    --ink-soft:rgba(241,240,255,.72);
    --ink-faint:rgba(241,240,255,.42);
    --grout:#4a4a9a;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:"Inter",system-ui,sans-serif;
    color:var(--ink);
    background:var(--bg-deep);
    min-height:100vh;
    overflow-x:hidden;
    display:flex;flex-direction:column;
    position:relative;
  }

  /* Tile wall: grout layer underneath, tiles drawn on top */
  .wall{
    position:fixed;inset:0;z-index:0;
    background:var(--grout);
  }
  .wall .tiles{
    position:absolute;inset:0;
    background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'>\
<defs><radialGradient id='g' cx='32%25' cy='22%25' r='95%25'><stop offset='0' stop-color='%23a8a9e6'/><stop offset='.55' stop-color='%238486cf'/><stop offset='1' stop-color='%236f70bd'/></radialGradient></defs>\
<rect x='3.5' y='3.5' width='113' height='113' rx='7' fill='url(%23g)'/>\
<rect x='3.5' y='3.5' width='113' height='113' rx='7' fill='none' stroke='%23ffffff' stroke-opacity='.18' stroke-width='1'/>\
</svg>");
    background-size:120px 120px;
  }
  /* uneven tile tone, like real glazed tile catching light differently */
  .wall .vary{
    position:absolute;inset:0;
    background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'>\
<rect x='4' y='4' width='112' height='112' rx='6' fill='%23ffffff' opacity='.05'/>\
<rect x='244' y='124' width='112' height='112' rx='6' fill='%23000000' opacity='.07'/>\
<rect x='124' y='244' width='112' height='112' rx='6' fill='%23ffffff' opacity='.04'/>\
<rect x='4' y='244' width='112' height='112' rx='6' fill='%23000000' opacity='.05'/>\
<rect x='244' y='4' width='112' height='112' rx='6' fill='%23000000' opacity='.04'/>\
</svg>");
    background-size:360px 360px;
  }
  /* colored light washing over the wall */
  .wall .light{
    position:absolute;inset:0;
    background:
      radial-gradient(90% 70% at 18% 8%,rgba(120,150,255,.55) 0%,rgba(120,150,255,0) 60%),
      radial-gradient(80% 70% at 88% 92%,rgba(150,70,230,.55) 0%,rgba(150,70,230,0) 60%),
      radial-gradient(60% 50% at 50% 50%,rgba(20,19,71,0) 0%,rgba(10,9,40,.55) 100%),
      linear-gradient(160deg,rgba(60,70,200,.35),rgba(10,9,40,.75));
    mix-blend-mode:multiply;
  }
  .wall .light2{
    position:absolute;inset:0;
    background:
      radial-gradient(70% 55% at 15% 10%,rgba(140,170,255,.35) 0%,transparent 60%),
      radial-gradient(60% 50% at 85% 90%,rgba(190,120,255,.30) 0%,transparent 60%);
    animation:breathe 14s ease-in-out infinite alternate;
  }
  @keyframes breathe{from{opacity:.7}to{opacity:1}}
  /* film grain */
  .wall .grain{
    position:absolute;inset:0;
    opacity:.16;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter>\
<rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }
  /* soft vignette so the edges fall off like a lamp-lit room */
  .wall .vignette{
    position:absolute;inset:0;
    background:radial-gradient(120% 90% at 50% 45%,transparent 45%,rgba(6,5,30,.7) 100%);
  }

  header,main,footer{position:relative;z-index:1}

  header{
    display:flex;justify-content:space-between;align-items:center;
    padding:28px 32px;
    font-size:12px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--ink-faint);
  }
  header .handle{color:var(--ink-soft)}

  main{
    flex:1;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    text-align:center;
    padding:30px 24px 60px;
  }

  /* everything hand-written shares one look: marker on tile */
  .hand{
    font-family:"Caveat",cursive;
    color:var(--ink);
    text-shadow:0 1px 0 rgba(0,0,0,.25), 0 0 18px rgba(170,180,255,.25);
  }
  .album{
    font-weight:500;
    font-size:clamp(28px,4.2vw,46px);
    line-height:1.05;
    color:var(--ink-soft);
    transform:rotate(-4deg);
    margin-bottom:10px;
  }
  .album span{display:block}
  .album .l1{margin-right:1.2em}
  .album .l2{margin-left:1.4em}

  h1{
    font-weight:700;
    font-size:clamp(78px,13vw,176px);
    line-height:.88;
    transform:rotate(-2.5deg);
    margin:4px 0 12px;
    letter-spacing:.01em;
  }
  h1 span{display:block}
  h1 .first{margin-left:-.4em}
  h1 .last{margin-left:.4em}

  .doodle{
    width:62px;height:auto;
    margin:4px 0 18px 70px;
    opacity:.85;
    transform:rotate(10deg);
    color:var(--ink);
  }

  .status{
    font-weight:500;
    font-size:clamp(26px,3.4vw,36px);
    color:var(--ink-soft);
    transform:rotate(-2deg);
    margin-bottom:34px;
  }

  form{
    display:flex;
    width:min(440px,100%);
    border:1.5px solid rgba(241,240,255,.28);
    border-radius:14px;
    background:rgba(20,19,71,.42);
    backdrop-filter:blur(6px);
    overflow:hidden;
    box-shadow:0 10px 30px rgba(6,5,30,.35);
  }
  form input{
    flex:1;min-width:0;
    background:transparent;border:0;outline:0;
    padding:16px 20px;
    color:var(--ink);font:300 15px "Inter",sans-serif;
  }
  form input::placeholder{color:var(--ink-faint)}
  form button{
    border:0;cursor:pointer;
    padding:0 22px;
    font:500 15px "Inter",sans-serif;
    color:var(--ink);
    background:rgba(241,240,255,.12);
    border-left:1.5px solid rgba(241,240,255,.22);
    transition:background .2s;
  }
  form button:hover{background:rgba(241,240,255,.2)}
  .fineprint{margin-top:14px;font-size:12px;color:var(--ink-faint)}

  footer{
    display:flex;flex-wrap:wrap;gap:12px 28px;
    justify-content:space-between;align-items:center;
    padding:24px 32px 32px;
    font-size:12px;letter-spacing:.06em;
    color:var(--ink-faint);
  }
  footer nav{display:flex;gap:22px;flex-wrap:wrap}
  footer a{color:var(--ink-soft);text-decoration:none;transition:color .2s}
  footer a:hover{color:#ffb3e6}

  @media (max-width:560px){
    header,footer{padding-left:20px;padding-right:20px}
    footer{flex-direction:column;align-items:flex-start}
    form{flex-direction:column}
    form button{padding:15px;border-left:0;border-top:1.5px solid rgba(241,240,255,.22)}
    .wall .tiles{background-size:84px 84px}
    .wall .vary{background-size:252px 252px}
    .doodle{margin-left:40px}
  }
  @media (prefers-reduced-motion:reduce){.wall .light2{animation:none}}