/* Grapho&Co, "Le trait": the site's tokens and layout.
   A practice, not a classroom. One pen line runs down the page, loops at
   each section and never lifts. Everything else is quiet. */

:root {
  --bg: #f6f7f5;
  --surface: #ffffff;
  --text: #22292c;
  --muted: #5d6a6e;
  --primary: #1f4150;
  --on-primary: #f6f7f5;
  --accent: #b8862b; /* the line, and only the line */
  --rule: #e3e8e6;
  --font-text: "Hanken Grotesk", system-ui, sans-serif;
  --font-display: var(--font-text);
  --leading: 1.6;
  --measure: 60ch;
  --radius: 2px;
  --marker: var(--accent);
  --link-line: color-mix(in srgb, var(--primary) 40%, transparent);

  --gap: clamp(1.25rem, 3vw, 2.5rem);
  --thread: clamp(1.5rem, 5vw, 4.5rem); /* x of the line inside .main */
  --thread-w: 1.5px;
  --thread-end: 4rem;                   /* where the line turns into its exit stroke */

  & .page {
    padding-inline: var(--gap);
  }
  & .top {
    margin-inline: calc(-1 * var(--gap));
    padding: 1rem var(--gap);
  }

  & .hero__body {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--space-3) var(--gap);
    align-items: end;
    padding-top: clamp(3rem, 9vw, 7rem);
  }
  & .hero__title {
    grid-column: 1 / -1;
  }
  & .hero__statement {
    display: block;
    max-width: 16ch;
    margin: 0;
    color: var(--primary);
    font: 600 clamp(2rem, 1.2rem + 3.4vw, 3.6rem) / 1.08 var(--font-display);
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  & .hero__side {
    padding-bottom: 0.4rem;
  }
  & .hero__lede {
    max-width: 36ch;
    color: var(--muted);
  }

  /* The thread. Line and loops share one x: var(--thread) + half the line width. */
  & .main {
    position: relative;
    margin-top: clamp(3rem, 8vw, 6rem);
    padding-left: calc(var(--thread) + var(--gap));
  }
  & .main::before {
    content: "";
    position: absolute;
    left: var(--thread);
    top: 0;
    bottom: var(--thread-end);
    width: var(--thread-w);
    background: var(--accent);
  }
  /* The exit stroke: its stem overlaps the last 16px of the line on the same x, so the join can't show. */
  & .main::after {
    content: "";
    position: absolute;
    left: var(--thread);
    bottom: calc(var(--thread-end) - 24px);
    width: 44px;
    height: 40px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 40'%3E%3Cpath d='M.75 0V16C.75 30 10 38.25 24 38.25H43' fill='none' stroke='%23b8862b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
  }

  & .section {
    display: grid;
    grid-template-columns: minmax(0, var(--measure)) minmax(0, 17rem);
    grid-template-areas: "head ." "body note";
    column-gap: clamp(2rem, 5vw, 5rem);
    padding-bottom: clamp(4rem, 9vw, 7rem);
  }
  & .co {
    grid-area: head;
    position: relative;
    margin-bottom: 1.75rem;
    color: var(--muted);
    font: 400 1rem / 1.3 var(--font-text);
  }
  & .co__topic {
    display: block;
    margin-top: 0.35rem;
    color: var(--primary);
    font: 600 clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem) / 1.15 var(--font-display);
    letter-spacing: -0.015em;
  }
  & .co__topic::first-letter {
    text-transform: uppercase;
  }
  /* The loop: drawn on top of the line (it doesn't hide it), both ends on the line's centre. */
  & .co::before {
    content: "";
    position: absolute;
    top: 0.9rem;
    left: calc(var(--thread-w) / 2 - var(--gap) - 24px);
    width: 48px;
    height: 62px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 62'%3E%3Cpath d='M24 0C24 12 39 15 39 28C39 41 26 45 18 39C11 34 14 23 21 26C25 28 24 36 24 46L24 62' fill='none' stroke='%23b8862b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
  }
  & .note {
    grid-area: note;
    align-self: start;
    padding-top: var(--space-2);
    border-top: 1px solid var(--rule);
    font-size: 0.9375rem;
  }
  & .body {
    grid-area: body;
  }
  & .place {
    padding: 1.25rem 1.25rem 1rem;
    background: var(--surface);
    border: 1px solid var(--rule);
  }
  & .place strong {
    font-size: var(--step-0);
  }
  & .footer {
    padding: var(--space-3) 0 var(--space-4) calc(var(--thread) + var(--gap));
  }

  @media (max-width: 52rem) {
    & .hero__body,
    & .section {
      grid-template-columns: minmax(0, 1fr);
    }
    & .section {
      grid-template-areas: "head" "note" "body";
    }
    & .note {
      margin-bottom: var(--space-3);
    }
  }
}