/* ==========================================================================
   makshud.com stylesheet, version 2
   One file for the whole site. Edit here, every page updates.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS: the only place you should change colours
   -------------------------------------------------------------------------- */
:root {
  /* Base */
  --ink:        #1A2455;   /* headings and body text */
  --ink-soft:   #4C5A8C;   /* secondary text */
  --line:       #D5DBEC;   /* hairlines */
  --paper:      #FCFCFD;   /* page background */
  --wash:       #EEF1FA;   /* pale tinted band */

  /* Accents: two, used in rotation. Warm and fresh, not flashy. */
  --saffron:      #EF9520;
  --saffron-wash: #FDF2E0;
  --teal:         #0FA394;
  --teal-wash:    #E2F5F2;

  /* Type */
  --display: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --body:    "Newsreader", Georgia, "Times New Roman", serif;

  /* Spacing */
  --s1: 0.5rem;  --s2: 1rem;   --s3: 1.5rem;
  --s4: 2.5rem;  --s5: 4rem;   --s6: 6rem;

  --wide: 74rem;   /* page max width */
  --radius: 10px;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.1rem;
  line-height: 1.72;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.022em;
  margin: 0 0 var(--s2);
}
h1 { font-size: clamp(2rem, 5.2vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.18rem; letter-spacing: -0.012em; }

p  { margin: 0 0 var(--s2); }
a  { color: var(--ink); text-underline-offset: 0.2em; text-decoration-color: var(--line); }
a:hover { text-decoration-color: var(--saffron); }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--saffron);
  outline-offset: 3px;
  border-radius: 4px;
}

img { max-width: 100%; height: auto; display: block; }
body { overflow-wrap: break-word; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: var(--s1) var(--s2); border-radius: 4px;
}
.skip:focus { left: var(--s2); top: var(--s2); z-index: 100; }

/* --------------------------------------------------------------------------
   3. LAYOUT
   .band__grid puts the heading in a narrow left column and the text in a
   wider right column on big screens, so the page fills the width instead of
   leaving a large empty margin on the right.
   -------------------------------------------------------------------------- */
.wrap { max-width: var(--wide); margin-inline: auto; padding-inline: var(--s3); }

.band { padding-block: var(--s5); }
.band--tint { background: var(--wash); }
.band--dark { background: var(--ink); color: var(--paper); }
.band--dark h2, .band--dark h3 { color: var(--paper); }
.band--dark a { color: var(--paper); }

/* Faint dot texture so large areas don't feel empty. Very low contrast. */
.band--texture {
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 22px 22px;
}
.band--dark.band--texture {
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 22px 22px;
}

.band__grid { display: grid; gap: var(--s3); }

@media (min-width: 900px) {
  .band__grid {
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    gap: var(--s5);
    align-items: start;
  }
  .band__grid > h2 { margin-bottom: 0; }
  .band__full { grid-column: 1 / -1; }

  /* Text beside a photograph. The words lead and the picture supports,
     so the text column is the wide one and the image is capped. */
  .band__grid--media {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 23rem);
    align-items: center;
    gap: var(--s4);
  }
}

.band__grid--media img {
  width: 100%;
  max-width: 23rem;
  height: auto;
  justify-self: center;
}

.lede { font-size: 1.28rem; line-height: 1.55; color: var(--ink-soft); }
.band--dark .lede { color: #C3CDEA; }

/* An h1 that reads as an opening line rather than a page label. The page
   still has a proper heading for search engines and screen readers. */
h1.lede {
  font-family: var(--body); font-weight: 400;
  letter-spacing: 0;
  margin-bottom: var(--s2);
}

/* A shallower band, for the credentials strip. */
.band--slim { padding-block: var(--s3); }

/* --------------------------------------------------------------------------
   3b. VERTICAL TIMELINE
   Used on the about page for education and work history. Scannable:
   the eye can run down the years without reading a word of prose.
   -------------------------------------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0; }

.timeline > li {
  position: relative;
  padding: 0 0 var(--s3) var(--s3);
  border-left: 2px solid var(--line);
}
.timeline > li:last-child { padding-bottom: 0; border-left-color: transparent; }

/* The dot. Its ring is the band colour, so the line appears to pass behind. */
.timeline > li::before {
  content: "";
  position: absolute; left: -7px; top: 0.4rem;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--saffron);
  border: 3px solid var(--paper);
}
.band--tint .timeline > li::before { border-color: var(--wash); }

/* A short line stub so the last dot doesn't float unattached. */
.timeline > li:last-child::after {
  content: "";
  position: absolute; left: -2px; top: 0;
  width: 2px; height: 1.1rem;
  background: var(--line);
}

.timeline__year {
  display: block;
  font-family: var(--display); font-weight: 600;
  font-size: 0.82rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink);
}
.timeline h3 {
  font-size: 1.1rem;
  margin: 0.2rem 0 0.1rem;
}
.timeline__org {
  font-family: var(--display); font-size: 0.94rem; font-weight: 500;
  color: var(--ink-soft);
  margin: 0 0 0.35rem;
}
.timeline p { margin: 0; font-size: 0.98rem; line-height: 1.6; color: var(--ink-soft); }

/* Honours and scholarships, shown as small pills under an entry. */
.timeline__marks {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  list-style: none; padding: 0; margin: 0.6rem 0 0;
}
.timeline__marks li {
  font-family: var(--display); font-size: 0.8rem; font-weight: 500;
  color: var(--ink);
  background: var(--saffron-wash);
  border-radius: 999px;
  padding: 0.3em 0.75em;
}
.timeline__marks li:nth-child(even) { background: var(--teal-wash); }

/* --------------------------------------------------------------------------
   3c. PULL QUOTE
   A line that should carry more weight than ordinary body text, with a
   large quotation mark sitting behind it.
   -------------------------------------------------------------------------- */
.pullquote {
  position: relative;
  margin: var(--s4) 0 var(--s3);
  padding: var(--s3) 0 0 3.2rem;
  max-width: 46rem;
}
.pullquote::before {
  content: "\201C";
  position: absolute;
  left: -0.4rem; top: -1.4rem;
  font-family: var(--body);
  font-size: 8rem;
  line-height: 1;
  color: var(--saffron);
  opacity: 0.20;
  pointer-events: none;
}
.pullquote p {
  position: relative;
  font-family: var(--body);
  font-size: 1.42rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

/* --------------------------------------------------------------------------
   4. HEADER AND WORDMARK
   -------------------------------------------------------------------------- */
.site-head {
  border-bottom: 1px solid var(--line);
  background: rgba(252,252,253,0.92);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 50;
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap; padding-block: 0.8rem;
}

.wordmark { display: inline-flex; align-items: center; text-decoration: none; }
.wordmark .name {
  font-family: var(--display); font-weight: 700;
  font-size: 1.14rem; letter-spacing: -0.03em; color: var(--ink);
  white-space: nowrap;
}
.wordmark .name em { font-style: normal; color: var(--saffron); }

.site-nav {
  display: flex; gap: var(--s3); flex-wrap: wrap;
  font-family: var(--display); font-size: 0.94rem; font-weight: 500;
}
.site-nav a { text-decoration: none; padding-block: 3px; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--saffron); }

/* The three-bar button. Hidden on desktop, shown on phones by section 11. */
.nav-toggle {
  display: none;
  align-items: center; gap: 0.5rem;
  background: none; border: 0; cursor: pointer;
  padding: 0.5rem 0.2rem;
  font-family: var(--display); font-weight: 600; font-size: 0.9rem;
  color: var(--ink);
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 22px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after  { top:  7px; }

/* Bars fold into a cross while the menu is open. */
.site-head.is-open .nav-toggle__bars { background: transparent; }
.site-head.is-open .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.site-head.is-open .nav-toggle__bars::after  { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   5. HERO
   The sentence doubles as navigation: each clause links to its section.
   -------------------------------------------------------------------------- */
.hero { padding-block: var(--s5) var(--s4); }

.hero-grid { display: grid; gap: var(--s4); align-items: center; }
@media (min-width: 820px) {
  .hero-grid { grid-template-columns: minmax(0,1fr) auto; gap: var(--s5); }
}

.hero-eyebrow {
  font-family: var(--display); font-weight: 500; font-size: 0.95rem;
  color: var(--ink-soft); margin-bottom: var(--s2);
}

.hero-sentence {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.7rem, 4.4vw, 3rem);
  line-height: 1.2; letter-spacing: -0.028em;
  margin: 0 0 var(--s3);
}
.hero-sentence a {
  text-decoration: none;
  box-shadow: inset 0 -3px 0 var(--line);
  transition: box-shadow .15s ease;
}
.hero-sentence a:hover { box-shadow: inset 0 -0.55em 0 var(--saffron-wash); }

.hero-cred { font-size: 1.05rem; color: var(--ink-soft); max-width: 36rem; margin: 0; }

/* Circular portrait with a soft ring.
   The wrapper holds the circle open, so if the photo file is missing you
   get a calm tinted disc rather than a broken-image icon. */
.hero-photo-wrap {
  width: clamp(170px, 34vw, 250px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--wash);
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 9px var(--saffron);
  overflow: hidden;
  justify-self: center;
  flex: none;
}
.hero-photo {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   6. CREDENTIALS STRIP (text, not logos)
   -------------------------------------------------------------------------- */
.creds {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4);
  list-style: none; margin: 0; padding: 0;
}
.creds li { font-family: var(--display); font-size: 0.92rem; color: var(--ink-soft); }
.creds strong { display: block; font-weight: 700; color: var(--ink); font-size: 1rem; letter-spacing: -0.01em; }

/* --------------------------------------------------------------------------
   7. CARDS: whole box highlights on hover and on keyboard focus
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: var(--s3);
  margin-top: var(--s4);
}

.card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s3);
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.card h3 { margin-bottom: var(--s1); }
.card p  { font-size: 0.99rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }

.card .icon {
  width: 30px; height: 30px; margin-bottom: var(--s2);
  stroke: var(--saffron); stroke-width: 1.7;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}

/* The entire box lights up, not just the heading. This applies to plain
   boxes as well as links, so a grid of cards feels alive under the cursor. */
.card:hover, a.card:focus-visible {
  background: var(--saffron-wash);
  border-color: var(--saffron);
  transform: translateY(-3px);
  outline: none;
}

/* Every second card uses the teal accent, for some life. */
.card:nth-child(even) .icon { stroke: var(--teal); }
.card:nth-child(even):hover, a.card:nth-child(even):focus-visible {
  background: var(--teal-wash);
  border-color: var(--teal);
}

/* --------------------------------------------------------------------------
   8. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  padding: 0.72em 1.5em;
  border: 2px solid var(--ink); background: var(--ink); color: var(--paper);
  text-decoration: none; border-radius: 999px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--saffron); border-color: var(--saffron); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.band--dark .btn { background: var(--saffron); border-color: var(--saffron); color: var(--ink); }
.band--dark .btn:hover { background: var(--paper); border-color: var(--paper); }

/* --------------------------------------------------------------------------
   9. MISC BLOCKS
   -------------------------------------------------------------------------- */
.note {
  font-size: 0.96rem; color: var(--ink-soft);
  border-left: 3px solid var(--saffron); padding-left: var(--s2);
  max-width: 42rem;
}
/* Same note, kept deliberately small: required wording that should be
   readable and findable without competing with the message above it. */
.note--quiet {
  font-size: 0.88rem;
  border-left-color: var(--line);
  margin-top: var(--s3);
}

.tags { display: flex; flex-wrap: wrap; gap: var(--s1); list-style: none; padding: 0; margin: var(--s3) 0 0; }
.tags li {
  font-family: var(--display); font-size: 0.9rem; font-weight: 500;
  background: var(--paper); border: 1px solid var(--line);
  padding: 0.35em 0.9em; border-radius: 999px;
}

/* A row of videos. Falls to one column on a phone. */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
  margin-top: var(--s3);
}
/* Below this width three across becomes unwatchably small, so they stack. */
@media (max-width: 820px) {
  .video-grid { grid-template-columns: 1fr; }
}

/* A form hosted elsewhere. Capped so the fields don't stretch into one
   very long line on a wide screen. */
.form-embed {
  max-width: 44rem;
  margin-top: var(--s3);
}
.form-embed iframe {
  width: 100%;
  border: 0;
  display: block;
}

/* Responsive 16:9 video embed */
.video {
  aspect-ratio: 16 / 9; width: 100%;
  border-radius: var(--radius); overflow: hidden;
  background: var(--wash); border: 1px solid var(--line);
}
.video iframe { width: 100%; height: 100%; border: 0; display: block; }

.pieces { list-style: none; padding: 0; margin: var(--s2) 0 0; }
.pieces li { padding-block: var(--s2); border-bottom: 1px solid var(--line); }
.pieces a { font-family: var(--display); font-weight: 600; text-decoration: none; font-size: 1.05rem; }
.pieces a:hover { color: var(--saffron); }
.pieces span { display: block; font-size: 0.9rem; color: var(--ink-soft); }

.signup { display: flex; gap: var(--s1); flex-wrap: wrap; margin-top: var(--s3); }
.signup input {
  font-family: var(--body); font-size: 1rem; padding: 0.72em 1em;
  border: 2px solid transparent; border-radius: 999px;
  background: rgba(255,255,255,0.12); color: var(--paper);
  min-width: 15rem; flex: 1 1 15rem;
}
.signup input::placeholder { color: #A9B4D6; }

/* Shown in the form's place once someone has subscribed. */
.signup-done {
  margin-top: var(--s3);
  font-size: 1.1rem;
  color: var(--paper);
  border-left: 3px solid var(--saffron);
  padding-left: var(--s2);
}

.steps { counter-reset: step; list-style: none; padding: 0; max-width: 42rem; }
.steps li { counter-increment: step; position: relative; padding-left: 2.7rem; margin-bottom: var(--s2); }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0.2em;
  font-family: var(--display); font-weight: 700; font-size: 0.85rem;
  width: 1.75rem; height: 1.75rem; display: grid; place-items: center;
  background: var(--saffron); color: var(--ink); border-radius: 50%;
}

/* --------------------------------------------------------------------------
   10. FOOTER
   -------------------------------------------------------------------------- */
.site-foot { background: var(--ink); color: var(--paper); padding-block: var(--s4); font-size: 0.96rem; }
.site-foot a { color: var(--paper); text-decoration-color: rgba(255,255,255,0.35); }
.site-foot a:hover { text-decoration-color: var(--saffron); }
.foot-links { display: flex; gap: var(--s2) var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); font-family: var(--display); font-weight: 500; }
.foot-fine { color: #A9B4D6; font-size: 0.86rem; }

/* Required wording that has to be easy to find and easy to read. */
.foot-note-legal {
  font-size: 0.9rem;
  color: #C3CDEA;
  max-width: 46rem;
  padding-top: var(--s2);
  border-top: 1px solid rgba(255,255,255,0.14);
}

/* Social icons. Each link is 44px so it is comfortable to tap. */
.social {
  display: flex; gap: var(--s1);
  list-style: none; padding: 0; margin: 0 0 var(--s3);
}
.social a {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  transition: background .15s ease, border-color .15s ease;
}
.social svg { width: 20px; height: 20px; fill: var(--paper); }
.social a:hover { background: var(--saffron); border-color: var(--saffron); }
.social a:hover svg { fill: var(--ink); }

/* --------------------------------------------------------------------------
   11. RESPONSIVE + MOTION
   -------------------------------------------------------------------------- */
/* --- Tablet and phone: the menu folds behind the three bars -------------- */
@media (max-width: 860px) {
  .site-head .wrap { flex-wrap: nowrap; }

  /* Show the button. */
  .nav-toggle { display: inline-flex; }

  /* Collapse the menu, but only when the script is running. With
     JavaScript off, .has-js is absent and the menu stays visible. */
  .has-js .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: var(--s1) var(--s3) var(--s2);
    box-shadow: 0 14px 24px -18px rgba(26,36,85,0.5);
  }
  .has-js .site-head.is-open .site-nav { display: flex; }

  /* Full-width rows, each tall enough to tap comfortably. */
  .has-js .site-nav a {
    padding-block: 0.85rem;
    border-bottom: 1px solid var(--line);
    border-left: 3px solid transparent;
    padding-left: 0.7rem;
  }
  .has-js .site-nav a:last-child { border-bottom: 0; }
  .has-js .site-nav a:hover,
  .has-js .site-nav a[aria-current="page"] {
    border-bottom-color: var(--line);
    border-left-color: var(--saffron);
  }
}

/* --- Phone -------------------------------------------------------------- */
@media (max-width: 700px) {
  :root {
    --s4: 2rem;
    --s5: 2.75rem;
    --s6: 3.5rem;
  }

  body { font-size: 1.04rem; }
  .wrap { padding-inline: var(--s2); }

  /* The name and the three bars stay on screen while you scroll. */
  .site-head { position: sticky; top: 0; }
  .site-head .wrap { padding-block: 0.6rem; }

  .hero { padding-block: var(--s4) var(--s3); }
  .hero-grid { gap: var(--s3); }
  .hero-photo-wrap { justify-self: start; width: clamp(140px, 42vw, 190px); }
  .hero-sentence { font-size: clamp(1.6rem, 7.6vw, 2.2rem); }

  /* One column, so the minimum widths never force sideways scrolling. */
  .cards, .articles { grid-template-columns: 1fr; margin-top: var(--s3); }

  .creds { gap: var(--s2) var(--s3); }

  .pullquote { padding-left: 2.2rem; }
  .pullquote p { font-size: 1.2rem; }
  .pullquote::before { font-size: 5.5rem; top: -0.9rem; }

  /* The email field and its button stack instead of squeezing. */
  .signup input { min-width: 0; flex: 1 1 100%; }
  .signup .btn { width: 100%; }

  .prices { min-width: 26rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   12. PRICING TABLES
   .table-wrap lets a wide table scroll sideways on a phone instead of
   breaking the layout.
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin-top: var(--s3); }

.prices {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  min-width: 32rem;
}
.prices th {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9rem;
  text-align: left;
  padding: 0.6rem 1rem 0.6rem 0;
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
}
.prices td {
  padding: 0.75rem 1rem 0.75rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.prices tr:last-child td { border-bottom: none; }
.prices td:nth-child(2), .prices td:nth-child(3),
.prices th:nth-child(2), .prices th:nth-child(3) {
  font-family: var(--display);
  font-weight: 500;
  white-space: nowrap;
}
.prices tr:last-child td { font-weight: 600; }

.foot-note { font-size: 0.93rem; color: var(--ink-soft); margin-top: var(--s2); max-width: 42rem; }

/* Images sitting inside a two-column band */
.band__grid img { border-radius: var(--radius); }

/* --------------------------------------------------------------------------
   13. ARTICLE CARDS (homepage and writing page)
   A card is: a cover, a title, a byline. The cover can be a real photo
   (<img class="article__cover">) or a coloured panel with the outlet name
   (<span class="article__cover article__cover--a">). The panel costs
   nothing to maintain and avoids reusing a newspaper's own artwork.
   -------------------------------------------------------------------------- */
.articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--s3);
  margin-top: var(--s4);
}

.article {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;              /* keeps the cover's corners rounded */
  text-decoration: none;
  transition: border-color .16s ease, transform .16s ease;
}
.article:hover, .article:focus-visible {
  border-color: var(--saffron);
  transform: translateY(-3px);
  outline: none;
}

/* The cover sits at the top of the card, always 16:9 */
.article__cover {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;             /* crops a photo to fit, never squashes it */
  display: grid;
  place-items: center;
  padding: var(--s2);
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Two colour variants for text covers. Add more by copying one of these. */
.article__cover--a { background: var(--ink);     color: var(--saffron); }
.article__cover--b { background: var(--saffron); color: var(--ink); }
.article__cover--c { background: var(--teal);    color: #fff; }

.article h3 {
  font-size: 1.08rem;
  margin: var(--s3) var(--s3) var(--s1);
  line-height: 1.3;
}
.article:hover h3 { color: var(--saffron); }

.article__meta {
  font-family: var(--display);
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin: 0 var(--s3) var(--s3);
  margin-top: auto;              /* pins the byline to the bottom */
  padding-top: var(--s1);
}

/* Blurb line inside an article card */
.article__blurb {
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 var(--s3) var(--s2);
}

/* --------------------------------------------------------------------------
   14. IELTS COURSE: lesson pages, module pages, course home
   These styles are used only by the pages build.js generates.
   -------------------------------------------------------------------------- */

/* Breadcrumb: where am I, and how do I get back up */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  font-family: var(--display); font-size: 0.86rem; font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: var(--s3);
}
.crumbs a { text-decoration: none; color: var(--ink-soft); }
.crumbs a:hover { color: var(--saffron); }
.crumbs > * + *::before { content: "/"; margin-right: 0.4rem; color: var(--line); }

/* --- The lesson page ---------------------------------------------------- */
.lesson { padding-block: var(--s4) var(--s5); }
.lesson .wrap { max-width: 50rem; }

.lesson-head { margin-bottom: var(--s4); }
.lesson-code {
  font-family: var(--display); font-weight: 600;
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: var(--s1);
}
.lesson-head h1 { font-size: clamp(1.7rem, 4.4vw, 2.5rem); margin-bottom: var(--s2); }

.lesson-target {
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  font-family: var(--display); font-size: 0.92rem; font-weight: 500;
  background: var(--saffron-wash);
  border-radius: 999px;
  padding: 0.4em 1em;
  margin: 0;
}
.lesson-target span {
  font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* The body of a lesson. A single column, sized for reading on a phone. */
.prose { font-size: 1.08rem; line-height: 1.75; }
.prose > * + * { margin-top: var(--s2); }
.prose h2 {
  font-size: 1.5rem; margin-top: var(--s4); margin-bottom: var(--s1);
  padding-top: var(--s2); border-top: 1px solid var(--line);
}
.prose h3 { font-size: 1.18rem; margin-top: var(--s3); margin-bottom: var(--s1); }
.prose h4 {
  font-family: var(--display); font-size: 1.02rem; font-weight: 600;
  margin-top: var(--s3); margin-bottom: var(--s1);
}
.prose strong { font-weight: 600; }
.prose a { text-decoration-color: var(--saffron); }

.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: 0.4rem; }

.prose blockquote {
  margin: var(--s3) 0;
  padding: var(--s2) var(--s3);
  background: var(--wash);
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.prose blockquote p { margin: 0; }
.prose blockquote p + p { margin-top: var(--s2); }

/* Tables inside a lesson scroll sideways on a phone rather than breaking. */
.prose table {
  width: 100%; border-collapse: collapse; font-size: 0.98rem;
  margin-block: var(--s3); display: block; overflow-x: auto;
}
.prose th {
  font-family: var(--display); font-weight: 600; font-size: 0.88rem;
  text-align: left; padding: 0.6rem 1rem 0.6rem 0;
  border-bottom: 2px solid var(--ink); white-space: nowrap;
}
.prose td {
  padding: 0.7rem 1rem 0.7rem 0;
  border-bottom: 1px solid var(--line); vertical-align: top;
}

.prose code {
  font-size: 0.92em; background: var(--wash);
  padding: 0.12em 0.4em; border-radius: 4px;
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--s4); }

/* A link to another lesson, found automatically in the text. */
.lesson-ref {
  font-family: var(--display); font-weight: 600; font-size: 0.92em;
  text-decoration: none;
  background: var(--teal-wash); border-radius: 4px; padding: 0.05em 0.25em;
}
.lesson-ref:hover { background: var(--saffron-wash); }

/* Answers stay hidden until the reader asks for them. */
.answers {
  margin-top: var(--s2);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper);
}
.answers summary {
  font-family: var(--display); font-weight: 600; font-size: 0.95rem;
  padding: 0.85rem var(--s2);
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 0.5rem;
}
.answers summary::-webkit-details-marker { display: none; }
.answers summary::before {
  content: ""; flex: none;
  width: 0; height: 0;
  border-left: 7px solid var(--saffron);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  transition: transform .15s ease;
}
.answers[open] summary::before { transform: rotate(90deg); }
.answers[open] summary { border-bottom: 1px solid var(--line); }
.answers__body { padding: var(--s2); }
.answers__body p { margin: 0; }

/* The closing question. */
.lesson-prompt {
  margin-top: var(--s4);
  padding: var(--s3);
  background: var(--wash);
  border-radius: var(--radius);
}
.lesson-prompt h2 {
  font-size: 1.15rem; margin: 0 0 var(--s1); padding: 0; border: 0;
}
.lesson-prompt p { margin: 0; }
.lesson-prompt__note {
  margin-top: var(--s2) !important;
  font-size: 0.9rem; color: var(--ink-soft);
}

/* Previous and next, at the foot of every lesson. */
.lesson-nav {
  display: grid; gap: var(--s2);
  margin-top: var(--s5); padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
@media (min-width: 640px) { .lesson-nav { grid-template-columns: 1fr 1fr; } }

.lesson-nav a {
  display: block;
  font-family: var(--display); font-weight: 600; font-size: 0.98rem;
  line-height: 1.35;
  text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s2);
  transition: border-color .15s ease, background .15s ease;
}
.lesson-nav a:hover { border-color: var(--saffron); background: var(--saffron-wash); }
.lesson-nav a span {
  display: block;
  font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 0.35rem;
}
.lesson-nav__next { text-align: right; }
.lesson-back { margin-top: var(--s3); }

/* --- The module page ---------------------------------------------------- */
.lesson-count {
  font-family: var(--display); font-size: 0.95rem; font-weight: 500;
  color: var(--ink-soft); margin-top: var(--s2);
}

.unit { max-width: 46rem; }
.unit + .unit { margin-top: var(--s4); }
.unit h2 { font-size: 1.3rem; margin-bottom: var(--s2); }

.unit-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.unit-list li { border-bottom: 1px solid var(--line); }
.unit-list li:first-child { border-top: 1px solid var(--line); }
.unit-list a {
  display: flex; gap: var(--s2); align-items: baseline;
  padding: 0.8rem 0.6rem;
  font-family: var(--display); font-size: 1rem; font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .14s ease, border-color .14s ease;
}
.unit-list a:hover { background: var(--paper); border-left-color: var(--saffron); }
.unit-list__code {
  flex: none; width: 2.6rem;
  font-weight: 700; font-size: 0.85rem; color: var(--ink-soft);
  letter-spacing: 0.03em;
}

/* --- The course home page ----------------------------------------------- */
.card__meta {
  font-family: var(--display); font-size: 0.85rem; font-weight: 600;
  color: var(--ink-soft); margin-top: var(--s2) !important;
}

/* --- Phones ------------------------------------------------------------- */
@media (max-width: 700px) {
  .lesson { padding-block: var(--s3) var(--s4); }
  .lesson .wrap { max-width: none; }
  .prose { font-size: 1.04rem; }
  .lesson-nav__next { text-align: left; }
  .unit-list a { padding-inline: 0.4rem; }
}