/* MeterCove shared styles: home and privacy pages */
/* Design tokens */
:root {
  --background: #d52340;
  --surface: #f8e2e6;
  --text: #ffffff;
  --muted-text: #ffffff;
  --primary: #682812;
  --secondary: #bfeaf8;
  --accent: #3dc7f5;
  --on-primary: #ffffff;
  --font-heading: 'Pathway Gothic One', 'Arial Narrow', sans-serif;
  --font-body: 'Work Sans', Arial, sans-serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --r-small: 8px; --r-medium: 16px; --r-large: 32px;
  --shadow-one: 0 8px 24px #68281222, 0 1px 2px #68281226;
  --shadow-two: 0 18px 48px #68281238, 0 4px 12px #68281222;
  --shadow-three: 0 28px 80px #68281255, 0 8px 24px #d5234044;
  --ease: cubic-bezier(.2,.8,.2,1);
  --page-pad: clamp(20px, 5vw, 48px);
  --section-pad: clamp(64px, 10vw, 128px);
}
/* 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; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--accent); color: var(--primary); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
/* Base typography */
body { color: var(--text); background: var(--background); font-family: var(--font-body); font-size: 1rem; line-height: 1.72; }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { font-family: var(--font-heading); font-weight: 700; line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }
h2 { font-size: clamp(2.4rem, 5vw, 5.4rem); }
h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
p { text-wrap: pretty; }
/* Layout and container */
.container { width: min(100%, 1360px); margin-inline: auto; padding-inline: var(--page-pad); }
.skip-link { position: fixed; z-index: 100; top: -100px; left: 20px; padding: var(--s3) var(--s5); background: var(--surface); color: var(--primary); border-radius: var(--r-small); }
.skip-link:focus { top: 16px; }
/* Components */
.site-header { position: relative; z-index: 20; width: 100%; height: 72px; background: #d52340e8; border-bottom: 1px solid #ffffff42; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.header-inner { height: 100%; max-width: 1360px; margin: auto; padding: 0 var(--page-pad); display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.wordmark { display: flex; align-items: center; gap: var(--s3); min-width: 0; font-family: var(--font-heading); font-size: 1.85rem; font-weight: 700; line-height: 1; letter-spacing: .025em; }
.wordmark > span:last-child { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.logo-chip { display: flex; align-items: center; flex: none; padding: 3px; background: #f8e2e6; border-radius: var(--r-small); }
.logo-chip img { width: 38px; height: 38px; object-fit: contain; }
.nav-button,.hero-button { display: inline-flex; min-height: 48px; gap: var(--s5); justify-content: center; align-items: center; padding: var(--s3) var(--s5); font-weight: 700; line-height: 1.2; background: #3dc7f534; color: var(--text); border: 1px solid var(--accent); border-radius: var(--r-small); box-shadow: inset 0 1px #ffffff88, var(--shadow-one); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .2s var(--ease), background .2s var(--ease); }
.nav-button:hover,.hero-button:hover { transform: translateY(-3px); background: #3dc7f56b; }
.nav-button[aria-current="page"] { background: var(--accent); color: var(--primary); }
.eyebrow,.hero-kicker { font-size: .9rem; line-height: 1.5; letter-spacing: .2em; font-weight: 700; }
/* Page sections: one-screen hero */
.hero-shell { --hs: 1; position: relative; isolation: isolate; display: grid; grid-template-rows: 72px minmax(0,1fr); height: 100vh; height: 100svh; height: 100dvh; min-height: 0; background: radial-gradient(ellipse at 58% 100%, #bfeaf88a, transparent 44%), linear-gradient(155deg, #d52340, #d52340 60%, #682812); }
.hero-shell::before,.story-section::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .08; background-image: linear-gradient(#bfeaf8 1px, transparent 1px), linear-gradient(90deg, #bfeaf8 1px, transparent 1px); background-size: 48px 48px; }
.hero-content { position: relative; display: grid; grid-template-columns: calc(var(--hs) * 42px) minmax(0,1fr); align-items: center; width: min(100%,1360px); margin-inline: auto; padding: calc(var(--hs) * min(3svh,32px)) var(--page-pad); gap: calc(var(--hs) * min(3svh,32px)); min-height: 0; }
.hero-rail { height: min(42svh, 280px); align-self: center; border-left: 1px solid var(--secondary); display: flex; justify-content: center; }
.hero-rail span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: calc(var(--hs) * .72rem); letter-spacing: .27em; line-height: 1; }
.hero-copy { z-index: 3; align-self: center; max-width: 1050px; }
.hero-kicker { margin-bottom: calc(var(--hs) * min(2svh,24px)); }
.hero-copy h1 { font-family: var(--font-heading); font-size: calc(var(--hs) * clamp(32px, min(9vw, 12svh), 165px)); max-width: 11ch; line-height: .92; letter-spacing: -.025em; margin-bottom: calc(var(--hs) * min(2.5svh,28px)); }
.hero-copy h1 span,.hero-copy h1 strong { display: block; }
.hero-copy h1 strong { font-weight: 700; color: var(--secondary); }
.hero-light { font-weight: 400; }
.hero-description { font-size: calc(var(--hs) * clamp(16px, min(2vw, 2.6svh), 26px)); max-width: 49ch; line-height: 1.35; margin-bottom: calc(var(--hs) * min(3svh,32px)); }
.hero-button { position: relative; z-index: 4; }
.hero-sculpture { position: absolute; pointer-events: none; width: calc(var(--hs) * min(45vw, 43svh)); height: calc(var(--hs) * min(45vw, 43svh)); right: 6%; bottom: 7%; perspective: 1000px; transform-style: preserve-3d; opacity: .92; }
.halo { position: absolute; inset: 1%; border: 2px solid #bfeaf899; border-radius: 50%; box-shadow: 0 0 48px #bfeaf867, inset 0 0 30px #bfeaf855; transform: rotateX(65deg); animation: ring-turn 32s linear infinite; }
.orb { position: absolute; border-radius: 50%; box-shadow: inset -18px -24px 38px #68281280, inset 12px 10px 28px #ffffff80, var(--shadow-three); }
.orb--back { width: 52%; aspect-ratio: 1; top: 4%; right: 6%; background: radial-gradient(circle at 30% 20%, #ffffff, #bfeaf8 32%, #3dc7f5 70%, #682812); }
.orb--front { width: 35%; aspect-ratio: 1; bottom: 12%; left: 5%; background: radial-gradient(circle at 28% 25%, #ffffff, #3dc7f5 48%, #d52340); }
.plane { position: absolute; width: 67%; height: 33%; top: 36%; left: 14%; background: linear-gradient(145deg,#f8e2e6,#3dc7f5 35%,#682812 100%); clip-path: polygon(0 20%, 72% 0, 100% 62%, 26% 100%); transform: rotate(-22deg) skewY(10deg); box-shadow: var(--shadow-three); }
.plane--two { top: 49%; left: 17%; opacity: .76; transform: rotate(20deg) skewY(-12deg); background: linear-gradient(145deg,#bfeaf8,#d52340 65%,#682812); }
.hero-band { position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; height: calc(var(--hs) * min(14svh, 140px)); opacity: .42; pointer-events: none; overflow: clip; }
.hero-band svg { width: 100%; height: 100%; }
/* Story pages */
.story-section { position: relative; isolation: isolate; min-height: 75svh; padding-block: var(--section-pad); border-bottom: 1px solid #ffffff3a; }
.story-section:nth-child(even) { background: linear-gradient(140deg, #d52340, #b9233d); }
.story-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0,1.3fr); gap: clamp(32px, 6vw, 96px); }
.story-aside { position: sticky; top: 32px; align-self: start; }
.story-aside h2 { margin-bottom: var(--s7); }
.story-intro { font-size: clamp(1.05rem,1.5vw,1.3rem); font-weight: 600; line-height: 1.7; margin-bottom: var(--s7); }
.section-illustration { height: 180px; position: relative; overflow: clip; background: linear-gradient(150deg,#bfeaf82e,#68281240); border: 1px solid #ffffff44; border-radius: var(--r-medium); box-shadow: var(--shadow-one); }
.section-illustration > span { position: absolute; left: var(--s5); bottom: -30px; font-family: var(--font-heading); font-size: 10rem; line-height: 1; color: #bfeaf85c; }
.signal-lines { position: absolute; right: -20%; top: 20%; width: 110%; height: 90%; border-top: 3px solid var(--secondary); border-radius: 50%; transform: rotate(-19deg); box-shadow: 0 -16px 0 -13px var(--accent), 0 -32px 0 -29px var(--secondary); }
.row-stack { display: grid; gap: var(--s5); }
.info-row { position: relative; display: grid; grid-template-columns: 85px minmax(0,1fr); gap: var(--s5); align-items: start; padding: var(--s6); background: linear-gradient(155deg,#f8e2e62b,#68281233); border: 1px solid #ffffff60; border-radius: var(--r-medium); box-shadow: var(--shadow-one); transform: rotate(-.55deg); transition: transform .2s var(--ease); }
.info-row:nth-child(even) { transform: rotate(.6deg); }
.info-row:hover,.info-row:nth-child(even):hover { transform: translateY(-3px) rotate(0); }
.outline-num { font-family: var(--font-heading); font-size: 3.6rem; line-height: 1; color: var(--secondary); -webkit-text-stroke: 1px var(--secondary); }
.info-row h3,.glance-card h3 { margin-bottom: var(--s2); }
.info-row p,.glance-card p { margin-bottom: 0; }
.glance-card { padding: var(--s6); border: 5px solid var(--secondary); border-radius: var(--r-large); background: linear-gradient(130deg,#682812bd,#d52340); box-shadow: var(--shadow-three); }
.glance-card ul { margin: 0; padding: 0; list-style: none; }
.glance-card li { display: flex; align-items: start; gap: var(--s5); padding: var(--s5) 0; border-bottom: 1px solid #ffffff55; }
.glance-card li:last-child { border-bottom: 0; }
.checkmark { display: grid; place-items: center; flex: none; width: 44px; height: 44px; color: var(--primary); background: var(--secondary); border-radius: var(--r-small); font-weight: 700; }
.choice-stack { display: grid; gap: var(--s4); }
.choice-row { border: 1px solid #ffffff65; background: #68281238; border-radius: var(--r-medium); padding: var(--s5); }
.choice-row summary { display: grid; grid-template-columns: 60px 1fr 30px; align-items: center; gap: var(--s4); cursor: pointer; list-style: none; font-family: var(--font-heading); font-size: 1.7rem; line-height: 1.2; }
.choice-row summary::-webkit-details-marker { display:none; }
.choice-row .outline-num { font-size: 2.4rem; }
.choice-row p { padding: var(--s5) 0 0 76px; margin-bottom: 0; }
.choice-row[open] .plus { transform: rotate(45deg); }
.plus { transition: transform .2s var(--ease); font-family: var(--font-body); }
.closing-band { padding: var(--s9) 0; background: linear-gradient(110deg,var(--primary) 0 47%,var(--background) 47% 100%); border-top: 1px solid #ffffff52; }
.closing-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--s7); }
.closing-inner > div { max-width: 720px; }
.closing-inner h2 { margin-bottom: var(--s4); }
.closing-inner p { margin: 0; }
.site-footer { padding: var(--s8) 0 var(--s6); background: var(--primary); border-top: 1px solid #ffffff4f; }
.footer-name { font-family: var(--font-heading); font-size: clamp(5rem,17vw,17rem); letter-spacing: -.04em; line-height: .85; overflow-wrap: anywhere; }
.footer-base { margin-top: var(--s7); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s5); padding-top: var(--s5); border-top: 1px solid #ffffff44; font-size: .9rem; }
.footer-identity { display: inline-flex; gap: var(--s3); align-items: center; }
.footer-identity img { object-fit: contain; border-radius: var(--r-small); }
/* Privacy page */
.privacy-page { background: radial-gradient(ellipse at top right,#f8e2e625,transparent 40%),var(--background); }
.legal-main { padding: var(--s8) var(--page-pad) var(--s10); }
.legal-container { max-width: 760px; margin: auto; }
.legal-heading { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: var(--s5); padding: var(--s5) 0 var(--s6) var(--s5); border-left: 5px solid var(--secondary); }
.legal-heading h1 { font-size: clamp(3.8rem,8vw,6.4rem); margin: 0; }
.legal-meta { font-size: .9rem; font-weight: 700; }
.policy-document { border-top: 2px solid #bfeaf8aa; padding-top: var(--s5); }
.legal-source-title { font-weight: 700; letter-spacing: .08em; margin-bottom: 0; }
.legal-source-date { margin-bottom: var(--s6); }
.legal-section { padding: var(--s5) var(--s6); background: #68281233; border: 1px solid #ffffff55; border-radius: var(--r-medium); box-shadow: var(--shadow-one); margin-bottom: var(--s5); }
.legal-section h2 { font-size: clamp(1.7rem,3.5vw,2.5rem); margin-bottom: var(--s4); }
.legal-section p,.legal-section li { overflow-wrap: anywhere; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul { padding-left: var(--s5); margin-top: 0; }
.legal-section li { padding-left: var(--s2); margin-bottom: var(--s2); }
.policy-preserved { white-space: pre-line; }
/* Utilities */
.reveal { opacity: 1; }
/* Responsive rules */
@media (min-width: 768px) { :root { --page-pad: 32px; } }
@media (min-width: 1280px) { :root { --page-pad: 48px; } }
@media (max-width: 1023px) { .story-grid { grid-template-columns: 1fr; } .story-aside { position: static; } .section-illustration { height: 140px; } }
@media (max-width: 767px) { .site-header { height:64px; } .hero-shell { grid-template-rows: 64px minmax(0,1fr); } .wordmark { font-size: 1.45rem; } .logo-chip img { width: 34px; height: 34px; } .nav-button { padding: 10px 12px; font-size: .83rem; gap: 8px; } .story-section { padding-block: var(--s8); } .story-aside h2 { margin-bottom: var(--s5); } .story-intro { margin-bottom: var(--s6); } .info-row { grid-template-columns: 56px minmax(0,1fr); padding: var(--s5); gap: var(--s4); } .info-row .outline-num { font-size: 2.7rem; } .glance-card { padding: var(--s5); } .closing-inner { align-items: start; flex-direction: column; } .legal-main { padding-top: var(--s6); } .legal-section { padding: var(--s5); } }
@media (max-width: 480px) { .hero-content { grid-template-columns: 22px minmax(0,1fr); padding-inline: 16px; } .hero-rail { height: 30svh; } .hero-kicker { letter-spacing: .08em; } .hero-sculpture { right: 5%; bottom: 8%; opacity: .33; } .hero-copy h1 { max-width: 11ch; } .choice-row summary { grid-template-columns: 42px 1fr 20px; } .choice-row p { padding-left: 0; } .footer-name { font-size: 20vw; } }
@media (max-height: 600px) { .hero-content { grid-template-columns: 24px 1fr; } .hero-sculpture { width: 36svh; height: 36svh; right: 4%; bottom: 4%; opacity: .45; } .hero-copy h1 { font-size: calc(var(--hs) * clamp(32px, min(7vw, 10svh), 100px)); } .hero-band { height: 8svh; } }
@media (max-height: 420px) { .hero-sculpture,.hero-band { display:none; } .hero-rail { height: 50%; } .hero-copy h1 { font-size: calc(var(--hs) * clamp(32px, 7svh, 70px)); } }
.hero--compact .hero-sculpture,.hero--compact .hero-band { display:none; }
/* Motion and reduced motion */
@keyframes ring-turn { from { transform: rotateX(65deg) rotate(0); } to { transform: rotateX(65deg) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto; animation: none; transition: none; } }
/* Print */
@media print { .site-header,.site-footer,.hero-shell,.closing-band { display:none; } body { color: #682812; background: #ffffff; } .legal-section { box-shadow: none; border: 1px solid #682812; break-inside: avoid; color: #682812; } }