/* Joseph Postiglione portfolio
   Tokens: ink #1A1A1A, paper #FAFAF5, line #D8D8D4, yellow #F0E068,
   lavender #B8A8D8, green #4DCB4D, signal #C8361F, muted #555555.
   Type: Archivo (display + body), IBM Plex Mono (utility). */
html, body { margin: 0; background: #FAFAF5; color: #1A1A1A; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; }
a { color: #1A1A1A; }
a:hover { color: #C8361F; }
h1, h2, h3 { text-wrap: balance; }
.pf { min-height: 100vh; }
.pf * { box-sizing: border-box; }
.pf a:focus-visible, .pf button:focus-visible { outline: 3px solid #C8361F; outline-offset: 3px; }
.pf .navlink { text-decoration: none; }
.pf .navlink:hover { text-decoration: underline; text-underline-offset: 4px; }
.pf .card { text-decoration: none; color: #1A1A1A; transition: transform .15s ease, box-shadow .15s ease; }
.pf .card:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 #1A1A1A; color: #1A1A1A; }
.pf .btn { transition: transform .15s ease, box-shadow .15s ease; }
.pf .btn:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 #1A1A1A; }

/* Spec mode */
.pf:not(.spec) .when-spec { display: none !important; }
.pf.spec .when-off { display: none !important; }
.when-spec, .when-off { display: inline-flex; }
.spec [data-spec] { outline: 1px dashed #C8361F; outline-offset: 2px; position: relative; }
.spec [data-spec]::after { content: attr(data-spec); position: absolute; left: 0; top: -6px; transform: translateY(-100%); font: 500 10px/1.2 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: 0; text-transform: none; background: #C8361F; color: #FFFFFF; padding: 3px 6px; white-space: nowrap; z-index: 20; pointer-events: none; }
.spec [data-gap] { background-image: repeating-linear-gradient(45deg, rgba(200, 54, 31, .07) 0 6px, transparent 6px 12px); }

@media (prefers-reduced-motion: reduce) {
  .pf .card, .pf .btn { transition: none; }
  .pf .card:hover, .pf .btn:hover { transform: none; }
}