/* --------------------------------------------------------------- INKCATS - proof sheet 5,000 sequential cats pulled in order and never reordered, so the page is built as a printer's proof: cool coated stock, one ink, hairline rules, plate numbers that mean something because the run really is a sequence. --------------------------------------------------------------- */ :root{ --paper:#ECEDF2; --paper-2:#F8F9FC; --sheet:#FFFFFF; --ink:#14102A; --ink-2:#55516E; --ink-3:#67637F; --rule:#C6C8D6; --rule-2:#DDDFE8; --violet:#5B2EE5; --violet-soft:rgba(91,46,229,.09); --reg:#B81E1E; --btn-fg:#FFFFFF; --gut:clamp(20px,4.5vw,68px); --maxw:1200px; --plate-gap:clamp(74px,10vw,138px); --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif; --body:"Instrument Sans","Segoe UI",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,"Courier New",monospace; } /* Light is the default for everyone. The page deliberately does NOT follow prefers-color-scheme, so a visitor whose OS is in dark mode still gets the paper look. The dark palette below stays available by stamping data-theme="dark" on , so nothing is lost if a toggle is added later. */ :root[data-theme="dark"]{ --paper:#100C22; --paper-2:#191433; --sheet:#0B0818; --ink:#ECEDF2; --ink-2:#A9A4C4; --ink-3:#8F89AD; --rule:#2E2850; --rule-2:#241E42; --violet:#9B7DFF; --violet-soft:rgba(155,125,255,.13); --reg:#FF6459; --btn-fg:#14102A; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--body);font-size:16px;line-height:1.62; -webkit-font-smoothing:antialiased; } p{margin:0} h1,h2,h3{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.022em;text-wrap:balance} ::selection{background:var(--violet);color:#fff} :where(a,button,input,summary):focus-visible{outline:2px solid var(--violet);outline-offset:3px} /* Grid items default to min-width:auto, so intrinsically wide content - a 
 of SVG source, a wide table - forces its track past the
   container instead of scrolling inside its own box. */
.hero-grid>*,.mint-grid>*,.plate-hd>*,.proof>*,.traitcols>*,.imp-ft>*,.feed-row>*{min-width:0}

.sheet{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.label{font-family:var(--mono);font-size:.63rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.label-v{color:var(--violet)}

/* masthead */
.mast{border-bottom:1px solid var(--rule);background:var(--paper)}
.mast-in{max-width:var(--maxw);margin:0 auto;padding:14px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.wordmark{font-family:var(--display);font-weight:800;font-size:1.16rem;letter-spacing:-.03em}
.mast-r{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;line-height:1.25}
.stat .k{font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.stat .v{font-family:var(--mono);font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums}
.live{display:inline-flex;align-items:center;gap:7px;color:var(--reg);font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--reg)}
@media (prefers-reduced-motion:no-preference){.live::before{animation:beat 2s ease-in-out infinite}}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.3}}

/* hero */
.hero{padding-top:clamp(40px,7vw,92px);padding-bottom:clamp(34px,5vw,64px)}
.frame{position:relative}
.frame::before,.frame::after{content:"";position:absolute;width:16px;height:16px;pointer-events:none;border-color:var(--rule);border-style:solid}
.frame::before{top:-16px;left:-16px;border-width:1px 0 0 1px}
.frame::after{bottom:-16px;right:-16px;border-width:0 1px 1px 0}
@media (max-width:720px){.frame::before,.frame::after{display:none}}

.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(30px,5vw,64px);align-items:end}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;align-items:start}}
h1{font-size:clamp(2.6rem,7.6vw,5.1rem);line-height:.96}
h1 em{font-style:normal;color:var(--violet)}
.hero-sub{max-width:52ch;color:var(--ink-2);margin-top:24px;font-size:1.02rem}
.hero-sub b{color:var(--ink);font-weight:600}
.hero-btns{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}

.btn{font-family:var(--body);font-weight:600;font-size:.94rem;padding:13px 24px;
  border:1px solid var(--violet);background:var(--violet);color:var(--btn-fg);
  border-radius:2px;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{filter:brightness(1.09)}
.btn.line{background:transparent;color:var(--violet)}
.btn.line:hover{background:var(--violet-soft);filter:none}
.btn:disabled{border-color:var(--rule);background:var(--paper-2);color:var(--ink-3);cursor:not-allowed;filter:none}

.impression{border:1px solid var(--rule);background:var(--sheet)}
.imp-hd{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--rule-2)}
.imp-art{aspect-ratio:1;position:relative;background:var(--paper-2)}
.imp-art svg{position:absolute;inset:0;width:100%;height:100%}
.imp-ft{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule-2)}
.imp-ft>div{padding:12px 14px}
.imp-ft>div+div{border-left:1px solid var(--rule-2)}
.imp-ft .v{font-family:var(--display);font-weight:800;font-size:1.32rem;letter-spacing:-.02em;margin-top:2px}
.sep{display:flex;border-top:1px solid var(--rule-2)}
.sep i{flex:1;height:26px}
.sep i+i{border-left:1px solid var(--sheet)}

/* plates */
.plate{padding-top:var(--plate-gap)}
.plate-hd{display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);gap:clamp(20px,4vw,50px);
  border-top:1px solid var(--ink);padding-top:20px;margin-bottom:clamp(26px,4vw,44px)}
@media (max-width:820px){.plate-hd{grid-template-columns:1fr;gap:16px}}
.plate-hd h2{font-size:clamp(1.55rem,3.5vw,2.35rem);line-height:1.08}
.plate-hd .label{display:block;margin-bottom:12px}
.plate-hd p{color:var(--ink-2);font-size:.97rem;max-width:60ch}

.card{border:1px solid var(--rule);background:var(--sheet)}
.card-hd{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 16px;
  border-bottom:1px solid var(--rule-2);background:var(--paper-2)}
.card-bd{padding:18px}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid var(--rule-2)}
.row:last-child{border-bottom:0}
.row .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.row .v{font-family:var(--mono);font-size:.84rem;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}

/* mint */
.mint-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:16px}
@media (max-width:900px){.mint-grid{grid-template-columns:1fr}}
.counter{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,6vw,3.6rem);line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.counter small{font-size:.36em;color:var(--ink-3);font-weight:600;letter-spacing:0}
.runbar{height:14px;border:1px solid var(--rule);margin:14px 0 4px;background:var(--paper-2);overflow:hidden}
.runbar i{display:block;height:100%;background:var(--violet)}
.stepper{display:flex;align-items:center;gap:12px;margin:18px 0 6px}
.qtybox{display:flex;border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.qtybox button{width:44px;height:44px;border:0;background:var(--paper-2);color:var(--ink);font-size:1.1rem;cursor:pointer;font-family:var(--body)}
.qtybox button:hover:not(:disabled){background:var(--violet-soft)}
.qtybox button:disabled{color:var(--ink-3);cursor:not-allowed}
.qtybox output{width:56px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.15rem;background:var(--sheet)}
.stepper .cap{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.full{width:100%;text-align:center;margin-top:14px}
.fine{font-size:.82rem;color:var(--ink-3);margin-top:13px;line-height:1.68}

/* trait tables */
.traitcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.traitcard{border:1px solid var(--rule);background:var(--sheet)}
.traitcard h3{font-size:.72rem;font-family:var(--mono);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);padding:11px 15px;border-bottom:1px solid var(--rule-2);background:var(--paper-2)}
.traitcard ul{list-style:none;margin:0;padding:6px 15px 12px}
.traitcard li{display:grid;grid-template-columns:12px 1fr auto auto;gap:9px;align-items:center;padding:6px 0;border-bottom:1px solid var(--rule-2)}
.traitcard li:last-child{border-bottom:0}
.traitcard .sw{width:12px;height:12px;border:1px solid var(--rule)}
.traitcard .nm{font-size:.85rem}
.traitcard .ct{font-family:var(--mono);font-size:.74rem;font-weight:700;font-variant-numeric:tabular-nums}
.traitcard .pc{font-family:var(--mono);font-size:.68rem;color:var(--ink-3);font-variant-numeric:tabular-nums;min-width:44px;text-align:right}

.grid-sample{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;margin-top:16px}
.grid-sample div{aspect-ratio:1;border:1px solid var(--rule-2);background:var(--paper-2)}
.grid-sample svg{display:block;width:100%;height:100%}

/* feed */
.feed{border:1px solid var(--rule);background:var(--sheet)}
.feed-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 15px;border-bottom:1px solid var(--rule-2)}
.feed-row:last-child{border-bottom:0}
.feed-row .sp{width:38px;height:38px;background:var(--paper-2)}
.feed-row .sp svg{display:block;width:100%;height:100%}
.feed-id{font-family:var(--display);font-weight:800;font-size:.98rem;letter-spacing:-.02em}
.feed-sub{font-family:var(--mono);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}

/* proof + inspector */
.proof{display:grid;grid-template-columns:186px minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:720px){.proof{grid-template-columns:1fr}}
.proof-art{border:1px solid var(--rule);aspect-ratio:1;background:var(--paper-2)}
.proof-art svg{display:block;width:100%;height:100%}
pre{margin:0;padding:16px;overflow-x:auto;background:var(--paper-2);border:1px solid var(--rule);
  font-family:var(--mono);font-size:.72rem;line-height:1.75;color:var(--ink-2)}
pre b{color:var(--violet);font-weight:700}
.idbox{display:flex;border:1px solid var(--rule);max-width:250px;margin-bottom:14px;border-radius:2px;overflow:hidden}
.idbox span{padding:11px 13px;background:var(--paper-2);color:var(--ink-3);font-family:var(--mono);font-weight:700}
.idbox input{flex:1;min-width:0;border:0;background:var(--sheet);color:var(--ink);padding:11px 13px;font-family:var(--mono);font-weight:700;font-size:.94rem}

/* faq */
.faq{border:1px solid var(--rule);background:var(--sheet)}
details{border-bottom:1px solid var(--rule-2)}
details:last-child{border-bottom:0}
summary{padding:16px 18px;cursor:pointer;list-style:none;font-weight:600;font-size:.96rem;
  display:flex;justify-content:space-between;align-items:center;gap:14px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);color:var(--violet);font-size:1.05rem;font-weight:700}
details[open] summary::after{content:"\2013"}
details p{padding:0 18px 18px;color:var(--ink-2);font-size:.89rem;max-width:76ch;line-height:1.7}

footer.sheet{margin-top:var(--plate-gap);border-top:1px solid var(--rule);padding-top:26px;padding-bottom:62px}
footer .disc{max-width:78ch;color:var(--ink-3);font-size:.76rem;margin-top:10px;line-height:1.7}