/* ═══════════════════════════════════════════════════════════════
   Hobby Concept — custom layer
   Only what Tailwind can't express: texture, the card-geometry
   devices, and motion. Everything else is utility classes.
   Design tokens are documented in DESIGN.md.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ink-950:   #12100E;
  --parch-200: #E8DCC8;
  --brass-500: #C9A227;

  --rail-white: #F4EBD0;
  --rail-blue:  #4A87C4;
  --rail-black: #8A7A9B;
  --rail-red:   #C4553D;
  --rail-green: #5C8A5A;

  --hairline: rgba(232, 220, 200, 0.14);
  --tick:     rgba(201, 162, 39, 0.55);
}

/* ── Paper grain ────────────────────────────────────────────────
   A single fixed turbulence overlay across the whole page. This is
   the one thing keeping a #12100E ground from reading as flat
   digital black. Inline SVG, so it costs no request. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Warm pool of light behind the hero, as if one lamp is on. */
.lamplight {
  background-image:
    radial-gradient(70% 55% at 50% 0%, rgba(201, 162, 39, 0.13) 0%, rgba(201, 162, 39, 0) 68%),
    radial-gradient(45% 40% at 82% 22%, rgba(74, 135, 196, 0.07) 0%, rgba(74, 135, 196, 0) 70%);
}

/* ── Corner ticks ───────────────────────────────────────────────
   Two opposing corners, not four. Replaces the rounded-card-with-
   drop-shadow default; reads as a mounted plate rather than a UI card. */
.tick-frame { position: relative; }
.tick-frame::before,
.tick-frame::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  border: 0 solid var(--tick);
  transition: width 0.3s ease, height 0.3s ease;
}
.tick-frame::before { top: -1px;    left: -1px;  border-top-width: 1px;    border-left-width: 1px; }
.tick-frame::after  { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
.tick-frame:hover::before,
.tick-frame:hover::after { width: 26px; height: 26px; }

/* ── Type line ──────────────────────────────────────────────────
   The card's type line says what a thing IS. Used as the section
   divider so the rule carries the category instead of decorating it. */
.type-line {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-500);
}
.type-line::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(to right, var(--tick), rgba(201, 162, 39, 0.06));
}
.type-line--center::before {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(to left, var(--tick), rgba(201, 162, 39, 0.06));
}

/* ── Nine-pocket binder page ────────────────────────────────────
   The signature. Real 9-pocket pages have a punched strip on the
   left and often empty slots — both are kept, because the empty
   pockets are what make it read as a real page rather than a grid. */
.binder {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 0.75rem 0.75rem 0.75rem 1.9rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--hairline);
}
@media (min-width: 768px) {
  .binder { gap: 0.9rem; padding: 1.25rem 1.25rem 1.25rem 2.75rem; }
}
/* Punched holes. repeating-linear-gradient keeps it to one element. */
.binder::before {
  content: '';
  position: absolute;
  top: 0.75rem;
  bottom: 0.75rem;
  left: 0.7rem;
  width: 10px;
  background-image: radial-gradient(circle at 50% 50%,
      rgba(0, 0, 0, 0.85) 0 3.2px,
      rgba(232, 220, 200, 0.16) 3.2px 4.1px,
      transparent 4.2px);
  background-size: 10px 9.09%;
  background-repeat: repeat-y;
}
@media (min-width: 768px) { .binder::before { left: 1.1rem; } }

.pocket {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 5 / 7;
  padding: 0.5rem;
  border: 1px solid rgba(232, 220, 200, 0.10);
  /* The sheen of a polypropylene sleeve, angled like a real page. */
  background-image: linear-gradient(155deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 42%);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
@media (min-width: 768px) { .pocket { padding: 0.85rem; } }
a.pocket:hover,
a.pocket:focus-visible {
  border-color: rgba(201, 162, 39, 0.45);
  background-color: rgba(201, 162, 39, 0.05);
  transform: translateY(-2px);
}
.pocket--empty { background-image: none; border-style: dashed; border-color: rgba(232, 220, 200, 0.06); }

/* Colour identity rail. Set --rail inline per element. */
.rail { border-left: 2px solid var(--rail, var(--brass-500)); }
.rail-top { border-top: 2px solid var(--rail, var(--brass-500)); }

/* ── Long-form reading ──────────────────────────────────────────
   The pillars are the product; this is where the care goes. */
.prose-arcane { max-width: 68ch; }
.prose-arcane p { margin-bottom: 1.15em; line-height: 1.75; }
.prose-arcane > p:first-of-type::first-letter {
  float: left;
  font-family: Cinzel, Georgia, serif;
  font-size: 3.4em;
  line-height: 0.84;
  padding: 0.06em 0.12em 0 0;
  color: var(--brass-500);
}
.prose-arcane a { color: var(--brass-500); text-underline-offset: 3px; text-decoration-line: underline; }
.prose-arcane a:hover { color: #E4C75C; }

/* ── Nav underline draw ─────────────────────────────────────────
   Affordance visible at rest via colour; the rule confirms on hover. */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: var(--brass-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
}
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* ── Focus ──────────────────────────────────────────────────────
   Never removed, always brass, always offset clear of the glyphs. */
:focus-visible {
  outline: 2px solid var(--brass-500);
  outline-offset: 3px;
}

::selection { background: rgba(201, 162, 39, 0.28); color: #FAF6EF; }

/* ── Page-load sequence ─────────────────────────────────────────
   One orchestrated moment on the hero, then the page is still.
   No scroll-triggered reveals anywhere on the site. */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes drawdown {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.rise { animation: rise 0.85s cubic-bezier(0.16, 1, 0.3, 1) both; }
.rise-1 { animation-delay: 0.05s; }
.rise-2 { animation-delay: 0.18s; }
.rise-3 { animation-delay: 0.31s; }
.rise-4 { animation-delay: 0.44s; }
.draw { transform-origin: top; animation: drawdown 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .tick-frame:hover::before, .tick-frame:hover::after { width: 15px; height: 15px; }
  a.pocket:hover { transform: none; }
}

/* Skip link — first focusable element on every page. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--brass-500);
  color: var(--ink-950);
  font-weight: 600;
}

/* Horizontal companion to .draw, for the hero's five-colour rule. */
@keyframes drawright { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.draw-x { transform-origin: left; animation: drawright 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }