/* Brown Broom — policy pages: a typed document on studio paper */
:root { --paper: #ece6da; --bone: #e4ded2; --ink: #221f1b; --ink-2: #4a453e; --rust: #8a5636; --brown: #6a4e3b;
  --sans: 'Anybody', 'Helvetica Neue', Arial, sans-serif; --serif: 'Gloock', 'Didot', serif; --mono: 'Martian Mono', ui-monospace, Menlo, monospace; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bone); color: var(--ink); font-family: var(--sans); font-variation-settings: 'wdth' 94; font-size: 17px; line-height: 1.6; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--brown); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.mono { font-family: var(--mono); font-variation-settings: 'wdth' 87.5; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.skip { position: fixed; left: 12px; top: -60px; background: var(--ink); color: var(--paper); padding: 10px 14px; font-family: var(--mono); font-size: 12px; z-index: 10; }
.skip:focus { top: 12px; }
.lg-hd { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px clamp(16px, 4vw, 48px); border-bottom: 1px solid rgba(34,31,27,.15); }
.lg-mark { font-weight: 800; font-variation-settings: 'wdth' 150; letter-spacing: .12em; font-size: 13px; text-decoration: none; }
.lg-back { text-decoration: none; padding: 10px 0; }
.lg-doc { max-width: 760px; margin: clamp(24px, 6vw, 64px) auto; padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 64px);
  background: var(--paper); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 24px 50px -30px rgba(0,0,0,.35); }
.lg-k { margin: 0 0 14px; color: var(--ink-2); }
h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 6vw, 64px); line-height: .98; letter-spacing: -.02em; margin: 0 0 18px; }
.lg-lede { font-size: 19px; color: var(--ink-2); margin: 0 0 8px; }
.lg-date { color: var(--ink-2); margin: 0 0 28px; padding-bottom: 22px; border-bottom: 1px solid rgba(34,31,27,.18); }
section { margin: 0 0 26px; }
h2 { font-family: var(--serif); font-weight: 400; font-size: 25px; line-height: 1.1; margin: 0 0 10px; }
p, li { max-width: 64ch; }
ul { padding-left: 1.2em; } li { margin-bottom: 8px; }
mark.todo { background: #f2d300; color: #111; padding: 1px 5px; font-family: var(--mono); font-size: 12px; letter-spacing: .02em; outline: 2px dashed #b5452a; }
.lg-ft { display: grid; gap: 12px; padding: 24px clamp(16px, 4vw, 48px) 40px; color: var(--ink-2); border-top: 1px solid rgba(34,31,27,.15); }
.lg-ft nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.lg-ft a { text-decoration: none; padding: 6px 0; }
.lg-ft a[aria-current] { text-decoration: underline; color: var(--ink); }
.lg-ft p { margin: 0; text-transform: none; letter-spacing: .02em; }
/* size guide */
.units { display: inline-flex; border: 1px solid rgba(34,31,27,.4); margin-bottom: 18px; }
.units button { font: inherit; background: none; border: 0; padding: 10px 16px; min-height: 44px; cursor: pointer; color: inherit; }
.units button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.howto li { margin-bottom: 4px; }
.tbl { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: 13px; }
caption { text-align: left; color: var(--ink-2); padding-bottom: 8px; }
th, td { padding: 9px 10px; text-align: right; border-bottom: 1px solid rgba(34,31,27,.14); white-space: nowrap; }
th:first-child { text-align: left; font-weight: 500; }
thead th { border-bottom: 1px solid rgba(34,31,27,.4); font-weight: 500; }
.cm, .u-cm { display: none; }
:root[data-unit="cm"] .cm, :root[data-unit="cm"] .u-cm { display: inline; }
:root[data-unit="cm"] .in, :root[data-unit="cm"] .u-in { display: none; }
/* 404 */
.nf { text-align: center; }
.nf .big { font-family: var(--serif); font-size: clamp(90px, 22vw, 200px); line-height: .85; margin: 0 0 10px; color: rgba(34,31,27,.18); }
.nf .btn { display: inline-block; margin-top: 10px; padding: 14px 22px; background: var(--ink); color: var(--paper); text-decoration: none; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 600px) { body { font-size: 16px; } .lg-doc { margin: 0; box-shadow: none; } }