/* home — the start page: an overview, and a page per project.
 *
 * The introduction is set in a serif that no project uses, on quiet paper,
 * so that what follows can be loud: each project gets a full page in its own
 * design language.
 *
 * This file holds what every start page shares. What belongs to one project —
 * its colour in the overview, its mark, its band — is in home/<project>.css,
 * which that project's section of content/landing.md links. A site that does
 * not show a project then carries none of its styles, and a branch that does
 * not hold it has no file naming it.
 *
 * With scripts, app.js shows one page at a time (html.home-views): the
 * introduction is the overview, picking a project shows only that project's
 * page, and its back link returns to the overview. Without scripts the same
 * pages simply scroll.
 */

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #eceef2;
  --fg: #121417;
  --muted: #5b616c;
  --border: #dde0e6;
  --accent: #121417;
  --link: #121417;
  --font-body: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Iowan Old Style", Georgia, serif;
  --font-ui: "Geist", system-ui, sans-serif;
  --font-head: var(--font-body);
  --body-size: 1.0625rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115;
    --surface: #161920;
    --surface-2: #1c2029;
    --fg: #eceef2;
    --muted: #9aa1ad;
    --border: #262a33;
    --accent: #eceef2;
    --link: #eceef2;
    color-scheme: dark;
  }
}

/* Plain pages on the home theme (the 404, the Impressum, the privacy notice). */
.prose > :not(.home) { max-width: min(40rem, calc(100% - 2 * var(--gutter))); margin-left: auto; margin-right: auto; }
.prose > :first-child:not(.home) { padding-top: 18vh; }
/* A page in another language wraps itself in <div lang>; its title still counts. */
.prose > h1:first-child, .prose > div:first-child:not(.home) > h1:first-child { font-size: clamp(2.5rem, 7vw, 4rem); letter-spacing: -0.03em; }
.prose > :last-child:not(.home) { padding-bottom: 14vh; }
.prose > h1 .anchor, .prose > div:not(.home) > h1 .anchor { display: none; }

/* ------------------------------------------------------------ introduction */

.intro {
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 3rem var(--gutter) 4rem;
}
.intro-inner { width: 100%; max-width: 62rem; margin: 0 auto; }

.prose .intro-title {
  margin: 0 0 1.75rem;
  font-size: clamp(3.2rem, 11vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-weight: 700;
}
.intro-lede {
  max-width: 38rem; margin: 0 0 1.25rem;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.5;
}
.intro-more { max-width: 38rem; margin: 0 0 3rem; color: var(--muted); font-size: 1.0625rem; }
/* The one link out of the overview: quiet, but it underlines like a link. */
.intro-about { color: var(--fg); text-decoration: none; white-space: nowrap; box-shadow: inset 0 -1px 0 var(--border); }
.intro-about::after { content: "\00a0\2192"; }
.intro-about:hover, .intro-about:focus-visible { box-shadow: inset 0 -1px 0 currentColor; }

.intro-links ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); max-width: 38rem; }
.intro-links li { margin: 0; border-bottom: 1px solid var(--border); }
.il {
  display: grid; grid-template-columns: 9.5rem 1fr; align-items: baseline; gap: 0.25rem 1.25rem;
  padding: 0.9rem 0 0.9rem 1rem; color: var(--fg); text-decoration: none; position: relative;
}
.il::before { content: ""; position: absolute; left: 0; top: 0.9rem; bottom: 0.9rem; width: 3px; border-radius: 2px; background: var(--il); transition: width 160ms; }
.il:hover::before, .il:focus-visible::before { width: 6px; }
.il:hover .il-desc { color: var(--fg); }
.il-name { font-size: 1.2rem; line-height: 1.2; }
.il-desc { font-family: var(--font-ui); font-size: 0.9rem; color: var(--muted); transition: color 160ms; }
/* Project marks beside the names: the box is shared, the mark and its colour
   are each project's own. */
.il-name::before, .band-name::before {
  content: ""; display: inline-block; width: 1.24em; height: 1.24em; margin-right: 0.3em;
  vertical-align: -0.12em; background: center / contain no-repeat;
}
@media (max-width: 36rem) { .il { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ bands */

.sheet { min-height: 100svh; }
.intro { background: var(--bg); }
.band { position: relative; overflow: hidden; }
.band-inner {
  max-width: 76rem; margin: 0 auto;
  min-height: 100svh;
  padding: clamp(5rem, 12vh, 8rem) var(--gutter);
  display: grid; align-items: center; gap: 3rem;
}
@media (min-width: 60rem) {
  .band-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 4.5rem; }
  .band:nth-of-type(even) .band-text { order: 2; }
}
.band-text { max-width: 30rem; }
.band p { margin: 0; }
.band-name { font-size: clamp(2.8rem, 7vw, 4.6rem); line-height: 1; margin-bottom: 1.1rem !important; }
.band-pitch { font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.4; margin-bottom: 1.4rem !important; }
.band-facts { margin: 0 0 2rem; padding: 0; list-style: none; }
.band-facts li { padding: 0.55rem 0; border-top: 1px solid var(--band-line); }
.band-facts li:last-child { border-bottom: 1px solid var(--band-line); }
.band-links { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.band-links a { text-decoration: none; padding: 0.6rem 1rem; border: 1px solid var(--band-line); color: inherit; }
.band-links a:first-child { background: var(--band-accent); border-color: var(--band-accent); color: var(--band-on-accent); }
.band-links a:hover { text-decoration: none; filter: brightness(1.08); }
.band-visual { min-width: 0; }

/* ------------------------------------------------------------------ views */

/* Before app.js picks the page to show, show only the overview, so a project
   page does not flash below it. Without scripts the pages stay one scrolling
   document, and each back link jumps to the top. */
.js:not(.home-ready) .home > .sheet + .sheet { display: none; }
/* `hidden` has to beat the introduction's own display: grid. */
.home > .sheet[hidden] { display: none; }
.home-views .sheet { outline: none; }
.home-views .sheet.is-entering { animation: home-view-in 320ms cubic-bezier(.2,.8,.2,1); }
@keyframes home-view-in { from { opacity: 0; transform: translateY(0.75rem); } }
@media (prefers-reduced-motion: reduce) {
  .home-views .sheet.is-entering { animation: none; }
}

/* Back to the overview, in the project page's top corner, aligned with its
   text and drawn in the project's own lines and accent. */
.back-link {
  position: absolute; z-index: 1;
  top: clamp(0.75rem, 3vh, 1.75rem);
  left: max(var(--gutter), calc((100% - 76rem) / 2 + var(--gutter)));
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0 1.1rem 0 0.9rem;
  border: 1px solid var(--band-line); border-radius: 999px;
  color: inherit; text-decoration: none;
  font: 500 0.875rem/1 "Geist", system-ui, sans-serif;
  transition: background-color 160ms, border-color 160ms;
}
.back-link::before { content: "\2190"; font-size: 1.15em; transition: transform 160ms; }
.back-link:hover { text-decoration: none; border-color: var(--band-accent); background: color-mix(in oklab, var(--band-accent) 12%, transparent); }
/* No pill and no arrow: the way back is the plain word, in the band's own
   text colour, underlined when pointed at. */
.back-link, .back-link:hover { border: 0; border-radius: 0; background: none; padding: 0; }
.back-link::before { content: none; }
.back-link:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.back-link:hover::before { transform: translateX(-2px); }
.back-link:focus-visible { outline: 2px solid var(--band-accent); outline-offset: 2px; }

/* ------------------------------------------------------------ animations */

/* vaelum.dev: the overview list and back link, as in the prototype.
   Append to themes/home.css. Each project's colour is --il, which
   home/<project>.css already sets on its .il-<project> link. */

/* Rows: a darker panel per row (so it sweeps in with the row during the page
   turn), quietly alternating. */
.intro-links ul { border-top: 0; }
.intro-links li { border-bottom: 0; }
.il {
  border-top: 1px solid var(--border);
  background-color: rgb(6 7 10 / 0.6);
  background-image: linear-gradient(var(--il), var(--il));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition:
    background-size 600ms cubic-bezier(.2, .7, .1, 1),
    background-color 450ms ease,
    opacity 450ms ease,
    filter 450ms ease,
    padding 450ms cubic-bezier(.2, .7, .1, 1);
}
.intro-links li:nth-child(odd) .il { background-color: rgb(17 19 23 / 0.62); }
/* The closing rule is its own element, so it sweeps with the rows. */
.rule-end { height: 1px; background: var(--border); }
/* Under the list, as wide as the list, not the whole introduction. */
.intro-links .rule-end { max-width: 38rem; }

/* Hovering one row: it turns solid in its project's tint, the rest grey out. */
.intro-links ul:has(.il:hover, .il:focus-visible) .il {
  background-color: rgb(6 7 10 / 0.6);
  opacity: 0.38;
  filter: grayscale(1);
}
/* As specific as the rule above, and later, so the hovered row is not greyed with the rest. */
.intro-links ul:has(.il:hover, .il:focus-visible) .il:is(:hover, :focus-visible) {
  background-color: color-mix(in srgb, var(--il) 16%, var(--bg));
  background-size: 100% 1px;
  padding-left: 1.4rem;
  opacity: 1;
  filter: none;
}
.il:focus-visible { outline: 2px solid var(--il); outline-offset: 2px; }

/* "its users." always starts the second line of the lede. */
.intro-lede .nowrap { white-space: nowrap; }

.back-link {
  transition: gap 400ms cubic-bezier(.2, .7, .1, 1), background-color 160ms, border-color 160ms;
}
.back-link:hover,
.back-link:focus-visible { gap: 1rem; }

/* app.js sets these while a transition runs. */
.home-views .home { position: relative; }
/* Opaque while a page turns. A band paints its own background; --bg here would
   cover it, and in a light window leave its light text on light paper. */
.home-views .sheet:not(.band) { background: var(--bg); }

/* No marks in the overview list; the rows carry the project colour instead. */
.il-name::before { display: none; }
.il { grid-template-columns: 9.5rem 1fr; padding-left: 1rem; }
.il::before { display: none; }

/* The facts' closing rule sweeps with the text too. */
.band-facts { margin-bottom: 0; }
.band-facts li:last-child { border-bottom: 0; }
.band .rule-end { background: var(--band-line); margin-bottom: 2rem; }

/* A screen shorter than 900px: the spacing, the title and the rows shrink
   with its height, so the overview and the project pages fit above its
   bottom edge. At 900px and taller everything above holds unchanged. */
@media (max-height: 56.24rem) {
  .intro { padding-top: clamp(1rem, 4vh, 3rem); padding-bottom: max(clamp(1rem, 5vh, 4rem), var(--footer-room)); }
  .prose .intro-title { margin-bottom: clamp(0.75rem, 2.5vh, 1.75rem); font-size: clamp(2.6rem, min(11vw, 13vh), 7.5rem); }
  .intro-more { margin-bottom: clamp(1rem, 4vh, 3rem); }
  .il { padding-top: clamp(0.45rem, 1.3vh, 0.9rem); padding-bottom: clamp(0.45rem, 1.3vh, 0.9rem); }
  .band-inner { padding-bottom: max(clamp(2rem, 8vh, 8rem), var(--footer-room)); }
}

/* The page turn (app.js, home-transitions.js) stays inside the screen: what
   reaches past the start page is cut off, and the page shows no scrollbars
   until the turn is over. */
.home-views .home { overflow: clip; }
html.home-turning, html.home-turning body { overflow: hidden; }

/* A landscape window wide enough for two columns: the introduction on the
   left and the project list beside it on the right, as wide as a project
   page and centred against each other. Portrait windows and phones keep the
   list below the text. */
@media (min-width: 60rem) and (orientation: landscape) {
  .intro-inner {
    max-width: 76rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 34rem);
    grid-template-areas: "title list" "lede list" "more list";
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  .intro-title { grid-area: title; }
  .intro-lede { grid-area: lede; }
  .intro-more { grid-area: more; margin-bottom: 0; }
  .intro-links { grid-area: list; align-self: center; }
  .intro-links ul, .intro-links .rule-end { max-width: none; }
  /* One line in the left column, and small enough for a short screen. */
  .prose .intro-title { font-size: clamp(3.2rem, min(5.6vw, 13vh), 6.5rem); white-space: nowrap; }
}