/* Fretscribe's pages: Ruled Paper. The tokens (assets/fretscribe.css) carry the colours and the type;
   this is what the shared stylesheet does differently for this brand. */

/* The display face is set at weight 600 from 28 px and up (design/brands/fretscribe/brand/brand.md). */
h1, h2, .display { font-weight: 600; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.25rem, 5.6vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
h1 em, h2 em { font-weight: 700; }

/* The page is the paper: its margin line down the left, and its rules in the margins beside the words, where
   they cross no text. The strip and the tabs carry the lines themselves. */
main > section {
  --rule: color-mix(in srgb, var(--scribe-line) 18%, transparent);
  --margin-line: color-mix(in srgb, var(--scribe-brand) 30%, transparent);
  --margin-at: max(10px, calc(50% - 584px));
  --text-from: max(11px, calc(50% - 583px));
  background:
    linear-gradient(90deg, transparent var(--margin-at), var(--margin-line) var(--margin-at), var(--margin-line) calc(var(--margin-at) + 1px), transparent calc(var(--margin-at) + 1px)),
    linear-gradient(90deg, transparent var(--text-from), var(--scribe-bg) var(--text-from), var(--scribe-bg) calc(100% - var(--text-from)), transparent calc(100% - var(--text-from))),
    repeating-linear-gradient(180deg, transparent 0 31px, var(--rule) 31px 32px);
}
main > section + section { border-top: 0; }
/* What is pasted onto the page stands a little off it. */
.strip-stage, .stage-figure, .tabdemo, .matrix .table-scroll, .flow .phone-frame { box-shadow: var(--scribe-elevation-1); }
.matrix .table-scroll { background: var(--scribe-surface-raised); border: 1px solid var(--scribe-border); border-radius: var(--scribe-radius-md); padding: 0 var(--scribe-space-4); }

/* The pen that writes the strip opens every section: a dot and the line it has drawn. */
main > section h2::before {
  content: ""; display: block; width: 72px; height: 12px; margin-bottom: var(--scribe-space-4);
  background:
    radial-gradient(circle at 66px 50%, var(--scribe-brand) 5.5px, transparent 6px),
    linear-gradient(var(--scribe-brand), var(--scribe-brand)) 0 50% / 62px 2px no-repeat;
}

/* The big numbers and the steps' marks are set in the tab's own numerals. */
.sure-end { font-family: var(--scribe-font-display); }

/* The phone screenshots here are Android screens: 9:20, where the shared frame assumes an iPhone. */
.phone-frame img { aspect-ratio: 600 / 1304; }

@media (max-width: 600px) {
  .hero { padding-top: var(--scribe-space-6); }
  .hero .button { min-height: 48px; }
  .hero .strip { margin-top: var(--scribe-space-5); }
}
@media (forced-colors: active) { main > section { background: none; } main > section h2::before { display: none; } }