/* Yen Macro Research homepage. Brand colours from the YMR branding README. */

@font-face {
  font-family: "Mulish";
  src: url("assets/fonts/Mulish-wght-latin.woff") format("woff");
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --blue: #378ADD;       /* logo blue: large headings only (3.6:1 on white) */
  --blue-text: #1D62B0;  /* links: passes 4.5:1 on white */
  --red: #ED1C24;
  --rule: #BFBFBF;
  --ink: #222222;
  --ink-soft: #555555;
  --bg: #FFFFFF;
  --bg-band: #F4F7FB;
  --measure: 46rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Mulish", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

a { color: var(--blue-text); }
a:hover { text-decoration-thickness: 2px; }

/* Masthead: the horizontal logo with clear space of at least half the orb. */
.masthead { padding: 2.5rem 0 1.5rem; }
.logo { display: block; width: 22rem; max-width: 100%; height: auto; }

h1 {
  font-size: 1.75rem;
  line-height: 1.3;
  font-weight: 700;
  margin: 1rem 0 0.75rem;
}

h2 {
  color: var(--blue);
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 1rem;
}

section { padding: 2.25rem 0; }
.intro { padding-top: 0.5rem; padding-bottom: 0; }

/* Our view: a pale band so the section reads as the firm's standing view. */
.view { background: var(--bg-band); }
.view .dateline { color: var(--ink-soft); font-size: 0.95rem; margin: -0.6rem 0 1rem; }
.view .theme { margin-top: 1.5rem; }
.view h3 { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.35rem; }
.view p { margin: 0 0 0.5rem; }
.view .read { font-size: 0.95rem; color: var(--ink-soft); }

.topics { list-style: none; margin: 0; padding: 0; }
.topics li {
  padding: 0.85rem 0;
  border-top: 1px solid #E3E3E3;
}
.topics li:last-child { border-bottom: 1px solid #E3E3E3; }
.topics strong { display: block; font-weight: 700; }

/* Foreword: portrait beside the title and text; on a phone the text runs full width below. */
.foreword { padding-top: 1.5rem; }
.foreword-body {
  display: grid;
  grid-template-columns: 10rem 1fr;
  grid-template-areas: "photo head" "photo text";
  column-gap: 1.75rem;
  align-items: start;
}
.foreword .portrait { grid-area: photo; }
.foreword h2 { grid-area: head; margin-bottom: 0.75rem; }
.foreword-text { grid-area: text; }
.foreword-text p { margin: 0 0 0.75rem; }
.foreword .signoff { color: var(--ink-soft); font-size: 0.95rem; }
.foreword .focus { color: var(--ink-soft); margin: 1.5rem 0 0; }
.portrait { width: 100%; height: auto; border-radius: 4px; }
.about p { margin: 0 0 0.9rem; }
.about .name { font-size: 1.25rem; font-weight: 700; margin-bottom: 0; }
.about .role { color: var(--ink-soft); margin-bottom: 1.1rem; }

.contact p { margin: 0; font-size: 1.125rem; }

/* Footer: the logo's grey rule with its red right third. */
.footer { padding: 1rem 0 2.5rem; color: var(--ink-soft); font-size: 0.9rem; }
.rule {
  height: 3px;
  background: linear-gradient(to right, var(--rule) 0 65%, var(--red) 65% 100%);
  margin-bottom: 1.25rem;
}
.footer p { margin: 0 0 0.4rem; }

@media (max-width: 600px) {
  body { font-size: 1rem; }
  .masthead { padding: 1.75rem 0 1rem; }
  .logo { width: 16.5rem; }
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.35rem; }
  section { padding: 1.75rem 0; }
  .foreword-body {
    grid-template-columns: 6.5rem 1fr;
    grid-template-areas: "photo head" "text text";
    column-gap: 1.1rem;
    align-items: center;
  }
  .foreword h2 { margin-bottom: 0; }
  .foreword-text { margin-top: 1rem; }
}