/* ============================================================
   Pikuto — site.css
   Base styles, tokens, typography, and interaction hovers.
   Fonts live in /fonts (loaded from _fonts.css via @import).
   ============================================================ */

@import url("_fonts.css");

/* --- Reset & base --- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: oklch(94% 0.008 358);
  font-family: Geist, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: oklch(19% 0.014 358);
}
a { color: inherit; text-decoration: none; transition: color 160ms ease; }
a:hover { color: oklch(52% 0.190 358); }
img, svg { display: block; max-width: 100%; }
p, h1, h2, h3, h4 { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }

/* --- Motion primitives --- */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.riz { animation: rise 700ms cubic-bezier(.22,.61,.36,1) both; }

/* Scroll-reveal (progressive enhancement — JS toggles .is-in) */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 700ms cubic-bezier(.22,.61,.36,1), transform 700ms cubic-bezier(.22,.61,.36,1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .riz, .reveal { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* --- Hover utilities (extracted from style-hover attrs) --- */
.hv-1:hover { background: oklch(52% 0.190 358); color: oklch(98% 0.006 358); }
.hv-2:hover { background: oklch(52% 0.190 358); }
.hv-3:hover { border-color: oklch(19% 0.014 358); }
.hv-4:hover { border-color: oklch(52% 0.190 358); }
.hv-5:hover { background: oklch(46% 0.185 358); }
.hv-6:hover { border-color: oklch(52% 0.190 358); color: oklch(52% 0.190 358); }
.hv-cta:hover { background: oklch(52% 0.190 358); color: oklch(98% 0.006 358); }

/* Card lift for figure hovers */
figure { transition: transform 240ms ease, border-color 180ms ease; }
figure:hover { transform: translateY(-2px); }

/* --- Responsive tweaks --- */
@media (max-width: 860px) {
  nav > div { gap: 16px !important; }
  nav a:not(.hv-cta) { display: none; }
  nav a[href*="portfolio"], nav a[href*="journal"] { display: inline-flex; }
  header > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  section > div[style*="grid-template-columns:minmax(0,1.35fr)"],
  section > div[style*="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"],
  section > div[style*="grid-template-columns:minmax(0,.8fr)"],
  section > div[style*="grid-template-columns:minmax(0,1.15fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* --- Additional hover classes --- */
.hv-7:hover { border-color: oklch(52% 0.190 358); transform: translateY(-3px); }

/* --- Portfolio grid reflow (3 → 2 → 1) --- */
@media (max-width: 980px) {
  #portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 620px) {
  #portfolio-grid { grid-template-columns: 1fr !important; }
}

/* --- Additional hover classes --- */
.hv-7:hover { border-color: oklch(52% 0.190 358); transform: translateY(-3px); }

/* --- Portfolio grid reflow (3 → 2 → 1) --- */
@media (max-width: 980px) {
  #portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 620px) {
  #portfolio-grid { grid-template-columns: 1fr !important; }
}

/* --- Additional hover classes --- */
.hv-7:hover { border-color: oklch(52% 0.190 358); transform: translateY(-3px); }

/* --- Portfolio grid reflow (3 → 2 → 1) --- */
@media (max-width: 980px) {
  #portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 620px) {
  #portfolio-grid { grid-template-columns: 1fr !important; }
}