/* Digitalgarage: the content pages (projects, contact, legal, Veveyse, site vitrine) in the home page's system.
   The kit sits in a cascade layer, so a page's own stylesheet (vitrine.css) always wins over it; this file holds
   the content pages' layout on the kit's tokens. */
@import url("../assets/system.css") layer(kit);
@import url("../assets/motion/motion.css") layer(kit);
@import url("shared.css?v=3");

/* the kit sizes landing sections to the screen; a content page's blocks are as tall as what they hold */
@layer kit-reset {
  main > :is(section, .section), footer.closing { height: auto; min-height: 0; padding: 0; }
  footer.closing { padding: var(--s-9) 0 calc(var(--s-7) + var(--bar)); }
  footer.closing > .wrap { height: auto; }
}

/* ---------- page frame ---------- */
body.page main.container { width: min(100% - 2 * var(--gut), 1280px); max-width: none; margin-inline: auto; padding: calc(var(--nav) + var(--s-8)) 0 var(--s-9); }
body.page main a:not(.btn):not(.nav__link):not(.menu-card):not([class*="nav__"]) { color: var(--action); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.page main a:not(.btn):hover { text-decoration-thickness: 2px; }
body.page p { margin: 0 0 1em; }
body.page strong { font-weight: 500; }

/* ---------- head of a page ---------- */
body.page .page-head { display: grid; gap: var(--s-4); max-width: 900px; padding: 0 0 var(--s-8); text-align: left; }
body.page .page-head .display, body.page .legal h1 { font: var(--display-weight) var(--t-h1)/1.04 var(--font-display); letter-spacing: var(--display-tracking-xl); margin: 0; text-wrap: balance; hyphens: manual; }
body.page .page-head .subtitle { font: 400 var(--t-lead)/1.45 var(--font-text); color: var(--muted); margin: 0; }
body.page .page-head .lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink); font-style: normal; max-width: 62ch; margin: 0; }
body.page .page-head p { margin: 0; }

/* ---------- article ---------- */
body.page .article { padding-bottom: var(--s-8); }
body.page .article > * { max-width: 720px; margin-left: 0; margin-right: auto; }
body.page .article p, body.page .article li { font-size: 18px; line-height: 1.65; }
body.page .article .title, body.page .section-title, body.page .h-32 { font: var(--display-weight) var(--t-h3)/1.2 var(--font-display); letter-spacing: var(--display-tracking); margin: var(--s-8) 0 var(--s-4); }
body.page .article .title:first-child { margin-top: 0; }
body.page .eyebrow, body.page .eyebrow-sm { font: 500 var(--t-label)/1.3 var(--font-text); letter-spacing: 0; text-transform: none; color: var(--muted); margin: var(--s-7) 0 var(--s-3); }
body.page .kicker { font: 500 var(--t-small)/1.3 var(--font-text); color: var(--muted); }
body.page .article ul, body.page .article ol { padding-left: 1.2em; margin: 0 0 1em; list-style: disc outside; }
body.page .article ol { list-style-type: decimal; }
body.page .article li { list-style: inherit; }
body.page .article li { margin-bottom: var(--s-2); }
body.page .article li::marker { color: var(--accent); }
body.page .big-split { font: var(--display-weight) var(--t-h2)/1.1 var(--font-display); letter-spacing: var(--display-tracking); text-align: left; color: var(--ink); margin: 0 0 var(--s-6); max-width: 900px; }
body.page .big-split span { display: block; color: var(--muted); }
body.page .split-head { padding: var(--s-9) 0 0; }
body.page .center { text-align: left; }

/* ---------- figures ---------- */
body.page .figure { margin: var(--s-8) 0; max-width: none; }
body.page .figure.wide { max-width: 1058px; }
body.page .figure.full { max-width: none; }
body.page .figure img { width: 100%; height: auto; border-radius: var(--r-lg); background: #fff; }
body.page .figure a { display: block; border-radius: var(--r-lg); overflow: hidden; }
body.page .figure a img { transition: transform 600ms var(--ease); }
body.page .figure a:hover img { transform: scale(1.02); }

/* ---------- calls to action ---------- */
body.page .btn:not(.btn--primary):not(.btn--secondary), body.page .figma-link {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 44px; padding: 0 var(--s-5);
  border-radius: var(--r-btn); background: var(--action); color: var(--action-ink); font: 500 var(--t-body)/1 var(--font-text); text-decoration: none !important;
  transition: transform 160ms var(--ease), background-color 160ms var(--ease);
}
body.page .btn:not(.btn--primary):not(.btn--secondary):hover, body.page .figma-link:hover { transform: translateY(-1px); background: color-mix(in oklab, var(--action) 88%, black); }
body.page .btn:not(.btn--primary):not(.btn--secondary):active, body.page .figma-link:active { transform: translateY(1px); }
body.page .figma-link svg { width: 20px; height: 20px; }
body.page .cta-box { background: var(--p-inv-bg); color: var(--p-inv-ink); border-radius: var(--r-lg); text-align: left; padding: var(--s-8); margin: var(--s-9) 0; max-width: none !important; display: grid; gap: var(--s-4); justify-items: start; }
body.page .cta-box .section-title { margin: 0; color: var(--p-inv-ink); font-size: var(--t-h2); line-height: 1.1; max-width: 22ch; }
body.page .cta-box .lead, body.page .cta-box .note { color: var(--p-inv-ink); margin: 0; }
body.page .cta-box .btn { background: var(--p-inv-action) !important; color: var(--p-inv-action-ink) !important; }
body.page .more { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); font-weight: 500; }
body.page .more svg { width: 18px; height: 18px; flex: none; }

/* ---------- quote and back link ---------- */
body.page main > section.quote, body.page .quote { text-align: left; padding: var(--s-9) 0 var(--s-8); border-top: 1px solid var(--line); margin-top: var(--s-8); }
body.page .quote blockquote { margin: 0 0 var(--s-5); max-width: 28ch; font: var(--display-weight) var(--t-h2)/1.18 var(--font-display); letter-spacing: var(--display-tracking); font-style: normal; color: var(--ink); }
body.page .quote cite { font: 400 var(--t-small)/1.4 var(--font-text); font-style: normal; color: var(--muted); }
body.page .back { display: flex; padding: var(--s-6) 0 0; }
body.page .back a { display: grid !important; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--ink) !important; text-decoration: none !important; transition: background-color 160ms var(--ease), transform 160ms var(--ease); }
body.page .back a:hover { background: var(--surface); transform: translateX(-2px); }
body.page .back svg { width: 20px; height: 20px; }

/* ---------- skills and projects (Veveyse page) ---------- */
body.page .skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); padding: 0 0 var(--s-9); }
body.page .skill { background: var(--surface); border-radius: var(--r-lg); padding: var(--s-6); min-height: 0; display: grid; gap: var(--s-3); align-content: start; }
body.page .skill h2, body.page .skill h3 { font: 500 var(--t-card)/1.3 var(--font-text); margin: 0; }
body.page .skill p { margin: 0; line-height: 1.6; }
body.page .project { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); align-items: start; padding: var(--s-8) 0; }
body.page .project .body { grid-column: 1 / span 5; padding: 0; }
body.page .project .media { grid-column: 7 / -1; display: block; border-radius: var(--r-lg); overflow: hidden; background: #fff; }
body.page .project .media img { width: 100%; transition: transform 600ms var(--ease); }
body.page .project .media:hover img { transform: scale(1.02); }

/* ---------- contact ---------- */
body.page .contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); align-items: start; max-width: none; margin: 0 0 var(--s-9); }
body.page .contact-grid > img { grid-column: 1 / span 6; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); }
body.page .contact-grid > div { grid-column: 8 / -1; font-size: 18px; line-height: 1.6; }
body.page .contact-grid .who { font: var(--display-weight) var(--t-h3)/1.2 var(--font-display); text-transform: none; margin: var(--s-6) 0 var(--s-3); }
body.page .contact-grid .links a { display: block; width: fit-content; font: var(--display-weight) var(--t-card)/1.6 var(--font-display); }
body.page .contact-grid .icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: var(--s-4) var(--s-2) 0 0; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--ink) !important; text-decoration: none !important; transition: background-color 160ms var(--ease), transform 160ms var(--ease); }
body.page .contact-grid .icon-btn:hover { background: var(--surface); transform: translateY(-2px); }
body.page .contact-grid .icon-btn svg { width: 20px; height: 20px; }

/* ---------- legal pages ---------- */
body.page .legal { padding-top: 0; }
body.page .legal h2 { font: var(--display-weight) var(--t-h3)/1.2 var(--font-display); letter-spacing: var(--display-tracking); margin: var(--s-8) 0 var(--s-3); }
body.page .legal .muted { color: var(--muted); margin-bottom: var(--s-6); }

/* ---------- phones and tablets ---------- */
@media (max-width: 1023px) {
  body.page .skills { grid-template-columns: 1fr; }
  body.page .project .body, body.page .project .media, body.page .contact-grid > img, body.page .contact-grid > div { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  body.page main.container { padding-top: calc(var(--nav) + var(--s-7)); }
  body.page .article p, body.page .article li, body.page .contact-grid > div { font-size: 17px; }
  body.page .cta-box { padding: var(--s-6); }
}

/* between pages: the same soft fade as the home page (css/home-motion.css) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: hm-page-out 240ms cubic-bezier(.2, .8, .2, 1) both; }
  ::view-transition-new(root) { animation: hm-page-in 520ms cubic-bezier(.22, 1, .36, 1) both; }
}
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
@keyframes hm-page-out { to { opacity: 0; } }
@keyframes hm-page-in { from { opacity: 0; translate: 0 16px; } }