/* ═══════════════════════════════════════════════════
   Hypnotisia — shared styles
   Upload to:  public_html/assets/site.css
   Every page links to it with:
   <link rel="stylesheet" href="/assets/site.css">
   ═══════════════════════════════════════════════════ */

:root{
  --void:#0B0A12;
  --raised:#12111C;
  --candle:#F2D9BC;
  --ember:#E8A56B;
  --dust:#8B8177;
  --hair:rgba(242,217,188,.10);
  --measure:34rem;
}

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

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--void);
  color:var(--candle);
  font-family:"Newsreader",Georgia,serif;
  font-weight:300;
  font-size:1.1875rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:70vh;
  background:radial-gradient(70vmin 50vmin at 50% 0%, rgba(232,165,107,.07), transparent 70%);
  pointer-events:none;
}

.wrap{
  position:relative;
  width:100%;
  max-width:var(--measure);
  margin-inline:auto;
  padding-inline:1.5rem;
}

/* ─────────── links & focus ─────────── */
a{color:var(--ember);text-decoration:none;border-bottom:1px solid rgba(232,165,107,.28)}
a:hover{border-bottom-color:var(--ember)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:3px}

/* ─────────── utility type ─────────── */
.eyebrow{
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ember);
}

.meta{
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:.75rem;
  letter-spacing:.05em;
  line-height:1.7;
  color:var(--dust);
}

/* ─────────── masthead ─────────── */
.top{border-bottom:1px solid var(--hair);padding-block:1.25rem}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}

.brand{
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--candle);
  border:0;
}

.langs{
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:.6875rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dust);
  display:flex;
  gap:.85rem;
}
.langs a{color:var(--dust);border:0}
.langs a[aria-current]{color:var(--ember)}
.langs a:hover{color:var(--candle)}

/* ─────────── page head ─────────── */
header.piece{padding-block:4.5rem 2.5rem}

h1{
  font-size:clamp(2.25rem,8.5vw,3.25rem);
  font-weight:200;
  line-height:1.08;
  letter-spacing:-.02em;
  margin-block:.9rem 1.5rem;
}
h1 em{font-style:italic;color:var(--ember)}

.standfirst{
  font-size:1.3125rem;
  line-height:1.62;
  font-weight:200;
  opacity:.82;
}

/* ─────────── body copy ─────────── */
main p{margin-bottom:1.5rem;opacity:.88}

h2{
  font-size:1.625rem;
  font-weight:300;
  line-height:1.25;
  letter-spacing:-.01em;
  margin:3.25rem 0 1.25rem;
}

h3{
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:.9375rem;
  font-weight:500;
  margin:2.25rem 0 .75rem;
}

strong{font-weight:400;color:var(--candle)}
em{font-style:italic}

ul{margin:0 0 1.5rem 1.25rem;opacity:.88}
li{margin-bottom:.85rem;padding-left:.35rem}

ol{list-style:none;counter-reset:step;margin:0 0 1.5rem;opacity:.88}
ol li{counter-increment:step;position:relative;padding-left:2.5rem}
ol li::before{
  content:counter(step);
  position:absolute;left:0;top:.35rem;
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:.6875rem;font-weight:500;
  color:var(--ember);
  border:1px solid rgba(232,165,107,.3);
  border-radius:50%;
  width:1.6rem;height:1.6rem;
  display:grid;place-items:center;
}

blockquote{
  margin:2.75rem 0;
  padding-left:1.5rem;
  border-left:1px solid rgba(232,165,107,.35);
  font-size:1.375rem;line-height:1.5;
  font-weight:200;font-style:italic;
  color:var(--ember);
}

/* ─────────── the two gates (About) ─────────── */
.gates{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);margin:2.5rem 0}
.gate{background:var(--void);padding:1.75rem 1.5rem}
.gate h3{margin-top:0}
.gate p{margin-bottom:0;font-size:1.0625rem;opacity:.8}
.gate .eyebrow{display:block;margin-bottom:.75rem}
.gate--join{background:var(--raised)}
@media(min-width:40rem){.gates{grid-template-columns:1fr 1fr}.gate--join{grid-column:1 / -1}}

/* ─────────── plain-terms box (Privacy) ─────────── */
.plain{
  background:var(--raised);
  border:1px solid var(--hair);
  padding:1.75rem 1.5rem;
  margin:2.5rem 0;
}
.plain h2{margin:0 0 1rem;font-size:1.25rem}
.plain ul{margin-bottom:0}
.plain li{font-size:1.0625rem;opacity:.85}

/* ─────────── big email (Contact) ─────────── */
.mail{
  display:block;
  margin:2.5rem 0;
  font-size:clamp(1.375rem,6vw,2rem);
  font-weight:200;
  letter-spacing:-.01em;
  word-break:break-all;
  border:0;
  border-bottom:1px solid rgba(232,165,107,.3);
  padding-bottom:.5rem;
}

/* ─────────── session call to action ─────────── */
.session{
  margin:3.5rem 0;
  padding:2.25rem 1.75rem;
  background:var(--raised);
  border:1px solid var(--hair);
  display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:1.25rem;
}
.orb{
  width:5.5rem;height:5.5rem;border-radius:50%;
  border:1px solid rgba(232,165,107,.3);
  background:radial-gradient(circle,rgba(232,165,107,.10),transparent 68%);
  animation:breathe 10s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(.7)}40%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.orb{animation:none;transform:scale(.88)}}
.session p{margin:0;opacity:.78;font-size:1.0625rem;max-width:22rem}

.cta{
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:.75rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--void);background:var(--ember);
  border:0;border-radius:999px;
  padding:1rem 2.25rem;display:inline-block;
  transition:background .3s ease;
}
.cta:hover{background:var(--candle);border:0}

/* ─────────── collapsibles ─────────── */
details{border-bottom:1px solid var(--hair);padding:1.1rem 0}
summary{
  cursor:pointer;list-style:none;
  font-size:1.125rem;font-weight:300;
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--ember);font-size:1.25rem;line-height:1}
details[open] summary::after{content:"−"}
details p{margin:.9rem 0 .25rem;font-size:1.0625rem;opacity:.75}

/* ─────────── footer ─────────── */
footer{margin-top:5rem;border-top:1px solid var(--hair);padding-block:2.5rem 4rem}
footer .meta{max-width:28rem}
footer .meta + .meta{margin-top:1rem}
.footlinks{
  display:flex;flex-wrap:wrap;gap:1.25rem;
  margin-bottom:1.5rem;
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
}
.footlinks a{border:0;color:var(--dust)}
.footlinks a:hover{color:var(--candle)}

@media(min-width:48rem){
  :root{--measure:38rem}
  body{font-size:1.25rem}
  header.piece{padding-block:6rem 3rem}
}

/* ─────────── article byline & FAQ ─────────── */
.byline{
  display:flex;flex-wrap:wrap;
  gap:.5rem 1.25rem;
  padding-top:1.5rem;
  border-top:1px solid var(--hair);
}
.faq{margin-top:3.5rem;border-top:1px solid var(--hair);padding-top:2.5rem}
.faq h2{margin-top:0}