/* Frank — frankinbox.com
   One stylesheet, no dependencies, no webfonts. */

:root{
  --paper:#FBFAF8;
  --panel:#F2F1ED;
  --panel-2:#E8E7E2;
  --ink:#16191C;
  --ink-soft:#4C555C;
  --ink-faint:#79838A;
  --rule:#DEDDD7;
  --rule-strong:#C4C3BC;
  --accent:#0F5E56;
  --accent-soft:#E2EFEC;
  --warn:#8A5B12;
  --measure:66ch;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0F1315;
    --panel:#171C1F;
    --panel-2:#1F2528;
    --ink:#E2E7E6;
    --ink-soft:#A3AFB1;
    --ink-faint:#78868A;
    --rule:#283033;
    --rule-strong:#3A4548;
    --accent:#4FC3B4;
    --accent-soft:#152F2C;
    --warn:#D5A44B;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
.site-head{
  border-bottom:1px solid var(--rule);
  background:var(--paper);
  position:sticky;top:0;z-index:10;
}
.site-head .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-top:16px;padding-bottom:16px;
}
.mark{
  font-size:20px;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;
}
.mark span{color:var(--accent)}
.site-nav{display:flex;gap:22px;font-size:15px}
.site-nav a{color:var(--ink-soft);text-decoration:none}
.site-nav a:hover{color:var(--accent)}

/* ---------- hero ---------- */
.hero{padding:76px 0 56px;border-bottom:1px solid var(--rule)}
.eyebrow{
  font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);margin:0 0 18px;
}
h1{
  font-size:clamp(32px,5.4vw,52px);
  font-weight:700;letter-spacing:-.028em;line-height:1.08;
  margin:0 0 20px;max-width:20ch;text-wrap:balance;
}
.standfirst{font-size:20px;color:var(--ink-soft);max-width:var(--measure);margin:0 0 26px}

/* ---------- sections ---------- */
main{padding-bottom:80px}
section{padding:52px 0;border-bottom:1px solid var(--rule)}
section:last-child{border-bottom:none}
h2{
  font-size:clamp(22px,3vw,28px);font-weight:700;letter-spacing:-.02em;
  margin:0 0 8px;text-wrap:balance;
}
h3{font-size:17.5px;font-weight:650;margin:30px 0 8px;letter-spacing:-.008em}
p{max-width:var(--measure);margin:0 0 16px}
ul,ol{max-width:var(--measure);padding-left:22px;margin:0 0 18px}
li{margin-bottom:8px}
strong{font-weight:650}
.lede{font-size:18.5px;color:var(--ink-soft);max-width:var(--measure);margin-bottom:26px}

/* ---------- disposition cards ---------- */
.cards{display:grid;gap:14px;margin:0 0 8px}
@media (min-width:660px){.cards{grid-template-columns:1fr 1fr}}
.card{border:1px solid var(--rule);background:var(--panel);padding:18px 20px}
.card h4{
  margin:0 0 6px;font-size:13px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
}
.card p{margin:0;font-size:15.5px;color:var(--ink-soft);max-width:none}

/* ---------- callout ---------- */
.note{
  border-left:3px solid var(--accent);
  background:var(--panel);
  padding:16px 20px;margin:0 0 22px;max-width:var(--measure);
}
.note.warn{border-left-color:var(--warn)}
.note p{margin:0;font-size:16px}
.note p+p{margin-top:10px}
.note-label{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);margin-bottom:6px;
}
.note.warn .note-label{color:var(--warn)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--rule);background:var(--panel);margin:0 0 22px}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:480px}
th{
  text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:700;padding:11px 15px;
  border-bottom:1px solid var(--rule-strong);white-space:nowrap;
}
td{padding:12px 15px;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.55}
tr:last-child td{border-bottom:none}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.87em;background:var(--panel-2);padding:1.5px 5px;border-radius:3px;
  overflow-wrap:anywhere;
}

/* ---------- fill-me marker (remove before launch) ---------- */
.fill{
  background:#FFE9A8;color:#5A4300;padding:1px 6px;border-radius:3px;
  font-weight:650;overflow-wrap:anywhere;
}
@media (prefers-color-scheme: dark){.fill{background:#4A3B10;color:#F4DE9C}}

/* ---------- policy page layout ---------- */
.policy{padding-top:48px}
.policy h2{margin-top:44px;padding-top:22px;border-top:1px solid var(--rule);font-size:23px}
.policy h2:first-of-type{margin-top:20px}
.updated{font-size:14px;color:var(--ink-faint);margin-bottom:30px}

/* ---------- contact / cta ---------- */
.cta{background:var(--accent-soft);border:1px solid var(--rule);padding:26px 24px;max-width:var(--measure)}
.cta p{margin:0 0 10px}
.cta p:last-child{margin:0}
.big-link{font-size:19px;font-weight:650;overflow-wrap:anywhere}

/* ---------- footer ---------- */
.site-foot{
  border-top:1px solid var(--rule);background:var(--panel);
  padding:34px 0;font-size:14.5px;color:var(--ink-faint);
}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between}
.site-foot a{color:var(--ink-soft);text-decoration:none;margin-right:20px}
.site-foot a:hover{color:var(--accent)}
.site-foot p{margin:0;max-width:none}