:root{
    --paper: #efe6d3;
    --paper-dark: #e4d7ba;
    --cork: #c39a63;
    --cork-dark: #a97e4d;
    --card: #fffdf6;
    --ink: #35302a;
    --ink-soft: #6b6153;
    --moss: #6f8f6b;
    --moss-dark: #52704f;
    --mustard: #e2a63b;
    --dusty-pink: #d9899a;
    --stamp: #b7472a;
  }
  *{ box-sizing: border-box; }
  body{
    margin:0;
    background: var(--paper);
    color: var(--ink);
    font-family: "Zen Maru Gothic", sans-serif;
    line-height: 1.8;
  }
  .wrap{ max-width: 900px; margin: 0 auto; padding: 0 20px; }

  /* ---------- HERO ---------- */
  .hero{
    background:
      radial-gradient(circle at 15% 20%, rgba(255,255,255,0.35) 0, transparent 40%),
      var(--paper-dark);
    padding: 56px 0 70px;
    position: relative;
    border-bottom: 4px dashed var(--cork-dark);
    overflow: hidden;
  }
  .hero-illustration{
    position: absolute;
    right: -10px;
    bottom: 8px;
    width: 220px;
    height: auto;
    opacity: 0.28;
    z-index: 0;
    pointer-events: none;
  }
  .hero .wrap{ position: relative; z-index: 1; }
  @media (max-width: 640px){
    .hero-illustration{ width: 140px; bottom: -6px; right: -14px; opacity: 0.22; }
  }
  .eyebrow{
    display:inline-block;
    font-size: 13px;
    letter-spacing: .12em;
    color: var(--moss-dark);
    background: rgba(111,143,107,0.15);
    border: 1px solid var(--moss);
    border-radius: 999px;
    padding: 4px 14px;
    margin-bottom: 18px;
  }
  h1.title{
    font-family: "Hachi Maru Pop", cursive;
    font-size: clamp(28px, 6vw, 44px);
    line-height: 1.4;
    margin: 0 0 6px;
    color: var(--ink);
  }
  .title .stamp-inline{
    display:inline-block;
    border: 3px solid var(--stamp);
    color: var(--stamp);
    border-radius: 8px;
    padding: 2px 12px;
    transform: rotate(-3deg);
    font-size: 0.55em;
    mix-blend-mode: multiply;
    vertical-align: middle;
  }
  .sub{
    font-size: 15px;
    color: var(--ink-soft);
    margin: 10px 0 28px;
    max-width: 520px;
  }
  .sns-row{
    display:flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .sns-pin{
    position: relative;
    display:inline-flex;
    align-items:center;
    gap:8px;
    background: var(--card);
    border-radius: 10px;
    padding: 10px 16px 10px 14px;
    box-shadow: 0 3px 0 rgba(0,0,0,0.08);
    font-size: 14px;
    color: var(--ink);
    text-decoration:none;
    transform: rotate(-1.5deg);
  }
  .sns-pin:nth-child(2n){ transform: rotate(1.5deg); }
  .sns-pin::before{
    content:"";
    position:absolute;
    top:-8px; left: 14px;
    width: 20px; height:14px;
    background: var(--dusty-pink);
    opacity:.85;
    transform: rotate(-8deg);
    border-radius: 2px;
  }
  .sns-pin .badge-tbd{
    font-size: 10px;
    color: #fff;
    background: var(--ink-soft);
    border-radius: 6px;
    padding: 1px 6px;
  }

  /* ---------- SECTION GENERIC ---------- */
  section{ padding: 46px 0; }
  h2.section-title{
    font-family: "Hachi Maru Pop", cursive;
    font-size: 22px;
    color: var(--moss-dark);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom: 22px;
  }
  h2.section-title::before{
    content:"";
    width: 10px; height:10px;
    background: var(--mustard);
    border-radius: 50%;
    display:inline-block;
  }
  .about p{ margin: 0 0 14px; font-size: 15px; }

  /* ---------- CORKBOARD ---------- */
  .corkboard{
    background:
      radial-gradient(rgba(0,0,0,0.08) 1px, transparent 1.2px) 0 0/16px 16px,
      var(--cork);
    border-radius: 18px;
    padding: 34px 22px;
    box-shadow: inset 0 0 0 6px var(--cork-dark);
  }
  .card-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px;
  }
  .note-card{
    background: var(--card);
    border-radius: 6px;
    padding: 18px 16px 16px;
    box-shadow: 0 6px 10px rgba(0,0,0,0.18);
    position: relative;
    transform: rotate(-1.6deg);
  }
  .note-card:nth-child(2n){ transform: rotate(1.4deg); }
  .note-card:nth-child(3n){ transform: rotate(-0.6deg); }
  .note-card::before{
    content:"";
    position:absolute;
    top:-10px; left: 50%;
    transform: translateX(-50%) rotate(-4deg);
    width: 34px; height:16px;
    background: var(--mustard);
    opacity:.9;
    border-radius: 2px;
  }
  .note-card h3{
    font-family: "Yomogi", cursive;
    font-size: 19px;
    margin: 4px 0 6px;
    color: var(--ink);
  }
  .note-card .teacher{
    font-size: 12.5px;
    color: var(--ink-soft);
    margin-bottom: 8px;
  }
  .note-card p.desc{
    font-size: 13.5px;
    color: var(--ink-soft);
    margin: 0;
  }
  .stamp{
    display:inline-block;
    margin-top: 10px;
    border: 2px solid var(--stamp);
    color: var(--stamp);
    font-size: 11px;
    letter-spacing: .08em;
    padding: 2px 8px;
    border-radius: 6px;
    transform: rotate(-6deg);
    mix-blend-mode: multiply;
  }

  /* ---------- TEACHERS ---------- */
  .teacher-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
  }
  .teacher-card{
    background: var(--card);
    border-radius: 12px;
    padding: 20px 18px;
    border: 1px solid rgba(0,0,0,0.06);
  }
  .avatar{
    width: 52px; height:52px;
    border-radius: 50%;
    background: var(--moss);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-family:"Hachi Maru Pop", cursive;
    font-size: 20px;
    margin-bottom: 12px;
  }
  .avatar.m-name{ font-size: 22px; }
  .teacher-card h3{ font-size:16px; margin: 0 0 4px; }
  .teacher-card .role{ font-size: 12.5px; color: var(--moss-dark); margin-bottom: 8px; }
  .teacher-card p{ font-size: 13.5px; color: var(--ink-soft); margin:0; }

  /* ---------- MEMBERSHIP STATUS ---------- */
  .status-row{
    display:flex;
    flex-wrap:wrap;
    gap: 16px;
  }
  .status-card{
    flex: 1 1 260px;
    background: var(--card);
    border-radius: 12px;
    padding: 20px;
    border-left: 6px solid var(--moss);
  }
  .status-card.closed{ border-left-color: #b7ac95; }
  .status-card h3{ margin: 0 0 6px; font-size: 15.5px; }
  .status-tag{
    display:inline-block;
    font-size: 12px;
    font-weight: bold;
    border-radius: 999px;
    padding: 3px 12px;
    margin-bottom: 8px;
  }
  .status-tag.open{ background: rgba(111,143,107,0.18); color: var(--moss-dark); }
  .status-tag.closed{ background: rgba(107,97,83,0.14); color: var(--ink-soft); }
  .status-card p{ font-size: 13.5px; color: var(--ink-soft); margin: 0; }

  footer{
    padding: 34px 0 50px;
    text-align:center;
    font-size: 12.5px;
    color: var(--ink-soft);
    border-top: 2px dashed var(--cork-dark);
  }
  footer .note{
    margin-top: 6px;
    font-size: 11.5px;
  }

/* ---------- NEWS ---------- */
.news-list{ display:flex; flex-direction:column; gap:14px; }
.news-item{
  background: var(--card);
  border-radius: 10px;
  padding: 14px 16px;
  border-left: 5px solid var(--mustard);
}
.news-item .date{ font-size:12px; color: var(--ink-soft); margin-bottom:4px; }
.news-item .title{ font-size:15px; font-weight:bold; margin-bottom:4px; }
.news-item .body{ font-size:13.5px; color: var(--ink-soft); }
.news-empty, .schedule-empty{ font-size:13.5px; color: var(--ink-soft); }

/* ---------- SCHEDULE ---------- */
.schedule-list{ display:flex; flex-direction:column; gap:12px; }
.schedule-item{
  display:flex;
  gap:14px;
  align-items:flex-start;
  background: var(--card);
  border-radius: 10px;
  padding: 12px 16px;
  border-left: 5px solid var(--moss);
}
.schedule-item .date{
  font-family: "Hachi Maru Pop", cursive;
  font-size: 14px;
  color: var(--moss-dark);
  white-space: nowrap;
}
.schedule-item .title{ font-size: 14px; }
.schedule-item .place{ font-size: 12px; color: var(--ink-soft); }