@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;600;700&family=Great+Vibes&display=swap');

:root{ --gold:#d4bc8d; }
*{ box-sizing:border-box; }
html,body{ margin:0; min-height:100%; }
body{ background:#1e1e1e; color:var(--gold); overflow-x:hidden; }
button{ font:inherit; }

.kh-page{
  min-height:100dvh;
  background:radial-gradient(circle at 50% 20%, #332c27 0, #1e1e1e 58%);
  font-family:'Dancing Script',cursive;
}
.kh-list-view{
  width:min(680px,calc(100% - 32px));
  min-height:100dvh;
  margin:auto;
  padding:clamp(54px,9vh,100px) 0 56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.kh-list-view[hidden]{ display:none; }
.kh-main-title{
  margin:0 0 42px;
  color:#e4d5b7;
  font-family:'Great Vibes',cursive;
  font-size:clamp(2.5rem,7vw,4.4rem);
  font-weight:400;
  text-align:center;
  text-shadow:0 4px 20px rgba(0,0,0,.45);
}
.kh-writing-list{ margin:0; padding:0; list-style:none; border-top:1px solid rgba(212,188,141,.16); }
.kh-video-link{ align-self:center; margin:-18px 0 30px; padding:12px; color:#9bd6ff; font-size:1.4rem; text-align:center; text-decoration:none; }
.kh-video-link:hover{ color:#d7f0ff; }
.kh-video-link:focus-visible{ outline:2px solid #9bd6ff; outline-offset:4px; }
.kh-category-view[hidden],.kh-writings-view[hidden]{ display:none; }
.kh-section-label{
  margin:0 0 18px;
  color:rgba(228,213,183,.72);
  font-size:1.25rem;
  text-align:center;
}
.kh-category-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.kh-category-button{
  min-height:155px;
  padding:28px 22px;
  border:1px solid rgba(212,188,141,.25);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(212,188,141,.08),rgba(212,188,141,.025));
  color:#e4d5b7;
  cursor:pointer;
  text-align:center;
  transition:transform .3s ease,border-color .3s ease,background .3s ease;
}
.kh-category-button:hover,.kh-category-button:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(212,188,141,.62);
  background:linear-gradient(145deg,rgba(212,188,141,.14),rgba(212,188,141,.04));
  outline:none;
}
.kh-category-name{
  display:block;
  margin-bottom:8px;
  font-family:'Great Vibes',cursive;
  font-size:clamp(2.3rem,6vw,3.4rem);
}
.kh-category-description{
  display:block;
  color:rgba(228,213,183,.68);
  font:400 .95rem/1.45 system-ui,sans-serif;
}
.kh-category-back{
  margin:0 0 16px;
  padding:8px 0;
  border:0;
  border-bottom:1px solid rgba(212,188,141,.3);
  background:transparent;
  color:#d9c49d;
  cursor:pointer;
  font:500 .86rem/1.2 system-ui,sans-serif;
}
.kh-category-back:hover{ color:#fff3d8; }
.kh-category-back:focus-visible{ outline:2px solid #d9c49d; outline-offset:4px; }
.kh-category-title{
  margin:0 0 24px;
  color:#e4d5b7;
  font-family:'Great Vibes',cursive;
  font-size:clamp(2.4rem,6vw,3.6rem);
  font-weight:400;
  text-align:center;
}
.kh-writing-button{
  width:100%;
  padding:19px 12px;
  border:0;
  border-bottom:1px solid rgba(212,188,141,.16);
  background:transparent;
  color:#d9c49d;
  cursor:pointer;
  font-size:clamp(1.3rem,3vw,1.65rem);
  text-align:left;
  transition:color .3s ease,padding-left .3s ease,background .3s ease;
}
.kh-writing-button::before{ content:'❧'; display:inline-block; width:32px; opacity:.45; }
.kh-writing-button:hover,.kh-writing-button:focus-visible{
  padding-left:20px;
  color:#fff3d8;
  background:rgba(212,188,141,.035);
  outline:none;
}

/* Controls follow the photograph in normal flow, outside the image area. */
.kh-reader-view{ display:none; }
.kh-reader-view.is-open{ display:block; }
.kh-paper{
  position:relative;
  isolation:isolate;
  width:100%;
  min-height:calc(100dvh - 70px - env(safe-area-inset-bottom));
  display:grid;
  place-items:center;
  padding: max(32px,env(safe-area-inset-top)) 20px 72px;
  background:#202629 center / cover no-repeat;
}
.kh-paper::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.48) 35%,rgba(0,0,0,.48) 70%,rgba(0,0,0,.6));
}
.kh-copy{
  width:min(100%,720px);
  color:#fffaf2;
  font-size:clamp(1.15rem,4.8vw,1.85rem);
  font-weight:600;
  line-height:1.5;
  text-align:center;
  text-shadow:0 2px 5px rgba(0,0,0,.75);
}
.kh-message p{ margin:0; white-space:pre-line; overflow-wrap:break-word; }
.kh-message p + p{ margin-top:clamp(24px,5dvh,48px); }
.kh-logo{
  position:absolute;
  right:20px;
  bottom:18px;
  width:42px;
  height:42px;
  object-fit:contain;
  opacity:.5;
  pointer-events:none;
}
.kh-logo:not([src]){ display:none; }
.kh-copy{ transition:opacity 1.2s ease; }
.kh-copy.is-fading{ opacity:0; }
.kh-final-signature{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
  color:#fffaf2;
  font-family:'Great Vibes',cursive;
  font-size:clamp(2rem,7vw,4.8rem);
  text-align:center;
  text-shadow:0 2px 8px rgba(0,0,0,.75);
  opacity:0;
  transform:translateY(8px);
  transition:opacity 1.2s ease,transform 1.2s ease;
  pointer-events:none;
}
.kh-final-signature.is-visible{ opacity:1; transform:none; }
.kh-controls{
  position:relative;
  padding:12px 16px calc(14px + env(safe-area-inset-bottom));
  z-index:10;
  display:none;
  justify-content:center;
  gap:24px;
  background:#1e1e1e;
}
.kh-controls.is-open{ display:flex; }
.kh-control{
  min-height:44px;
  padding:8px;
  border:0;
  border-bottom:1px solid rgba(255,250,242,.3);
  background:transparent;
  color:#fffaf2;
  cursor:pointer;
  font:500 .9rem/1.2 system-ui,sans-serif;
}
.kh-control:hover{ color:#fff; }
.kh-control:focus-visible{ outline:2px solid #fffaf2; outline-offset:3px; }
@media(max-width:600px){
  .kh-category-list{ grid-template-columns:1fr; }
  .kh-category-button{ min-height:130px; }
  .kh-paper{ padding-left:10px; padding-right:10px; }
  .kh-copy{ font-size:clamp(1.45rem,6.2vw,2rem); }
}
@media(max-height:700px) and (max-width:520px){
  .kh-copy{ line-height:1.4; }
  .kh-message p + p{ margin-top:22px; }
  .kh-paper{ padding-top:24px; padding-bottom:64px; }
}
@media(prefers-reduced-motion:reduce){ *{ scroll-behavior:auto!important; transition-duration:.01ms!important; } }