/* ─────────────────────────────────────────────
   furryfox.top — type system
   measure 66ch · scale 1.25 · rhythm 1.6
   ───────────────────────────────────────────── */

:root{
  /* fluid base: 17 → 19px */
  --t-base:clamp(1.0625rem,1.0125rem + .22vw,1.1875rem);
  --t-xs:.75rem;
  --t-sm:.8125rem;
  --t-md:.9375rem;
  --t-lg:clamp(1.25rem,1.15rem + .5vw,1.4375rem);
  --t-xl:clamp(1.5rem,1.3rem + 1vw,1.875rem);
  --t-2xl:clamp(2rem,1.55rem + 2.25vw,3rem);

  --lh-body:1.6;
  --lh-tight:1.18;
  --lh-ui:1.4;

  --measure:66ch;
  --measure-wide:78ch;

  /* rhythm unit */
  --r:1.6rem;

  --serif:ui-serif,"Iowan Old Style",Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,serif;
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --ink:#e9e5dd;
  --ink-2:#a29c91;
  --ink-3:#6b665e;
  --paper:#121214;
  --paper-2:#191919;
  --rule:#272725;
  --rule-2:#353532;
  --acc:#c9855c;
  --acc-2:#8d5c3e;
  --sel:rgba(201,133,92,.22);
}

@media (prefers-color-scheme:light){
  :root{
    --ink:#22201c;--ink-2:#55514a;--ink-3:#858076;
    --paper:#fbfaf7;--paper-2:#f4f2ed;
    --rule:#e2ded5;--rule-2:#cfcabf;
    --acc:#9a5a2f;--acc-2:#b8784c;
    --sel:rgba(154,90,47,.16);
  }
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  hanging-punctuation:first last;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:var(--t-base);
  line-height:var(--lh-body);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

::selection{background:var(--sel)}

:focus-visible{
  outline:2px solid var(--acc);
  outline-offset:3px;
  border-radius:1px;
}

/* ── layout ───────────────────────────────── */

.page{
  max-width:var(--measure);
  margin-inline:auto;
  padding-inline:clamp(1.25rem,5vw,2rem);
}
.page--wide{max-width:var(--measure-wide)}

/* ── masthead ─────────────────────────────── */

.masthead{
  padding-block:calc(var(--r) * 1.6) var(--r);
  margin-bottom:calc(var(--r) * 1.75);
  border-bottom:1px solid var(--rule);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--r);
  flex-wrap:wrap;
}

.masthead a.sig{
  font-family:var(--serif);
  font-size:var(--t-lg);
  font-weight:400;
  letter-spacing:-.012em;
  color:var(--ink);
  text-decoration:none;
  border:0;
}
.masthead a.sig em{
  font-style:normal;
  color:var(--acc);
  margin-right:.3em;
}

.masthead nav{
  display:flex;
  gap:1.5rem;
  font-family:var(--sans);
  font-size:var(--t-sm);
  letter-spacing:.02em;
}
.masthead nav a{
  color:var(--ink-3);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:1px;
  transition:color .2s ease,border-color .2s ease;
}
.masthead nav a:hover{color:var(--ink-2)}
.masthead nav a[aria-current]{
  color:var(--ink);
  border-bottom-color:var(--acc);
}

/* ── headings ─────────────────────────────── */

h1,h2,h3,h4{
  font-weight:400;
  line-height:var(--lh-tight);
  text-wrap:balance;
  margin:0;
}

h1{
  font-size:var(--t-2xl);
  letter-spacing:-.022em;
  margin-bottom:calc(var(--r) * .55);
}

h2{
  font-size:var(--t-xl);
  letter-spacing:-.014em;
  margin-top:calc(var(--r) * 2);
  margin-bottom:calc(var(--r) * .5);
}

h3{
  font-family:var(--sans);
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-top:calc(var(--r) * 2);
  margin-bottom:calc(var(--r) * .6);
}

/* ── body copy ────────────────────────────── */

p{
  margin:0 0 var(--r);
  text-wrap:pretty;
  orphans:2;
  widows:2;
}

.standfirst{
  font-size:var(--t-lg);
  line-height:1.45;
  color:var(--ink-2);
  letter-spacing:-.006em;
  margin-bottom:calc(var(--r) * 1.2);
  text-wrap:balance;
}

.dek{
  font-family:var(--sans);
  font-size:var(--t-md);
  line-height:var(--lh-ui);
  color:var(--ink-2);
}

a{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:var(--acc-2);
  text-decoration-thickness:1px;
  text-underline-offset:.16em;
  transition:text-decoration-color .2s ease,color .2s ease;
}
a:hover{
  color:var(--acc);
  text-decoration-color:var(--acc);
}

strong{font-weight:600}
em{font-style:italic}

/* first paragraph after h2 — no indent, slight lift */
h2 + p{margin-top:0}

blockquote{
  margin:calc(var(--r) * 1.2) 0;
  padding-left:1.4rem;
  border-left:2px solid var(--rule-2);
  font-style:italic;
  color:var(--ink-2);
  text-wrap:pretty;
}
blockquote p:last-child{margin-bottom:0}

ul,ol{
  margin:0 0 var(--r);
  padding-left:1.35rem;
}
li{margin-bottom:.4rem;text-wrap:pretty}
li::marker{color:var(--ink-3)}

hr{
  border:0;
  border-top:1px solid var(--rule);
  margin:calc(var(--r) * 2) 0;
}

/* ── meta line ────────────────────────────── */

.meta{
  font-family:var(--mono);
  font-size:var(--t-xs);
  letter-spacing:.04em;
  color:var(--ink-3);
  display:flex;
  gap:1.2rem;
  flex-wrap:wrap;
  padding-bottom:var(--r);
  margin-bottom:calc(var(--r) * 1.4);
  border-bottom:1px solid var(--rule);
}

/* ── index of writing ─────────────────────── */

.index{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--rule);
}
.index li{
  margin:0;
  padding-block:calc(var(--r) * .85);
  border-bottom:1px solid var(--rule);
}
.index h4{
  font-size:var(--t-base);
  line-height:1.3;
  margin-bottom:.25rem;
}
.index h4 a{text-decoration:none}
.index h4 a:hover{text-decoration:underline;text-decoration-color:var(--acc)}
.index time{
  display:block;
  font-family:var(--mono);
  font-size:var(--t-xs);
  letter-spacing:.04em;
  color:var(--ink-3);
  margin-bottom:.4rem;
}
.index p{
  margin:0;
  font-family:var(--sans);
  font-size:var(--t-md);
  line-height:var(--lh-ui);
  color:var(--ink-2);
}
.index .draft h4{color:var(--ink-3)}

/* ── rates ────────────────────────────────── */

.rates{
  width:100%;
  border-collapse:collapse;
  margin-bottom:var(--r);
  font-family:var(--sans);
  font-size:var(--t-md);
}
.rates caption{
  text-align:left;
  font-family:var(--sans);
  font-size:var(--t-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  padding-bottom:.9rem;
}
.rates th{
  text-align:left;
  font-weight:600;
  font-size:var(--t-xs);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-3);
  padding:0 1rem .7rem 0;
  border-bottom:1px solid var(--rule-2);
}
.rates th:last-child,.rates td:last-child{
  text-align:right;
  padding-right:0;
}
.rates td{
  padding:.85rem 1rem .85rem 0;
  border-bottom:1px solid var(--rule);
  vertical-align:baseline;
}
.rates td:first-child{color:var(--ink);font-weight:500}
.rates td:last-child{
  font-family:var(--mono);
  font-size:var(--t-sm);
  color:var(--acc);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* ── status ───────────────────────────────── */

.status{
  font-family:var(--sans);
  font-size:var(--t-md);
  color:var(--ink-2);
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:var(--r);
}
.status::before{
  content:"";
  width:7px;height:7px;
  border-radius:50%;
  background:#a8584a;
  box-shadow:0 0 0 3px rgba(168,88,74,.15);
  flex:0 0 auto;
}
.status.open::before{
  background:#6b9a5b;
  box-shadow:0 0 0 3px rgba(107,154,91,.15);
}
.status strong{color:var(--ink)}

/* ── numbered process ─────────────────────── */

.process{
  list-style:none;
  counter-reset:step;
  margin:0 0 var(--r);
  padding:0;
}
.process li{
  counter-increment:step;
  position:relative;
  padding:calc(var(--r) * .7) 0 calc(var(--r) * .7) 2.6rem;
  border-bottom:1px solid var(--rule);
  margin:0;
}
.process li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;
  left:0;
  top:calc(var(--r) * .7 + .2em);
  font-family:var(--mono);
  font-size:var(--t-xs);
  letter-spacing:.05em;
  color:var(--acc-2);
}
.process strong{display:block;margin-bottom:.15rem}
.process span{
  font-family:var(--sans);
  font-size:var(--t-md);
  line-height:var(--lh-ui);
  color:var(--ink-2);
}

/* ── two lists ────────────────────────────── */

.scope{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:calc(var(--r) * 1.2);
  margin-bottom:var(--r);
}
.scope ul{list-style:none;padding:0;margin:0}
.scope li{
  font-family:var(--sans);
  font-size:var(--t-md);
  line-height:var(--lh-ui);
  color:var(--ink-2);
  padding:.45rem 0 .45rem 1.3rem;
  border-bottom:1px solid var(--rule);
  position:relative;
  margin:0;
}
.scope li::before{position:absolute;left:0;font-family:var(--mono);font-size:.8em}
.scope .yes li::before{content:"+";color:#6b9a5b}
.scope .no li::before{content:"\2212";color:#a8584a}

/* ── colophon defs ────────────────────────── */

.defs{margin:0 0 var(--r)}
.defs dt{
  font-family:var(--sans);
  font-size:var(--t-xs);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-top:calc(var(--r) * .9);
}
.defs dd{
  margin:.3rem 0 0;
  font-size:var(--t-md);
  font-family:var(--sans);
  color:var(--ink-2);
  line-height:var(--lh-ui);
}
.defs code{
  font-family:var(--mono);
  font-size:.92em;
  color:var(--ink);
  background:var(--paper-2);
  padding:.1em .35em;
  border-radius:2px;
}

/* ── footer ───────────────────────────────── */

.colophon{
  margin-top:calc(var(--r) * 3);
  padding-block:calc(var(--r) * 1.2) calc(var(--r) * 2.5);
  border-top:1px solid var(--rule);
  font-family:var(--sans);
  font-size:var(--t-sm);
  color:var(--ink-3);
  display:flex;
  justify-content:space-between;
  gap:var(--r);
  flex-wrap:wrap;
}
.colophon p{margin:0}
.colophon nav{display:flex;gap:1.3rem}
.colophon a{text-decoration:none;color:var(--ink-3)}
.colophon a:hover{color:var(--ink-2);text-decoration:underline}

.back{
  font-family:var(--sans);
  font-size:var(--t-md);
  margin-top:calc(var(--r) * 2);
}

/* ── print ────────────────────────────────── */

@media print{
  :root{--ink:#000;--ink-2:#333;--ink-3:#666;--paper:#fff;--rule:#ccc}
  body{font-size:11pt;line-height:1.45}
  .masthead nav,.colophon nav,.back{display:none}
  .page{max-width:none}
  a{text-decoration:none;color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#666}
  h2{break-after:avoid}
  p,li,blockquote{break-inside:avoid}
}