/* ==========================================================================
   Hkeeli — Page layout
   Mobile-first. Base rules describe the phone; media queries only ever
   enhance upward. Nothing is hidden or removed at small sizes.
   ========================================================================== */

section {
  padding: var(--space-8) var(--gutter);
}

.wrap {
  max-width: var(--measure);
  margin-inline: auto;
}

.page-head {
  padding: var(--space-7) var(--gutter) var(--space-5);
  text-align: center;
}

.page-head h1 {
  font-size: var(--step-4);
}

.page-head p {
  color: var(--ink-muted);
  max-width: 620px;
  margin-inline: auto;
  margin-block-start: var(--space-3);
}

/* --------------------------------------------------------------------------
   Nav responsiveness
   -------------------------------------------------------------------------- */
.nav-links {
  display: none;
}

/* On narrow phones the logo, language switch, CTA and hamburger don't fit in
   one row. The CTA is the one that's duplicated inside the drawer, so it's the
   one that gives way — booking stays one tap from the menu. */
@media (max-width: 559px) {
  .site-nav {
    padding-inline: var(--space-4);
  }
  .nav-cta {
    display: none;
  }
}

/* A phone held sideways has ~360px of height. Between the sticky nav and the
   games' sticky action bar, two thirds of that would be chrome — so the nav
   gives up its stickiness and scrolls away instead. */
@media (max-height: 480px) {
  .site-nav {
    position: static;
  }

  /* Nothing is covering the targets any more, so drop the clearance with it. */
  main [id] {
    scroll-margin-block-start: 0;
  }
}

@media (min-width: 860px) {
  .nav-toggle {
    display: none;
  }
  .nav-drawer {
    display: none !important;
  }
  .nav-links {
    display: flex;
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  padding: var(--space-7) 0 var(--space-6);
  background: var(--sand-light);
}

.hero-copy {
  padding-inline: var(--gutter);
}

.hero h1 {
  font-size: var(--step-5);
  line-height: 1.05;
  margin-block-end: var(--space-5);
}

.hero h1 .arabic-word {
  font-family: var(--font-arabic);
  font-weight: 700;
  color: var(--citrus);
  font-size: 1.15em;
  direction: rtl;
  unicode-bidi: isolate;
}

.hero p {
  font-size: 1.1rem;
  color: var(--ink-muted);
  max-width: 460px;
  margin-block-end: var(--space-6);
}

.hero-ctas {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Postcards on mobile: a swipeable, snapping rail — same content, thumb-sized.
   The rotated absolute stack from the mock returns at >=860px. */
.postcard-stack {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--space-6) var(--gutter) var(--space-4);
  margin-block-start: var(--space-5);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.postcard-stack::-webkit-scrollbar {
  display: none;
}

.postcard-stack .postcard {
  scroll-snap-align: center;
  flex: 0 0 auto;
}

.postcard-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  padding-block-end: var(--space-2);
}

/* 8px dot, 32px hit area — the padding is the tap target. */
.postcard-dots button {
  /* A full tap target around an 8px dot: the padding is the hit area, and
     background-clip keeps the visible dot small. */
  width: var(--tap);
  height: var(--tap);
  padding: 18px;
  border-radius: 50%;
  background: var(--hairline-strong);
  background-clip: content-box;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.postcard-dots button[aria-current='true'] {
  background: var(--citrus);
  /* Grows the dot by shrinking its padding, not by scaling the button: a
     transform would enlarge the hit area over its neighbours too. */
  padding: 16px;
}

@media (min-width: 860px) {
  /* The hero runs edge to edge on purpose — it is the one block that isn't
     capped at --measure, and the full bleed is what gives it its scale. The
     slack that creates on a wide screen is absorbed by the postcard scatter
     below, not by narrowing the hero. */
  .hero {
    padding: var(--space-9) 0 var(--space-8);
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-7);
    align-items: center;
  }

  .hero-copy {
    padding-inline-start: var(--gutter);
    padding-inline-end: 0;
  }

  /* Restore the signature scattered stack.
     Two rules keep every card readable:
     1. each card sits ABOVE the one before it, so nothing is buried;
     2. the vertical step is larger than a card's content block, so a card
        only ever overlaps the empty bottom padding of the card beneath. */
  /* The scatter below is hand-set in pixels, so the group has one fixed visual
     width: the furthest card offset, plus a card, plus a little for the rotation
     overhang. Sized here so the group can be pushed to the end of its track —
     the three cards stay clustered exactly as drawn, and the slack a wide screen
     creates opens up between the copy and the cards instead of stranding one
     card away from the other two. */
  .postcard-stack {
    position: relative;
    display: block;
    width: calc(140px + var(--postcard-w) + var(--space-4));
    height: 560px;
    overflow: visible;
    padding: 0;
    margin-block: 0;
    /* Pushed to the end of the track, then pulled back off it. Anchored hard to
       the gutter, the cards drift far from the copy on a wide screen; pulled too
       far, the hole just moves to the page edge. The slack is finite, so this
       splits it — the pull is a share of the width past 1000px, which is nothing
       at the narrow end where there is no slack to give, and ~110px at 1900,
       leaving the outer margin smaller than the gap it opens in the middle so
       the cards still read as belonging to the right side of the page. */
    margin-inline: auto calc(var(--gutter) + clamp(0px, (100vw - 1000px) * 0.12, 130px));
  }

  .postcard-stack .postcard {
    position: absolute;
  }

  .postcard-stack .postcard:nth-child(1) {
    inset-block-start: 0;
    inset-inline-start: 20px;
    transform: rotate(-6deg);
    z-index: 1;
  }

  .postcard-stack .postcard:nth-child(2) {
    inset-block-start: 178px;
    inset-inline-start: 140px;
    transform: rotate(4deg);
    z-index: 2;
  }

  .postcard-stack .postcard:nth-child(3) {
    inset-block-start: 356px;
    inset-inline-start: 30px;
    transform: rotate(-3deg);
    z-index: 3;
  }

  /* Mirror the scatter so the arrangement reads the same way in Arabic */
  [dir='rtl'] .postcard-stack .postcard:nth-child(1) {
    transform: rotate(6deg);
  }
  [dir='rtl'] .postcard-stack .postcard:nth-child(2) {
    transform: rotate(-4deg);
  }
  [dir='rtl'] .postcard-stack .postcard:nth-child(3) {
    transform: rotate(3deg);
  }

  .postcard-dots {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.about {
  background: var(--sea-deep);
  color: var(--sand-light);
}

.about-grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  max-width: var(--measure);
  margin-inline: auto;
}

.about h2 {
  color: var(--sand-light);
  font-size: var(--step-3);
  margin-block-end: var(--space-4);
}

.about p {
  color: var(--on-dark-muted);
  margin-block-end: var(--space-4);
  font-size: 1.02rem;
}

/* The spoken introduction, in the slot a portrait would occupy. It sits on the
   dark about band, so it borrows the on-dark wash rather than the card colour
   used everywhere else. */
.intro-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--wash-on-dark);
  border: 1px solid var(--hairline-on-dark);
}

.intro-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.intro-card h3 {
  color: var(--sand-light);
  font-size: 1.15rem;
}

.intro-card-body {
  color: var(--on-dark-muted);
  font-size: 0.9rem;
}

.intro-card .play {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
}

/* The line she says, in all three scripts — the same trilingual treatment the
   lessons use, so the page teaches even here. */
.intro-line {
  display: grid;
  gap: var(--space-1);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--hairline-on-dark);
}

.intro-line .arabic {
  font-size: 1.5rem;
  color: var(--sand-light);
}

.intro-line .translit {
  color: var(--citrus);
}

.intro-en {
  font-size: 0.9rem;
  color: var(--on-dark-muted);
}

.about-note {
  margin-block-start: var(--space-5);
  padding-inline-start: var(--space-4);
  border-inline-start: 3px solid var(--citrus);
  color: var(--on-dark-muted);
  font-size: 0.95rem;
}

.testimonials-pending {
  max-width: var(--measure);
  margin-inline: auto;
  margin-block-start: var(--space-7);
  text-align: center;
  font-size: 0.9rem;
  color: var(--on-dark-muted);
}

.testimonials-title {
  max-width: var(--measure);
  margin-inline: auto;
  margin-block-start: var(--space-8);
  color: var(--sand-light);
  font-size: 1.3rem;
  text-align: center;
}

.testimonials {
  display: grid;
  gap: var(--space-4);
  max-width: var(--measure);
  margin-inline: auto;
  margin-block-start: var(--space-5);
}

.testimonial {
  background: var(--wash-on-dark);
  border: 1px solid var(--hairline-on-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.testimonial blockquote {
  color: var(--sand-light);
  font-size: 1rem;
}

.testimonial cite {
  display: block;
  margin-block-start: var(--space-3);
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--citrus);
}

@media (min-width: 860px) {
  .about-grid {
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--space-8);
  }
  .testimonials {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Learn
   -------------------------------------------------------------------------- */
.learn-grid {
  display: grid;
  gap: var(--space-5);
  max-width: var(--measure);
  margin-inline: auto;
}

@media (min-width: 600px) {
  .learn-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .learn-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Expanded unit view (learn.html) */
.unit {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-block-end: var(--space-5);
}

.unit-index {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sea-deep);
  color: var(--citrus);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
}

.unit-body {
  padding: 0 var(--space-5) var(--space-6);
  display: grid;
  gap: var(--space-6);
}

/* Dialogue lines */
.dialogue-line {
  display: grid;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  background: var(--sand-light);
  border-radius: var(--radius-md);
  border-inline-start: 3px solid var(--olive);
  margin-block-end: var(--space-2);
}

.dialogue-line[data-speaker='B'] {
  border-inline-start-color: var(--citrus);
}

.dialogue-line .speaker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olive);
}

.dialogue-line .arabic {
  font-size: 1.35rem;
  color: var(--sea-deep);
}

.dialogue-line .line-en {
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* Vocab list — cards on mobile, rows on desktop. Same data either way. */
.vocab-list {
  display: grid;
  gap: var(--space-3);
}

.vocab-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  background: var(--sand);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.vocab-row .vocab-en {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

@media (min-width: 700px) {
  .vocab-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.tip-box {
  background: var(--olive-wash);
  border-inline-start: 4px solid var(--olive);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}

.tip-box p {
  font-size: 0.95rem;
  color: var(--ink-muted);
}

.task-box {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 700px) {
  .task-box {
    grid-template-columns: repeat(2, 1fr);
  }
}

.task {
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.task h4 {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olive);
  margin-block-end: var(--space-2);
}

.task p {
  font-size: 0.92rem;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Games section
   -------------------------------------------------------------------------- */
.games {
  background: var(--sand);
}

.games-grid {
  display: grid;
  gap: var(--space-4);
  max-width: var(--measure);
  margin-inline: auto;
}

/* auto-fit rather than a fixed count: the tile row has to stay balanced as
   games are added, otherwise the 5th one strands itself on its own row. */
/* Wrapping flex rather than a grid: with any column count, a game list that
   doesn't divide evenly leaves the last tile stranded against one edge. Here
   the final row centres itself instead, whatever the total. */
@media (min-width: 560px) {
  .games-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .games-grid > * {
    flex: 1 1 240px;
    /* Caps how far a short final row stretches, so rows stay close in width. */
    max-width: 300px;
  }
}

/* --------------------------------------------------------------------------
   Home sections that need their own grid
   -------------------------------------------------------------------------- */
.mini-section {
  background: var(--sand);
}

.goal-grid {
  display: grid;
  gap: var(--space-4);
  max-width: var(--measure);
  margin-inline: auto;
}

.method-steps,
.journey-list {
  max-width: var(--measure);
  margin-inline: auto;
}

.method-steps {
  display: grid;
  gap: var(--space-6);
  counter-reset: none;
}

.method-steps > li {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

@media (min-width: 600px) {
  .goal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  /* Five goals: three then two, with the last row centred rather than left
     against the edge — same reasoning as the games grid. */
  .goal-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .goal-grid > * {
    flex: 1 1 280px;
    max-width: 340px;
  }

  .method-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }

  .teach-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Lessons page — course overview and stages
   -------------------------------------------------------------------------- */
.course-overview {
  display: grid;
  gap: var(--space-4);
  align-items: center;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-block-end: var(--space-7);
}

.course-overview h2 {
  font-size: var(--step-2);
}

.course-overview p {
  color: var(--ink-muted);
  font-size: 0.95rem;
  margin-block-start: var(--space-2);
}

.course-overview .btn-primary {
  justify-self: start;
}

@media (min-width: 760px) {
  .course-overview {
    grid-template-columns: 1fr auto;
  }

  .course-overview .btn-primary {
    justify-self: end;
  }
}

.stage {
  padding: 0;
  margin-block-end: var(--space-8);
}

.stage-head {
  margin-block-end: var(--space-5);
  padding-block-end: var(--space-3);
  border-block-end: 2px solid var(--hairline);
}

.stage-title {
  font-size: var(--step-2);
}

.stage-outcome {
  color: var(--ink-muted);
  font-size: 0.95rem;
  margin-block-start: var(--space-2);
}

.planned-stages {
  display: grid;
  gap: var(--space-3);
}

.planned-stages li {
  display: grid;
  gap: 2px;
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-md);
}

.planned-stages strong {
  font-family: var(--font-display);
  color: var(--sea-deep);
}

.planned-stages span {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Unit card (curriculum view)
   -------------------------------------------------------------------------- */
.unit-head {
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
}

.unit-headline {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.unit-headline h3 {
  font-size: 1.3rem;
}

.unit-outcome {
  color: var(--ink-muted);
  font-size: 0.95rem;
  margin-block-start: var(--space-2);
}

.unit-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.unit-meta .lesson-level {
  margin: 0;
}

.unit-status {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--hairline);
  color: var(--ink-soft);
}

.unit-status[data-status='started'] {
  background: rgba(232, 163, 61, 0.18);
  color: var(--citrus-ink);
}

.unit-status[data-status='complete'] {
  background: var(--ok-bg);
  color: var(--ok);
}

.unit-count {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.unit-skills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.unit-skills li {
  font-size: 0.82rem;
  color: var(--sea-deep);
  background: var(--olive-wash);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
}

.unit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.unit-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.unit-block h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--olive);
  margin-block-end: var(--space-3);
}

/* --------------------------------------------------------------------------
   Practice page — the daily card, the session, the catalogue
   -------------------------------------------------------------------------- */
.daily-card {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  background: var(--sea-deep);
  color: var(--sand-light);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-block-end: var(--space-5);
}

.daily-card h2 {
  color: var(--sand-light);
  font-size: var(--step-3);
}

.daily-card p {
  color: var(--on-dark-muted);
  margin-block-start: var(--space-3);
}

.daily-card .eyebrow {
  color: var(--citrus);
  margin-block-end: var(--space-3);
}

.daily-card-steps {
  display: grid;
  gap: var(--space-1);
  margin-block-start: var(--space-4);
  font-size: 0.9rem;
  color: var(--on-dark-muted);
}

.daily-card-steps li {
  padding-inline-start: var(--space-4);
  position: relative;
}

.daily-card-steps li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--citrus);
}

.daily-card-stats {
  font-size: 0.85rem;
  color: var(--citrus);
  margin-block-start: var(--space-4);
}

.daily-card-running {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--citrus);
}

.daily-card .btn-primary {
  justify-self: start;
}

@media (min-width: 800px) {
  .daily-card {
    grid-template-columns: 1fr auto;
  }

  .daily-card .btn-primary {
    justify-self: end;
  }
}

.daily-session {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-block-end: var(--space-6);
}

.daily-session-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.daily-session-head h2 {
  font-size: 1.2rem;
}

.daily-exit {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--olive);
  text-decoration: underline;
  min-height: var(--tap);
  padding-inline: var(--space-2);
}

/* The step rail is the session's progress indicator: it names every step and
   says which one you are on, rather than only counting them. */
.daily-trail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-block: var(--space-4);
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--hairline);
}

.daily-trail-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
}

.daily-trail-index {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--hairline);
  color: var(--ink-soft);
  font-size: 0.75rem;
}

.daily-trail-step[data-state='current'] {
  color: var(--sea-deep);
}

.daily-trail-step[data-state='current'] .daily-trail-index {
  background: var(--citrus);
  color: var(--sea-deep);
}

.daily-trail-step[data-state='done'] .daily-trail-index {
  background: var(--olive);
  color: var(--sand-light);
}

.daily-teach {
  display: grid;
  gap: var(--space-4);
}

.daily-step-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olive);
}

.teach-card {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  background: var(--sand);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.teach-main {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  justify-content: space-between;
}

.teach-main .arabic {
  font-size: 2rem;
  color: var(--sea-deep);
}

.teach-en {
  font-weight: 700;
}

.teach-note {
  font-size: 0.88rem;
  color: var(--ink-muted);
}

.daily-summary-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}

.game-frame {
  display: grid;
  gap: var(--space-4);
}

.game-frame-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.game-back {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--olive);
  min-height: var(--tap);
  padding-inline: var(--space-2);
}

.game-frame-title {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.game-catalogue {
  padding: var(--space-7) 0 0;
  border-block-start: 1px solid var(--hairline);
  margin-block-start: var(--space-7);
}

.game-catalogue h2 {
  font-size: var(--step-2);
}

.catalogue-note {
  color: var(--ink-muted);
  font-size: 0.95rem;
  margin-block: var(--space-2) var(--space-6);
}

.game-group {
  padding: 0;
  margin-block-end: var(--space-6);
}

.game-group h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--olive);
  margin-block-end: var(--space-4);
}

/* A tile is a button here rather than a link, so it needs the card's own
   alignment back — buttons centre their text by default. */
.game-catalogue .game-tile {
  width: 100%;
  font: inherit;
  color: inherit;
}

.game-catalogue .game-tile[aria-current='true'] {
  border-color: var(--citrus);
  box-shadow: var(--shadow-lift);
}

.onboarding-section {
  padding-block-start: var(--space-4);
}