:root{--paper:#f2efe7;--ink:#18211f;--muted:#52605c;--line:#a8afa9;--blue:#4f6d7a;--green:#4d7c5e;--amber:#9b6a29;--red:#8e3d32}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;scroll-behavior:smooth}
body{margin:0;overflow-x:hidden}
body:before{content:"FUNCTION MEDIA LLC  /  SAFEPLATE™ FIELD NOTE";display:block;padding:26px max(6vw,28px);border-bottom:1px solid var(--line);font-size:13px;font-weight:700;letter-spacing:.18em;color:var(--green);position:relative;z-index:3;background:rgba(242,239,231,.94);backdrop-filter:blur(8px);animation:headerSignal 6s ease-in-out infinite}
main{max-width:1220px;margin:auto;padding:80px max(6vw,28px) 110px;position:relative}
main:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(90deg,transparent 0 49.7%,rgba(77,124,94,.11) 50%,transparent 50.3%),linear-gradient(0deg,transparent 0 49.7%,rgba(79,109,122,.075) 50%,transparent 50.3%);background-size:96px 96px;animation:gridDrift 12s linear infinite}
main:after{content:"FORECAST  →  CONTEXT  →  EVIDENCE  →  REVIEW  →  AUTHORIZED ACTION";display:block;position:fixed;left:0;right:0;bottom:0;z-index:6;padding:10px 16px;background:rgba(24,33,31,.96);color:#e9eee9;font-size:10px;font-weight:700;letter-spacing:.18em;text-align:center;white-space:nowrap;overflow:hidden;box-shadow:0 -1px 0 rgba(77,124,94,.5),0 -8px 26px rgba(24,33,31,.08);animation:signalPulse 3s ease-in-out infinite}
h1{max-width:920px;margin:0 0 26px;font-family:Georgia,serif;font-size:clamp(58px,9vw,132px);font-weight:400;line-height:.9;letter-spacing:-.055em;position:relative;animation:titleResolve 1.05s cubic-bezier(.2,.8,.2,1) both}
h1:before{content:"LIVE SIGNAL / 01";position:absolute;right:0;top:-28px;color:var(--green);font:700 10px/1 Arial,sans-serif;letter-spacing:.22em;animation:blinkSignal 1.6s steps(2,end) infinite}
h1:after{content:"";position:absolute;left:0;bottom:-18px;width:min(420px,76vw);height:3px;background:linear-gradient(90deg,var(--green),var(--blue),transparent);transform-origin:left;animation:scanLine 2.2s ease-in-out infinite;box-shadow:0 0 14px rgba(77,124,94,.28)}
h1+ h2{max-width:800px;margin:0 0 54px;color:var(--muted);font:400 clamp(22px,3vw,34px)/1.35 Georgia,serif;animation:fadeRise .9s .18s ease both}
h2{max-width:760px;margin:86px 0 30px;font:400 clamp(38px,5vw,70px)/1 Georgia,serif;letter-spacing:-.035em;position:relative}
h2:before{content:"SIGNAL";display:block;margin-bottom:12px;color:var(--green);font:700 10px/1 Arial,sans-serif;letter-spacing:.2em;opacity:.82;animation:signalTag 2.8s ease-in-out infinite}
h2:after{content:"";position:absolute;left:-22px;top:48px;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(77,124,94,.38);animation:nodePing 2.2s ease-out infinite}
h3{margin:55px 0 10px;font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);position:relative}
h3:after{content:"";display:inline-block;width:34px;height:1px;margin-left:12px;vertical-align:middle;background:var(--green);transform-origin:left;animation:microScan 2.4s ease-in-out infinite}
p,li{font-size:20px;line-height:1.72}
p{max-width:780px}
ul{max-width:780px;padding-left:24px}
figure{position:relative;overflow:hidden;margin:64px 0;border:1px solid rgba(77,124,94,.32);background:#e9e7de;box-shadow:0 22px 70px rgba(24,33,31,.08);animation:frameBreathe 5s ease-in-out infinite}
figure:before{content:"LIVE CONTEXT / HUMAN REVIEW";position:absolute;top:16px;left:18px;z-index:3;padding:8px 10px;background:rgba(24,33,31,.9);color:#f2efe7;font-size:10px;font-weight:700;letter-spacing:.16em;animation:labelPulse 2.4s ease-in-out infinite}
figure:after{content:"";position:absolute;left:0;right:0;top:-18%;height:18%;z-index:2;background:linear-gradient(180deg,transparent,rgba(77,124,94,.12),rgba(77,124,94,.58),rgba(79,109,122,.22),transparent);mix-blend-mode:multiply;animation:figureScan 3.8s cubic-bezier(.4,0,.2,1) infinite;box-shadow:0 10px 24px rgba(77,124,94,.12)}
img{display:block;width:100%;height:auto;margin:0;border:0;transition:transform 1.1s cubic-bezier(.2,.8,.2,1),filter 1s ease;animation:imageFloat 8s ease-in-out infinite}
figure:hover img{transform:scale(1.025);filter:contrast(1.04)}
figcaption{padding:14px 18px 16px;border-top:1px solid rgba(77,124,94,.18);font-size:12px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:rgba(242,239,231,.92)}
p:has(img){max-width:none;margin:0}
hr{border:0;border-top:1px solid var(--line);margin:90px 0 50px}
strong{color:var(--ink)}
a{color:var(--green);text-decoration-thickness:1px;text-underline-offset:4px}
body>main>p:first-of-type{font:400 28px/1.55 Georgia,serif;max-width:720px;animation:fadeRise .9s .32s ease both}
body>main>h2:nth-of-type(n+2){border-top:1px solid var(--line);padding-top:36px}
body:after{content:"© 2026 Function Media LLC. All rights reserved. SAFEPLATE™ is a trademark of Function Media LLC.";display:block;padding:34px max(6vw,28px) 56px;background:var(--ink);color:var(--paper);font-size:13px;letter-spacing:.08em}
@keyframes titleResolve{0%{opacity:0;transform:translateY(28px);filter:blur(10px)}55%{filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes fadeRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes scanLine{0%,100%{transform:scaleX(.18);opacity:.35}48%{transform:scaleX(1);opacity:1}72%{transform:scaleX(.62);opacity:.72}}
@keyframes figureScan{0%{transform:translateY(-10%);opacity:0}10%{opacity:1}60%{opacity:.72}100%{transform:translateY(700%);opacity:0}}
@keyframes gridDrift{from{background-position:0 0,0 0}to{background-position:96px 96px,-96px 96px}}
@keyframes signalPulse{0%,100%{letter-spacing:.18em;color:#e9eee9}50%{letter-spacing:.22em;color:#cfe5d4}}
@keyframes nodePing{0%{box-shadow:0 0 0 0 rgba(77,124,94,.48);transform:scale(.9)}65%{box-shadow:0 0 0 13px rgba(77,124,94,0);transform:scale(1.12)}100%{box-shadow:0 0 0 0 rgba(77,124,94,0);transform:scale(.9)}}
@keyframes microScan{0%,100%{transform:scaleX(.25);opacity:.35}50%{transform:scaleX(1);opacity:1}}
@keyframes labelPulse{0%,100%{background:rgba(24,33,31,.9)}50%{background:rgba(77,124,94,.94)}}
@keyframes imageFloat{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
@keyframes frameBreathe{0%,100%{box-shadow:0 22px 70px rgba(24,33,31,.08)}50%{box-shadow:0 25px 80px rgba(77,124,94,.16)}}
@keyframes signalTag{0%,100%{opacity:.55;letter-spacing:.2em}50%{opacity:1;letter-spacing:.25em}}
@keyframes blinkSignal{0%,46%{opacity:1}47%,100%{opacity:.25}}
@keyframes headerSignal{0%,100%{border-bottom-color:var(--line)}50%{border-bottom-color:rgba(77,124,94,.75)}}
@media(min-width:980px){main>h3,main>h3+p,main>h3+p+p{margin-left:210px}main>ul{margin-left:210px}}
@media(max-width:640px){main{padding-top:52px}p,li{font-size:18px}figure{margin:42px 0}main:after{font-size:8px;letter-spacing:.12em;text-align:left;overflow:hidden;text-overflow:clip}h2:after{left:-12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}