:root {
  --paper:url("./Japanese-Paper.png");
  --ink:#1f2937;
  --max:1100px;
  --shadow:0 14px 30px rgba(0,0,0,.18);
  --accent:#f5d3b8;
  --accent-border:#e6b08a;
  --highlight:#fef3c7;
}

* { box-sizing:border-box }

body {
  margin:0;
  color:var(--ink);
  background: linear-gradient(0deg, rgba(255,255,255,.40), rgba(255,255,255,.40)), var(--paper);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  font-family:"EB Garamond", Georgia, serif;
  line-height:1.6;
}

main { max-width:var(--max); margin:2.6rem auto 3rem; padding:0 1rem; }
h1 { margin:.2rem 0 0; font-weight:600; }
.contact-link { margin:.3rem 0 1.2rem; font-size:1.15rem; font-weight:500; }

.row { display:grid; grid-template-columns: 1fr 1fr 260px; gap:18px; align-items:start; }
@media(max-width:980px){ .row{ grid-template-columns:1fr; } }

.card {
  background:#fffdfa;
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  padding:12px;
  box-shadow:var(--shadow);
}

.title { text-align:center; margin:.15rem 0 .65rem; }
.title span {
  display:inline-block;
  background:var(--accent);
  border:1px solid var(--accent-border);
  border-radius:10px;
  padding:.45rem 1.1rem;
  font-weight:600;
}

.divider { height:1px; background:rgba(0,0,0,.14); margin:.5rem auto 1rem; max-width:12rem; }

iframe.embed {
  width:100%;
  height:480px;   /* default for desktop */
  border:0;
  display:block;
  background:#fff;
  border-radius:8px;
}
@media (max-width: 980px) { iframe.embed { height:400px; } }
@media (max-width: 640px) { iframe.embed { height:300px; } }

.links {
  --row:44px;
  max-height: calc(var(--row) * 12 + 8px);
  overflow:auto;
  padding:8px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px;
  background:#fff;
}

.links a {
  display:block;
  text-decoration:none;
  text-align:center;
  padding:.6rem;
  margin:.35rem 0;
  border:1px solid #e6b08a;
  border-radius:.6rem;
  color:#111;
  background:#fff;
}
.links a.active { background:var(--highlight); font-weight:600; }

.tags { display:flex; gap:8px; flex-wrap:wrap; }

.tag {
  padding:.28rem .7rem;
  border:1px solid #e6b08a;
  background:#fff;
  border-radius:.8rem;
  cursor:pointer;
  font-size:.95rem;
}
.tag.active { background:var(--accent); font-weight:600; }

.btn {
  display:inline-block;
  background:var(--accent);
  border:1px solid #e6b08a;
  border-radius:.6rem;
  padding:.45rem .9rem;
  cursor:pointer;
  text-decoration:none;
  color:#111;
}

.search-box {
  width:100%;
  padding:.5rem .7rem;
  font-size:.95rem;
  border:1px solid #ccc;
  border-radius:.6rem;
  margin-bottom:.8rem;
}