/* Magpie Ink: a collector's catalogue. Black, white and one iridescent sheen. */
:root{
  --pie:#0d1012;--pie-2:#1c2124;--breast:#fbfaf6;--card:#fff;--grey:#585e62;--hair:#d8d6cf;
  --petrol:#0a5f74;--blue:#1b4fa8;--teal:#0e8c92;--green:#1fa373;
  --sheen:linear-gradient(100deg,#1b4fa8,#0e8c92 45%,#1fa373 75%,#3a4fb4);
  --disp:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;
  --text:"Spectral",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--breast);color:var(--pie);font:400 1.125rem/1.68 var(--text);display:grid;grid-template-columns:238px minmax(0,1fr);min-height:100vh}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--petrol);text-underline-offset:.16em;text-decoration-thickness:1px}
a:hover{color:var(--blue);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.jump{position:absolute;left:-999px;top:0;background:#fff;color:var(--pie);padding:.6rem 1rem;z-index:20}
.jump:focus{left:.5rem;top:.5rem}
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* the spine */
.spine{background:var(--pie);color:var(--breast);position:sticky;top:0;align-self:start;height:100vh;padding:2rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:2rem;overflow-y:auto}
.spine::after{content:"";position:absolute;top:0;right:0;bottom:0;width:5px;background:linear-gradient(180deg,#1b4fa8,#0e8c92 40%,#1fa373 70%,#3a4fb4)}
.crest{display:block;color:inherit;text-decoration:none}
.crest:hover{color:inherit}
.crest svg{width:74px;height:74px;margin-bottom:.8rem}
.crest b{display:block;font:500 2.05rem/1 var(--disp);letter-spacing:-.01em}
.crest i{display:block;margin-top:.55rem;font-size:.92rem;line-height:1.3;color:#c7ccce}
.drawers{list-style:none;margin:0;padding:0;border-top:1px solid #3a4145}
.drawers li{border-bottom:1px solid #3a4145}
.drawers a{display:flex;gap:.7rem;align-items:baseline;padding:.55rem 0;color:var(--breast);text-decoration:none;font-size:1.02rem}
.drawers a span{font:italic 400 .85rem var(--disp);color:#7fdccf;min-width:1.35rem}
.drawers a:hover,.drawers a[aria-current]{color:#7fdccf}
.spine small{margin-top:auto;font-size:.82rem;line-height:1.45;color:#b5bbbe}
.spine small a{color:#d9f3ef}
#drawer-toggle,.pull{display:none}

/* folio: everything right of the spine */
.folio{min-width:0;display:flex;flex-direction:column}
.folio>main{flex:1}
h1,h2,h3{font-family:var(--disp);font-weight:500;line-height:1.12;letter-spacing:-.005em}
.lot{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin:0}

/* home: title sheet */
.titlesheet{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);min-height:min(88vh,760px)}
.titlesheet>div:first-child{padding:clamp(2rem,5vw,4.5rem) clamp(1.25rem,4vw,3.5rem);display:flex;flex-direction:column;justify-content:center}
.titlesheet h1{font-size:clamp(2.5rem,5.1vw,4.7rem);margin:.8rem 0 1.2rem;line-height:1.02}
.titlesheet h1 em{background:var(--sheen);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}
.titlesheet p.stand{font-size:1.24rem;max-width:32em;margin:0}
.tip{margin-top:1.6rem;font-style:italic}
.mount{background:var(--pie);padding:clamp(1rem,2.5vw,2.25rem);display:flex;flex-direction:column;justify-content:center;color:#c7ccce}
.mount img{width:100%;object-fit:cover;border:8px solid var(--breast)}
.mount figcaption,.cred{font-size:.8rem;line-height:1.45;margin:.65rem 0 0}
.mount a{color:#d9f3ef}
.mount figure{margin:0}

/* home: the swatch drawer */
.drawer{padding:clamp(2.25rem,5vw,4.5rem) clamp(1.25rem,4vw,3.5rem)}
.drawerhead{display:flex;flex-wrap:wrap;gap:.4rem 2rem;align-items:baseline;justify-content:space-between;border-bottom:3px solid var(--pie);padding-bottom:.6rem;margin-bottom:2rem}
.drawerhead h2{font-size:clamp(1.9rem,3.5vw,2.8rem);margin:0}
.swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem}
.tag{position:relative;background:var(--card);border:1px solid var(--pie);padding:1.05rem 1.05rem 1.2rem;display:flex;flex-direction:column;color:var(--pie);text-decoration:none;box-shadow:5px 5px 0 var(--pie);transition:box-shadow .12s,transform .12s}
.tag:hover{color:var(--pie);transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--teal)}
.tag:nth-child(3n+2){margin-top:2.25rem}
.tag:nth-child(3n){margin-top:.9rem}
.tag::before{content:"";position:absolute;top:.8rem;right:.8rem;width:15px;height:15px;border-radius:50%;background:var(--breast);border:1px solid var(--pie)}
.tag .blot{width:100%;max-height:170px;margin:.2rem 0 .45rem}
.tag .hand{height:22px;width:82%;margin-bottom:.6rem}
.tag h3{font-size:1.42rem;margin:0 0 .45rem}
.tag p{margin:0;font-size:.98rem;line-height:1.5}
.tag .inkname{font-style:italic;font-size:.9rem;color:var(--grey);margin-bottom:.4rem}
.tag time{display:block;margin-top:auto;padding-top:.65rem;font-size:.82rem;color:var(--grey)}
.note{font-size:.88rem;color:var(--grey);margin:1.6rem 0 0}

/* home: ink families on black */
.families{background:var(--pie);color:var(--breast);padding:clamp(2.25rem,5vw,4.5rem) clamp(1.25rem,4vw,3.5rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.families h2{font-size:clamp(1.9rem,3.5vw,2.8rem);margin:0 0 1rem}
.families a{color:#7fdccf}
.families .lot{color:#b5bbbe}
.families figure{margin:1.2rem 0 0}
.families .cred{color:#b5bbbe}
.families dl{margin:0;display:grid;gap:1rem}
.families dl>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:1rem;align-items:center;background:var(--breast);color:var(--pie);padding:.9rem 1rem}
.families dt{font:500 1.35rem/1.15 var(--disp)}
.families dd{margin:.2rem 0 0;font-size:1rem;line-height:1.5}
.families dl svg{width:96px;height:96px}
.families dl a{color:var(--petrol)}

/* home: nib lines */
.widths{padding:clamp(2.25rem,5vw,4rem) clamp(1.25rem,4vw,3.5rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2.5rem;align-items:center}
.widths h2{font-size:clamp(1.9rem,3.5vw,2.8rem);margin:0 0 .8rem}
.slip{border:1px solid var(--pie);padding:1rem 1.2rem;background:#fff;font-size:1rem;margin-top:1.2rem}

/* catalogue index: the ledger */
.sheethead{padding:clamp(2rem,5vw,4rem) clamp(1.25rem,4vw,3.5rem) 1.5rem;border-bottom:3px solid var(--pie);margin:0}
.sheethead h1{font-size:clamp(2.4rem,5vw,4.2rem);margin:.5rem 0 .7rem}
.sheethead p.stand{max-width:36em;margin:0;font-size:1.18rem}
.ledger{list-style:none;margin:0;padding:0 clamp(1.25rem,4vw,3.5rem) 3rem}
.ledger li{display:grid;grid-template-columns:3.4rem 260px minmax(0,1fr);gap:1.5rem;padding:1.6rem 0;border-bottom:1px solid var(--hair);align-items:start}
.ledger .no{font:italic 500 2rem/1 var(--disp);background:var(--sheen);-webkit-background-clip:text;background-clip:text;color:transparent}
.ledger img{width:100%;border:1px solid var(--pie)}
.ledger h2{font-size:1.7rem;margin:0 0 .4rem}
.ledger h2 a{color:inherit;text-decoration:none}
.ledger h2 a:hover{color:var(--petrol)}
.ledger p{margin:0;font-size:1.02rem;line-height:1.55}
.ledger time{display:block;font-size:.85rem;color:var(--grey);margin-top:.5rem}

/* an entry */
.crumbs{padding:1.15rem clamp(1.25rem,4vw,3.5rem) 0;font-size:.88rem;color:var(--grey);margin:0}
.crumbs a{color:inherit}
.entryhead{padding:1rem clamp(1.25rem,4vw,3.5rem) 1.6rem;max-width:58rem}
.entryhead h1{font-size:clamp(2.3rem,4.6vw,4rem);margin:.45rem 0 .8rem;line-height:1.04}
.entryhead p.stand{font-size:1.25rem;font-style:italic;line-height:1.45;margin:0;max-width:36em}
.plate{margin:0;background:var(--pie);padding:clamp(.75rem,2vw,1.5rem) clamp(1.25rem,4vw,3.5rem);color:#c7ccce}
.plate img{width:100%;max-width:980px;border:6px solid var(--breast)}
.plate a{color:#d9f3ef}
.entry{display:grid;grid-template-columns:minmax(0,41rem) 13.5rem;gap:clamp(1.5rem,4vw,3.5rem);padding:2.25rem clamp(1.25rem,4vw,3.5rem) 3.5rem;align-items:start}
.entry>article{min-width:0}
.entry h2{font-size:clamp(1.65rem,2.8vw,2.15rem);margin:2.3rem 0 .75rem}
.entry h3{font-size:1.32rem;margin:1.6rem 0 .4rem}
.entry p{margin:0 0 1.1rem}
.entry ul,.entry ol{padding-left:1.3rem;margin:0 0 1.2rem}
.entry li{margin-bottom:.5rem}
.answer{font-size:1.24rem;line-height:1.55;border-left:5px solid;border-image:var(--sheen) 1;padding-left:1.05rem}
.record{position:sticky;top:1.5rem;border:1px solid var(--pie);background:#fff;padding:.95rem;font-size:.9rem;line-height:1.4}
.record svg{width:100%;margin-bottom:.4rem}
.record dl{margin:0}
.record dt{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin-top:.6rem}
.record dd{margin:0}
.dia{margin:1.7rem 0;background:#fff;border:1px solid var(--hair);padding:.9rem}
.dia svg{width:100%;font-family:var(--text)}
.dia img{width:100%}
.dia figcaption{font-size:.92rem;line-height:1.45;color:var(--grey);margin-top:.6rem}
.dia .cred{font-size:.8rem}
.dia.narrow{max-width:24rem}
.grid-t{width:100%;border-collapse:collapse;margin:1.2rem 0 1.5rem;font-size:1rem;line-height:1.4}
.grid-t caption{text-align:left;font-size:.9rem;color:var(--grey);padding-bottom:.4rem}
.grid-t th,.grid-t td{border-bottom:1px solid var(--hair);padding:.55rem .6rem .55rem 0;text-align:left;vertical-align:top}
.grid-t thead th{border-bottom:2px solid var(--pie);font-weight:600}
.aside{background:var(--pie);color:var(--breast);padding:1.15rem 1.3rem;margin:1.6rem 0}
.aside p:last-child{margin-bottom:0}
.aside a{color:#7fdccf}
.aside strong{font-family:var(--disp);font-size:1.15rem;font-weight:500;display:block;margin-bottom:.3rem}
.qa dt{font:500 1.28rem/1.25 var(--disp);margin-top:1.3rem}
.qa dd{margin:.35rem 0 0}
.opened{margin-top:2.5rem;border-top:3px solid var(--pie);padding-top:.9rem;font-size:.98rem}
.opened h2{font-size:1.3rem;margin:0 0 .5rem}
.opened ul{list-style:none;padding:0;margin:0}
.next{margin-top:1.6rem;font-style:italic}

/* plain sheets: about, contact, write for us, 404 */
.sheet{padding:2rem clamp(1.25rem,4vw,3.5rem) 3.5rem;max-width:49rem}
.sheet h2{font-size:clamp(1.6rem,2.8vw,2.1rem);margin:2.1rem 0 .65rem}
.sheet p{margin:0 0 1.05rem}
.sheet ul{padding-left:1.25rem;margin:0 0 1.2rem}
.sheet li{margin-bottom:.4rem}
.sheet figure{margin:1.5rem 0;max-width:20rem}
.sheet figure img{border:1px solid var(--pie)}
.credits{font-size:.95rem;line-height:1.5}
.bigmail{font:500 clamp(1.4rem,4vw,2.3rem)/1.2 var(--disp);overflow-wrap:anywhere}

/* colophon */
.colophon{border-top:1px solid var(--pie);padding:1.5rem clamp(1.25rem,4vw,3.5rem) 1.8rem;font-size:.92rem;line-height:1.5;display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;position:relative}
.colophon::before{content:"";position:absolute;left:0;right:0;top:-4px;height:3px;background:var(--sheen)}
.colophon p{margin:0;max-width:40em}

@media (max-width:1180px){
  .entry{grid-template-columns:minmax(0,1fr)}
  .record{position:static;display:grid;grid-template-columns:90px 1fr;gap:1rem;order:-1;align-items:center}
  .record svg{margin:0}
  .record dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.15rem .8rem;align-items:baseline}
  .record dt{margin-top:0}
  .entry>article{max-width:41rem}
}
@media (max-width:1000px){
  .swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tag:nth-child(n){margin-top:0}
  .tag:nth-child(even){margin-top:1.4rem}
  .titlesheet,.families,.widths{grid-template-columns:minmax(0,1fr)}
  .titlesheet{min-height:0}
  .mount img{max-height:420px}
}
@media (max-width:820px){
  body{display:block}
  .spine{position:relative;height:auto;display:grid;grid-template-columns:1fr auto;gap:0;align-items:center;padding:.8rem 1.25rem;overflow:visible}
  .spine::after{top:auto;left:0;width:auto;height:4px}
  .crest{display:flex;gap:.6rem;align-items:center}
  .crest svg{width:40px;height:40px;margin:0}
  .crest b{font-size:1.5rem}
  .crest i,.spine small{display:none}
  #drawer-toggle{display:block;position:absolute;opacity:0;width:1px;height:1px}
  .pull{display:block;border:1px solid var(--breast);padding:.15rem .75rem;font-size:.95rem;cursor:pointer}
  #drawer-toggle:focus-visible+.pull{outline:3px solid #7fdccf;outline-offset:2px}
  .spine nav{display:none;grid-column:1/-1;margin-top:.7rem}
  #drawer-toggle:checked~nav{display:block}
  .ledger li{grid-template-columns:minmax(0,1fr);gap:.7rem}
  .ledger .no{font-size:1.5rem}
}
@media (max-width:560px){
  body{font-size:1.06rem}
  .swatches{grid-template-columns:minmax(0,1fr)}
  .tag:nth-child(n){margin-top:0}
  .families dl>div{grid-template-columns:64px minmax(0,1fr);gap:.75rem}
  .families dl svg{width:64px;height:64px}
  .answer{font-size:1.14rem}
  .grid-t{font-size:.93rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tag{transition:none}}