/* MindBloom shared stylesheet: home and privacy pages */
/* Design tokens */
:root {
  --background: #bf4053;
  --surface: #f5e6e8;
  --text: #ffffff;
  --muted-text: #ffffff;
  --primary: #471f5b;
  --secondary: #efc7cd;
  --accent: #d9596c;
  --on-primary: #ffffff;
  --ink: #471f5b;
  --font-display: "Bagel Fat One", Georgia, serif;
  --font-body: "Nunito", Arial, sans-serif;
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s6: 1.5rem;
  --s8: 2rem; --s12: 3rem; --s16: 4rem; --s24: 6rem; --s32: 8rem;
  --radius-sm: 4px; --radius-md: 12px; --radius-lg: 24px;
  --shadow-1: 3px 4px 0 color-mix(in srgb,var(--primary) 78%, transparent), 0 8px 18px color-mix(in srgb,var(--primary) 20%, transparent);
  --shadow-2: 6px 8px 0 color-mix(in srgb,var(--primary) 75%, transparent), 0 20px 36px color-mix(in srgb,var(--primary) 22%, transparent);
  --shadow-3: 10px 12px 0 color-mix(in srgb,var(--primary) 80%, transparent), 0 34px 60px color-mix(in srgb,var(--primary) 28%, transparent);
  --ease: cubic-bezier(.2,.8,.2,1);
}
/* Reset */
*,*::before,*::after { box-sizing:border-box; }
html { font-size:clamp(16px,.55vw + 11px,22px); scroll-behavior:smooth; overflow-x:clip; }
body { margin:0; overflow-x:clip; background:var(--background); color:var(--text); font-family:var(--font-body); line-height:1.72; }
img,svg { max-width:100%; } a { color:inherit; } button { font:inherit; } ::selection { background:var(--accent);color:#fff; }
/* Base typography */
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:var(--font-display);font-weight:400;line-height:1.16;letter-spacing:-.025em;text-wrap:balance; } h2 { font-size:clamp(2rem,4.4vw,4.2rem); } h3 { font-size:clamp(1.25rem,2.2vw,1.75rem); } p { text-wrap:pretty; } em { font-style:normal;color:var(--secondary); } strong { font-weight:700; } .eyebrow { font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.88rem; }
/* Layout and container */
.container { width:min(100% - 40px,1360px);margin-inline:auto; } .section { padding-block:clamp(64px,10vw,128px);position:relative;min-height:74svh; } .section__intro { max-width:970px;margin-bottom:var(--s12); } .section__intro>p:not(.eyebrow),.section__heading p { max-width:900px; } .section__intro>p:not(.eyebrow) { font-size:1.08rem; } .section__intro h2 { margin-bottom:var(--s8); } .section__heading { display:grid;grid-template-columns:minmax(110px,1fr) 5fr;gap:var(--s8);margin-bottom:var(--s12); } .rail-label { writing-mode:vertical-rl;justify-self:start;font-size:.88rem;font-weight:700;letter-spacing:.18em; }
/* Components */
.site-header { position:relative;z-index:20; } .header__inner { height:72px;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);border-bottom:1px solid color-mix(in srgb,white 42%,transparent); } .brand { display:inline-flex;gap:var(--s3);align-items:center;min-width:0;text-decoration:none; } .brand__icon { flex:none;display:grid;place-items:center;width:44px;height:44px;background:var(--surface);border-radius:var(--radius-md);border:1px solid #ffffff88; } .brand img { display:block;width:40px;height:40px;object-fit:contain; } .brand__name { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-display);font-size:1.12rem;line-height:1.1; } .brand__name::after { content:"";display:block;height:2px;background:var(--secondary);width:0;transition:width .2s var(--ease); } .brand:hover .brand__name::after { width:100%; } .site-header nav { flex:none; } .button { display:inline-flex;gap:var(--s4);align-items:center;justify-content:center;min-height:48px;padding:.8rem 1.5rem;text-decoration:none;border:1px solid #ffffff66;border-radius:var(--radius-md);background:var(--surface);color:var(--ink);font-weight:700;box-shadow:var(--shadow-1);transition:transform .2s var(--ease),box-shadow .2s var(--ease);white-space:nowrap; } .button:hover { transform:translateY(-3px);box-shadow:var(--shadow-2); } .button:focus-visible,.brand:focus-visible,.text-link:focus-visible,summary:focus-visible,.back-top:focus-visible { outline:3px solid var(--secondary);outline-offset:4px; } .button--primary { color:var(--on-primary);background:var(--primary);border-color:var(--secondary); } .button--header { min-height:44px;padding:.6rem 1rem; } .text-link { display:inline-block;margin-top:var(--s8);font-weight:700;text-underline-offset:.3em; } .skip-link { position:fixed;top:-200px;left:var(--s4);z-index:99;background:var(--surface);color:var(--ink);padding:var(--s3); } .skip-link:focus { top:var(--s3); } .back-top { display:none;position:fixed;bottom:var(--s6);right:var(--s6);z-index:30;width:48px;height:48px;border:1px solid var(--secondary);border-radius:var(--radius-md);color:white;background:var(--primary);box-shadow:var(--shadow-1);cursor:pointer; } .back-top.is-visible { display:block; }
/* Page sections */
.hero-shell { position:relative;height:100vh;height:100svh;height:100dvh;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);isolation:isolate;background:radial-gradient(circle at 80% 95%,#efc7cd55,transparent 40%),repeating-radial-gradient(circle at 0% 0%,transparent 0 80px,#ffffff0a 81px 82px),var(--background); } .hero-shell>main { min-height:0; } .hero { height:100%;min-height:0; } .hero__body { --hs:1; height:100%;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:calc(var(--hs) * min(2svh,20px));padding-block:calc(var(--hs) * min(2svh,20px));text-align:center; } .hero__masthead { position:relative;max-width:100%; } .hero__index { margin:0 0 calc(var(--hs) * min(1svh,12px));letter-spacing:.23em;font-weight:700;font-size:calc(var(--hs) * clamp(12px,1.5svh,17px)); } .hero__index span { display:inline-block;height:1.2em;border-left:1px solid white;margin-inline:var(--s2);vertical-align:middle; } .hero h1 { font-size:calc(var(--hs) * clamp(28px,min(7vw,9svh),122px));line-height:1.07;margin:0;text-wrap:balance; } .hero h1 span { display:block; } .scribble { display:block;margin:auto;width:min(45%,280px);height:calc(var(--hs) * min(2svh,20px));color:var(--secondary); } .hero-art { position:relative;width:min(90%,calc(var(--hs) * min(62svh,700px)));max-height:calc(var(--hs) * min(38svh,440px));aspect-ratio:700/410;filter:drop-shadow(0 18px 22px #471f5b44); } .hero-art__glow { position:absolute;inset:30% 10% 0;background:radial-gradient(ellipse,#efc7cd99,transparent 70%);filter:blur(15px); } .hero-art svg { display:block;position:relative;width:100%;height:100%; } .hero__bottom { display:grid;justify-items:center;gap:calc(var(--hs) * min(2svh,20px));max-width:700px; } .hero__bottom p { font-size:calc(var(--hs) * clamp(16px,min(2.5vw,2.8svh),26px));line-height:1.4;margin:0;text-wrap:balance; } .hero__bottom .button { min-height:44px; }
.home-main { background:repeating-radial-gradient(circle at 100% 0%,transparent 0 150px,#ffffff08 151px 153px),var(--background); } .section--about { background:#471f5b26; } .fact-strip { display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s6); } .fact { grid-column:span 2;padding:var(--s8);border:3px solid var(--secondary);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-2); } .fact--wide { grid-column:span 3; } .fact span { font-family:var(--font-display);font-size:2.8rem;color:var(--accent); } .fact h3 { margin-top:var(--s3); } .fact p { margin-bottom:0; }
.sticker-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s8); } .sticker { padding:var(--s8);border:2px solid #ffffffaa;background:var(--surface);color:var(--ink);border-radius:var(--radius-md);box-shadow:var(--shadow-2);transform:rotate(-1.5deg);transition:transform .2s var(--ease); } .sticker:nth-child(even) { transform:rotate(1.5deg); } .sticker:hover { transform:translateY(-3px) rotate(0); } .sticker__symbol { display:grid;place-items:center;width:60px;height:60px;border:2px solid var(--primary);background:var(--secondary);border-radius:var(--radius-md);box-shadow:var(--shadow-1);font-size:2rem;margin-bottom:var(--s6); } .sticker p { margin:0; }
.section--handling { background:#471f5b2a; } .step-list { display:grid;gap:var(--s6); } .step { display:grid;grid-template-columns:95px 1fr;gap:var(--s8);max-width:86%;padding:var(--s8);border:2px solid #ffffff99;border-radius:var(--radius-sm);background:#f5e6e81c;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:var(--shadow-1); } .step:nth-child(odd) { margin-left:auto; } .step:nth-child(even) { margin-right:auto; } .step__number { font-family:var(--font-display);font-size:3.4rem;color:var(--secondary);line-height:1; } .step p { margin:0; }
.glance-layout { display:grid;grid-template-columns:minmax(240px,.9fr) minmax(0,1.5fr);gap:var(--s12);align-items:start; } .shield { position:sticky;top:var(--s8);display:grid;place-items:center;min-height:500px;background:#471f5b55;border:2px solid #ffffff55;border-radius:var(--radius-lg);box-shadow:var(--shadow-3); } .shield svg { max-width:70%; } .shield>span { position:absolute;bottom:var(--s6);font-family:var(--font-display);text-align:center;line-height:1.1;font-size:2rem; } .check-list { list-style:none;padding:0;margin:0;display:grid;gap:var(--s6); } .check-item { display:flex;gap:var(--s6);padding-bottom:var(--s6);border-bottom:2px wavy var(--secondary); } .check-item>span { display:grid;place-items:center;flex:none;width:46px;height:46px;background:var(--surface);color:var(--ink);border-radius:var(--radius-sm);font-size:1.35rem;box-shadow:var(--shadow-1); } .check-item h3 { margin-bottom:var(--s2); } .check-item p { margin:0; }
.section--choices { background:#471f5b26; } .choice-list { display:grid;gap:var(--s4);max-width:1020px;margin-left:auto; } .choice { border:2px solid var(--secondary);background:var(--surface);color:var(--ink);border-radius:var(--radius-sm);box-shadow:var(--shadow-1); } .choice summary { list-style:none;display:flex;justify-content:space-between;gap:var(--s4);align-items:center;min-height:64px;padding:var(--s4) var(--s8);cursor:pointer;font-family:var(--font-display);font-size:1.25rem; } .choice summary::-webkit-details-marker { display:none; } .choice summary span { font-family:var(--font-body);font-weight:700; } .choice[open] summary span { transform:rotate(45deg); } .choice p { padding:0 var(--s8) var(--s6);margin:0; }
.why-list { max-width:1050px; } .why-row { display:grid;grid-template-columns:minmax(160px,1fr) 3fr;gap:var(--s8);border-top:1px solid var(--secondary);padding-block:var(--s8);align-items:start; } .why-row strong { font-family:var(--font-display);font-size:clamp(2rem,4vw,3.8rem);line-height:1.1; } .why-row p { margin:0; } .pull-quote { max-width:1000px;margin:var(--s12) 0 0 auto;font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.8rem);line-height:1.3;color:var(--secondary); }
.closing { padding:var(--s16) 0 var(--s24);background:#471f5b33; } .closing__card { transform:translateY(-1rem);display:flex;justify-content:space-between;align-items:center;gap:var(--s8);padding:var(--s12);border:3px solid var(--secondary);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-3); } .closing__card>div { max-width:760px; } .closing h2 { font-size:clamp(1.8rem,3.4vw,3rem); } .closing p:last-child { margin-bottom:0; }
.site-footer { padding:var(--s16) 0 var(--s8);background:var(--primary);text-align:center; } .footer__inner { display:grid;justify-items:center;gap:var(--s3); } .footer__ornament { color:var(--secondary);font-size:1.6rem; } .footer__inner p { margin:0; } .footer__fine { opacity:.85; } .brand--footer { justify-content:center; }
/* Privacy */
.policy-main { padding:var(--s16) 0 var(--s24);background:repeating-radial-gradient(circle at 0% 0%,transparent 0 100px,#ffffff08 101px 103px),var(--background); } .policy-title { display:flex;align-items:end;justify-content:space-between;gap:var(--s8);padding-bottom:var(--s8);border-bottom:3px solid var(--secondary); } .policy-title h1 { font-size:clamp(2.4rem,5.5vw,5.5rem);margin:0 0 var(--s3); } .policy-title__name { font-weight:700;margin:0; } .policy-title__meta { display:grid;gap:var(--s2);padding:var(--s6);background:var(--surface);color:var(--ink);border:2px solid var(--primary);border-radius:var(--radius-sm);box-shadow:var(--shadow-1);white-space:nowrap; } .policy-title__meta span { font-size:.9rem; } .policy-content { max-width:760px;margin:var(--s8) auto 0; } .policy-opening { padding:var(--s8);border:2px solid var(--secondary);border-radius:var(--radius-sm);margin-bottom:var(--s6); } .policy-opening h2 { font-size:1.6rem; } .policy-opening p { margin:0; } .policy-row { padding:var(--s8);margin-bottom:var(--s6);border:2px solid #ffffffaa;border-radius:var(--radius-sm);background:#471f5b21; } .policy-row h2 { font-family:var(--font-body);font-weight:700;font-size:1.4rem;margin-bottom:var(--s6);letter-spacing:0; } .policy-row p:last-child,.policy-row ul:last-child { margin-bottom:0; } .policy-row ul { padding-left:var(--s8); } .policy-row li { margin-bottom:var(--s2); }
/* Utilities */
.reveal { opacity:1; } .js-ready .reveal { opacity:0;transform:translateY(18px);filter:blur(4px);transition:opacity .6s var(--ease),transform .6s var(--ease),filter .6s var(--ease); } .js-ready .reveal.is-revealed { opacity:1;transform:translateY(0);filter:blur(0); }
/* Responsive */
@media (min-width:768px) { .container { width:min(100% - 64px,1360px); } }
@media (min-width:1280px) { .container { width:min(100% - 96px,1360px); } }
@media (max-width:1023px) { .sticker-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .glance-layout { grid-template-columns:1fr; } .shield { position:relative;min-height:320px; } .shield svg { height:300px; } .section__heading { grid-template-columns:1fr; } .rail-label { writing-mode:horizontal-tb; } .closing__card { align-items:start;flex-direction:column; } }
@media (max-width:767px) { .header__inner { height:64px; } .brand__name { max-width:calc(100vw - 220px);font-size:.85rem; } .brand__name span { display:none; } .brand__icon { width:40px;height:40px; } .brand img { width:36px;height:36px; } .button--header { padding:.55rem .75rem;font-size:.88rem; } .section { min-height:0; } .fact-strip { grid-template-columns:1fr; } .fact,.fact--wide { grid-column:auto; } .sticker-grid { grid-template-columns:1fr; } .step { max-width:100%;grid-template-columns:1fr;gap:var(--s3); } .step__number { font-size:2.4rem; } .why-row { grid-template-columns:1fr;gap:var(--s3); } .policy-title { align-items:start;flex-direction:column; } .policy-title__meta { width:100%; } .policy-row { padding:var(--s6); } .hero__index { letter-spacing:.1em; } }
@media (max-width:480px) { .brand__name { font-size:.8rem;max-width:calc(100vw - 190px); } .hero__body { gap:calc(var(--hs) * min(1.6svh,12px)); } .hero-art { width:min(94%,calc(var(--hs) * 40svh)); } .choice summary { padding:var(--s4); } .choice p { padding-inline:var(--s4); } .closing__card { padding:var(--s8); } }
@media (max-height:600px) { .hero__body { display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;align-content:center;column-gap:var(--s6); } .hero__masthead { grid-column:1/-1; } .hero-art { max-height:36svh;width:auto;margin:auto; } .hero__bottom { align-self:center; } .hero__bottom p { font-size:calc(var(--hs) * 16px); } .hero h1 span { display:inline; } }
@media (max-height:420px) { .hero__body { display:flex; } .hero-art { display:none; } .hero__masthead { max-width:100%; } }
.hero--compact .hero-art { max-height:24svh; } .hero--compact .scribble,.hero--compact .hero__index { display:none; }
/* Motion and reduced motion */
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .js-ready .reveal { opacity:1;transform:none;filter:none;transition:none; } .button,.sticker,.brand__name::after { transition:none; } }
/* Print */
@media print { .site-header nav,.back-top,.closing { display:none; } body,.policy-main { color:#471f5b;background:white; } .policy-row { color:#471f5b;border:1px solid #471f5b;break-inside:avoid; } }