/* ============================================================
   PORTFOLIO — shared tokens
   Aesthetic: cream paper, typewriter monospace, quiet & precise.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* -- color -- */
  --paper:      #FAF6EC;   /* page background, warm cream */
  --paper-2:    #F3EDDF;   /* slightly deeper panel tone */
  --card:       #FFFFFF;   /* lifted surfaces */
  --ink:        #1C1B18;   /* primary text, near-black */
  --ink-dim:    #5B564A;   /* secondary text */
  --ink-faint:  #948D7C;   /* captions, meta */
  --line:       #DDD5C1;   /* hairline rules */
  --line-dark:  #1C1B18;   /* rules that need to read as "typed" */
  --stamp:      #B5482A;   /* single accent — used like typewriter ribbon red, sparingly */

  /* -- type -- */
  --face-display: 'Courier Prime', 'IBM Plex Mono', ui-monospace, monospace;
  --face-body:    'Courier Prime', 'IBM Plex Mono', ui-monospace, monospace;
  --face-meta:    'IBM Plex Mono', ui-monospace, monospace;

  /* -- layout -- */
  --measure: 720px;
  --wide: 1040px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--face-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--ink); text-decoration-line:underline; text-decoration-color:var(--line); text-underline-offset:3px; }
a:hover{ text-decoration-color:var(--ink); }
a:focus-visible, button:focus-visible{ outline:2px solid var(--stamp); outline-offset:3px; }

h1,h2,h3,h4{
  font-family:var(--face-display);
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--ink);
}

.wrap{ max-width:var(--wide); margin:0 auto; padding:0 28px; }
.prose{ max-width:var(--measure); }

/* thin rule used to separate sections, reads like a typed underline */
.rule{ border:none; border-top:1px solid var(--line); margin:0; }

/* small caps-style meta label, like a typed stamp / marginalia */
.label{
  font-family:var(--face-meta);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.label.stamped{ color:var(--stamp); }

.btn{
  display:inline-block;
  font-family:var(--face-meta);
  font-size:12.5px;
  letter-spacing:.03em;
  padding:11px 20px;
  border:1px solid var(--ink);
  color:var(--ink);
  background:transparent;
  text-decoration:none;
  border-radius:0;
}
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn.quiet{ border-color:var(--line); color:var(--ink-dim); }
.btn.quiet:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

::selection{ background:var(--stamp); color:var(--paper); }