/* ---------------------------------------------------------------------------
   conjuringforcancer.com
   Built 2026-08-15. Plain HTML and CSS, no framework, no build step, no
   WordPress. Same approach as schoolmagicassemblies.com and magicparty.org.

   PALETTE, and the reasoning matters because this is not an entertainment site.
   The buyer is a hospital program director, a cancer charity, a fundraising
   committee. Carroll's usual red-and-black theater brand would be wrong in
   front of them, and pink belongs to one specific cause. So: deep teal-slate
   for calm and dignity, warm cream so it never reads clinical, and one amber
   accent for warmth. Serious, warm, human. Not showbiz, not a hospital form.
--------------------------------------------------------------------------- */

:root{
  --ink:#12262E;
  --ink-2:#1B3742;
  --paper:#FAF7F2;
  --paper-2:#F1E9DE;
  --text:#25333C;
  --muted:#5D6C76;
  --accent:#BE7F26;
  --accent-dark:#8C5C17;
  --line:#DCD2C4;
  --shadow:0 1px 2px rgba(18,38,46,.06), 0 12px 28px -20px rgba(18,38,46,.45);
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--sans); font-size:18px; line-height:1.65;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent-dark)}
.wrap{width:100%; max-width:1060px; margin:0 auto; padding:0 20px}

/* ---------- header and nav ---------- */
.site-head{background:var(--ink); color:#fff}
.head-inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px 24px; padding:16px 20px; max-width:1060px; margin:0 auto;
}
.brand{font-family:var(--serif); font-size:21px; letter-spacing:.01em; color:#fff;
  text-decoration:none; line-height:1.2}
.brand span{display:block; font-family:var(--sans); font-size:11.5px; letter-spacing:.19em;
  text-transform:uppercase; color:var(--accent); margin-top:3px; font-weight:600}
nav{display:flex; flex-wrap:wrap; gap:4px 20px}
nav a{
  color:#DCE6EA; text-decoration:none; font-size:15.5px; padding:6px 0;
  border-bottom:2px solid transparent;
}
nav a:hover{color:#fff; border-bottom-color:var(--accent)}
nav a[aria-current="page"]{color:#fff; border-bottom-color:var(--accent)}

/* ---------- hero ---------- */
.hero{background:var(--ink); color:#fff; padding:54px 0 60px}
.hero .wrap{max-width:860px}
.eyebrow{
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  color:var(--accent); margin:0 0 14px;
}
.hero h1{
  font-family:var(--serif); font-weight:normal; font-size:clamp(30px,6.2vw,50px);
  line-height:1.14; margin:0 0 16px; letter-spacing:-.005em;
}
.hero .deck{font-size:clamp(18px,3vw,22px); color:#CDDBE0; margin:0 0 26px; line-height:1.45}
.hero p{color:#E4EDF0; max-width:56ch}
.hero p.lede{font-size:19.5px}

/* ---------- buttons ---------- */
.btns{display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 0}
.btn{
  display:inline-block; background:var(--accent); color:#1B1206; text-decoration:none;
  font-weight:700; font-size:16.5px; padding:14px 26px; border-radius:4px;
  border:2px solid var(--accent);
}
.btn:hover{background:var(--accent-dark); border-color:var(--accent-dark); color:#fff}
.btn.ghost{background:transparent; color:#fff; border-color:#5A727C}
.btn.ghost:hover{background:#fff; color:var(--ink); border-color:#fff}
.btn.dark{background:var(--ink); border-color:var(--ink); color:#fff}
.btn.dark:hover{background:var(--ink-2); border-color:var(--ink-2)}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px}

/* ---------- sections ---------- */
section{padding:52px 0}
section.tint{background:var(--paper-2)}
section h2{
  font-family:var(--serif); font-weight:normal; font-size:clamp(25px,4.4vw,34px);
  line-height:1.2; margin:0 0 18px; color:var(--ink);
}
section h3{font-size:19px; margin:26px 0 6px; color:var(--ink)}
section p{max-width:64ch; margin:0 0 16px}
.narrow{max-width:720px}
.big{font-size:21px; line-height:1.55}

blockquote{
  margin:26px 0; padding:4px 0 4px 22px; border-left:4px solid var(--accent);
  font-family:var(--serif); font-size:21px; line-height:1.5; color:var(--ink);
}
blockquote cite{
  display:block; font-family:var(--sans); font-size:14.5px; font-style:normal;
  color:var(--muted); margin-top:10px;
}

ul.plain{list-style:none; padding:0; margin:18px 0}
ul.plain li{padding-left:26px; position:relative; margin:0 0 9px}
ul.plain li::before{
  content:""; position:absolute; left:4px; top:.62em; width:8px; height:8px;
  background:var(--accent); border-radius:50%;
}

/* ---------- cards ---------- */
.cards{display:grid; gap:18px; grid-template-columns:1fr; margin:26px 0 0}
.card{background:#fff; border:1px solid var(--line); border-radius:5px; padding:24px;
  box-shadow:var(--shadow)}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}

/* ---------- media ---------- */
figure{margin:26px 0}
figure img{border-radius:5px}
figcaption{font-size:14.5px; color:var(--muted); margin-top:9px}
.video{margin:26px 0}
.video video{width:100%; height:auto; border-radius:5px; background:#000; display:block}
.ratio{position:relative; width:100%; padding-top:56.25%; border-radius:5px; overflow:hidden;
  background:#000}
.ratio iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.vcap{font-size:14.5px; color:var(--muted); margin-top:9px}
.video-grid{display:grid; grid-template-columns:1fr; gap:26px; margin:26px 0}
.video-grid .video{margin:0}

/* ---------- the contact block, repeated on every page ---------- */
.contact-block{background:var(--ink); color:#fff}
.contact-block h2{color:#fff}
.contact-block p{color:#D6E2E6}

/* THE WHITE CARD BELOW IS LOAD-BEARING. DO NOT REMOVE IT TO MAKE THE FORM SIT
   FLUSH ON THE DARK SECTION.
   The Mago form renders inside a cross-origin iframe, so no CSS on this page can
   reach its labels. Those labels are dark gray. Dropped straight onto the teal
   section they would be dark on dark and unreadable, which is a fault Carroll has
   already hit once on a previous site. The white card is what guarantees the form
   always has a light background behind it, whatever Mago changes at their end.
   Checked 2026-08-15 by measuring the rendered pixels: labels read clean. */
.form-slot{
  background:#fff; color:var(--text); border-radius:6px; padding:26px;
  margin:26px 0 0; box-shadow:var(--shadow);
}
.form-slot .slot-note{
  border:2px dashed var(--line); border-radius:5px; padding:26px; text-align:center;
  color:var(--muted); font-size:16px;
}
.callnow{margin:24px 0 0; font-size:17px; color:#D6E2E6}
.callnow strong{color:#fff; font-size:25px; font-family:var(--serif); display:block; margin-top:4px}
.callnow a{color:#fff}

/* ---------- footer ---------- */
footer{background:var(--ink-2); color:#C6D5DA; padding:34px 0; font-size:15.5px}
footer a{color:#fff}
footer .wrap{display:flex; flex-wrap:wrap; gap:14px 40px; justify-content:space-between}
footer p{margin:0 0 6px; max-width:none}

/* ---------- wider screens ---------- */
@media (min-width:720px){
  .cards.two{grid-template-columns:1fr 1fr}
  .cards.three{grid-template-columns:repeat(3,1fr)}
  .video-grid{grid-template-columns:1fr 1fr}
  section{padding:64px 0}
  .hero{padding:76px 0 82px}
}

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

/* ---------------------------------------------------------------------------
   MOTION. Added 2026-08-22 at Carroll's request.

   THE BRIEF, because somebody will otherwise "improve" this later: this site
   sells a keynote about losing both his parents to cancer, to hospital program
   directors, cancer charities and fundraising committees. The palette was
   chosen to keep his red-and-black theater brand OUT of the room. Movement has
   to read as considered and human, never as showbiz. So: short fades, small
   rises, nothing that bounces, slides sideways, loops, or draws attention to
   the animation itself. If a visitor notices the motion, it is too much.

   SAFETY, and this is the part that matters on a live site:
   Every rule that HIDES anything is scoped to `html.js`, set by a one-line
   script in the head of each page. If that script never runs, if JavaScript is
   off, or if the observer throws, nothing is ever hidden and the site renders
   exactly as it did before this block existed. Content is never dependent on
   animation to become visible.

   THE CONTACT BLOCK IS DELIBERATELY NOT ANIMATED. The Mago form is a
   cross-origin iframe that measures and resizes itself. Putting it inside a
   faded or transformed ancestor risks it measuring against the wrong height and
   rendering clipped. The form is the only call to action on the site and it has
   already nearly shipped broken once (the ssl:false fault, 2026-08-22). Leave
   it alone.
--------------------------------------------------------------------------- */

/* ---------- scroll reveal ---------- */
html.js .reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
html.js .reveal.in{opacity:1; transform:none; will-change:auto}

/* ---------- hero, on load ---------- */
/* The one place a sequence is justified: it is the first thing seen and it sets
   the pace for the rest of the page. Delays are short and the order follows how
   the eye reads it anyway. */
@keyframes cfc-rise{to{opacity:1; transform:none}}
html.js .hero .eyebrow,
html.js .hero h1,
html.js .hero .deck,
html.js .hero p,
html.js .hero .btns{
  opacity:0; transform:translateY(12px);
  animation:cfc-rise .8s cubic-bezier(.22,.61,.36,1) forwards;
}
html.js .hero .eyebrow{animation-delay:.05s}
html.js .hero h1     {animation-delay:.15s}
html.js .hero .deck  {animation-delay:.28s}
html.js .hero p      {animation-delay:.38s}
html.js .hero .btns  {animation-delay:.48s}

/* ---------- the quotes ---------- */
/* His mother and his father speak in these. They get the one real flourish on
   the site: the amber rule beside the quote draws downward as the words arrive,
   so the line feels written rather than placed.
   The border stays a real border when JS is absent, so the no-script rendering
   is unchanged. */
html.js blockquote{position:relative; border-left-color:transparent}
html.js blockquote::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--accent);
  transform:scaleY(0); transform-origin:top;
  transition:transform .85s cubic-bezier(.22,.61,.36,1) .15s;
}
html.js blockquote.in::before{transform:scaleY(1)}
html.js blockquote cite{
  opacity:0; transition:opacity .6s ease .5s;
}
html.js blockquote.in cite{opacity:1}

/* ---------- hover, kept to a couple of pixels ---------- */
.card{transition:transform .25s ease, box-shadow .25s ease}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(18,38,46,.07), 0 18px 34px -20px rgba(18,38,46,.5);
}
.btn{transition:background .2s ease, border-color .2s ease, color .2s ease,
                transform .18s ease}
.btn:hover{transform:translateY(-2px)}
figure img, .video video{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
figure:hover img{transform:scale(1.012)}

/* Focus must never be hidden by a reveal that has not fired. */
html.js .reveal :focus-visible{opacity:1}
a:focus-visible, .btn:focus-visible, button:focus-visible{
  outline:3px solid var(--accent); outline-offset:3px;
}

/* ---------- reduced motion: everything off, nothing hidden ---------- */
/* Not a courtesy. Vestibular disorders are common, and this site's visitors are
   disproportionately people dealing with illness and treatment. */
@media (prefers-reduced-motion: reduce){
  html.js .reveal,
  html.js .reveal.in{opacity:1; transform:none; transition:none}
  html.js .hero .eyebrow,
  html.js .hero h1,
  html.js .hero .deck,
  html.js .hero p,
  html.js .hero .btns{opacity:1; transform:none; animation:none}
  html.js blockquote{border-left-color:var(--accent)}
  html.js blockquote::before{display:none}
  html.js blockquote cite{opacity:1; transition:none}
  .card,.btn,figure img,.video video{transition:none}
  .card:hover,.btn:hover{transform:none}
  figure:hover img{transform:none}
  html{scroll-behavior:auto}
}