/*
 * ververflow.com. Built only from brand/tokens.css; the reasoning is brand/README.md §Website: the ribbon
 * once, as a line over the head, the mark with the name in ink under it, and then paper, ink and grey; ink as a
 * surface only for the footer and the share image, where the mark glows. Square blocks, hairlines, two weights.
 *
 * The order of the page is Nick Saraev's (Maker School, Month 1 Day 12, "2. Create website"): a hero that says
 * what I do and what it brings, proof directly under it, the rest after; no form, every button the one link to
 * the calendar. The site speaks as one person (bin/site.py lint holds the words).
 */

:root { color-scheme: only light; }

*, *::before, *::after { box-sizing: border-box; }

/* What overscroll uncovers: paper above the header, ink below the footer. The canvas takes the paper, and an
   ink image runs from the top to twice the height, so the body's paper covers it and only past the footer does
   it show */
html {
  -webkit-text-size-adjust: 100%;
  background: linear-gradient(var(--surface-night), var(--surface-night)) top / 100% 200% no-repeat var(--surface-page);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-primary);
  background: var(--surface-page);
  font-variant-numeric: var(--numeric);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* A short page still ends on ink: the footer sits at the bottom of the window */
body:not(.og) { display: flex; flex-direction: column; min-height: 100svh; }
body:not(.og) > main { flex: 1; }

img, svg { display: block; max-width: 100%; height: auto; }

/* Links are ink with an underline; actions are ink on paper (brand/README.md §Website) */
a { color: var(--text-primary); text-decoration-thickness: var(--rule); text-underline-offset: 0.15em; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius); }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

h1 { font-size: clamp(var(--text-3xl), 1.6rem + 3vw, var(--text-5xl)); letter-spacing: var(--tracking-display); }
h2 { font-size: clamp(var(--text-2xl), 1.4rem + 1.4vw, var(--text-3xl)); }
h3 { font-size: var(--text-lg); line-height: var(--leading-snug); }

p, ul, ol, dl, dd, figure { margin: 0; }
p { text-wrap: pretty; }
p + p { margin-top: var(--space-4); }
strong { font-weight: var(--weight-semibold); }

@media (max-width: 40rem) {
  h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; }
}

/* ---------- layout ---------- */

.container { width: min(100% - 2 * var(--space-5), var(--content-max)); margin-inline: auto; }
.measure { max-width: var(--measure); }

/* A chapter: air above and below, a hairline between two chapters, so the page reads as one sheet in parts */
.section { padding-block: var(--space-8); }
.section + .section { border-top: var(--rule) solid var(--border-subtle); }
@media (min-width: 64rem) { .section { padding-block: var(--space-9); } }

.page-head { padding-block: var(--space-8) var(--space-6); }
.page-head .eyebrow { margin-bottom: var(--space-3); }
.page-head__action { margin-top: var(--space-6); padding-bottom: var(--space-8); }

.skip {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-page);
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}
.skip:focus { top: var(--space-4); }

/* ---------- words ---------- */

/* A label: small, in capitals, grey, as the document type on a quote */
.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.lede { font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--text-body-secondary); }

/* The head of a chapter: the label, then its title, then one line of grey */
.section__head { max-width: var(--measure); }
.section__head h2 { margin-top: var(--space-3); }
.section__head p { margin-top: var(--space-4); color: var(--text-body-secondary); }

/* ---------- actions ---------- */

/* Ink on paper, square but for 2px; size and weight make it the thing to press, not a colour */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-radius: var(--radius);
  background: var(--action);
  color: var(--text-inverse);
  font: inherit;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- header and footer ---------- */

/* The ribbon unrolled over the full width above the head: the letterhead of the documents, on a screen */
.site-header::before { content: ""; display: block; height: 3px; background: var(--ribbon); }
.site-header__row { display: flex; align-items: center; gap: var(--space-5); min-height: 4.5rem; }

.lockup {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
}
/* The mark is 20px tall; an invisible pseudo-element gives it --tap-min to tap, and moves nothing */
.lockup::before { content: ""; position: absolute; inset: calc(-1 * var(--space-3)) 0; }
.lockup img { height: 1.25rem; width: auto; }

/* The words of the menu and the one button, beside the lockup. On a phone they take a row of their own under
   it, smaller, so the name stays whole and the button is on every page's first screen, the legal pages and the
   404 included */
.site-header__row { flex-wrap: wrap; row-gap: var(--space-3); padding-top: var(--space-4); }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; width: 100%; gap: var(--space-2) var(--space-3); padding-bottom: var(--space-3); font-size: var(--text-sm); }
.site-nav a:not(.button) { position: relative; color: var(--text-primary); text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.site-nav a:not(.button)::before { content: ""; position: absolute; inset: calc(-1 * var(--space-3)) 0; }
.site-nav .button { margin-left: auto; padding: var(--space-2) var(--space-4); min-height: 2.5rem; }

@media (min-width: 40rem) {
  .lockup { font-size: var(--text-lg); }
  .site-header__row { flex-wrap: nowrap; padding-top: 0; }
  .site-nav { width: auto; margin-left: auto; gap: var(--space-5); padding-bottom: 0; font-size: var(--text-base); }
}

/* Ink: the one dark surface, where the mark glows (8,9:1 and 3,2:1) */
.site-footer {
  padding-block: var(--space-8) var(--space-7);
  background: var(--surface-night);
  font-size: var(--text-sm);
  color: var(--text-on-night);
}
.site-footer .lockup { color: var(--text-inverse); }
.site-footer__grid { display: grid; gap: var(--space-6); }
.site-footer__line { margin-top: var(--space-3); }
.site-footer__facts { display: grid; gap: var(--space-1); }
.site-footer__facts div { display: flex; gap: var(--space-3); }
.site-footer__facts dt { flex: none; width: 5rem; }
.site-footer__facts dd { color: var(--text-inverse); }
.site-footer__nav { display: grid; align-content: start; gap: var(--space-2); justify-items: start; }
.site-footer a { color: var(--text-inverse); }
/* Room to tap without changing the pitch: an inline link's padding paints outside the line, a grid item's
   padding is taken back by its margin */
.site-footer__facts a { padding-block: var(--space-1); }
.site-footer__nav a { padding-block: var(--space-2); margin-block: calc(-1 * var(--space-2)); }
.site-footer__note { grid-column: 1 / -1; padding-top: var(--space-5); border-top: var(--rule) solid color-mix(in srgb, var(--text-inverse) 15%, transparent); }

@media (min-width: 64rem) {
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; }
}

/* ---------- hero: what I do and what it brings, then the one button ---------- */

.hero { padding-block: var(--space-7) var(--space-8); }
.hero__grid { display: grid; gap: var(--space-7); align-items: center; }
.hero h1 { max-width: 13em; }
.hero__lede { max-width: 34rem; margin-top: var(--space-5); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--text-body-secondary); }
.hero__action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); margin-top: var(--space-6); }
.hero__note { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.hero__photo { width: 100%; max-width: 15rem; aspect-ratio: 4 / 5; object-fit: cover; }

@media (min-width: 40rem) {
  .hero__grid { grid-template-columns: 3fr 2fr; gap: var(--space-6); }
  .hero__photo { max-width: none; }
}

@media (min-width: 64rem) {
  .hero { padding-block: var(--space-9); }
  .hero__grid { grid-template-columns: 1.6fr 1fr; gap: var(--space-9); }
  .hero__photo { max-width: 22rem; justify-self: end; }
}

/* ---------- proof: results, as figures, anonymous (Nick: social proof directly under the hero) ---------- */

/* Rows under hairlines, as the tables of a quote: the figure in weight on the left, who and what on the right.
   Size makes the figure the thing to see, never a box or a colour */
.proof { list-style: none; padding: 0; margin-top: var(--space-6); border-top: var(--rule) solid var(--border-subtle); }
.proof li { display: grid; gap: var(--space-2) var(--space-7); padding-block: var(--space-5); border-bottom: var(--rule) solid var(--border-subtle); }
.proof__figure { font-size: var(--text-3xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
.proof__figure small { display: block; margin-top: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-regular); letter-spacing: 0; color: var(--text-secondary); }
.proof__who { font-weight: var(--weight-semibold); }
.proof__what { margin-top: var(--space-2); max-width: 40rem; color: var(--text-body-secondary); }
/* One testimonial in Dani's own section: quiet, a hairline on the left, no card */
.person__quote { margin-top: var(--space-5); padding-left: var(--space-4); border-left: var(--rule) solid var(--border-subtle); }
.person__quote blockquote { margin: 0; color: var(--text-body-secondary); }
.person__quote figcaption { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.proof__note { margin-top: var(--space-5); max-width: var(--measure); font-size: var(--text-sm); color: var(--text-secondary); }

@media (min-width: 40rem) {
  .proof li { grid-template-columns: 14rem 1fr; }
  .proof__figure { font-size: var(--text-4xl); }
}

/* ---------- how it works: numbered steps ---------- */

.steps { list-style: none; counter-reset: step; padding: 0; margin-top: var(--space-6); display: grid; gap: var(--space-5); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.5rem 1fr; align-content: start; gap: var(--space-3); }
.steps li::before { content: counter(step, decimal-leading-zero); font-size: var(--text-sm); color: var(--text-secondary); padding-top: 0.3em; }
.steps h3 { font-size: var(--text-lg); }
.steps p { grid-column: 2; margin-top: var(--space-1); max-width: 36rem; color: var(--text-body-secondary); }

@media (min-width: 64rem) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-7); }
  .steps li { grid-template-columns: 1fr; gap: var(--space-2); }
  .steps p { grid-column: auto; }
}

/* ---------- what I make: rows, the name on the left, one line on the right ---------- */

.offer { margin-top: var(--space-6); border-top: var(--rule) solid var(--border-subtle); }
.offer div { display: grid; gap: var(--space-1) var(--space-7); padding-block: var(--space-4); border-bottom: var(--rule) solid var(--border-subtle); }
.offer dt { font-weight: var(--weight-semibold); }
.offer dd { color: var(--text-body-secondary); max-width: 40rem; }

@media (min-width: 40rem) {
  .offer div { grid-template-columns: 11rem 1fr; }
}

/* ---------- the person ---------- */

.person { display: grid; gap: var(--space-7); align-items: start; }
.person__photo { display: none; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.person__text p:not(.eyebrow) { max-width: 36rem; margin-top: var(--space-4); color: var(--text-body-secondary); }
.person__text h2 { margin-top: var(--space-3); }
.person__text .person__first { margin-top: var(--space-5); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--text-primary); }

@media (min-width: 64rem) {
  .person { grid-template-columns: 1fr 1.4fr; gap: var(--space-9); }
  /* Beside the text only: on a narrower screen it would repeat the hero's photo */
  .person__photo { display: block; max-width: 22rem; }
}

/* ---------- the call: one question, one button ---------- */

.call__text { max-width: var(--measure); }
.call__text p { margin-top: var(--space-4); color: var(--text-body-secondary); }
.call__action { margin-top: var(--space-6); }

/* ---------- prose: the legal pages ---------- */

.prose { max-width: var(--measure); padding-bottom: var(--space-8); }
.prose h2 { margin: var(--space-7) 0 var(--space-3); font-size: var(--text-lg); }
.prose p, .prose ul, .prose ol { margin-bottom: var(--space-3); }
.prose p + p { margin-top: 0; }
.prose ul, .prose ol { padding-left: var(--space-5); }
.prose li + li { margin-top: var(--space-1); }
.prose table { display: block; overflow-x: auto; width: 100%; margin: var(--space-4) 0; border-collapse: collapse; font-size: var(--text-sm); scrollbar-width: thin; scrollbar-color: var(--border-input) transparent; }
.prose th, .prose td { padding: var(--space-2) var(--space-4) var(--space-2) 0; border-bottom: var(--rule) solid var(--border-subtle); text-align: left; vertical-align: top; }
.prose th { font-weight: var(--weight-semibold); border-bottom-color: var(--border-strong); }

/* ---------- states ---------- */

/* Hover only where a pointer can hover: on a touch screen the hover colour would stick after the tap */
@media (hover: hover) {
  a:hover { color: var(--action-hover); }
  .button:hover { background: var(--action-hover); color: var(--text-inverse); }
  .lockup:hover { color: var(--text-primary); }
  .site-footer a:hover { color: var(--text-on-night); }
}

.button:active { transform: scale(0.98); }

::selection { background: var(--surface-muted); }
.site-footer ::selection { background: var(--text-on-night); color: var(--surface-night); }

/* ---------- motion: the work lands, once, on arrival (brand/README.md §Vorm en ruimte) ----------
   Only transform and opacity, only without reduced motion, screens only: on paper an animation would print its
   first frame, and the first frame is hidden */
@media screen and (prefers-reduced-motion: no-preference) {
  a, .button { transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
  /* Smooth only after a click or a key: bare on html, a browser would also glide to /#werk on load */
  html:focus-within { scroll-behavior: smooth; }
  @keyframes rise { from { opacity: 0; transform: translateY(var(--space-3)); } }
  .hero h1, .hero__lede, .hero__action, .hero__photo { animation: rise var(--duration-slow) var(--ease-out) backwards; }
  .hero__lede { animation-delay: var(--stagger); }
  .hero__action { animation-delay: calc(2 * var(--stagger)); }
  .hero__photo { animation-delay: calc(3 * var(--stagger)); }
}

/* ---------- print: the legal pages are printed or kept as a PDF ---------- */

@media print {
  html, body { background: none; }
  body:not(.og) { display: block; min-height: 0; }
  .skip, .site-header, .site-footer, .hero__photo, .person__photo { display: none; }
  a { color: inherit; text-decoration: underline; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: var(--text-sm); }
  .prose h2, .prose h3 { break-after: avoid; }
  .prose h2 + p, .prose li, .prose tr { break-inside: avoid; }
  p { orphans: 3; widows: 3; }
  .prose table { display: table; overflow: visible; }
  .button { padding: 0; background: none; color: inherit; text-decoration: underline; }
  .button[href^="http"]::after { content: " (" attr(href) ")"; font-size: var(--text-sm); font-weight: var(--weight-regular); }
}

/* ---------- the share image (rendered once through Chrome, never served as a page) ---------- */

/* Ink, with the ribbon as its top line and the mark glowing beside the name: the footer as a card */
.og { position: relative; width: 1200px; height: 630px; margin: 0; overflow: hidden; background: var(--surface-night); color: var(--text-inverse); }
.og::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: var(--ribbon); }
.og__card { display: grid; grid-template-columns: 1fr 22rem; gap: var(--space-8); height: 100%; padding: var(--space-8); }
.og__text { display: flex; flex-direction: column; justify-content: space-between; }
.og__lockup { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.og__lockup img { height: 2.25rem; width: auto; }
.og__title { font-size: var(--text-5xl); letter-spacing: var(--tracking-display); }
.og__title + p { margin-top: var(--space-5); font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--text-on-night); }
.og__eyebrow { font-size: var(--text-lg); color: var(--text-on-night); }
.og__photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
/* The share image is one still: whatever animates on the page stands still here */
.og *, .og *::before, .og *::after { animation: none; transition: none; }