/* Page layout only. Paint comes from design-language.css; values come from its tokens. */

:root { --site-width: calc(65ch + 2 * var(--grimoire-space-field)); }
/* Desktop: the column is as wide as the text in it, so the page stays balanced on its centre line. */
@media (min-width: 1024px) { :root { --site-width: var(--grimoire-measure-shellPage); } }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }

/* Links: always underlined, so they read as links. External ones carry an arrow. */
a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--grimoire-boundary-strong);
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--grimoire-motion-base), color var(--grimoire-motion-base);
}
a:hover { color: var(--grimoire-charge-text); text-decoration-color: var(--grimoire-charge-text); }
a:focus-visible { outline: 1px solid var(--grimoire-charge); outline-offset: 3px; }
a[href^="http"]::after {
  content: "\2197";
  display: inline-block;
  margin-inline-start: 0.2em;
  font-size: 0.7em;
  color: var(--grimoire-charge-text);
  text-decoration: none;
  transform: translateY(-0.35em);
}

/* Bar */
.site-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--grimoire-surface-base);
  border-block-end: 0.5px solid var(--grimoire-boundary-base);
}
.site-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--grimoire-space-field);
  max-width: var(--site-width);
  margin-inline: auto;
  padding: var(--grimoire-space-chord) var(--grimoire-space-field);
  box-sizing: border-box;
}
.site-bar__name {
  font-family: var(--grimoire-font-myth);
  font-weight: 400;
  font-size: var(--grimoire-type-heading-size);
  text-decoration: none;
  color: var(--grimoire-ink-base);
}
.site-nav { display: flex; gap: var(--grimoire-space-field); }
.site-nav a {
  font-family: var(--grimoire-font-myth);
  font-size: var(--grimoire-type-marginalia-size);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grimoire-ink-ghost);
  text-decoration: none;
  min-height: var(--grimoire-space-touch);
  display: inline-flex;
  align-items: center;
}
.site-nav a:hover { color: var(--grimoire-ink-base); }

/* Column */
.site {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  max-width: var(--site-width);
  margin-inline: auto;
  padding: 0 var(--grimoire-space-field) var(--grimoire-space-ground);
}

/* Hero */
.site-hero { padding-block: calc(var(--grimoire-space-ground) * 1.5) var(--grimoire-space-ground); }
.site-hero__name {
  font-family: var(--grimoire-font-myth);
  font-size: var(--grimoire-type-epigraph-size);
  font-weight: var(--grimoire-type-epigraph-weight);
  line-height: var(--grimoire-type-epigraph-line-height);
  margin: var(--grimoire-space-breath) 0 var(--grimoire-space-field);
}
.site-hero__line {
  font-family: var(--grimoire-font-myth);
  font-size: var(--grimoire-type-manifestation-size);
  font-weight: var(--grimoire-type-manifestation-weight);
  line-height: var(--grimoire-type-manifestation-line-height);
  color: var(--grimoire-ink-secondary);
  margin: 0;
  max-width: var(--grimoire-measure-altar);
}

/* Sections */
.site-section { padding-block: var(--grimoire-space-vessel); scroll-margin-top: 64px; }
.site-section .grimoire-section-label { margin-block-start: 0; }

/* Projects */
.site-project + .site-project { margin-block-start: var(--grimoire-space-field); }
.site-project__title {
  font-family: var(--grimoire-font-myth);
  font-size: var(--grimoire-type-manifestation-size);
  font-weight: var(--grimoire-type-manifestation-weight);
  line-height: 1.2;
  margin: 0;
}
.site-project__body {
  font-size: var(--grimoire-type-read-size);
  line-height: var(--grimoire-type-read-line-height);
  color: var(--grimoire-ink-secondary);
  margin: var(--grimoire-space-chord) 0 0;
}

/* Contact */
.site-contact__line {
  font-size: var(--grimoire-type-read-size);
  line-height: var(--grimoire-type-read-line-height);
  margin: 0 0 var(--grimoire-space-field);
}
a.grimoire-charge { text-decoration: none; }
a.grimoire-charge::after { content: none; }
.site-links {
  list-style: none;
  padding: 0;
  margin: var(--grimoire-space-vessel) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--grimoire-space-vessel);
  font-size: var(--grimoire-type-read-size);
}

/* Footer */
.site-foot {
  border-block-start: 0.5px solid var(--grimoire-boundary-base);
  padding: var(--grimoire-space-field);
  text-align: center;
  font-family: var(--grimoire-font-myth);
  font-style: italic;
  font-size: var(--grimoire-type-caption-size);
  color: var(--grimoire-ink-ghost);
}
.site-foot p { margin: 0; }

/* Desktop: more air around the same single column. */
@media (min-width: 1024px) {
  .site { padding-inline: var(--grimoire-space-vessel); }
  .site-bar__inner { padding-inline: var(--grimoire-space-vessel); }

  .site-hero { padding-block: calc(var(--grimoire-space-ground) * 2) var(--grimoire-space-ground); }

  .site-section { padding-block: var(--grimoire-space-ground) 0; }
  .site-section:last-child { padding-block-end: var(--grimoire-space-ground); }
  .site-project + .site-project { margin-block-start: var(--grimoire-space-vessel); }
}

/* The arrival token already carries its easing; the package rule adds a second one, which voids the transition. */
.grimoire-reveal {
  transition: opacity var(--grimoire-motion-arrival), transform var(--grimoire-motion-arrival);
}
@media (prefers-reduced-motion: reduce) { .grimoire-reveal { transition: none; } }