/* The four faces, self-hosted.
 *
 * **They were named and never served.** `docs/design-tokens.css` declares Fraunces, Manrope,
 * Newsreader and JetBrains Mono; nothing anywhere loaded a single file, so the site fell back
 * to Georgia and system-ui while the app fell back to Roboto. A teacher saw two different
 * faces, neither of them Marco's, and the wordmark - the product's own name - was drawn in
 * whatever the browser had.
 *
 * Self-hosted rather than linked, because the CSP on this origin is `font-src 'self'` and that
 * is deliberate: a marketing origin that can be made to fetch from a third party is one that
 * can be made to leak who is reading it.
 *
 * `font-display: swap` throughout: the text is readable in the fallback while the file
 * arrives, which matters on school wifi more than it matters anywhere else.
 *
 * **AND THEN THEY WERE SERVED WRONG, which is the second half of the same story.** Four files
 * arrived here as static Regulars and were declared as variable ranges, `font-weight: 400 700`
 * over a file holding 400 and nothing else. A browser told a face covers 400 to 700 will not
 * synthesise a bold, because it believes a real one exists. Measured in a browser before this
 * was changed: "Handgloves 123" rendered to the SAME WIDTH at 400, 600 and 700 in all four
 * families, so every page title and the wordmark were Regular and the browser was declining to
 * fake it. And `Newsreader.ttf` was the ITALIC cut declared `font-style: normal`, so the face
 * Marco speaks in leaned 38px in a 200px stem. Neither is visible in review: both look like
 * somebody's design choice.
 *
 * So each face below names ONE weight and the file is named for it, which is what makes the
 * declaration checkable. `scripts/fetch_fonts.py` writes them and owns this directory; a weight
 * a stylesheet sets and no face declares is what to add there, never a range here.
 *
 * Italic is synthesised, deliberately. Two pages carry a single `<em>` between them, and an
 * italic cut per family is four more files for two words.
 *
 * All are SIL Open Font Licence (JetBrains Mono included) and free to redistribute.
 */
@font-face{font-family:"Fraunces";src:url("/fonts/Fraunces-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("/fonts/Fraunces-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("/fonts/Manrope-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("/fonts/Manrope-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("/fonts/Manrope-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/fonts/Newsreader-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/fonts/JetBrainsMono-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}

/* Marco: the marketing site.
 *
 * Layered over `tokens.css`, which is copied in from `docs/design-tokens.css` at build time
 * and is canonical. Nothing here redefines a token; it only uses them, so a colour changes
 * in one file and lands in three places.
 *
 * Two disciplines carried over from the app, because a site that reads differently from the
 * product is a promise the product then has to keep:
 *
 *   .marco   is the ONLY place Marco speaks. One per page, maximum. Everything else on this
 *            site is the company's voice, which is a different register: the site sells,
 *            and Marco never does.
 *   mono     is for marks and codes. They are data, not prose, and typography is where that
 *            distinction is made rather than explained.
 *
 * There is no red. Nothing in this product is an "error", so the palette does not offer one.
 */

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

body {
  margin: 0;
  background: var(--marco-page);
  color: var(--marco-ink);
  font-family: var(--marco-font-ui);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* --- rhythm --------------------------------------------------------------------------- */

.wrap {
  max-width: 68ch;
  margin: 0 auto;
  padding: 0 24px;
}

.wide {
  max-width: 92ch;
}

section {
  padding: 56px 0;
}

section + section {
  border-top: 1px solid var(--marco-line);
}

/* --- chrome --------------------------------------------------------------------------- */

header.site {
  padding: 22px 0;
  border-bottom: 1px solid var(--marco-line);
  background: var(--marco-cream);
}

header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

nav a {
  color: var(--marco-ink-soft);
  text-decoration: none;
  font-size: 0.92rem;
  margin-left: 18px;
}

nav a:hover,
nav a[aria-current='page'] {
  color: var(--marco-ink);
}

/* The wordmark is always "Marco.": accent-coloured period, never an acronym. */
.wordmark {
  font-family: var(--marco-font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--marco-ink);
  text-decoration: none;
}

.wordmark b {
  color: var(--marco-accent);
  font-weight: 600;
}

footer.site {
  border-top: 1px solid var(--marco-line);
  background: var(--marco-cream);
  padding: 34px 0;
  color: var(--marco-ink-soft);
  font-size: 0.88rem;
}

footer.site a {
  color: var(--marco-ink-soft);
}

/* --- type ----------------------------------------------------------------------------- */

h1,
h2,
h3 {
  font-family: var(--marco-font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 12px;
}

h1 {
  font-size: clamp(2rem, 5vw, 2.9rem);
}

h2 {
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  margin-top: 8px;
}

h3 {
  font-size: 1.1rem;
  font-family: var(--marco-font-ui);
  font-weight: 600;
}

p {
  margin: 0 0 16px;
}

.lead {
  font-family: var(--marco-font-voice);
  font-size: 1.2rem;
  color: var(--marco-ink);
}

.eyebrow {
  font-family: var(--marco-font-mono);
  font-size: var(--marco-text-eyebrow);
  letter-spacing: var(--marco-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--marco-ink-soft);
  margin-bottom: 10px;
}

.quiet {
  color: var(--marco-ink-soft);
  font-size: 0.92rem;
}

/* Marks and codes. Data, not prose. */
code,
.mono {
  font-family: var(--marco-font-mono);
  font-size: 0.9em;
  letter-spacing: var(--marco-tracking-mono);
}

/* --- Marco's one card ------------------------------------------------------------------ */

.marco {
  font-family: var(--marco-font-voice);
  font-size: 1.05rem;
  line-height: 1.5;
  background: var(--marco-accent-tint);
  border: 1px solid var(--marco-line);
  border-radius: var(--marco-radius);
  padding: 20px 22px;
  margin: 28px 0;
}

/* --- cards and grids -------------------------------------------------------------------- */

.cards {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  padding: 0;
  margin: 0;
  list-style: none;
}

.card {
  background: var(--marco-white);
  border: 1px solid var(--marco-line);
  border-radius: var(--marco-radius);
  padding: var(--marco-pad-card);
}

.card h3 {
  margin-bottom: 6px;
}

.card p:last-child {
  margin-bottom: 0;
}

/* --- buttons ---------------------------------------------------------------------------- */

.cta {
  display: inline-block;
  background: var(--marco-accent);
  color: var(--marco-white);
  text-decoration: none;
  font-weight: 600;
  padding: 13px 22px;
  border-radius: var(--marco-radius-btn);
  transition: filter var(--marco-transition);
}

.cta:hover {
  filter: brightness(1.06);
}

.cta.quietly {
  background: transparent;
  color: var(--marco-ink);
  border: 1px solid var(--marco-line);
}

/* The way in, in the nav. Not a new button: `.cta.quietly` sized down for the header the way
 * `.buttons .cta` is sized down for the frame.
 *
 * Quiet rather than filled, and that is hierarchy rather than taste. The accent belongs to
 * the page's own call to action; a second filled button standing in the header of every page
 * argues with it. Outline on cream is also what the portal's own Google and Apple buttons
 * look like, so a teacher arrives at something they have already seen.
 *
 * The margins are left to `nav a`, desktop and mobile both, so the sign-in link sits on the
 * same rhythm as the links beside it instead of keeping its own. */
nav .cta {
  padding: 8px 15px;
}

/* --- tables ------------------------------------------------------------------------------ */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}

/* Wide content scrolls in its own box; the page body never scrolls sideways. */
.scrolls {
  overflow-x: auto;
}

th,
td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--marco-line);
}

th {
  font-size: var(--marco-text-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--marco-ink-soft);
  font-weight: 600;
}

td.num {
  font-family: var(--marco-font-mono);
  text-align: right;
  white-space: nowrap;
}

/* --- a screenshot stand-in ---------------------------------------------------------------- */

.frame {
  max-width: var(--marco-frame-max);
  margin: 0 auto;
  background: var(--marco-cream);
  border: 1px solid var(--marco-line);
  border-radius: var(--marco-frame-radius);
  box-shadow: var(--marco-shadow-frame);
  padding: 18px;
}

.chip {
  display: inline-block;
  font-family: var(--marco-font-mono);
  font-size: var(--marco-text-meta);
  letter-spacing: var(--marco-tracking-mono);
  background: var(--marco-cream-2);
  border-radius: var(--marco-radius-pill);
  padding: 3px 10px;
  color: var(--marco-ink-soft);
}

.chip.flag {
  background: var(--marco-flag-tint);
  color: var(--marco-accent);
}

.buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.buttons .cta {
  padding: 10px 16px;
  font-size: 0.92rem;
}

@media (max-width: 560px) {
  section {
    padding: 40px 0;
  }

  nav a {
    margin: 0 14px 0 0;
  }
}

/* --- utilities that used to be inline -------------------------------------------------------
 *
 * These were `style="..."` attributes, which the CSP on this origin silently drops:
 * `style-src 'self'` carries no `'unsafe-inline'`, so a browser applies none of them. Nobody
 * saw it because the site had never been served with its own headers: `python -m http.server`
 * sends no CSP, and Cloudflare Pages is where `_headers` first takes effect.
 *
 * Named for what they do rather than what they set, so the next one has somewhere to go. */
.tight { margin: 12px 0 0; }
.spaced { margin-top: 14px; }
.spaced-lg { margin-top: 18px; }
.block { margin: 20px 0; }
.centred { text-align: center; margin-top: 14px; }
.voice-note { font-family: var(--marco-font-voice); font-size: 1.02rem; }
.voice-close { font-family: var(--marco-font-voice); margin-bottom: 0; }
.close { margin-bottom: 6px; }
.rule { border: 0; border-top: 1px solid var(--marco-line); margin: 14px 0; }

/* --- the holding page ------------------------------------------------------------------------
 *
 * One screen: the wordmark, the promise, and the fact that it is not open yet. Centred and
 * vertically middled, so it reads as a held place rather than a page with its content missing. */
body.holding {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.holding-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 22px;
}

.holding-mark {
  font-family: var(--marco-font-display);
  font-weight: 600;
  font-size: clamp(3.4rem, 15vw, 7.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--marco-ink);
  margin: 0 0 26px;
}

/* The accent period is the whole mark: it is what the wordmark is named for, and at this size
 * it is the one thing that has to survive being seen from across a room.
 *
 * Here the mark is DRAWN rather than set, so that it can become a tick and come back. The
 * glyph stands down and gives its place to the path; `font-size: 0` rather than
 * `display: none`, because the period stays in the accessibility tree and a screen reader goes
 * on reading "Marco." The colour moves to the drawn mark with it.
 */
.holding-mark b {
  font-size: 0;
}

/* --- the splash tick, ported from the app -----------------------------------------------------
 *
 * `mobile/lib/ui/splash.dart` opens the app by turning the accent period into a tick and back:
 * four seconds, the dot held alone at each end, the short arm drawn before the long one because
 * that is the order a hand draws a tick in. The geometry below is that painter's, in its own
 * units, and the percentages are its `tickProgress` phases. Two implementations of one gesture
 * is the shape this repository keeps paying for, so it is worth saying which is the original:
 * the app is, and if the timing changes there it should change here.
 *
 * **What the tick MEANS is a real question and this file inherits it rather than settling it.**
 * That file says so in its own words: a tick says marked and correct, which is the one thing
 * Marco never says on its own, because the teacher owns the mark. As a wordmark flourish it is
 * almost certainly fine. It is also the first thing the product says, and it says it without
 * words.
 *
 * **Once, and not on a loop.** The app plays this on open and hands over to the product. A
 * holding page has nothing to hand over to, so it ends where the wordmark rests, on the period.
 * Four seconds repeating forever on a page somebody leaves open in a tab is not a brand moment,
 * it is a thing in the corner of their eye.
 *
 * Every keyframe below starts and ends at the resting period, so `both` is safe: before the
 * animation and after it, the mark is exactly what the stylesheet already said it was.
 */
/* **The box is the painter's, scaled and shifted so that the drawn dot lands exactly where
 * Fraunces' own period lands.** This was measured rather than judged by eye, and the first
 * version was wrong in both axes.
 *
 * The app's box is 0.62 of the type size wide and one size tall, with the dot at 35% across and
 * 14% up from the bottom, and the app sits it on the alphabetic baseline. Ported literally, the
 * resting mark was visibly too far right and floating above the line. Measured with canvas
 * `measureText`, which reports ink rather than the glyph's box (a period's box is mostly empty,
 * so `getBoundingClientRect` cannot answer this):
 *
 *     Fraunces 600 period      ink centre 0.137em from the pen, 0.0796em above the baseline,
 *                              ink radius 0.0928em
 *     the painter's dot        centre 0.217em across, 0.14em above the box bottom,
 *                              radius 0.075em
 *
 * So the drawn dot was 19% SMALLER than the period it stands in for, which matters more than
 * the tick does: the page rests on the period for as long as it is open, and the animation is
 * four seconds of it. Scaling by 0.0928/0.075 makes the two the same mark, and the shifts put
 * it on the same spot. Everything is in `em`, so it holds at every size the clamp produces.
 *
 * **The same gap exists in the app** and is worth knowing rather than copying: `splash.dart`
 * paints a dot that is smaller and higher than the period the rest of the app sets in Fraunces.
 * At 44px nobody would see it. It is not this file's to fix.
 */
.holding-mark .tick {
  display: inline-block;
  width: 0.767em;
  height: 1.238em;
  /* Lowered from the baseline by the difference between the two centres, so the drawn dot sits
     where the ink of the period sits rather than where the painter's box happens to put it. */
  vertical-align: -0.094em;
  margin-inline-start: -0.132em;
  /* The long arm's round cap reaches past the box, as it does in the app. Clipped, the tick
     loses its point. */
  overflow: visible;
  color: var(--marco-accent);
}

.tick-dot {
  fill: currentColor;
  /* Scaled rather than animating `r`, which is a geometry property and a newer thing for a
     browser to animate than a transform. `fill-box` is what makes the origin the circle rather
     than the whole viewport. */
  transform-box: fill-box;
  transform-origin: center;
  animation: tick-dot 4s both;
}

.tick-arm {
  fill: none;
  stroke: currentColor;
  stroke-width: 14.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Drawn from the vertex outward, which is why each arm is its own path starting at the dot:
   the join stays where the period was and the mark never appears to slide along the line. */
.tick-short {
  stroke-dasharray: 29.1;
  stroke-dashoffset: 29.1;
  animation: tick-short-arm 4s both;
}

.tick-long {
  stroke-dasharray: 73;
  stroke-dashoffset: 73;
  animation: tick-long-arm 4s both;
}

/* The dot shrinks as the arms grow, so there is one mark throughout rather than a dot with a
   tick beside it. It is gone by the time the long arm is half drawn. */
@keyframes tick-dot {
  0%, 15% {
    transform: scale(1);
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  20%, 87.5% {
    transform: scale(0);
    animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  }
  92%, 100% { transform: scale(1); }
}

/* Out first and back last, which is the same order reversed. */
@keyframes tick-short-arm {
  0%, 15% {
    stroke-dashoffset: 29.1;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  19.5%, 88% {
    stroke-dashoffset: 0;
    animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  }
  92%, 100% { stroke-dashoffset: 29.1; }
}

@keyframes tick-long-arm {
  0%, 19.5% {
    stroke-dashoffset: 73;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  40%, 70% {
    stroke-dashoffset: 0;
    animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  }
  88%, 100% { stroke-dashoffset: 73; }
}

/* `splash.dart` holds the mark still for anybody who has asked for less motion, and says why:
   `MediaQuery.disableAnimations` is on for motion sickness and for screen readers, and holding
   them on a decorative animation is the version of this that earns a complaint. Here that means
   the typographic period the rest of the origin already uses, and no drawn mark at all. */
@media (prefers-reduced-motion: reduce) {
  .holding-mark b {
    font-size: inherit;
    color: var(--marco-accent);
    font-weight: 600;
  }

  .holding-mark .tick {
    display: none;
  }
}

.holding-line {
  font-family: var(--marco-font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 3.4vw, 1.75rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0 0 22px;
  max-width: 22ch;
}

.holding-soon {
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--marco-ink-soft);
  margin: 0;
}

.holding-foot {
  padding: 0 22px 28px;
  text-align: center;
  font-size: 0.82rem;
}

.holding-foot a {
  color: var(--marco-ink-soft);
  margin: 0 10px;
}

.holding-by {
  margin: 34px 0 0;
  font-size: 0.78rem;
  color: var(--marco-ink-soft);
}