/* ==========================================================================
   JESSI — CHAPTER 7, STILL ON THE LINE
   A birthday fan project for Jessica Chandra (Jessi JKT48)
   Built by hand, one dial tone at a time. Edit freely — see README.md.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Space+Grotesk:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root{
  --lavender:      #ada0d6;
  --lavender-soft:  #d9d0ec;
  --lavender-deep:  #6a4f96;
  --plum:           #2a1c3f;
  --plum-black:     #1a1026;
  --cream:          #f7f0e4;
  --cream-dim:      #efe6d6;
  --rose:           #d9a9ad;
  --ink:            #2a2233;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Space Grotesk', -apple-system, sans-serif;
  --font-mono:    'Space Mono', monospace;

  --wrap: 1180px;
  --edge: clamp(1.5rem, 5vw, 4rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--lavender-deep); color:var(--cream); }

:focus-visible{
  outline:2px solid var(--lavender-deep);
  outline-offset:3px;
}

.wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--edge);
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ==========================================================================
   LOADING — "connecting a call"
   ========================================================================== */

#loader{
  position:fixed; inset:0; z-index:999;
  background:var(--plum-black);
  color:var(--cream);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.4rem;
  transition:opacity .8s var(--ease), visibility .8s var(--ease);
}
#loader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }

.loader-receiver{
  width:52px; height:52px;
  animation:ring 1s infinite;
}
@keyframes ring{
  0%,100%{ transform:rotate(0deg); }
  20%{ transform:rotate(-14deg); }
  40%{ transform:rotate(10deg); }
  60%{ transform:rotate(-8deg); }
  80%{ transform:rotate(4deg); }
}
.loader-text{
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.14em;
  color:var(--lavender-soft);
  min-height:1.2em;
}
.loader-num{
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--lavender);
  opacity:.7;
}

/* ==========================================================================
   NAV — a slim call bar
   ========================================================================== */

.callbar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem var(--edge);
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.06em;
  color:var(--cream);
  background:rgba(26,16,38,.32);
  backdrop-filter:blur(7px) saturate(140%);
  -webkit-backdrop-filter:blur(7px) saturate(140%);
  border-bottom:1px solid rgba(247,240,228,.08);
  pointer-events:none;
}
.callbar__id{ display:flex; align-items:center; gap:.5rem; }
.callbar__dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--lavender);
  animation:pulse-dot 2.2s infinite;
}
@keyframes pulse-dot{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.35; transform:scale(.75); }
}
.callbar__timer{ font-variant-numeric:tabular-nums; }

/* ==========================================================================
   HERO — incoming call
   ========================================================================== */

.hero{
  position:relative;
  min-height:100svh;
  background:var(--plum);
  color:var(--cream);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(247,240,228,.09) 1px, transparent 0);
  background-size:34px 34px;
  opacity:.5;
}

.hero__cord{
  position:absolute;
  top:-10%; right:6%;
  width:min(46vw, 480px);
  opacity:.9;
  pointer-events:none;
}
@media (max-width:720px){
  .hero__cord{ width:70vw; top:-4%; right:-10%; opacity:.6; }
}

.hero__inner{
  position:relative;
  width:100%;
  padding:8rem var(--edge) 3.4rem;
  display:grid;
  gap:2.2rem;
}

.hero__ring{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.16em;
  color:var(--lavender);
  display:flex;
  align-items:center;
  gap:.6rem;
}
.hero__ring::before{
  content:'';
  width:6px; height:6px; border-radius:50%;
  background:var(--rose);
  animation:pulse-dot 1.4s infinite;
}

.hero__title{
  font-family:var(--font-display);
  font-weight:500;
  line-height:.98;
  margin:0;
  font-size:clamp(3rem, 11vw, 7.2rem);
  letter-spacing:-.01em;
}
.hero__title em{
  font-style:italic;
  font-weight:400;
  color:var(--lavender-soft);
}

.hero__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:1.2rem 2rem;
  border-top:1px solid rgba(247,240,228,.2);
  padding-top:1.4rem;
}
.hero__date{
  font-family:var(--font-mono);
  font-size:1rem;
  letter-spacing:.08em;
  color:var(--rose);
}
.hero__line{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.05rem, 2.4vw, 1.4rem);
  color:var(--cream-dim);
  max-width:26ch;
}

.hero__scroll{
  position:absolute;
  bottom:1.6rem; left:var(--edge);
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.1em;
  color:var(--lavender);
  display:flex; align-items:center; gap:.5rem;
}
.hero__scroll span{
  display:inline-block;
  width:1px; height:22px;
  background:linear-gradient(var(--lavender), transparent);
  animation:scrolldash 1.8s infinite;
}
@keyframes scrolldash{
  0%{ transform:scaleY(0); transform-origin:top; }
  50%{ transform:scaleY(1); transform-origin:top; }
  50.01%{ transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}
@media (max-width:600px){ .hero__scroll{ display:none; } }

/* ==========================================================================
   INTRO — short, quiet, one breath
   ========================================================================== */

.intro{
  background:var(--cream);
  padding:6rem var(--edge) 5rem;
}
.intro__grid{
  max-width:var(--wrap);
  margin-inline:auto;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:2.4rem 3.2rem;
  align-items:start;
}
.intro__tag{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  color:var(--lavender-deep);
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  align-self:stretch;
}
.intro__text{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.4rem, 3vw, 2.1rem);
  line-height:1.5;
  max-width:38ch;
  color:var(--ink);
}
.intro__text b{
  font-weight:600;
  color:var(--lavender-deep);
}
@media (max-width:640px){
  .intro{ padding:4.5rem var(--edge) 3.5rem; }
  .intro__grid{ grid-template-columns:1fr; gap:1.2rem; }
  .intro__tag{ writing-mode:horizontal-tb; transform:none; }
}

/* ==========================================================================
   JOURNEY — the call log timeline
   ========================================================================== */

.journey{
  position:relative;
  background:var(--cream-dim);
  padding:5.5rem 0 6rem;
  overflow:hidden;
}
.journey__head{
  max-width:var(--wrap);
  margin:0 auto 3.4rem;
  padding-inline:var(--edge);
}
.journey__kicker{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.12em;
  color:var(--lavender-deep);
  display:block;
  margin-bottom:.6rem;
}
.journey__title{
  font-family:var(--font-display);
  font-size:clamp(2rem, 5vw, 3.2rem);
  margin:0;
  max-width:14ch;
}

.journey__status{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.08em;
  color:var(--lavender-deep);
  margin-top:1rem;
  min-height:1.4em;
}
.journey__status .caret{
  display:inline-block;
  width:.5em;
  border-right:2px solid var(--lavender-deep);
  animation:caret-blink 1s step-end infinite;
}
@keyframes caret-blink{ 50%{ border-color:transparent; } }

.journey__rail{
  position:relative;
  max-width:var(--wrap);
  margin:0 auto;
  padding-inline:var(--edge);
}
.journey__wire{
  position:absolute;
  left:calc(var(--edge) + 1px);
  top:0; bottom:0;
  width:2px;
  background:linear-gradient(var(--lavender-deep), var(--lavender) 60%, transparent);
  transform-origin:top;
}
@media (min-width:860px){
  .journey__wire{ left:50%; margin-left:-1px; }
}

.entry{
  position:relative;
  padding:0 0 3.6rem 2.6rem;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.entry.is-visible{ opacity:1; transform:translateY(0); }
.entry:last-child{ padding-bottom:0; }

.entry::before{
  content:'';
  position:absolute;
  left:-5px; top:.35em;
  width:12px; height:12px;
  border-radius:50%;
  background:var(--cream-dim);
  border:2px solid var(--lavender-deep);
}
.entry--connected::before{ background:var(--lavender-deep); }

@media (min-width:860px){
  .journey__rail{ padding-inline:0 var(--edge); }
  .entry{ width:calc(50% - 3rem); padding-left:0; padding-right:0; }
  .entry::before{ left:auto; }
  .entry:nth-child(odd){ margin-right:calc(50% + 3rem); text-align:right; }
  .entry:nth-child(even){ margin-left:calc(50% + 3rem); }
  .entry:nth-child(odd)::before{ right:-3.7rem; left:auto; }
  .entry:nth-child(even)::before{ left:-3.7rem; }
}

.entry__status{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.1em;
  color:var(--lavender-deep);
  display:block;
  margin-bottom:.4rem;
}
.entry__year{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.5rem, 3vw, 2.1rem);
  margin:0 0 .5rem;
  color:var(--ink);
}
.entry__body{
  max-width:42ch;
  color:#4d4459;
  font-size:.98rem;
}
@media (min-width:860px){
  .entry:nth-child(odd) .entry__body{ margin-left:auto; }
}

.entry--now .entry__year{ font-size:clamp(2rem, 4.5vw, 3rem); color:var(--lavender-deep); }
.entry--now .entry__status{ color:var(--rose); }

/* ==========================================================================
   PROFILE — who's on the other line
   ========================================================================== */

.profile{
  background:var(--plum);
  color:var(--cream);
  padding:6rem 0;
  position:relative;
  overflow:hidden;
}
.profile__wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--edge);
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:3rem;
  align-items:center;
}
@media (max-width:820px){
  .profile__wrap{ grid-template-columns:1fr; gap:2.5rem; }
}

.profile__card{
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--lavender-soft);
  border:1px solid rgba(247,240,228,.25);
  padding:1.6rem;
  position:relative;
  justify-self:start;
  width:100%;
  max-width:340px;
}
.profile__card::before{
  content:'INCOMING CALL';
  position:absolute; top:-.6em; left:1.2rem;
  background:var(--plum);
  padding:0 .5em;
  letter-spacing:.1em;
}
.profile__avatar{
  width:100%;
  aspect-ratio:4/5;
  border:1px dashed rgba(247,240,228,.35);
  margin-top:.8rem;
  display:flex; align-items:center; justify-content:center;
  color:rgba(247,240,228,.4);
  text-align:center;
  font-size:.68rem;
  letter-spacing:.06em;
  padding:1rem;
  overflow:hidden;
  position:relative;
}
.profile__avatar img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

.profile__name{
  font-family:var(--font-display);
  font-size:clamp(2.2rem, 5vw, 3.6rem);
  margin:0 0 .2rem;
  line-height:1.05;
}
.profile__alias{
  font-family:var(--font-display);
  font-style:italic;
  color:var(--rose);
  font-size:1.3rem;
  margin:0 0 1.6rem;
}
.profile__list{
  list-style:none;
  margin:0; padding:0;
  display:grid; gap:0;
  border-top:1px solid rgba(247,240,228,.18);
}
.profile__list li{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.85rem 0;
  border-bottom:1px solid rgba(247,240,228,.18);
  font-size:.95rem;
}
.profile__list span:first-child{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.08em;
  color:var(--lavender);
  padding-top:.15em;
}
.profile__list span:last-child{ text-align:right; font-family:var(--font-display); font-size:1.15rem; }

/* ==========================================================================
   CALL LOG — memory / gallery
   ========================================================================== */

.calllog{
  background:var(--cream);
  padding:6rem 0;
}
.calllog__head{
  max-width:var(--wrap);
  margin:0 auto 2.4rem;
  padding-inline:var(--edge);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
}
.calllog__title{
  font-family:var(--font-display);
  font-size:clamp(2rem, 5vw, 3rem);
  margin:0;
}
.calllog__count{
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--lavender-deep);
  letter-spacing:.06em;
}

.calllog__list{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--edge);
  list-style:none;
  padding-top:0;
}
.calllog__row{
  display:grid;
  grid-template-columns:88px 1fr auto;
  gap:1.2rem;
  align-items:center;
  padding:1.1rem 0;
  border-bottom:1px solid rgba(42,28,63,.12);
}
.calllog__row:first-child{ border-top:1px solid rgba(42,28,63,.12); }

.calllog__thumb{
  width:88px; height:88px;
  background:var(--cream-dim);
  border:1px solid rgba(42,28,63,.15);
  display:flex; align-items:center; justify-content:center;
  color:var(--lavender-deep);
  font-family:var(--font-mono);
  font-size:.6rem;
  text-align:center;
  overflow:hidden;
  flex-shrink:0;
}
.calllog__thumb img{ width:100%; height:100%; object-fit:cover; }

.calllog__mid{ min-width:0; }
.calllog__kind{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.1em;
  display:inline-flex;
  align-items:center;
  gap:.4em;
  margin-bottom:.3rem;
}
.calllog__kind--incoming{ color:var(--lavender-deep); }
.calllog__kind--outgoing{ color:#7a8f6a; }
.calllog__kind--missed{ color:var(--rose); }
.calllog__kind--connected{ color:#c9932f; }
.calllog__caption{
  font-family:var(--font-display);
  font-size:1.15rem;
  margin:0;
}
.calllog__time{
  font-family:var(--font-mono);
  font-size:.7rem;
  color:#8b7f95;
  white-space:nowrap;
}

@media (max-width:560px){
  .calllog__row:not(.calllog__row--feature){ grid-template-columns:60px 1fr; }
  .calllog__row:not(.calllog__row--feature) .calllog__thumb{ width:60px; height:60px; }
  .calllog__row:not(.calllog__row--feature) .calllog__time{ grid-column:2; }
}

.calllog__row--feature{
  grid-template-columns:1fr;
  text-align:center;
  padding:2.4rem 0;
}
.calllog__row--feature .calllog__thumb{
  width:min(280px, 70vw);
  height:auto;
  aspect-ratio:4/5;
  margin:0 auto 1rem;
  transform:rotate(-2.4deg);
  box-shadow:0 14px 26px rgba(42,28,63,.14);
  border:8px solid #fff;
}
.calllog__row--feature.rot-r .calllog__thumb{ transform:rotate(2deg); }

/* ==========================================================================
   VOICEMAIL — birthday message
   ========================================================================== */

.voicemail{
  background:var(--lavender-deep);
  color:var(--cream);
  padding:6rem 0;
  position:relative;
}
.voicemail__wrap{
  max-width:720px;
  margin-inline:auto;
  padding-inline:var(--edge);
  text-align:center;
}
.voicemail__eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  color:var(--lavender-soft);
  display:block;
  margin-bottom:1rem;
}
.voicemail__title{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(2rem, 5vw, 3.2rem);
  margin:0 0 2.2rem;
}

.voicemail__form{
  text-align:left;
  display:grid;
  gap:1rem;
  background:rgba(247,240,228,.08);
  border:1px solid rgba(247,240,228,.25);
  padding:1.6rem;
}
.voicemail__form label{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.08em;
  color:var(--lavender-soft);
}
.voicemail__form input,
.voicemail__form textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(247,240,228,.35);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:1rem;
  padding:.5rem 0;
  resize:vertical;
}
.voicemail__form input::placeholder,
.voicemail__form textarea::placeholder{ color:rgba(247,240,228,.4); }
.voicemail__form textarea{ min-height:110px; }

.voicemail__submit{
  justify-self:start;
  margin-top:.4rem;
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.08em;
  color:var(--plum);
  background:var(--cream);
  border:none;
  padding:.9rem 1.6rem;
  cursor:pointer;
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.voicemail__submit:hover{ background:var(--rose); }
.voicemail__submit:active{ transform:scale(.97); }

.voicemail__sent{
  display:none;
  font-family:var(--font-mono);
  font-size:.85rem;
  color:var(--rose);
  margin-top:1rem;
}
.voicemail__sent.is-shown{ display:block; }

.voicemail__board{
  margin-top:3rem;
  columns:3 180px;
  column-gap:1rem;
}
@media (max-width:640px){
  .voicemail__board{ columns:2 140px; }
}

.note{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:.9rem;
  line-height:1.4;
  padding:1rem 1.1rem;
  margin:0 0 1rem;
  box-shadow:0 8px 16px rgba(0,0,0,.18);
  break-inside:avoid;
  display:inline-block;
  width:100%;
}
.note:nth-child(5n){ background:var(--lavender-soft); }
.note:nth-child(5n+2){ background:#fff; }
.note:nth-child(3n){ transform:rotate(-2deg); }
.note:nth-child(3n+1){ transform:rotate(1.5deg); }
.note:nth-child(3n+2){ transform:rotate(-.8deg); }
.note__from{
  display:block;
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.06em;
  color:var(--lavender-deep);
  margin-top:.6rem;
}

/* ==========================================================================
   END CALL — closing
   ========================================================================== */

.endcall{
  background:var(--plum-black);
  color:var(--cream);
  padding:7rem 0 4rem;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.endcall__wrap{
  max-width:640px;
  margin-inline:auto;
  padding-inline:var(--edge);
  position:relative;
}
.endcall__status{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.16em;
  color:var(--rose);
  display:block;
  margin-bottom:1.4rem;
}
.endcall__line{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.3rem, 3.4vw, 1.9rem);
  color:var(--lavender-soft);
  margin:0 0 3rem;
}
.endcall__date{
  font-family:var(--font-mono);
  font-size:1rem;
  letter-spacing:.1em;
  color:var(--lavender);
  margin-bottom:.6rem;
}
.endcall__wish{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.8rem, 5vw, 2.8rem);
  margin:0 0 3.4rem;
}

.endcall__tags{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  font-family:var(--font-mono);
  font-size:.8rem;
  color:var(--lavender);
  border-top:1px dashed rgba(247,240,228,.25);
  padding-top:1.6rem;
}

.endcall__credit{
  margin-top:3rem;
  font-family:var(--font-mono);
  font-size:.65rem;
  letter-spacing:.06em;
  color:rgba(247,240,228,.35);
}

.divider-wire{
  display:block;
  width:100%;
  height:28px;
}