/* ignlab.net — "studio catalogue": warm paper, soft serif, ink, earthy spot colours. */
:root{
  --paper:#f4ede0;--paper2:#ebe2d1;--card:#fbf7ef;--ink:#231d16;--ink2:#4a4036;--muted:#7a6d5e;--rule:#d8ccb7;
  --terracotta:#c8553d;--forest:#2f6b4f;--mustard:#d39b2a;--sky:#3b6ea5;--plum:#7b4a86;--inkblue:#2b3a55;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;--sans:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',sans-serif;--mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='1' cy='1' r='.6' fill='%23231d16' fill-opacity='.06'/%3E%3C/svg%3E")}
a{color:var(--terracotta);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--ink)}
h1,h2,h3{font-family:var(--serif);font-variation-settings:'SOFT' 100,'WONK' 1;font-weight:600;line-height:1.08;letter-spacing:-.01em;margin:0 0 .4em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:10}
.skip:focus{left:8px}
:focus-visible{outline:2px dashed var(--terracotta);outline-offset:4px}

/* Masthead */
.top{max-width:1120px;margin:0 auto;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--rule)}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:600 28px/1 var(--serif);font-variation-settings:'SOFT' 100,'WONK' 1}
.logo-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--terracotta);color:var(--paper);font-size:18px;transform:rotate(-8deg)}
.top nav{display:flex;gap:2px;flex-wrap:wrap}
.top nav a{color:var(--ink2);text-decoration:none;padding:6px 11px;font:500 13px/1 var(--mono);text-transform:lowercase;border-radius:999px}
.top nav a:hover{background:var(--paper2);color:var(--ink)}

main{max-width:1120px;margin:0 auto;padding:0 24px}

/* Hero */
.hero{position:relative;padding:72px 0 44px;max-width:880px}
.kicker{font:500 13px/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--forest);margin:0 0 18px}
.hero h1{font-size:clamp(44px,7vw,92px);font-weight:500;font-variation-settings:'SOFT' 100,'WONK' 1,'opsz' 144}
.scribble{position:relative;display:inline-block;font-style:italic;color:var(--terracotta)}
.scribble svg{position:absolute;left:-2%;bottom:-.08em;width:104%;height:.3em;overflow:visible}
.scribble path{fill:none;stroke:var(--mustard);stroke-width:5;stroke-linecap:round;stroke-dasharray:260;stroke-dashoffset:260;animation:draw 1.1s .4s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.lead{font-size:20px;color:var(--ink2);max-width:660px;margin:22px 0 26px}
.tally{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font:500 14px/1.4 var(--mono);color:var(--muted)}
.tally b{font:600 22px/1 var(--serif);color:var(--ink);margin-right:4px}
.doodle{position:absolute;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.doodle-star{right:-120px;top:70px;width:58px;stroke:var(--mustard);transform:rotate(12deg)}
.doodle-loop{right:-60px;bottom:30px;width:130px;stroke:var(--forest);opacity:.7}

/* Postcards */
.postcards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:16px 0 76px}
.postcard{position:relative;display:flex;flex-direction:column;gap:8px;min-height:250px;padding:26px 24px 22px;background:var(--card);color:var(--ink);text-decoration:none;
  border:1px solid var(--rule);box-shadow:0 1px 0 var(--rule),0 14px 30px -18px rgba(35,29,22,.45);transition:transform .2s ease}
.postcard:nth-child(2){transform:rotate(.8deg)}
.postcard:nth-child(3){transform:rotate(-.9deg)}
.postcard:nth-child(4){transform:rotate(-.6deg)}
.postcard:hover{transform:rotate(0) translateY(-4px)}
.postcard::before{content:"";position:absolute;inset:10px;border:1px dashed var(--rule);pointer-events:none}
.stamp{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:52px;height:60px;font-size:26px;background:var(--paper2);
  outline:2px dotted var(--rule);outline-offset:-5px;transform:rotate(4deg)}
.pc-kicker{font:500 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:1px;color:var(--muted);max-width:70%;min-height:52px}
.pc-name{font:600 34px/1.05 var(--serif);font-variation-settings:'SOFT' 100,'WONK' 1}
.pc-desc{color:var(--ink2);font-size:16px;flex:1}
.pc-cta{font:600 15px/1 var(--sans)}
.pc-cta::after{content:" →"}
.pc-terracotta .pc-name,.pc-terracotta .pc-cta{color:var(--terracotta)}
.pc-sky .pc-name,.pc-sky .pc-cta{color:var(--sky)}
.pc-forest .pc-name,.pc-forest .pc-cta{color:var(--forest)}

/* Chapters + catalogue */
.chapter{--c:var(--ink);margin:0 0 64px}
.ch-terracotta{--c:var(--terracotta)}.ch-forest{--c:var(--forest)}.ch-mustard{--c:#a8761a}.ch-sky{--c:var(--sky)}.ch-plum{--c:var(--plum)}.ch-ink{--c:var(--inkblue)}
.chapter-head{display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:start;border-top:3px double var(--ink);padding-top:16px;margin-bottom:8px}
.chapter-no{grid-row:1/3;font:500 12px/1.2 var(--mono);text-transform:uppercase;letter-spacing:1.5px;color:var(--c);writing-mode:vertical-rl;transform:rotate(180deg);padding:2px 0}
.chapter-head h2{font-size:clamp(30px,3.6vw,44px);color:var(--ink);margin:0}
.chapter-head h2::after{content:".";color:var(--c)}
.chapter-head p{margin:8px 0 0;color:var(--muted);font-size:16px}
.catalogue{list-style:none;margin:0;padding:0}
.catalogue li{border-bottom:1px solid var(--rule)}
.catalogue a{display:grid;grid-template-columns:40px 34px auto 1fr auto;grid-template-areas:"no ic name dots host" ". . desc desc desc";column-gap:10px;align-items:baseline;
  padding:16px 8px 16px 4px;color:var(--ink);text-decoration:none;transition:background .15s}
.catalogue a:hover{background:color-mix(in srgb,var(--c) 7%,transparent)}
.catalogue .no{grid-area:no;font:500 13px/1 var(--mono);color:var(--c)}
.catalogue .ic{grid-area:ic;font-size:20px}
.catalogue .name{grid-area:name;font:600 22px/1.2 var(--serif);font-variation-settings:'SOFT' 100,'WONK' 1}
.catalogue a:hover .name{color:var(--c);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.catalogue .dots{grid-area:dots;border-bottom:2px dotted var(--rule);transform:translateY(-6px);min-width:24px}
.catalogue .host{grid-area:host;font:500 13px/1 var(--mono);color:var(--muted)}
.catalogue .desc{grid-area:desc;color:var(--ink2);font-size:16px;margin-top:4px;max-width:720px}

/* Studio note */
.about{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;margin:10px 0 70px}
.note{position:relative;padding:34px 32px;background:var(--card);border:1px solid var(--rule);box-shadow:0 14px 30px -20px rgba(35,29,22,.5);transform:rotate(-.4deg)}
.note::before{content:"";position:absolute;top:-12px;left:42%;width:110px;height:26px;background:rgba(211,155,42,.35);transform:rotate(-3deg)}
.note h2{font-size:32px}
.note p{color:var(--ink2)}
.sign{font:italic 500 20px/1.3 var(--serif);color:var(--ink)}
.faq{padding-top:8px}
.faq h3{font-size:21px;margin:0 0 4px}
.faq p{margin:0 0 20px;color:var(--ink2);font-size:16px}

/* Shared network footer, paper edition */
.ignlab-footer{background:var(--ink);color:#cfc4b3;padding:16px 24px}
.if-inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px}
.if-brand{font:600 16px/1 var(--serif);color:var(--paper);text-decoration:none}
.if-links{display:flex;flex-wrap:wrap;gap:3px 5px;flex:1 1 auto}
.if-links a{color:#cfc4b3;text-decoration:none;font:500 12.5px/1.4 var(--sans);padding:3px 9px;border-radius:999px}
.if-links a:hover{background:var(--terracotta);color:var(--paper)}
.if-links a.active{background:var(--paper);color:var(--ink)}
.if-copy{font:500 12px var(--mono);color:#9c8f7d}

@media(max-width:1260px){.doodle{display:none}}
@media(max-width:900px){.postcards{grid-template-columns:1fr}.postcard{transform:none!important;min-height:0}.about{grid-template-columns:1fr}.note{transform:none}}
@media(max-width:640px){
  .top{padding:16px}.top nav a{padding:5px 8px;font-size:12px}main{padding:0 16px}.hero{padding:40px 0 30px}.lead{font-size:18px}
  .catalogue a{grid-template-columns:30px 28px 1fr;grid-template-areas:"no ic name" ". . host" ". . desc";row-gap:2px}
  .catalogue .dots{display:none}.catalogue .name{font-size:20px}
  .chapter-head{grid-template-columns:1fr}.chapter-no{writing-mode:horizontal-tb;transform:none;grid-row:auto;margin-bottom:4px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scribble path{animation:none;stroke-dashoffset:0}.postcard{transition:none}}