/* someto.de landing page. Loaded only on the home page (custom/header.tmpl).
   Colours come from the --rp-* palette defined by the Rosé Pine themes; the
   fonts are declared in rosepine-common.css. */

/* Accent drift: --sh-t runs from 0 at the top of the page to 1 at the bottom,
   and the accent walks the theme's three drift stops along it, mixed in
   OKLCH so it stays a clean hue between the stops. Everything on the page
   that uses --rp-accent follows. Without scroll timelines --sh-t stays 0. */
@property --sh-t { syntax: "<number>"; inherits: true; initial-value: 0; }
@keyframes sh-drift { to { --sh-t: 1; } }

.someto-home {
  --sh-display: "Spectral", "Iowan Old Style", Georgia, serif;
  --sh-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --sh-ease: cubic-bezier(.3, .7, .2, 1);
  --sh-radius: 6px;
  /* The theme's own accent, kept as the fallback for the drift stops: theme
     files are cached for 6 hours, so right after a deploy a browser can
     still hold one without them. */
  --sh-theme-accent: var(--rp-accent);
  color: var(--rp-text);
  font-size: 15px;
  line-height: 1.55;
}
/* One level down, because --rp-accent can't be redefined from itself. */
.someto-home .sh-page {
  --sh-leg-1: clamp(0%, calc(var(--sh-t) * 200%), 100%);
  --sh-leg-2: clamp(0%, calc(var(--sh-t) * 200% - 100%), 100%);
  --rp-accent: color-mix(in oklch,
    color-mix(in oklch, var(--rp-drift-1, var(--sh-theme-accent)), var(--rp-drift-2, var(--sh-theme-accent)) var(--sh-leg-1)),
    var(--rp-drift-3, var(--sh-theme-accent)) var(--sh-leg-2));
  --rp-accent-text: var(--rp-accent);
  --sh-accent-soft: color-mix(in oklab, var(--rp-accent) 12%, transparent);
  /* Rosé Pine's iris card hover, gently steered by the scrolling accent. */
  --sh-row-tone: color-mix(in oklab, var(--rp-iris) 55%, var(--rp-accent));
}
@supports (animation-timeline: scroll()) {
  .someto-home { animation: sh-drift linear both; animation-timeline: scroll(root block); }
}
/* Plain text links use rosepine-common.css and inherit this page's drifting
   accent for hover/focus. Cards and outlined actions retain their styles. */
.someto-home :focus-visible { outline: 2px solid var(--rp-accent); outline-offset: 2px; border-radius: 3px; }

.someto-home .sh-page {
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: 40px 24px;
  display: grid;
  gap: 64px;
}

/* hero */
.someto-home .sh-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.someto-home .sh-hero h1 {
  font-family: var(--sh-display); font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1.02; letter-spacing: -0.015em;
  margin: 0 0 18px; color: var(--rp-text); text-wrap: balance;
}
.someto-home .sh-tld { color: var(--rp-subtle); }
.someto-home .sh-lead { font-size: 1.15rem; max-width: 34em; margin: 0; text-wrap: pretty; }

/* The mark inks itself in once: root, both branches, then their ends. After
   that rose and love hold, then trade places in a short crossing, each by
   its own route (warm through gold, cool through iris) so the two strokes
   never meet in one colour. The detours sit at the crossing's midpoint and
   stay small: long, wide detours read as pastel, close to the Dawn palette. */
.someto-home .sh-mark svg { width: clamp(120px, 18vw, 200px); height: auto; display: block; overflow: visible; }
.someto-home .sh-mark :is(path, circle) { fill: none; stroke-width: 15; }
.someto-home .sh-mark path { stroke-width: 25; }
.someto-home .sh-mark circle { transform-box: fill-box; transform-origin: center; rotate: 180deg; }
.someto-home .sh-mark .sh-ink-root { rotate: -90deg; }
.someto-home .sh-ink-a { stroke: var(--rp-rose); --sh-trade: sh-trade-a; }
.someto-home .sh-ink-b { stroke: var(--rp-love); --sh-trade: sh-trade-b; }
.someto-home .sh-mark :is(path, circle) {
  animation:
    sh-ink var(--sh-ink-time, .8s) cubic-bezier(.6, 0, .2, 1) var(--sh-ink-wait, 0s) backwards,
    var(--sh-trade) 48s ease-in-out 2s infinite alternate;
}
.someto-home .sh-mark .sh-ink-root { --sh-ink-time: .45s; }
.someto-home .sh-mark path.sh-ink-a { --sh-ink-wait: .3s; --sh-ink-time: .9s; }
.someto-home .sh-mark path.sh-ink-b { --sh-ink-wait: .4s; --sh-ink-time: .7s; }
.someto-home .sh-mark circle.sh-ink-a { --sh-ink-wait: 1.1s; --sh-ink-time: .4s; }
.someto-home .sh-mark circle.sh-ink-b:not(.sh-ink-root) { --sh-ink-wait: 1s; --sh-ink-time: .4s; }
/* Hidden until its turn: a stroke with nothing drawn yet still leaves a
   hairline where it starts. */
@keyframes sh-ink {
  from { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
  1% { opacity: 1; }
  to { stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 1; }
}
@keyframes sh-trade-a {
  from, 40% { stroke: var(--rp-rose); }
  50% { stroke: color-mix(in oklab, var(--rp-gold) 35%, color-mix(in oklab, var(--rp-rose), var(--rp-love))); }
  60%, to { stroke: var(--rp-love); }
}
@keyframes sh-trade-b {
  from, 40% { stroke: var(--rp-love); }
  50% { stroke: color-mix(in oklab, var(--rp-iris) 40%, color-mix(in oklab, var(--rp-rose), var(--rp-love))); }
  60%, to { stroke: var(--rp-rose); }
}

/* The banner, in two plates that frame the page: the sky above the title,
   its reflection in the lake below the contact section. Both are the same
   file, cropped by object-position. As the page scrolls the sky sinks
   toward the horizon and the lake rises to meet it. */
.someto-home .sh-plate {
  margin: 0; overflow: hidden;
  border: 1px solid var(--rp-hl-med); border-radius: 10px;
  background: #1a1524;
  box-shadow: 0 1px 2px var(--rp-shade-near), 0 22px 36px -30px var(--rp-shade-far);
}
.someto-home .sh-plate img { display: block; width: 100%; height: 100%; object-fit: cover; }
.someto-home .sh-plate-sky { grid-column: 1 / -1; aspect-ratio: 3.2; }
.someto-home .sh-plate-sky img { object-position: 50% 4%; }
.someto-home .sh-plate-lake { aspect-ratio: 4.2; }
.someto-home .sh-plate-lake img { object-position: 50% 100%; }
@keyframes sh-sky { to { object-position: 50% 16%; } }
@keyframes sh-lake { from { object-position: 50% 76%; } }
@supports (animation-timeline: scroll()) {
  .someto-home .sh-plate-sky img { animation: sh-sky linear both; animation-timeline: scroll(root block); animation-range: 0px 520px; }
  .someto-home .sh-plate-lake img { animation: sh-lake linear both; animation-timeline: view(block); animation-range: entry 0% cover 55%; }
}

/* section heads */
.someto-home .sh-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.someto-home .sh-section-head h2 { font-family: var(--sh-display); font-weight: 400; font-size: 1.75rem; margin: 0; color: var(--rp-text); }
.someto-home .sh-aside { font-size: 13.5px; color: var(--rp-subtle); }

/* site cards */
.someto-home .sh-sites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* main site: full row on top, the smaller sites pair up below */
.someto-home .sh-site-wide { grid-column: 1 / -1; }
/* on wide screens it becomes a banner: chips top right next to the host,
   name and tagline on one line, the description across the full width below */
@media (min-width: 761px) {
  .someto-home .sh-site-wide {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "host host meta" "title quote quote" "text text text";
    column-gap: 16px;
    align-items: baseline;
  }
  .someto-home .sh-site-wide > .sh-host { grid-area: host; align-self: center; }
  .someto-home .sh-site-wide > h3 { grid-area: title; }
  .someto-home .sh-site-wide > .sh-quote { grid-area: quote; }
  .someto-home .sh-site-wide > .sh-meta { grid-area: meta; align-self: center; }
  .someto-home .sh-site-wide > p { grid-area: text; text-wrap: balance; }
}

.someto-home .sh-site {
  /* --sh-tone: the card's own hue, for its hover border and the shadow that
     pools under it */
  --sh-tone: var(--rp-accent);
  display: grid; gap: 14px; align-content: start;
  padding: 22px 22px 20px;
  background: var(--rp-surface);
  border: 1px solid var(--rp-hl-med);
  border-radius: 10px;
  color: var(--rp-text);
  box-shadow: inset 0 1px 0 var(--rp-edge), 0 1px 2px var(--rp-shade-near), 0 22px 36px -30px transparent;
  transition: border-color .3s ease, box-shadow .45s var(--sh-ease);
}
.someto-home a.sh-site:hover,
.someto-home .sh-site:has(.sh-stretch:hover) {
  border-color: var(--sh-tone); text-decoration: none;
  box-shadow: inset 0 1px 0 var(--rp-edge), 0 1px 2px var(--rp-shade-near), 0 22px 36px -22px color-mix(in oklab, var(--sh-tone) 60%, transparent);
}
.someto-home .sh-site-wide { --sh-tone: var(--rp-pine); }
.someto-home .sh-site-briar { --sh-tone: #b56660; }
.someto-home .sh-site-verses { --sh-tone: var(--rp-gold); }
/* A card that holds a second link can't be one <a>: the title's link
   stretches over the whole card instead, and the inner link sits above it. */
.someto-home div.sh-site { position: relative; }
.someto-home .sh-stretch,
.someto-home .sh-stretch:hover { color: inherit; text-decoration: none; }
.someto-home .sh-stretch::after { content: ""; position: absolute; inset: 0; border-radius: 10px; }
.someto-home .sh-stretch:focus-visible { outline: none; }
.someto-home .sh-stretch:focus-visible::after { outline: 2px solid var(--rp-accent); outline-offset: 2px; }
.someto-home .sh-inline {
  position: relative; z-index: 1;
  font-weight: 500;
}
.someto-home .sh-host { font-family: var(--sh-mono); font-size: 12.5px; color: var(--rp-accent-text); }
.someto-home .sh-site h3 { font-family: var(--sh-display); font-weight: 400; font-size: 1.6rem; margin: 0; line-height: 1.1; color: var(--rp-text); }
.someto-home .sh-site p { margin: 0; color: var(--rp-subtle); }
.someto-home .sh-quote { font-family: var(--sh-display); font-style: italic; font-weight: 300; font-size: 1.15rem; }

/* Sacred Verses shows one verse at a time and fades each in; so does its
   card. All verses share one grid cell and take turns. */
.someto-home .sh-verses { display: grid; }
.someto-home .sh-verses > span { grid-area: 1 / 1; opacity: 0; animation: sh-verse 32s ease-in-out calc(var(--n) * 8s) infinite backwards; }
.someto-home .sh-verses > span:first-child { opacity: 1; }
.someto-home .sh-verses > span:nth-child(2) { color: color-mix(in oklab, var(--rp-rose) 50%, var(--rp-text)); }
.someto-home .sh-verses > span:nth-child(3) { color: color-mix(in oklab, var(--rp-iris) 50%, var(--rp-text)); }
.someto-home .sh-verses > span:nth-child(4) { color: color-mix(in oklab, var(--rp-foam) 50%, var(--rp-text)); }
@keyframes sh-verse {
  0% { opacity: 0; translate: 0 4px; }
  5%, 21% { opacity: 1; translate: 0 0; }
  25%, 100% { opacity: 0; translate: 0 0; }
}
.someto-home .sh-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.someto-home .sh-swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.someto-home .sh-swatch { display: grid; gap: 4px; }
/* Briar Rose: on hover the pigments rise one after another, like a fan of
   colour cards being opened, and each name takes its pigment's colour. */
.someto-home .sh-swatch i {
  display: block; height: 28px; border-radius: 4px; background: var(--c);
  transform-origin: 50% 100%;
  transition: transform .5s var(--sh-ease) calc(var(--n) * 45ms);
}
.someto-home .sh-swatch span {
  font-family: var(--sh-mono); font-size: 10.5px; color: var(--rp-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .5s ease calc(var(--n) * 45ms);
}
.someto-home a.sh-site:hover .sh-swatch i { transform: scaleY(1.36); }
.someto-home a.sh-site:hover .sh-swatch span { color: color-mix(in oklab, var(--c) 70%, var(--rp-text)); }

.someto-home .sh-chip {
  display: inline-flex; align-items: center;
  font-family: var(--sh-mono); font-size: 11.5px;
  padding: 1px 8px; border-radius: 999px;
  background: var(--rp-overlay); color: var(--rp-subtle);
  border: 1px solid var(--rp-hl-med);
}
.someto-home .sh-chip.sys-swade { color: var(--rp-love); border-color: color-mix(in oklab, var(--rp-love) 40%, transparent); background: color-mix(in oklab, var(--rp-love) 9%, transparent); }
.someto-home .sh-chip.sys-dnd5e { color: var(--rp-gold); border-color: color-mix(in oklab, var(--rp-gold) 45%, transparent); background: color-mix(in oklab, var(--rp-gold) 10%, transparent); }
.someto-home .sh-chip.sys-other { color: var(--rp-iris); border-color: color-mix(in oklab, var(--rp-iris) 40%, transparent); background: color-mix(in oklab, var(--rp-iris) 9%, transparent); }

/* modules */
.someto-home .sh-install {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: baseline;
  padding: 14px 16px; margin-bottom: 18px;
  background: var(--sh-accent-soft);
  border-radius: var(--sh-radius);
  font-size: 14px;
}
.someto-home .sh-install b { font-family: var(--sh-mono); font-weight: 500; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--rp-accent-text); }

.someto-home .sh-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.someto-home .sh-filters:empty { display: none; }
.someto-home .sh-filters button {
  font: inherit; font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--rp-hl-med); background: transparent; color: var(--rp-subtle);
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.someto-home .sh-filters button:hover { border-color: var(--rp-hl-high); color: var(--rp-text); }
.someto-home .sh-filters .n { font-family: var(--sh-mono); font-size: 11.5px; color: var(--rp-muted); font-variant-numeric: tabular-nums; }
.someto-home .sh-filters button[aria-pressed="true"] { background: var(--rp-accent); border-color: var(--rp-accent); color: var(--rp-on-accent); }
.someto-home .sh-filters button[aria-pressed="true"] .n { color: inherit; opacity: .75; }

.someto-home .sh-mods { list-style: none; margin: 0; padding: 0; border-radius: 10px; background: var(--rp-surface); overflow: hidden; }
.someto-home .sh-mods { box-shadow: inset 0 1px 0 var(--rp-edge), 0 1px 2px var(--rp-shade-near); }
.someto-home .sh-mod { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; align-items: start; padding: 16px 18px; border: 1px solid var(--rp-hl-med); transition: background-color .2s ease, border-color .2s ease; }
/* Rows own the outline, including the rounded ends. Shared separators
   overlap by one pixel; the active row paints above its neighbours. */
.someto-home .sh-mod + .sh-mod { margin-block-start: -1px; }
.someto-home .sh-mod:first-child { border-start-start-radius: 10px; border-start-end-radius: 10px; }
.someto-home .sh-mod:last-child { border-end-start-radius: 10px; border-end-end-radius: 10px; }
.someto-home .sh-mod:not(.sh-mod-status):is(:hover, :focus-within) {
  z-index: 1;
  background-color: color-mix(in oklab, var(--sh-row-tone) 7%, var(--rp-surface));
  border-color: color-mix(in oklab, var(--sh-row-tone) 28%, var(--rp-surface));
}
/* First fill of the list: rows rise in one after another. */
.someto-home .sh-enter .sh-mod { animation: sh-rise .5s var(--sh-ease) calc(min(var(--i, 0), 12) * 35ms) backwards; }
@keyframes sh-rise { from { opacity: 0; translate: 0 8px; } }
/* Filter change (someto-home.js, View Transitions): rows that stay glide to
   their new place, the others fade. The names exist only while it runs. */
.someto-home.sh-vt .sh-mod { view-transition-name: var(--vt, none); }
.someto-home.sh-vt .sh-mods { view-transition-name: sh-mods; }
.someto-home.sh-vt .sh-all { view-transition-name: sh-all; }
.someto-home.sh-vt .sh-contact { view-transition-name: sh-contact; }
.someto-home.sh-vt .sh-plate-lake { view-transition-name: sh-lake; }
::view-transition-group(*) { animation-duration: .35s; animation-timing-function: cubic-bezier(.3, .7, .2, 1); }
.someto-home .sh-mod-status { display: block; color: var(--rp-subtle); }
.someto-home .sh-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.someto-home a.sh-name { font-weight: 600; font-size: 15.5px; color: var(--rp-text); }
.someto-home a.sh-name:is(:hover, :focus-visible, :active) { color: var(--rp-accent-text); }
.someto-home .sh-path { font-family: var(--sh-mono); font-size: 12px; color: var(--rp-muted); }
.someto-home .sh-mod p { margin: 4px 0 8px; color: var(--rp-subtle); font-size: 14px; max-width: 62em; text-wrap: pretty; }
.someto-home .sh-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.someto-home .sh-side { display: grid; gap: 8px; justify-items: end; text-align: right; }
.someto-home .sh-ver { font-family: var(--sh-mono); font-size: 12.5px; color: var(--rp-text); font-variant-numeric: tabular-nums; }
.someto-home .sh-compat { font-family: var(--sh-mono); font-size: 11.5px; color: var(--rp-muted); }
.someto-home .sh-copy, .someto-home a.sh-readme {
  font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap;
  padding: 5px 11px; border-radius: var(--sh-radius);
  border: 1px solid var(--rp-hl-high); background: var(--rp-base); color: var(--rp-text);
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.someto-home a.sh-readme { display: inline-block; text-decoration: none; }
.someto-home .sh-copy:hover, .someto-home a.sh-readme:hover { border-color: var(--rp-accent); color: var(--rp-accent-text); }
.someto-home .sh-copy.done { border-color: var(--rp-accent); background: var(--rp-accent); color: var(--rp-on-accent); }
.someto-home .sh-fallback { display: block; margin-top: 6px; font-family: var(--sh-mono); font-size: 11px; user-select: all; overflow-wrap: anywhere; }
.someto-home .sh-all { display: inline-block; margin-top: 14px; font-size: 14px; }

/* contact */
.someto-home .sh-contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: center; padding-top: 28px; border-top: 1px solid var(--rp-hl-med); }
.someto-home .sh-contact h2 { font-family: var(--sh-display); font-weight: 400; font-size: 1.5rem; margin: 0 0 6px; color: var(--rp-text); }
.someto-home .sh-contact p { margin: 0; color: var(--rp-subtle); max-width: 38em; }
.someto-home .sh-mail { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.someto-home .sh-mail a { font-family: var(--sh-mono); font-size: 15px; }
.someto-home p.sh-credit { font-size: 12px; color: var(--rp-muted); }

@media (max-width: 760px) {
  .someto-home .sh-page { padding-block: 24px 16px; gap: 48px; }
  .someto-home .sh-hero { grid-template-columns: minmax(0, 1fr); }
  .someto-home .sh-plate-sky { order: -2; aspect-ratio: 2.2; }
  .someto-home .sh-plate-lake { aspect-ratio: 3; }
  .someto-home .sh-mark { order: -1; }
  .someto-home .sh-mark img { width: 88px; }
  .someto-home .sh-sites { grid-template-columns: minmax(0, 1fr); }
  .someto-home .sh-mod { grid-template-columns: minmax(0, 1fr); }
  .someto-home .sh-side { justify-items: start; text-align: left; grid-auto-flow: column; align-items: center; justify-content: start; gap: 12px; }
  .someto-home .sh-contact { grid-template-columns: minmax(0, 1fr); }
  .someto-home .sh-install { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .someto-home, .someto-home * { transition: none !important; animation: none !important; }
}