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

:root{
  --red:#9F2A2A;
  --cream:#F5F3EF;
  --ink:#1A1A1A;
  --stone:#D6D1C4;
  --mist:#6B667A;
}

html{
  scroll-behavior:smooth;
}

body{
  background:var(--cream);
  color:var(--ink);
  font-family:'DM Sans',sans-serif;
  font-weight:300;
  line-height:1.75;
  min-height:100vh;
}

/* ── Layout ── */

.page{
  max-width:720px;
  margin:0 auto;
  padding:4rem 1.25rem 6rem;
}

@media (min-width:600px){
  .page{
    padding:6rem 2rem 8rem;
  }
}

/* ── Header ── */

.site-header{
  text-align:center;
  margin-bottom:3.5rem;
  opacity:0;
  animation:fadeUp .9s ease .1s forwards;
}

.site-header .kana{
  font-size:11px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--mist);
  display:block;
  margin-bottom:.75rem;
}

.site-header h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.5rem,9vw,3.8rem);
  font-weight:600;
  letter-spacing:.06em;
  color:var(--ink);
  line-height:1.15;
}

.site-header h1 em{
  font-style:italic;
  color:var(--red);
}

.site-header .sub{
  margin-top:1.25rem;
  font-size:14px;
  color:var(--mist);
  line-height:1.9;
}

/* ── Blocks ── */

.block{
  opacity:0;
  transform:translateX(-64px);
  transition:
    opacity .7s ease,
    transform .7s ease;
  margin-bottom:1.75rem;
}

.block.from-right{
  transform:translateX(64px);
}

.block.visible{
  opacity:1;
  transform:translateX(0);
}

.block-inner{
  background:var(--cream);
  border:.5px solid var(--stone);
  border-radius:10px;
  padding:1.4rem 1.25rem;
  position:relative;
  overflow:hidden;
}

@media (min-width:600px){
  .block-inner{
    padding:1.75rem 2rem;
  }
}

/* ── Accent Line ── */

.block-inner::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:3px;
  height:100%;
  background:var(--red);
  opacity:0;
  transition:opacity .35s ease;
}

.block-inner:hover::before,
.block-inner.active::before{
  opacity:1;
}

.block-label{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mist);
  margin-bottom:.5rem;
  display:block;
}

.block-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.15rem,4vw,1.4rem);
  font-weight:700;
  color:var(--ink);
  margin-bottom:.7rem;
  line-height:1.3;
}

.block-body{
  font-size:clamp(13.5px,3.5vw,14.5px);
  font-weight:300;
  color:#3d3845;
  line-height:1.9;
}

/* ── List ── */

.block-list{
  list-style:none;
  margin-top:.85rem;
}

.block-list li{
  font-size:clamp(13.5px,3.5vw,14.5px);
  font-weight:300;
  color:#3d3845;
  padding:.2rem 0;
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.block-list li::before{
  content:'—';
  color:var(--red);
  flex-shrink:0;
}

/* ── Tags ── */

.tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:.9rem;
}

.tag{
  font-size:12px;
  font-weight:400;
  padding:5px 14px;
  border-radius:999px;
  background:#fff;
  color:var(--mist);
  border:.5px solid var(--stone);
}

/* ── Closing ── */

.closing-inner{
  background:var(--cream);
  border:.5px solid var(--stone);
  border-radius:10px;
  padding:2rem 1.25rem;
  text-align:center;
  position:relative;
  overflow:hidden;
}

@media (min-width:600px){
  .closing-inner{
    padding:2.5rem 2rem;
  }
}

.accent-bar{
  width:28px;
  height:2px;
  background:var(--red);
  border-radius:2px;
  margin:0 auto 1.25rem;
}

.big{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.6rem,5vw,1.9rem);
  font-weight:700;
  color:#1A1A1A;
  margin-bottom:.75rem;
  line-height:1.2;
}

.sub-text{
  font-size:clamp(13.5px,3.5vw,14.5px);
  font-weight:300;
  color:#3d3845;
  line-height:1.9;
}

.deco{
  margin-top:1.5rem;
  font-size:14px;
  letter-spacing:.22em;
  color:var(--stone);
  text-transform:uppercase;
}

/* ── Animation ── */

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(20px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}