@font-face{font-family:'Long Cang';src:url('fonts/LongCang-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Corinthia';src:url('fonts/Corinthia-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}

:root{
  --ink:  #0a0706;
  --bone: #e9e2d6;
  --bone-dim: rgba(233,226,214,0.74);
  --red:  #b3121f;
  --line: rgba(233,226,214,0.2);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0; min-height:100%;
  background:var(--ink); color:var(--bone);
  font-family:'Spectral', serif;
  -webkit-font-smoothing:antialiased;
}
body{
  background:
    radial-gradient(ellipse at 50% 38%, rgba(179,18,31,0.10), transparent 60%),
    radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.65) 100%),
    var(--ink);
  background-attachment:fixed;
}

.back-link{
  position:fixed; top:26px; right:9vw; z-index:30;
  font-family:'Inter', sans-serif; font-size:12.5px; color:var(--bone-dim);
  text-decoration:none; letter-spacing:0.01em;
  border-bottom:1px solid var(--line); padding-bottom:2px;
  transition:color .2s ease, border-color .2s ease;
}
.back-link:hover,.back-link:focus-visible{ color:var(--bone); border-color:var(--red); }

.project{
  min-height:100vh; display:flex; flex-direction:column;
  padding:0 6vw;
}

.intro{
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:9rem 0 3rem;
}

.kicker{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.28em;
  text-transform:uppercase; color:var(--red); margin:0 0 1rem;
}

h1{
  font-family:'Long Cang','Corinthia','Segoe Script',cursive;
  font-weight:400; white-space:nowrap;
  font-size:clamp(6rem,17vw,13rem); line-height:0.9;
  letter-spacing:-0.045em; word-spacing:-0.36em;
  margin:0 0 1.2rem; color:var(--bone);
  text-shadow:0 0 28px rgba(179,18,31,0.35);
}
h1 .amp{ font-size:0.5em; letter-spacing:-0.02em; }

.teaser{
  text-wrap: pretty;
  text-align:left; /*teaser*/
  font-weight:300; font-style:italic; font-size:clamp(1.15rem,1.8vw,1.45rem);
  line-height:1.55; color:var(--bone-dim); max-width:46ch; margin:0;
}

.cta{ display:flex; justify-content:center; padding:0 0 10vh; }

.deck-btn{
  display:inline-flex; align-items:center; gap:0.7em;
  font-family:'IBM Plex Mono', monospace; font-size:0.78rem;
  letter-spacing:0.22em; text-transform:uppercase; text-decoration:none;
  color:var(--bone); border:1px solid var(--red); padding:1.15em 2.2em;
  transition:background .25s ease, color .25s ease;
}
.deck-btn:hover,.deck-btn:focus-visible{ background:var(--red); color:var(--bone); }

@media (max-width:600px){
  .back-link{ right:6vw; }
  .intro{ padding-top:7rem; }
  h1{ font-size:clamp(5rem,26vw,8rem); }
}