/* Rally with Kori, rallywithkori.com. Billboard v2.2, as live on 2026-10-09.
   Moved out of the page so the CSP can be style-src 'self' with no hash
   (ACH-fireFly Q12 T7). From the next line down to the "contact sheet" banner
   is the live page's inline <style> byte for byte; its sha256 is the hash the
   live CSP pinned, 'sha256-VkB7dVChGw7BDJLqKp7/xQaL5OMxqk4s61HTuk23ZsY='.
   No @font-face: the page names Josefin Sans and JetBrains Mono but ships no
   font files, exactly as live (a known gap, recorded in README.md). */
:root{
  --court:#E63888; --court-dk:#C42875; --apron:#F291BE;
  --blush:#F7D9DE; --blush-2:#FBEDEA; --line:#FDF3E7;
  --optic:#DFF23F;
  --ink:#40102E; --ink-2:#5C1A40; --ink-3:#7A2A55;
  --ach-bg:#060B0A; --ach-txt:#9FAA98; --ach-bright:#F2F4F0;
  --cyan:#5DDFFF; --cyan-glow:rgba(93,223,255,0.3);
  --footer-h:48px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{height:100%;}
body{min-height:100%; display:flex; flex-direction:column;
  background:var(--blush-2); color:var(--ink); overflow-x:hidden;
  font-family:'Josefin Sans','Avenir Next','Segoe UI',system-ui,sans-serif;
  font-weight:300; -webkit-font-smoothing:antialiased;}
@keyframes ff-orb{0%,100%{opacity:1;transform:translateY(-0.12em) scale(1);}50%{opacity:0.5;transform:translateY(-0.12em) scale(0.5);}}
@keyframes dot-spin{from{transform:translateY(-0.03em) rotate(0deg);}to{transform:translateY(-0.03em) rotate(360deg);}}

.hero{position:relative; overflow:hidden;
  min-height:clamp(500px,86vh,840px);
  display:grid; grid-template-rows:1fr;
  align-items:end;
  padding:clamp(24px,5vmin,52px) clamp(22px,5vmin,64px);}
.hero #poster{position:absolute; inset:0; z-index:0;}
.hero #poster svg{display:block; width:100%; height:100%;}
.hero > .centre{position:relative; z-index:2;}

/* LARGE TEXT ONLY lives here. 3:1 is the bar for large text and --ink clears it
   on every light region of the artwork; small text cannot pass anywhere on the
   court, so none is placed on it. */
.centre{display:flex; flex-direction:column; justify-content:center;
  gap:clamp(12px,2.1vmin,22px); align-items:flex-start; text-align:left;
  max-width:min(92vw,1100px);}
.wm{font-weight:300; letter-spacing:0.5px; line-height:0.9; color:var(--ink);
  font-size:clamp(40px,7.6vw,96px); display:flex; align-items:baseline; flex-wrap:wrap;}
.wm .ball-dot{width:0.2em; height:0.2em; margin:0 0.07em; flex-shrink:0;
  transform:translateY(-0.03em); display:inline-block;
  animation:dot-spin 7s linear infinite;}
.wm .ball-dot:last-of-type{animation-duration:9.5s; animation-direction:reverse;}
.tagline{font-weight:400; font-size:clamp(19px,2.5vw,30px); letter-spacing:0.6px;
  color:var(--ink); text-wrap:balance; text-transform:lowercase;}
.tagline .sep{color:var(--ink-2); margin:0 0.35em;}

/* Everything small sits on solid blush, below the artwork. */
.below{padding:clamp(28px,5vmin,46px) clamp(22px,5vmin,64px) clamp(30px,5vmin,50px);
  background:var(--blush-2); display:flex; justify-content:space-between;
  gap:clamp(18px,4vmin,40px); flex-wrap:wrap; align-items:flex-start;}
.meta,.state,.spec{font-family:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
  letter-spacing:0.8px; font-size:clamp(10px,1.05vw,12px); line-height:1.9;}
.state{color:var(--ink-2); max-width:52ch; text-wrap:pretty;}
.spec{color:var(--ink-3); text-align:right; line-height:1.8;}
.spec b{color:var(--ink-2); font-weight:400;}
.crumb{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:14px clamp(22px,5vmin,64px); background:var(--blush);
  font-family:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
  font-size:clamp(10px,1.05vw,12px); letter-spacing:0.8px; color:var(--ink-2);}
.crumb .dim{color:var(--ink-3);}

.ach-strip{position:static; margin-top:auto; flex:0 0 auto; left:0; right:0; height:var(--footer-h);
  background:var(--ach-bg); display:flex; align-items:center;
  justify-content:space-between; gap:16px;
  padding:0 clamp(22px,5vmin,64px);
  font-family:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
  font-size:clamp(9px,1.0vw,11px); letter-spacing:0.8px; color:var(--ach-txt);}
.ach-wm{font-family:'Josefin Sans','Avenir Next',system-ui,sans-serif;
  font-weight:300; letter-spacing:0.5px; font-size:clamp(11px,1.2vw,14px); color:var(--ach-bright);}
.powered{display:flex; align-items:center; gap:0.45em; font-weight:300;
  font-family:'Josefin Sans','Avenir Next',system-ui,sans-serif;
  font-size:clamp(11px,1.2vw,14px); letter-spacing:0.4px; color:var(--ach-txt);}
.p-mark-ff{display:inline-flex; align-items:center; font-weight:300; letter-spacing:-0.02em;
  line-height:0.85; color:var(--ach-bright); font-size:1.35em;}
.p-mark-ff .ff-dot{display:inline-block; width:0.36em; height:0.36em; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 0.28em var(--cyan),0 0 0.7em var(--cyan-glow);
  animation:ff-orb 3.6s ease-in-out infinite; flex-shrink:0; margin-right:0.2em;
  transform:translateY(-0.12em);}
@media (max-width:560px){
  .below{flex-direction:column; align-items:flex-start; gap:22px;}
  .spec{text-align:left;}
}
@media (prefers-reduced-motion: reduce){
  .ff-dot{animation:none!important;} .wm .ball-dot{animation:none!important;}
}

.hero::after{content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 74% 68% at 50% 50%,
    rgba(251,237,234,0) 0%,
    rgba(251,237,234,0) 58%,
    rgba(251,237,234,0.42) 88%,
    rgba(251,237,234,0.66) 100%);}

a.ff-link{text-decoration:none;color:inherit;cursor:pointer;} a.ff-link:hover .p-mark-ff{color:var(--cyan);}
.ach-strip{justify-content:center;}
/* ── The contact sheet (ACH-fireFly Q12 T7) ─────────────────────────────────
   Everything above this banner is the live v2.2 block, unchanged. Same markup,
   fields and script as the other three sites (Q11 T86); her palette.
   Contrast, measured for every new pair (WCAG): --line on --ink 14.38:1,
   --ink-2 on --line 11.42:1, --ink-3 on --line 8.36:1, --court-dk on --line
   4.90:1, --ink on --blush-2 13.82:1; edges --ink-3 on --blush-2 8.04:1,
   --court-dk on --blush-2 4.71:1, focus ring --ink on --blush 11.97:1. */

/* Contact us sits on the solid blush crumb band, never on the court: small
   text cannot reach 4.5:1 anywhere on the artwork (the note at .centre).
   align-self plus the negative block margin keep the band as tall as it was. */
.cta{align-self:center; margin:-8px 0; flex:none;
  font-family:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
  font-size:clamp(10px,1.05vw,12px); letter-spacing:.14em; text-transform:uppercase;
  line-height:1; font-weight:400; color:var(--line); background:var(--ink);
  border:0; border-radius:3px; padding:8px 16px; cursor:pointer;
  transition:background .15s ease;}
.cta:hover{background:var(--ink-2);}
.cta:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}

.sheet{position:fixed; inset:0; z-index:10; display:none; place-items:center;
  padding:clamp(16px,4vmin,48px); background:rgba(64,16,46,.55);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);}
.sheet[data-open="1"]{display:grid;}
.panel{width:min(560px,100%); max-height:100%; overflow:auto;
  background:var(--line); border:1px solid var(--apron); border-radius:5px;
  box-shadow:0 30px 80px rgba(64,16,46,.35);}
.panel-rule{height:4px; background:var(--court);}

.panel-in{padding:clamp(22px,3.4vmin,34px);}
.panel-head{margin-bottom:6px;}
.panel-head h2{font-weight:400; font-size:clamp(20px,2.4vmin,26px); letter-spacing:.01em;
  line-height:1.15; color:var(--ink);}
/* Small text in the sheet is weight 400, not the other sites' 300: this page
   ships no font files, so 300 falls back to Avenir Next Ultra Light on a Mac
   (seen in the Q12 T7 preview), too thin a stroke at 14-16px. */
.panel-sub{font-weight:400; font-size:clamp(14px,1.7vmin,16px); color:var(--ink-2);
  margin-bottom:24px; line-height:1.55; max-width:46ch;}

.fld{display:flex; flex-direction:column; gap:7px; margin-bottom:16px;}
.fld label{font-family:'JetBrains Mono','SFMono-Regular',Consolas,monospace; font-size:10.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);}
.fld label .opt{letter-spacing:.06em;}
.fld input,.fld textarea{font-family:'Josefin Sans','Avenir Next','Segoe UI',system-ui,sans-serif;
  font-weight:400; font-size:16px; color:var(--ink); background:var(--blush-2);
  border:1px solid var(--ink-3); border-radius:3px; padding:12px 13px; width:100%;
  transition:border-color .15s ease, box-shadow .15s ease;}
.fld textarea{resize:vertical; min-height:104px; line-height:1.55;}
.fld input:focus,.fld textarea:focus{outline:0; border-color:var(--court-dk);
  box-shadow:0 0 0 1px var(--court-dk);}
.two{display:grid; grid-template-columns:1fr 1fr; gap:16px;}

.panel-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:8px;}
.send{font-family:'JetBrains Mono','SFMono-Regular',Consolas,monospace; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--line); background:var(--ink);
  border:0; border-radius:3px; padding:13px 26px; cursor:pointer; font-weight:400; line-height:1;}
.send:hover{background:var(--ink-2);}
.send[disabled]{opacity:.55; cursor:default;}
.send:focus-visible,.closex:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}
.closex{font-family:'JetBrains Mono','SFMono-Regular',Consolas,monospace; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); background:transparent;
  border:0; cursor:pointer; padding:8px;}
.closex:hover{color:var(--ink);}

/* Status line - says what actually happened, never a false success. */
.status{font-family:'JetBrains Mono','SFMono-Regular',Consolas,monospace; font-size:11px;
  letter-spacing:.05em; line-height:1.7; margin-top:16px; min-height:1.7em;}
.status.ok{color:var(--ink);}
.status.err{color:var(--court-dk);}
.status.pending{color:var(--ink-3);}

/* Q11 T86 - the spam trap. Off-screen rather than display:none, out of the tab
   order and hidden from screen readers (the markup says so); a person never
   fills it, and the door refuses a message that has it filled. */
.hp{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;}

/* What is kept, at the point of collection (ruling R1), under the send button. */
.notice{font-family:'JetBrains Mono','SFMono-Regular',Consolas,monospace; font-size:10.5px;
  letter-spacing:.04em; line-height:1.7; color:var(--ink-3); margin-top:14px; max-width:62ch;}
.notice a{color:inherit; text-decoration:underline;}

@media (max-width:520px){ .two{grid-template-columns:1fr; gap:0;} }
@media (prefers-reduced-motion: reduce){ .cta,.fld input,.fld textarea{transition:none;} }