/* printartworkspecs.com — the spec sheet.

   Measured off the live CSS of papersizes.io, pixelmeasures.com, moo.com,
   vistaprint, 4over, lulu, blurb, printninja and prepressure. The convention
   in this category is unusually strict:

     - white or near-white ground
     - a HUE-CAST near-black for ink, never #000 (4over's is #231f20, which is
       literally the press rich-black swatch)
     - hairlines around #d9e2ec
     - one grotesque sans, two weights; a mono face for numerals
     - content column 1024-1224px for tools, ~768px for pure reference
       (papersizes.io caps everything at 768 and lets the dimension be the hero)

   THE DIAGRAM PALETTE IS HELD COMPLETELY SEPARATE FROM BRAND COLOUR, and that
   separation is the convention's sharpest rule. Tinting the bleed zone to a
   brand colour is one of the clearest tells of a site that does not print.

   So this site is ACHROMATIC — ink, greys, black buttons, as Vistaprint's own
   design system does — and the only colour anywhere is in the diagrams.

   Those diagram colours are PROCESS INKS, not web colours:
     #EC008C is CMYK 0/100/0/0, process magenta   -> bleed
     #00AEEF is CMYK 100/0/0/0, process cyan      -> safe zone
     ink black                                     -> trim
   MOO and PSPrint both use process inks for exactly this, and once you notice
   it you cannot unsee it: a prepress diagram drawn in UI-semantic red #EF4444
   was made by someone who has never sent a file to a press.
*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  color-scheme: light dark;

  --paper:#FFFFFF;
  --panel:#F6F7F8;
  --sunk:#EDEFF1;
  --rule:#D9E2EC;          /* the convention hairline */
  --rule-2:#B7C2CE;
  --ink:#14181D;           /* hue-cast near-black. #000 is wrong here */
  --ink-2:#4B535D;
  --ink-3:#6B7480;

  /* Diagram — process inks only. Never used for chrome, links or buttons. */
  --bleed:#EC008C;         /* process magenta 0/100/0/0 */
  --trim:#14181D;
  --safe:#00AEEF;          /* process cyan 100/0/0/0 */
  --art:#F2F3F5;

  /* verdict scale, kept deliberately muted so it never competes with a diagram */
  --ok:#1B6B3A;
  --warn:#8A5A00;
  --bad:#A11B2B;

  --max:1180px;
  --read:768px;            /* papersizes.io caps reference pages here */
  --r:4px;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#101317; --panel:#171B20; --sunk:#1D2228; --rule:#2A313A; --rule-2:#3C444F;
    --ink:#EDF0F3; --ink-2:#AEB6C0; --ink-3:#8B939E;
    --bleed:#FF63B8; --safe:#4FD0FF; --trim:#EDF0F3; --art:#232930;
    --ok:#63C98C; --warn:#E0B25E; --bad:#F0868F;
  }
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 16px/1.6 "IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3{margin:0;font-weight:600;line-height:1.22;letter-spacing:-.015em}
h1{font-size:31px;margin-bottom:6px}
h2{font-size:20px;margin:34px 0 10px}
h3{font-size:16px;margin:22px 0 5px}
p{margin:0 0 13px}
a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--rule-2)}
a:hover{text-decoration-color:var(--ink)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.prose{max-width:var(--read)}
.prose p,.prose li{color:var(--ink-2);font-size:15.5px;line-height:1.72}
.prose li{margin-bottom:6px}
.lede{font-size:17px;color:var(--ink-2);max-width:var(--read);margin-bottom:4px}

/* numerals are mono everywhere. A spec sheet is read by column. */
.mono,td.n,th.n,.val,.dim{font-family:"IBM Plex Mono",Consolas,"Courier New",monospace;
  font-variant-numeric:tabular-nums}

/* ---------- chrome: navigation by ARTEFACT, not by tool ---------- */
header{border-bottom:1px solid var(--rule);background:var(--paper)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;padding:13px 0}
.brand{font-weight:600;font-size:16px;text-decoration:none;letter-spacing:-.02em;color:var(--ink)}
.brand small{display:block;font-weight:400;font-size:11.5px;color:var(--ink-3);
  letter-spacing:.04em;text-transform:uppercase;margin-top:1px}
nav.top{display:flex;gap:2px;flex-wrap:wrap;font-size:14px}
nav.top a{text-decoration:none;color:var(--ink-2);padding:5px 9px;border-radius:var(--r)}
nav.top a:hover{background:var(--panel);color:var(--ink)}
nav.top a[aria-current="page"]{background:var(--ink);color:var(--paper)}

/* ---------- the reference table comes FIRST on this site ---------- */
.tw{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r);margin:16px 0}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:560px}
th,td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{background:var(--panel);font-weight:600;font-size:12.5px;white-space:nowrap;
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2);
  border-bottom:1px solid var(--rule-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--panel)}
td.n,th.n{text-align:right;white-space:nowrap}
caption{caption-side:bottom;text-align:left;font-size:12.5px;color:var(--ink-3);padding:8px 12px}
.hl{background:var(--sunk)!important}

/* ---------- controls ---------- */
.controls{border:1px solid var(--rule);border-radius:var(--r);background:var(--panel);
  padding:14px 16px;margin:18px 0}
.row{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.f{display:flex;flex-direction:column;gap:3px}
.f label{font-size:11.5px;font-weight:500;color:var(--ink-2);letter-spacing:.03em;
  text-transform:uppercase}
input,select{
  font:400 15px/1.3 "IBM Plex Mono",Consolas,monospace;
  padding:8px 10px;border:1px solid var(--rule-2);border-radius:var(--r);
  background:var(--paper);color:var(--ink);
  max-width:100%;min-width:0;
}
/* flex items default to min-width:auto, so without this a long option label
   in a child <select> widens the whole row past the viewport */
.row,.f{min-width:0;max-width:100%}
select{font-family:"IBM Plex Sans",system-ui,sans-serif}
input:focus,select:focus{outline:2px solid var(--ink);outline-offset:-1px}
button{font:500 14px/1.3 "IBM Plex Sans",system-ui,sans-serif;padding:9px 15px;
  border:1px solid var(--ink);border-radius:var(--r);background:var(--ink);
  color:var(--paper);cursor:pointer}
button:hover{opacity:.86}
button.ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
button.ghost:hover{background:var(--panel);opacity:1}

/* ---------- THE DIAGRAM — this site's signature ---------- */
.figure{border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);
  padding:22px;margin:18px 0;overflow-x:auto}
.figure svg{display:block;margin:0 auto;max-width:100%;height:auto}
.key{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--ink-2);
  padding-top:14px;border-top:1px solid var(--rule)}
.key span{display:flex;align-items:center;gap:7px}
.key i{width:22px;height:0;border-top-width:2px;display:inline-block;font-style:normal}
.key i.b{border-top-style:dashed;border-top-color:var(--bleed)}
.key i.t{border-top-style:solid;border-top-color:var(--trim)}
.key i.s{border-top-style:dashed;border-top-color:var(--safe)}
.key i.c{border-top-style:solid;border-top-color:var(--ink-3);width:14px}

/* ---------- results ---------- */
.out{border:1px solid var(--rule);border-radius:var(--r);padding:14px 16px;margin:16px 0;
  background:var(--panel)}
.out .val{font-size:30px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.out .sub{font-size:13.5px;color:var(--ink-2);margin-top:3px}
.out.ok{border-left:3px solid var(--ok)}
.out.warn{border-left:3px solid var(--warn)}
.out.bad{border-left:3px solid var(--bad)}
.tag{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;padding:2px 7px;border-radius:2px;border:1px solid currentColor}
.tag.ok{color:var(--ok)}.tag.warn{color:var(--warn)}.tag.bad{color:var(--bad)}

.note{border:1px solid var(--rule);border-left:3px solid var(--ink-3);background:var(--panel);
  border-radius:var(--r);padding:12px 15px;margin:16px 0;font-size:14.5px}
.note p{margin:0 0 8px;color:var(--ink)}
.note p:last-child{margin:0}
.note b{font-weight:600}
.src{font-size:12.5px;color:var(--ink-3);margin-top:6px}
.src a{color:var(--ink-3)}
.checked{font-size:11.5px;color:var(--ink-3);font-family:"IBM Plex Mono",monospace;
  white-space:nowrap}

/* ---------- home: grouped by artefact ---------- */
.group{margin:30px 0 0}
.group h2{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);
  font-weight:600;margin:0 0 10px;padding-bottom:7px;border-bottom:1px solid var(--rule)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:11px}
.card{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--rule);
  border-radius:var(--r);padding:13px 15px;background:var(--paper)}
.card:hover{border-color:var(--ink);background:var(--panel)}
.card b{display:block;font-size:15px;font-weight:600;margin-bottom:3px}
.card span{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.5}

footer{border-top:1px solid var(--rule);margin-top:44px;padding:18px 0 52px;
  font-size:13.5px;color:var(--ink-3)}
footer a{color:var(--ink-2)}

@media print{
  nav.top,.controls,footer,button{display:none}
  .figure{border:0;padding:0}
  body{font-size:11pt}
}
@media (max-width:640px){h1{font-size:25px}.bar{gap:10px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}