/* Home — hero + three section tiles. Nav/footer/reset/fonts live in style.css. */

.hero{
  min-height:82vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:60px 20px;
}
#typed{
  font-family:'Morvila', cursive; font-weight:400;
  font-size:clamp(52px, 12vw, 130px);
  letter-spacing:0.01em; line-height:1;
  white-space:nowrap;
}
.hl{ position:relative; display:inline-block; z-index:1; }
.hl::before, .hl::after{
  content:"";
  position:absolute;
  left:-3%;
  width:106%;
  background:#fff200;
  mix-blend-mode:multiply;
  z-index:-1;
  clip-path:inset(0 100% 0 0);
}
.hl::before{
  top:14%; bottom:10%;
  opacity:.5;
  z-index:-1;
  transform:rotate(-3.2deg);
  border-radius:3px 14px 5px 16px / 8px 4px 12px 5px;
  filter:blur(1.3px);
  animation:hlSweep .8s cubic-bezier(.5,0,.4,1) .5s forwards;
}
.hl::after{
  top:20%; bottom:16%;
  opacity:.85;
  z-index:-2;
  transform:rotate(0.5deg) translateY(3px);
  border-radius:5px 16px 3px 14px / 5px 8px 5px 12px;
  filter:blur(1.3px);
  animation:hlSweep 1.1s cubic-bezier(.5,0,.4,1) 1.5s forwards;
}
@keyframes hlSweep{ to{ clip-path:inset(0 0% 0 0); } }
.scrawl{
  font-family:'Special Elite', monospace; font-weight:400;
  font-size:clamp(15px, 1.6vw, 18px); color:var(--ink-red);
  letter-spacing:0.02em;
  margin-top:8px; display:inline-block;
}
.hero-hint{ margin-top:18px; font-size:11px; color:var(--muted); letter-spacing:0.05em; }
.scroll-cue{ display:none; }

.tiles{
  display:grid; grid-template-columns:repeat(3,1fr);
  align-items:start;
  gap:36px; padding:20px 60px 120px; max-width:1200px; margin:0 auto;
}
.tile{ position:relative; z-index:0; display:block; }
.tile, .tile *{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }

.frame-wrap{ position:relative; width:100%; aspect-ratio:474 / 607; }
.frame-png{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:2; pointer-events:none; -webkit-user-select:none; user-select:none; display:block;
}
.frame-photo{ position:absolute; overflow:hidden; z-index:1; }
.frame-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.tile-photos .frame-photo{ left:12.5%; top:11%; width:76.3%; height:68.3%; }
.tile-journal .frame-photo{ left:5.49%; top:15.16%; width:85.65%; height:54.69%; }

.tile-caption{
  position:absolute; z-index:3;
  left:6.54%; top:76.77%; width:87.76%; height:21.34%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 6%;
}
.tile h3{ font-size:20px; font-weight:400; margin-bottom:4px; position:relative; display:inline-block; }
.tile h3 svg{
  position:absolute; left:-6px; top:-8px; width:calc(100% + 12px); height:calc(100% + 18px);
  overflow:visible; pointer-events:none;
}
.tile h3 path{
  fill:none; stroke:var(--ink-red); stroke-width:2.5;
  stroke-dasharray:340; stroke-dashoffset:340;
  transition:stroke-dashoffset .5s ease;
}
.tile:hover h3 path{ stroke-dashoffset:0; }

#trail{ position:fixed; inset:0; z-index:5; pointer-events:none; }

@media (max-width: 860px){
  .hero{ position:relative; min-height:100vh; min-height:100svh; min-height:var(--hero-h, 100svh); padding:20px; }
  #typed{ font-size:clamp(72px, 22vw, 110px); white-space:normal; line-height:0.95; }
  .scrawl{ font-size:clamp(9px, 3vw, 14px); white-space:nowrap; letter-spacing:0.01em; }
  .scroll-cue{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
    font-size:10px; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase;
    animation:scrollBob 1.8s ease-in-out infinite;
  }
  .scroll-cue svg{ width:16px; height:16px; }
  @keyframes scrollBob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,6px); } }
  .tiles{ grid-template-columns:1fr; gap:44px; padding:20px 24px 80px; }
}
@media (max-width:420px){ #typed{ font-size:clamp(64px, 24vw, 90px); } }

@media (min-width:861px){
  html, body{ height:100%; overflow:hidden; }
  body{ display:flex; flex-direction:column; }
  main{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; min-height:0; overflow:hidden; }
  .hero{ flex:0 0 auto; min-height:0; padding:clamp(8px, 2vh, 24px) 20px; }
  #typed{ font-size:clamp(52px, 9vh, 120px); }
  .tiles{ flex:0 0 auto; gap:clamp(16px, 3vh, 36px); padding:clamp(12px, 3vh, 32px) 60px 0; }
  .frame-wrap{ width:auto; height:clamp(170px, 36vh, 360px); margin:0 auto; }
  .tile-caption h3{ font-size:18px; }
}