/*
 * Palladium — Start guide.
 *
 * Built from the design file (noted2.pen): `jgCGs` at 1440, `Q9jrf` at 834,
 * `Xlp8i` at 390. Those three frames are the spec; where a number here looks
 * arbitrary it is being read off one of them.
 *
 * Colour comes from tokens.css. The page reuses the landing's primitives
 * rather than restating them — `.shell` for the column, `.site-header` and
 * `.logo` for the header, `.caption`, `.lede`, `.muted`, `.cta` and
 * `.site-footer`. This file owns what only the guide has: the masthead,
 * numbered steps, full-bleed figure bands, the markdown and shortcut tables,
 * and the callouts.
 *
 * `.wrap` in landing.css was kept for the guide's sake and is no longer used
 * by it — the guide now shares `.shell`, so the two pages line up on the same
 * 1160px column. It can be deleted whenever the landing work is settled.
 */

/*
 * The three frames are fixed-width, so the values that separate them are
 * declared once here and read everywhere below. Anything that scales
 * *between* the frames — display type, mostly — uses a clamp instead, tuned
 * to land on the drawn value at 1440, 834 and 390 rather than near it.
 */
.guide {
  --g-secy: 72px;        /* section padding-block */
  --g-col: 640px;        /* the measure body copy is set to */
  --g-body: 17px;
  --g-body-lh: 1.6;
  --g-fig-top: 34px;
  --g-fig-bot: 72px;
  --g-callout-w: 680px;
  --g-list: 16px;
  --g-key-label: 15px;
  --g-kbd: 14px;
  /* The ⌘ and ⇧ glyphs draw smaller than caps at the same size, so they get
     their own step up to sit level with a letter key. */
  --g-kbd-sym: 17px;
  --g-kbd-box: 26px;
  --g-keys-gap: 56px;
  --g-md-key: 180px;
  --g-md-desc: 15px;
  --g-cap: 10px;
}

@media (max-width: 1199px) {
  .guide {
    --g-col: 560px;
    --g-body: 16px;
    --g-callout-w: 640px;
    --g-keys-gap: 28px;
    --g-md-key: 150px;
  }
}

@media (max-width: 719px) {
  .guide {
    --g-secy: 44px;
    --g-col: 100%;
    --g-body: 15px;
    --g-body-lh: 1.55;
    --g-fig-top: 20px;
    --g-fig-bot: 44px;
    --g-callout-w: 100%;
    --g-list: 14px;
    --g-key-label: 14px;
    --g-kbd: 12.5px;
    --g-kbd-sym: 15px;
    --g-kbd-box: 23px;
    --g-md-desc: 13px;
    --g-cap: 9px;
  }
}

/* Sections ---------------------------------------------------------------- */

/*
 * Every section is a column with its own gap, and every one but the masthead
 * is separated from the last by a hairline. `align-items` stays at its default
 * so tables and figures fill the column; the two things that must not stretch
 * say so themselves.
 */
.g-sec {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-block: var(--g-secy);
  border-top: 1px solid var(--line);
}

.g-sec p { max-width: var(--g-col); }
.g-sec p + p { margin-top: 0; }

.g-sec > h2 {
  font-size: clamp(30px, 2.15vw + 13px, 44px);
  line-height: 1.1;
}

/* A section whose figure follows it as a separate full-bleed band: the band
 * owns the space underneath, so the section stops at its last line. */
.g-sec--tofig { padding-bottom: 0; }

.g-sec--keep { gap: 22px; }
.g-sec--keys { gap: 24px; }
.g-sec--closing { gap: 20px; }

@media (max-width: 719px) {
  .g-sec--keep,
  .g-sec--closing { gap: 16px; }
  .g-sec--keys { gap: 14px; }
}

/* Masthead ---------------------------------------------------------------- */

.g-masthead {
  gap: 22px;
  padding-block: 96px 64px;
  border-top: 0;
}
.g-masthead h1 {
  font-size: clamp(38px, 5.61vw + 3.2px, 84px);
  line-height: 1.04;
  max-width: 900px;
}
.g-masthead .lede { max-width: var(--g-col); }

@media (max-width: 719px) {
  .g-masthead { gap: 16px; padding-block: 44px 36px; }
  .g-masthead h1 { line-height: 1.06; }
}

/* Steps ------------------------------------------------------------------- */

/* The gap here is between the prose and the step's own figure; the prose
 * block below sets its own, tighter one. */
.g-step { gap: 34px; }
.g-step__text { display: flex; flex-direction: column; gap: 16px; }

.g-step__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.g-step__num {
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(24px, 1.98vw + 11.5px, 40px);
  line-height: 1;
  color: var(--orange);
  font-feature-settings: 'tnum';
}
.g-step__title {
  margin: 0;
  font-size: clamp(28px, 2.31vw + 12.7px, 46px);
  line-height: 1.1;
}

@media (max-width: 719px) {
  .g-step,
  .g-step__text { gap: 20px; }
  .g-step__head { gap: 11px; }
}

/* Prose ------------------------------------------------------------------- */

/*
 * Body copy, and then the several kinds of text that are not it. All of the
 * exceptions carry `.guide` in front of them for the same reason: this rule
 * is `(0,1,1)`, so a lone class — `.lede`, `.cta-block__cap` — loses to it and
 * silently renders at body size. Matching its weight is the fix; relying on
 * source order would leave a rule that breaks when the file is reordered.
 */
.guide p,
.guide li {
  font-size: var(--g-body);
  line-height: var(--g-body-lh);
}
.guide .lede { font-size: clamp(16px, 14.5px + 0.38vw, 20px); line-height: 1.5; }
.guide .cta-block__cap { font-size: 13px; }

.g-prose { display: flex; flex-direction: column; gap: 14px; }
.guide strong { font-weight: 600; }

/* Figures ----------------------------------------------------------------- */

/*
 * Step one's figure is a panel, not a screen, and sits inside the column.
 * The rest are bands: the screen runs to the frame's edge — 1440 in the
 * design, so that is where it stops growing — while the caption stays on the
 * text column's left edge.
 */
.g-shot { display: flex; flex-direction: column; gap: 12px; }
.g-shot img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.g-shot--panel { max-width: 520px; }

.g-band {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-block: var(--g-fig-top) var(--g-fig-bot);
}
/* `<picture>` is inline by default, which would strip the `margin-inline:auto`
 * centring below of anything to centre. */
.g-band picture { display: block; }
.g-band img {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  border-block: 1px solid var(--line);
}
/* Matches `.shell` — the caption is part of the text column, not the screen. */
.g-band__cap { padding-inline: max(var(--gutter), calc(50% - 580px)); }

/* The write figure is followed by the markdown table rather than a new
 * section, so it closes up rather than clearing a full section's space. */
.g-band--tight { padding-bottom: 40px; }

.g-shot figcaption,
.g-band__cap { font-size: var(--g-cap); }

@media (max-width: 719px) {
  .g-shot { gap: 9px; }
  .g-band {
    gap: 9px;
    padding-inline: max(var(--gutter), calc(50% - 580px));
  }
  .g-band--tight { padding-bottom: var(--g-fig-bot); }
  .g-band__cap { padding-inline: 0; }
  .g-band img { border: 1px solid var(--line); }

  /*
   * The settings shot goes. It is a 1440-wide page of controls, and at this
   * width it is a grey smear that says nothing the paragraph beside it has
   * not already said. The design drops it too.
   */
  .g-band--settings { display: none; }
}

/* Callout — the quiet aside: what you need, and what isn't built yet. ------ */

.g-callout {
  align-self: flex-start;
  width: 100%;
  max-width: var(--g-callout-w);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 22px;
  background: var(--cotton-paper-deep);
  border-left: 2px solid var(--orange);
}
.guide .g-callout p { max-width: none; font-size: 15px; line-height: 1.5; }
.g-callout__title { font-weight: 600; }

@media (max-width: 719px) {
  .g-callout { gap: 5px; padding: 14px 16px; }
  .guide .g-callout p { font-size: 14px; line-height: 1.55; }
}

/* The dashed list --------------------------------------------------------- */

.g-list { display: flex; flex-direction: column; gap: 12px; max-width: var(--g-col); }
.guide .g-list li {
  display: flex;
  gap: 12px;
  font-size: var(--g-list);
  line-height: 1.55;
}
.g-list__dash { flex: none; color: var(--muted); }

@media (max-width: 719px) {
  .g-list { gap: 9px; }
  .g-list li { gap: 9px; }
}

/* Markdown table ---------------------------------------------------------- */

/* No rule above this one: it follows the write figure, and the figure's own
 * space is the separation. On a phone it is a section like any other. */
.g-md { border-top: 0; padding-top: 0; gap: 14px; }

.g-rows { max-width: 640px; border-top: 1px solid var(--line); }
.g-row {
  display: grid;
  grid-template-columns: var(--g-md-key) 1fr;
  gap: 20px;
  align-items: baseline;
  padding-block: 11px;
  border-bottom: 1px solid var(--line);
}
.g-row__key {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 400;
  font-size: 13px;
  color: var(--ink);
}
.g-row__desc {
  font-size: var(--g-md-desc);
  line-height: 1.4;
  color: var(--ink);
}

@media (max-width: 719px) {
  .g-md { border-top: 1px solid var(--line); padding-top: var(--g-secy); }
  .g-rows { border-top: 0; }
  .g-row {
    grid-template-columns: 1fr;
    gap: 2px;
    padding-block: 9px;
  }
  .g-row__key { font-size: 12px; }
  .g-row__desc { color: var(--muted); }
}

/* Keyboard shortcuts ------------------------------------------------------ */

/*
 * Two columns, filled top-to-bottom rather than left-to-right, so that the
 * single-column phone layout reads in the order the design draws it: the DOM
 * is already column one followed by column two.
 */
.g-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--g-keys-gap); }
.g-key {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 11px;
  border-bottom: 1px solid var(--line);
}
.g-key__label { font-size: var(--g-key-label); color: var(--ink); }
/* The font-size is for the one combo that is not all keys — "⌘-click". */
.g-key__combo { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 14px; }
.guide .g-keys__note { font-size: 15px; }

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* A fixed box keeps every keycap the same height whatever it holds — a
     letter, a word, or an oversized glyph. */
  height: var(--g-kbd-box);
  min-width: var(--g-kbd-box);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: var(--g-kbd);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  background: var(--cotton-control);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 7px;
  white-space: nowrap;
}
kbd .sym { font-size: var(--g-kbd-sym); }

@media (max-width: 719px) {
  .g-keys { grid-template-columns: 1fr; }
  .g-key { padding-block: 10px; }
  .g-key__combo { gap: 4px; }
  .guide .g-keys__note { font-size: 13px; }
  kbd { padding: 0 6px; }
}

/* Closing and footer ------------------------------------------------------ */

.g-sec--closing .cta { align-self: flex-start; margin-top: 4px; }
.g-sec--closing .cta-block__cap { max-width: none; }

.site-footer { font-size: 13px; }
.g-footer a { color: inherit; text-decoration: none; }
.g-footer a:hover { color: var(--orange); }

@media (max-width: 719px) {
  .g-footer {
    flex-direction: column;
    gap: 4px;
    padding-block: 26px 34px;
  }
  .site-footer { font-size: 12px; }
  .guide .cta-block__cap { font-size: 12px; }
}