/* Field notes hub (roaddefenderworks.com/field-notes/). Standalone, like the Work Zone Brief pages. Tokens from rdwrx-brand-rules. */
:root{--ink:#0D0D0F;--black:#000;--bone:#FFF;--bone-soft:#F6F5F2;--hazard:#E85416;--grey:#6B6B70;--hairline:#E4E4E6;--hairline-dark:#26262A;--signal:#12B76A;--data:#2457E5;
--display:'Archivo','Arial Black',Arial,sans-serif;--body:'Inter',Arial,sans-serif;--mono:'IBM Plex Mono',Consolas,monospace}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bone-soft);color:var(--ink);font:400 1rem/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--data)}a:hover{color:#1A3FB0}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

header.top{background:var(--black);border-bottom:1px solid var(--hairline-dark)}
header.top .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;min-height:72px;padding-top:12px;padding-bottom:12px}
header.top img{height:40px;display:block}
header.top nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px}
header.top nav a{color:#B9B9BE;text-decoration:none;font-weight:500;font-size:.9rem}
header.top nav a:hover,header.top nav a[aria-current]{color:var(--bone)}
header.top nav a[aria-current]{border-bottom:2px solid var(--hazard);padding-bottom:3px}
header.top nav a.cta{color:var(--black);background:var(--bone);padding:10px 16px;border-radius:4px;font-weight:600}

.hero{background:var(--black);color:var(--bone);padding:64px 0 44px}
.eyebrow{font:600 .8rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#B4B4B8;margin:0 0 16px}
.hero h1{font:800 clamp(2.2rem,5.5vw,3.4rem)/1.05 var(--display);font-stretch:112%;margin:0 0 18px;max-width:900px;letter-spacing:-.01em}
.hero .lede{font-size:1.2rem;line-height:1.5;color:#D6D6DA;max-width:680px;margin:0}
.hazard-slot{display:flex;gap:2.2%;width:100%;height:3px;margin:32px 0 26px}
.hazard-slot::before,.hazard-slot::after{content:"";flex:1}
.hazard-slot::before{background:linear-gradient(90deg,transparent,var(--hazard));clip-path:polygon(0 50%,100% 0,100% 100%)}
.hazard-slot::after{background:linear-gradient(90deg,var(--hazard),transparent);clip-path:polygon(0 0,100% 50%,0 100%)}
.chips-label{font-size:.9rem;font-weight:600;color:#B4B4B8;margin:0 0 12px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{font:500 .95rem/1 var(--body);padding:12px 18px;min-height:44px;border-radius:999px;border:1.5px solid #4A4A50;background:transparent;color:var(--bone);cursor:pointer}
.chip:hover{border-color:var(--bone)}
.chip[aria-pressed="true"]{background:var(--bone);color:var(--black);border-color:var(--bone);font-weight:600}

.statebar{background:var(--bone);border-bottom:1px solid var(--hairline)}
.statebar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px}
.statebar .lab{font:600 .8rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.statebar .cur{padding:18px 4px;font-weight:600;border-bottom:3px solid var(--ink)}
.statebar .soon{color:var(--grey);font-size:.95rem}

main.wrap{display:flex;flex-wrap:wrap;gap:40px;padding-top:48px;padding-bottom:72px;align-items:flex-start}
.col{flex:999 1 620px;min-width:0;display:flex;flex-direction:column;gap:40px}
aside.side{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:20px}
h2{font:800 2.1rem/1.15 var(--display);margin:0}
h3{font:700 1.4rem/1.25 var(--display);margin:0}
.meta{font:500 .85rem/1.4 var(--mono);color:var(--grey)}
.intro p{margin:8px 0 0;color:#4A4A50;font-size:1.05rem}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.card{background:var(--bone);border:1px solid var(--hairline);border-radius:6px;padding:22px}
.card .k{font:600 .75rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin:0 0 10px}
.card .v{font-weight:600;margin:0 0 4px}
.card .fig{font:500 .95rem/1.4 var(--mono);margin:0 0 10px}
.card p{margin:0 0 10px;font-size:.95rem;color:#3A3A40}
.card a{font-size:.9rem;font-weight:500}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--signal);margin-right:8px;vertical-align:middle}

.panel{background:var(--bone);border:1px solid var(--hairline);border-radius:6px;padding:28px}
.panel .k{font:600 .75rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--hazard);margin:0 0 12px}
.panel p{margin:0;font-size:1.2rem;line-height:1.5;font-weight:500}

.lettings-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px}
.freshness{display:flex;flex-wrap:wrap;gap:6px 26px;font-size:.9rem;color:#4A4A50;margin:10px 0 14px}
.freshness strong{font:500 .9rem/1 var(--mono);color:var(--ink)}
.tablebox{background:var(--bone);border:1px solid var(--hairline);border-radius:6px;overflow:hidden}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:640px}
th{text-align:left;font:600 .72rem/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--grey);padding:14px 16px;border-bottom:1px solid var(--hairline)}
td{padding:14px 16px;border-bottom:1px solid var(--hairline);vertical-align:top}
td.m{font:500 .88rem/1.4 var(--mono);white-space:nowrap}
tr[hidden]{display:none}

.gate{background:var(--bone-soft);border-top:1px solid var(--hairline);padding:26px;display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end}
.gate .pitch{flex:1 1 300px}
.gate .more{font:500 .85rem/1.4 var(--mono);color:var(--grey);margin:0 0 6px}
.gate .pitch h4{font:700 1.25rem/1.3 var(--display);margin:0 0 8px}
.gate .pitch p{margin:0;font-size:.92rem;color:#4A4A50}
form.sub{flex:1 1 280px;display:flex;flex-direction:column;gap:8px;margin:0}
form.sub label{font-size:.9rem;font-weight:500}
form.sub input,form.sub select{font:400 1rem/1.2 var(--body);padding:13px 14px;border:1px solid #C9C9CE;border-radius:4px;background:var(--bone);color:var(--ink);width:100%}
form.sub input:focus,form.sub select:focus{outline:2px solid var(--hazard);outline-offset:1px}
.btn{display:inline-block;border:0;cursor:pointer;background:var(--hazard);color:var(--bone);text-decoration:none;font:600 1rem/1 var(--body);padding:15px 20px;border-radius:4px;text-align:center}
.btn:hover{background:#cf4a12;color:var(--bone)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bone)}
.fine{font-size:.82rem;color:var(--grey);margin:2px 0 0}
.msg{font-weight:600;margin:4px 0 0}.msg.ok{color:#0F8A52}.msg.err{color:#B3400F}
.unlocked-note{padding:14px 16px;font-size:.92rem;color:#4A4A50}
.empty{padding:26px}
.empty h4{font:700 1.2rem/1.3 var(--display);margin:0 0 8px}
.empty p{margin:0 0 4px;color:#4A4A50}

.reads{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.read{background:var(--bone);border:1px solid var(--hairline);border-radius:6px;padding:20px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink);min-height:140px}
.read:hover{border-color:var(--ink);color:var(--ink)}
.read .t{font:600 .72rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.read .h{font:700 1.08rem/1.3 var(--display)}
.read .go{margin-top:auto;font-size:.9rem;font-weight:500;color:var(--data)}

.dark{background:var(--ink);color:var(--bone);border-radius:6px;padding:26px;display:flex;flex-direction:column;gap:12px}
.dark .k{font:600 .75rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#B4B4B8;margin:0}
.dark .h{font:700 1.3rem/1.3 var(--display);margin:0}
.dark p{margin:0;color:#D6D6DA}
.side .card .h{font-weight:600;font-size:1.02rem;line-height:1.4;margin:0 0 12px}

.states{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.state h3{font-size:1.3rem;margin:0 0 6px}
.state .status{font-size:.88rem;font-weight:600;margin:0 0 12px}
.state .status.live{color:#0F8A52}.state .status.next{color:var(--grey)}
.state p{margin:0 0 14px;color:#3A3A40;font-size:.95rem}

footer.foot{border-top:1px solid var(--hairline);background:var(--bone);padding:26px 0;color:var(--grey);font-size:.875rem}
footer.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
footer.foot a{color:var(--grey)}

@media (max-width:760px){
  .hero{padding:44px 0 32px}
  main.wrap{padding-top:32px;gap:28px}
  h2{font-size:1.7rem}
  .panel p{font-size:1.08rem}
}
@media (prefers-reduced-motion:no-preference){
  .hazard-slot.draw::before,.hazard-slot.draw::after{animation:slot-draw 900ms ease-out both;transform-origin:left}
  @keyframes slot-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}