/* TyphoonGuard legal documents — shared readable-document styling.
   Dark brand header + PAGASA signal rule (identity carried from the splash) over a
   light, high-contrast reading column. Token-only colors (docs/branding/brand-skill.md). */
:root{
  --navy:#0F172A; --red:#DC2626; --sun:#FACC15; --sky:#3B82F6;
  --ink:#0F172A; --ink-dim:#475569; --line:#E2E8F0; --bg:#F8FAFC; --card:#FFFFFF;
  --s1:#FFFFB2; --s2:#FECC5C; --s3:#FD8D3C; --s4:#F03B20; --s5:#7F1D1D;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code","Roboto Mono",Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.65}
.wrap{max-width:820px;margin:0 auto;padding:0 clamp(20px,5vw,40px)}

/* dark brand header */
.topbar{background:var(--navy)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding:18px clamp(20px,5vw,40px)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#F1F5F9}
.brand img{width:34px;height:34px;border-radius:9px}
.brand b{font-size:1.06rem;font-weight:800;letter-spacing:-.02em}
.brand b span{color:#EF4444}
.topbar .back{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:#94A3B8;text-decoration:none;transition:color .18s}
.topbar .back:hover{color:#F1F5F9}
.rule{height:4px;background:linear-gradient(90deg,var(--s1) 0 20%,var(--s2) 20% 40%,var(--s3) 40% 60%,var(--s4) 60% 80%,var(--s5) 80% 100%)}

/* document */
.doc{padding:clamp(34px,6vw,64px) 0 24px}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.doc h1{font-size:clamp(2rem,4.6vw,2.9rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-bottom:12px}
.effective{font-family:var(--mono);font-size:.8rem;color:var(--ink-dim);margin-bottom:8px}
.intro{font-size:1.05rem;color:#334155;margin:18px 0 6px;max-width:68ch}
.doc h2{font-size:1.16rem;font-weight:800;letter-spacing:-.01em;color:var(--navy);
  margin:34px 0 10px;padding-left:14px;border-left:3px solid var(--red)}
.doc p{margin:10px 0;max-width:70ch}
.doc ul{margin:10px 0 10px 2px;padding-left:22px;max-width:70ch}
.doc li{margin:7px 0}
.doc strong{font-weight:700}
.callout{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--sun);
  border-radius:10px;padding:16px 18px;margin:18px 0;font-size:.98rem}
.callout.warn{border-left-color:var(--red)}
.attribution{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);
  font-size:.86rem;color:var(--ink-dim);max-width:74ch}
a{color:#B91C1C}
a:hover{color:var(--red)}

/* footer */
footer{border-top:1px solid var(--line);margin-top:40px;padding:26px 0 48px}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.foot .links a{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-dim);text-decoration:none;margin-right:20px}
.foot .links a:hover{color:var(--navy)}
.foot .meta{font-family:var(--mono);font-size:.7rem;color:#94A3B8}
:focus-visible{outline:2px solid var(--sky);outline-offset:2px;border-radius:4px}
@media (max-width:560px){ .foot{flex-direction:column;align-items:flex-start} }