/* Angels Perez · shared styles for the small pages (home, thank-you, privacy).
   The same tokens, buttons, header, light and footer as the Decoding Session page. */
:root{
  --ivory:#f6ede1;--card:#f6eee1;--ink:#221c18;--plum:#612b3b;--plum-press:#4c2030;--terracotta:#a6553c;--clay:#bc7b6c;
  --muted:#5c4f45;--hair:rgba(97,43,59,.2);--g1:#f9f2e8;--g2:#efd6c8;--g3:#f1dccd;
  --display:"Bethany",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(20px,5vw,80px);--max:1240px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:var(--ivory);color:var(--ink);font:400 18px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
h1,h2,h3{font-weight:400;text-wrap:balance}
p{text-wrap:pretty}
strong{font-weight:500}
a{color:inherit}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
main{flex:1}

/* the warm light behind the page: slow ambient drift, tones that shift as you scroll, plaster mottle and grain */
.sky{position:fixed;inset:0;z-index:-3;background:var(--g1);overflow:hidden;transition:background-color .4s}
.sky::before,.sky::after{content:"";position:absolute;inset:-25%;pointer-events:none}
.sky::before{background:radial-gradient(42% 38% at 78% 18%,var(--g2) 0%,transparent 70%),radial-gradient(36% 34% at 18% 72%,var(--g3) 0%,transparent 70%);animation:drift-a 28s ease-in-out infinite alternate}
.sky::after{background:radial-gradient(30% 30% at 60% 80%,var(--g2) 0%,transparent 70%),radial-gradient(28% 26% at 30% 22%,var(--g3) 0%,transparent 72%);opacity:.75;animation:drift-b 36s ease-in-out infinite alternate}
@keyframes drift-a{0%{transform:translate3d(-4%,-3%,0) scale(1)}50%{transform:translate3d(5%,4%,0) scale(1.08)}100%{transform:translate3d(-2%,6%,0) scale(1.03)}}
@keyframes drift-b{0%{transform:translate3d(5%,4%,0) scale(1.05)}50%{transform:translate3d(-6%,-2%,0) scale(1)}100%{transform:translate3d(2%,-5%,0) scale(1.1)}}
.plaster{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.6;mix-blend-mode:multiply;background-size:900px 900px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .52 0 0 0 0 .45 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E")}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.34;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .32 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){.sky::before,.sky::after{animation:none}}

.label{font:500 12px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--terracotta)}
.d1{font:400 clamp(48px,6.4vw,92px)/.95 var(--display);letter-spacing:-.025em;color:var(--plum)}
.d2{font:400 clamp(34px,4vw,58px)/1.04 var(--display);letter-spacing:-.015em;color:var(--plum)}
.d3{font:400 clamp(24px,2.3vw,32px)/1.22 var(--display);color:var(--plum)}
.fine{font-size:14px;line-height:1.55;color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 30px;border:0;border-radius:999px;background:var(--plum);color:var(--ivory);font:500 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background-color .2s}
.btn:hover{background:var(--plum-press)}
.btn:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.arrow-link{font:500 13px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--plum);text-decoration:underline;text-decoration-color:var(--terracotta);text-decoration-thickness:1.5px;text-underline-offset:7px}
.arrow-link::after{content:" →";display:inline-block;margin-left:.3em}

.head{position:sticky;top:0;z-index:10;background:rgba(249,242,232,.96);border-bottom:1px solid var(--hair)}
.head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.brand{text-decoration:none;font:400 28px/1 var(--display);color:var(--plum);white-space:nowrap}

.foot{padding-block:clamp(28px,3vw,40px);text-align:center;border-top:1px solid var(--hair)}
.foot .name{display:block;font:400 clamp(24px,2.2vw,30px)/1 var(--display);color:var(--plum)}
.foot p{max-width:60em;margin:12px auto 0;font-size:14px;color:var(--muted)}
.foot p+p{margin-top:6px}

.flag{border:1px dashed rgba(166,85,60,.7);background:rgba(166,85,60,.07);padding:14px 18px;font-size:15px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
@media (max-width:700px){body{font-size:17.5px}.head .wrap{height:62px}.brand{font-size:22px}}

.foot button.linklike{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
@media (prefers-reduced-motion:reduce){.cookie{transition:none}}

.foot p.disclaimer{font-size:12px;color:var(--muted);opacity:.85;margin-top:10px}