/* ===========================
   FREE HUGS — Pure CSS Theme
   =========================== */

:root{
  --bg: #0f0f12;
  --panel: #16181d;
  --ink: #e8eaef;
  --muted: #adb5bd;
  --accent: #ff8aa8;   /* warm pink */
  --accent-2: #ffd88a; /* warm yellow */
  --ok: #7fe3a1;
  --warn: #ffb86b;
  --focus: 2px solid #ffd88a;
  --radius: 16px;
  --shadow: 0 6px 32px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 10% -10%, #2b1a2a33, transparent 60%),
    radial-gradient(900px 600px at 110% 10%, #2b231a33, transparent 60%),
    var(--bg);
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  display:flex; gap:1rem; align-items:center; justify-content:space-between;
  padding:1rem clamp(1rem, 3vw, 2rem);
  backdrop-filter: blur(8px);
  background: linear-gradient(#16181dbb, #16181d99);
  border-bottom: 1px solid #ffffff10;
}

.brand{display:flex; align-items:center; gap:.75rem}
.logo-mark{
  width:44px; height:44px; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius:50%;
  box-shadow: var(--shadow);
  font-size:1.4rem;
}
.brand-text h1{margin:0; font-size:1.25rem}
.brand-text .tagline{margin:.15rem 0 0; color:var(--muted); font-size:.9rem}

.top-nav a{
  color:var(--ink); text-decoration:none; padding:.55rem .8rem;
  border-radius:999px; border:1px solid #ffffff15;
  transition:.25s ease;
}
.top-nav a:hover{background:#ffffff10}

/* Hero */
.hero{display:grid; place-items:center; padding:2.5rem 1rem}
.hero-card{
  width:min(100%, 980px);
  background: linear-gradient(180deg, #1b1e2588, #16181d);
  border:1px solid #ffffff10;
  border-radius: var(--radius);
  padding: clamp(1rem, 2.5vw, 2rem);
  box-shadow: var(--shadow);
}
.hero-card h2{font-size: clamp(1.4rem, 2.4vw, 2rem); margin:.25rem 0 .5rem}
.hero-card p{color:#dfe3ea}

.cta-row{display:flex; gap:.75rem; flex-wrap:wrap; margin:1rem 0 1.25rem}
.btn{
  display:inline-block; padding:.7rem 1rem; border-radius:999px;
  text-decoration:none; border:1px solid #ffffff1a; transition:.2s;
}
.btn-primary{background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#2a181a; font-weight:700}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{color:var(--ink)}
.btn-ghost:hover{background:#ffffff10}

.place-time{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin:1rem 0;
}
.place-time strong{display:block; color:var(--muted); font-weight:600; letter-spacing:.02em}
.slot{
  margin-top:.25rem; padding:.5rem .65rem; border-radius:10px;
  background:#0f1116; border:1px dashed #ffffff28;
  min-height:2.35rem;
}
.editable:focus{outline:var(--focus)}

/* Placeholders for graphics */
.placeholder{
  display:grid; place-items:center;
  border:2px dashed #ffffff25; color:#cfd6df; text-align:center;
  border-radius:12px; padding:1rem; margin-top:1rem; background:#0c0e12;
}
.placeholder.poster{height:220px}
.placeholder.wide{height:140px}
.placeholder.thin{height:110px}
.placeholder.tall{height:240px}
.placeholder.square{aspect-ratio:1/1}
.placeholder.strip{height:120px}

/* Panels */
.panel{padding:2rem 1rem; width:min(100%, 1100px); margin-inline:auto}
.panel h2{font-size: clamp(1.2rem, 2.2vw, 1.7rem); margin:0 0 .8rem}

.grid.two{display:grid; gap:1rem; grid-template-columns: 1.1fr 1fr}
.grid.three{display:grid; gap:1rem; grid-template-columns: repeat(3, 1fr)}
@media (max-width: 900px){
  .grid.two, .grid.three{grid-template-columns:1fr}
  .place-time{grid-template-columns:1fr}
}

.quote{
  margin:0; padding:1rem 1.1rem; background:#12141a; border:1px solid #ffffff14;
  border-radius:12px; font-size:1.1rem; line-height:1.6;
  box-shadow: var(--shadow);
}
.text p{margin:.25rem 0 .75rem}

/* How-to steps */
.howto-step{
  border:1px solid #ffffff14; margin:.6rem 0; border-radius:12px; overflow:hidden;
  background:#12141a;
}
.howto-step > summary{
  list-style:none; cursor:pointer; padding:.9rem 1rem; display:flex; align-items:center; gap:.6rem;
}
.howto-step > summary::-webkit-details-marker{display:none}
.howto-step[open] > summary{background:#ffffff08}
.step-badge{
  width:28px; height:28px; display:grid; place-items:center; border-radius:50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#261616; font-weight:800;
}
.step-body{padding: .2rem 1rem 1rem}

/* Consent & Safety */
.consent .do, .consent .dont{margin:0; padding-left:1.1rem}
.consent .do li{margin:.35rem 0}
.consent .dont li{margin:.35rem 0; color:#ffb7c4}

.sticker-grid{
  margin-top:1rem;
  display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:.5rem;
}
.sticker{
  text-align:center; padding:.75rem .5rem; border-radius:999px; font-weight:700;
  background:#1b1f27; border:1px dashed #ffffff24;
}

/* Materials */
.card{
  background:#12141a; border:1px solid #ffffff12; border-radius:12px; padding:1rem;
  display:flex; flex-direction:column; gap:.5rem;
}
.coupon-sheet{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:.5rem;
}
.coupon{
  display:grid; place-items:center; aspect-ratio: 7 / 4; border:2px dashed #ffffff25;
  border-radius:12px; background:#0d0f14; font-weight:800; letter-spacing:.03em; font-size:1.1rem;
}

/* FAQ */
.faq details{
  background:#12141a; border:1px solid #ffffff14; border-radius:12px;
  padding:.75rem 1rem; margin:.5rem 0;
}
.faq summary{cursor:pointer; font-weight:700}

/* Footer */
.site-footer{
  padding:2rem 1rem 3rem; width:min(100%, 1100px); margin-inline:auto; color:var(--muted);
  border-top:1px solid #ffffff10; margin-top:2rem;
}
.complements{margin-top:.4rem; font-size:.95rem}

/* Utility */
.grid{width:min(100%, 1100px); margin-inline:auto}
.wide{width:100%}
.thin{width:100%}
.strip{width:100%}