/* ============================================================================
   gigs — design system (imported from Claude Design: Gigarthan.dc.html)
   "One signature, three registers, one physics. Cream and cobalt, square and
   bordered, raised on a hard shadow."
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=swap');

/* --- Tokens: colors --------------------------------------------------------- */
:root{
  --paper:#F4F1EA;
  --panel:#FBF9F4;
  --raised:#FFFFFF;
  --ink:#0E0E0E;
  --ink-soft:#5A574E;
  --cobalt:#1B43D8;
  --cobalt-ink:#0E2BA0;
  --cobalt-soft:rgba(27,67,216,.10);
  --cobalt-wash:rgba(27,67,216,.05);
  --sepia:#B07A45;

  /* typography */
  --serif:"Iowan Old Style",Georgia,Cambria,"Times New Roman",serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --t-display:clamp(34px,6vw,60px);
  --t-h1:clamp(28px,4.4vw,44px);
  --t-h2:clamp(22px,3vw,30px);
  --t-title:24px;
  --t-lead:clamp(16px,2vw,19px);
  --t-body:16px;
  --t-label:11px;

  /* spacing */
  --sp-1:8px; --sp-2:12px; --sp-3:18px; --sp-4:24px; --sp-5:36px; --sp-6:54px;
  --wrap:1140px;
  --measure:62ch;
  --grid:26px;

  /* elevation / lines */
  --line:2px solid var(--ink);
  --hair:1px solid var(--ink);
  --hard:6px 6px 0 var(--ink);
  --hard-sm:4px 4px 0 var(--ink);
  --hard-accent:6px 6px 0 var(--cobalt-ink);
  --z1:2px 2px 0 var(--ink);
  --z2:4px 4px 0 var(--ink);
  --z3:6px 6px 0 var(--ink);
  --z4:8px 8px 0 var(--ink);
  --press:cubic-bezier(.5,.04,.28,1);
  --rebound:cubic-bezier(.2,1.22,.32,1);
}

/* --- Base + Signature 1 (cobalt dot-grid) ---------------------------------- */
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); line-height:1.5; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(var(--cobalt-soft) 1px,transparent 1px);
  background-size:26px 26px;
}
a{color:var(--cobalt); text-decoration:none}
::selection{background:var(--cobalt); color:#fff}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}

.raised{background:var(--raised); border:var(--line); box-shadow:var(--hard); border-radius:0}
.raised--sm{box-shadow:var(--hard-sm)}
.rule{border:0; border-top:var(--hair); margin:var(--sp-4) 0}
.mark{width:14px; height:14px; background:var(--cobalt); border:var(--line); display:inline-block}
.eyebrow{font-family:var(--mono); font-size:var(--t-label); letter-spacing:.16em;
  text-transform:uppercase; color:var(--cobalt-ink); font-weight:700}
code{font-family:var(--mono); background:var(--cobalt-soft); padding:1px 4px}

/* --- Registers ------------------------------------------------------------- */
.r-paper{font-family:var(--serif)}
.r-paper .title{font-family:var(--serif); font-weight:600; font-size:var(--t-title); line-height:1.14}
.r-paper .byline{font-style:italic; color:var(--ink-soft)}
.r-paper p{max-width:var(--measure); line-height:1.62}
.r-paper .figure{border:var(--hair); background:var(--panel); padding:12px 14px}
.r-paper .figure figcaption{font-size:12px; color:var(--ink-soft)}

.r-loud{font-family:var(--sans)}
.r-loud h1{font-weight:800; font-size:var(--t-display); line-height:.97; letter-spacing:-.03em}
.r-loud .slab{background:var(--cobalt); color:#fff; padding:0 8px; display:inline-block; transform:rotate(-2.5deg)}
.r-loud .ul{border-bottom:5px solid var(--cobalt)}

.r-blueprint{font-family:var(--sans)}
.bg-draft{
  background-image:
    repeating-linear-gradient(0deg,var(--cobalt-soft) 0 1px,transparent 1px 28px),
    repeating-linear-gradient(90deg,var(--cobalt-soft) 0 1px,transparent 1px 28px);
}
.dim{display:flex; align-items:center; gap:6px; color:var(--cobalt-ink);
  font-family:var(--mono); font-size:12px}
.dim::before,.dim::after{content:""; flex:1; height:1px; background:var(--ink)}

/* --- Motion: buttons + peel ------------------------------------------------ */
.btn{font:inherit; font-weight:800; -webkit-appearance:none; appearance:none;
  border:var(--line); background:var(--raised); color:var(--ink);
  padding:9px 16px; cursor:pointer; box-shadow:var(--z2); border-radius:0; font-size:14px;
  transition:transform .28s var(--rebound), box-shadow .28s var(--rebound);
  text-decoration:none; display:inline-block}
.btn:hover{transform:translate(-1px,-2px); box-shadow:6px 7px 0 var(--ink)}
.btn:active{transition:transform .12s var(--press), box-shadow .12s var(--press);
  transform:translate(3px,4px) scale(.98); box-shadow:0 0 0 var(--ink)}
.btn--cobalt{background:var(--cobalt); color:#fff; border-color:var(--cobalt); box-shadow:4px 4px 0 var(--cobalt-ink)}
.btn--cobalt:hover{box-shadow:6px 7px 0 var(--cobalt-ink)}

.peel{background:var(--raised); border:var(--line); box-shadow:var(--z2); border-radius:0;
  cursor:pointer; transform-origin:50% 100%;
  transition:transform .3s var(--rebound), box-shadow .3s var(--rebound)}
.peel:hover{transform:translate(-2px,-3px); box-shadow:8px 9px 0 var(--ink)}
.peel:active{transition:transform .2s var(--press), box-shadow .2s var(--press);
  transform:translate(6px,7px) scale(.965); box-shadow:0 0 0 var(--ink)}

/* --- Forms ----------------------------------------------------------------- */
.input{
  font:inherit;font-family:var(--sans);font-size:14px;color:var(--ink);
  border:var(--line);border-radius:0;background:var(--raised);padding:9px 12px;box-sizing:border-box;
  -webkit-appearance:none;appearance:none;transition:box-shadow .15s ease,border-color .15s}
.input:focus{outline:none;border-color:var(--cobalt);box-shadow:4px 4px 0 var(--cobalt-ink)}

/* --- Shared site chrome ---------------------------------------------------- */
.site-head{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:2px solid var(--ink)}
.site-head .inner{display:flex;justify-content:space-between;align-items:center;padding:15px 22px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand .sq{width:18px;height:18px;background:var(--cobalt);border:2px solid var(--ink);display:inline-block}
.brand .name{font-family:var(--sans);font-weight:800;letter-spacing:-.02em;font-size:18px;color:var(--ink)}
.site-nav{display:flex;align-items:center;gap:24px}
.site-nav a{position:relative;padding:4px 0;font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink)}
.site-nav a:hover{color:var(--cobalt)}
.site-nav a.ext{color:var(--cobalt)}
.site-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;background:var(--cobalt)}

.site-foot{padding:24px 22px 40px;border-top:2px solid var(--ink)}
.site-foot .inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
  font-family:var(--mono);font-size:11px;color:var(--ink-soft);letter-spacing:.04em}

/* tag chip (mono, square, bordered) */
.tag{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  border:1px solid var(--ink);padding:2px 7px;color:var(--ink);display:inline-block}