/*
Theme Name: Maidstone Tai Chi
Theme URI: https://maidstonetaichi.co.uk
Author: Rob Hemingway
Description: Bespoke block theme for Maidstone Tai Chi. Design system is defined in theme.json; section layouts ship as content-locked block patterns.
Version: 1.1.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maidstone-tai-chi
Tags: block-theme, one-column, custom-colors, custom-menu
*/

:root{
  /* Palette + type + spacing come from theme.json. These aliases keep the
     hand-written CSS below unchanged and readable. */
  --color-ink:var(--wp--preset--color--ink,#1C2B2A);
  --color-jade:var(--wp--preset--color--jade,#2E7D5B);
  --color-slate:var(--wp--preset--color--slate,#3E7C96);
  --color-mist:var(--wp--preset--color--mist,#E8F1EC);
  --color-paper:var(--wp--preset--color--paper,#FAF8F4);
  --color-blue-paper:var(--wp--preset--color--blue-paper,#C3D2DA);

  --font-heading:var(--wp--preset--font-family--heading,"Newsreader",Georgia,serif);
  --font-body:var(--wp--preset--font-family--body,"Atkinson Hyperlegible",sans-serif);

  --space-3xs:0.35rem;
  --space-2xs:0.6rem;
  --space-xs:var(--wp--preset--spacing--20,1rem);
  --space-s:var(--wp--preset--spacing--30,1.5rem);
  --space-m:var(--wp--preset--spacing--40,2.25rem);
  --space-l:var(--wp--preset--spacing--50,3.5rem);
  --space-xl:var(--wp--preset--spacing--60,5.5rem);
  --space-2xl:8rem;

  --step--1:var(--wp--preset--font-size--small,0.9375rem);
  --step-0:var(--wp--preset--font-size--medium,1.125rem);
  --step-1:var(--wp--preset--font-size--large,1.3125rem);
  --step-2:var(--wp--preset--font-size--x-large,1.625rem);
  --step-3:var(--wp--preset--font-size--xx-large,clamp(1.85rem,1.4rem + 1.8vw,2.5rem));
  --step-4:var(--wp--preset--font-size--huge,clamp(2.3rem,1.6rem + 3vw,3.6rem));
  --step-5:clamp(2.9rem,1.9rem + 4.6vw,5.1rem);

  --measure:64ch;
  --rule:1px solid rgba(28,43,42,0.16);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--color-paper);
  color:var(--color-ink);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--color-jade)}
a:focus-visible,button:focus-visible{
  outline:2px solid var(--color-slate);
  outline-offset:3px;
  border-radius:2px;
}

h1,h2,h3{
  font-family:var(--font-heading);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-0.012em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:var(--step-5);font-weight:300}
h2{font-size:var(--step-4)}
h3{font-size:var(--step-2)}
p{margin:0 0 var(--space-xs)}
p:last-child{margin-bottom:0}

.wrap{
  width:min(100% - 2.5rem,74rem);
  margin-inline:auto;
}
.narrow{max-width:var(--measure)}

.lede{
  font-size:var(--step-1);
  line-height:1.55;
}

/* ── links that read as links, not buttons ─────────────────── */
.link{
  display:inline-block;
  font-weight:700;
  color:var(--color-jade);
  text-decoration:none;
  border-bottom:2px solid rgba(46,125,91,0.35);
  padding-bottom:2px;
  transition:border-color .18s ease,color .18s ease;
}
.link:hover{border-bottom-color:var(--color-jade)}

.button{
  display:inline-block;
  background:var(--color-jade);
  color:var(--color-paper);
  text-decoration:none;
  font-weight:700;
  font-size:var(--step--1);
  padding:0.85em 1.6em;
  border-radius:2rem;
  transition:background .18s ease;
}
.button:hover{background:#25674A}
.button.is-quiet{
  background:transparent;
  color:var(--color-ink);
  border:1px solid rgba(28,43,42,0.35);
}
.button.is-quiet:hover{background:rgba(28,43,42,0.06)}

/* ── header ────────────────────────────────────────────────── */
.site-header{
  position:relative;
  z-index:5;
  padding:var(--space-s) 0;
}
.site-header .wrap{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-s);
  align-items:baseline;
  justify-content:space-between;
}
.wordmark{
  font-family:var(--font-heading);
  font-size:var(--step-2);
  font-weight:400;
  letter-spacing:0.01em;
  color:var(--color-ink);
  text-decoration:none;
  line-height:1;
}
.wordmark span{display:block;font-size:var(--step--1);letter-spacing:0.16em;color:var(--color-jade);margin-top:0.4em;font-family:var(--font-body)}
.site-nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-s);
  list-style:none;
  margin:0;
  padding:0;
  font-size:var(--step--1);
}
.site-nav a{
  color:var(--color-ink);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:2px solid transparent;
}
.site-nav a:hover{border-bottom-color:var(--color-jade)}

/* ── hero ──────────────────────────────────────────────────── */
.hero{
  position:relative;
  padding-block:var(--space-l) var(--space-xl);
}
.hero-wash{
  position:absolute;
  top:-30%;
  left:-20%;
  width:min(58rem,105%);
  opacity:0.42;
  pointer-events:none;
  z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 42%,transparent 78%);
          mask-image:linear-gradient(to bottom,#000 42%,transparent 78%);
}
.hero .wrap{position:relative;z-index:1}
.hero-grid{
  display:grid;
  gap:var(--space-l);
  align-items:center;
}
.hero h1{margin-bottom:var(--space-s)}
.hero-sub{
  font-family:var(--font-heading);
  font-style:italic;
  font-size:var(--step-2);
  line-height:1.35;
  color:var(--color-jade);
  margin-bottom:var(--space-s);
}
.hero-body{max-width:46ch}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-xs);
  margin-top:var(--space-m);
}
.hero-figure figcaption{
  font-size:var(--step--1);
  color:rgba(28,43,42,0.6);
  margin-top:var(--space-2xs);
}
.hero-figure img{border-radius:2px}

/* ── the timetable strip ───────────────────────────────────── */
.strip{
  background:var(--color-mist);
  padding-block:var(--space-m);
}
.strip-grid{
  display:grid;
  gap:var(--space-s);
}
.strip-item{
  display:grid;
  gap:var(--space-3xs);
}
.strip-day{
  font-family:var(--font-heading);
  font-size:var(--step-2);
  line-height:1;
  color:var(--color-jade);
}
.strip-place{font-weight:700}
.strip-time{font-size:var(--step--1);color:rgba(28,43,42,0.72)}

/* ── generic section rhythm ────────────────────────────────── */
.section{
  position:relative;
  padding-block:var(--space-xl);
  overflow:hidden;
}
.section.is-mist{background:var(--color-mist)}
.section h2{margin-bottom:var(--space-m)}
.section-intro{max-width:var(--measure);margin-bottom:var(--space-l)}

/* the signature: charcoal figures in the margin */
.marginalia{
  position:absolute;
  pointer-events:none;
  user-select:none;
  opacity:0.16;
  z-index:0;
}
.section > .wrap{position:relative;z-index:1}
.m-offer{right:-6rem;top:8%;width:20rem}
.m-approach{left:-7rem;bottom:-3rem;width:22rem}
.m-about{right:-5rem;top:12%;width:17rem}
.m-contact{left:-6rem;top:-2rem;width:19rem}

/* the drawing that sits opposite the teaching copy */
.teach-grid{
  display:grid;
  gap:var(--space-l);
  align-items:center;
}
.teach-figure{margin:0}
.teach-figure img{
  width:100%;
  max-width:26rem;
  margin-inline:auto;
  opacity:0.85;
}
.teach-figure figcaption{
  font-size:var(--step--1);
  color:rgba(28,43,42,0.62);
  text-align:center;
  max-width:26rem;
  margin:var(--space-s) auto 0;
}

/* ── what it can offer ─────────────────────────────────────── */
.prose > * + *{margin-top:var(--space-s)}
.prose h3{
  font-size:var(--step-1);
  font-family:var(--font-body);
  font-weight:700;
  letter-spacing:0;
  color:var(--color-jade);
  margin-bottom:var(--space-2xs);
}
.offer-grid{
  display:grid;
  gap:var(--space-l) var(--space-m);
}
.offer-item{max-width:44ch}

/* ── classes ───────────────────────────────────────────────── */
.class-list{
  display:grid;
  gap:var(--space-l);
  list-style:none;
  margin:0;
  padding:0;
}
.class-card{
  display:grid;
  gap:var(--space-s);
  align-content:start;
}
.class-card img{border-radius:2px;width:100%}
.class-when{
  font-family:var(--font-heading);
  font-size:var(--step-2);
  line-height:1.15;
  margin-bottom:var(--space-3xs);
}
.class-where{font-weight:700;margin-bottom:var(--space-3xs)}
.class-address{
  font-size:var(--step--1);
  color:rgba(28,43,42,0.72);
  margin-bottom:var(--space-xs);
}
.class-notes{
  display:grid;
  gap:var(--space-m);
  margin-top:var(--space-xl);
  padding-top:var(--space-m);
  border-top:var(--rule);
}
.class-notes h3{
  font-size:var(--step-1);
  font-family:var(--font-body);
  font-weight:700;
  color:var(--color-jade);
  margin-bottom:var(--space-2xs);
}
.class-notes p{font-size:var(--step--1);line-height:1.6}
.class-notes .link{margin-top:var(--space-2xs);font-size:var(--step--1)}

/* ── the two other practices ───────────────────────────────── */
.practice{
  display:grid;
  gap:var(--space-m);
  align-items:center;
  padding-block:var(--space-l);
}
.practice + .practice{border-top:var(--rule)}
.practice img{border-radius:2px}
.practice h3{
  font-size:var(--step-3);
  margin-bottom:var(--space-2xs);
}
.practice .tagline{
  font-family:var(--font-heading);
  font-style:italic;
  font-size:var(--step-1);
  color:var(--color-slate);
  margin-bottom:var(--space-s);
}
.practice-text > p{max-width:52ch}
.practice .link{margin-top:var(--space-s)}

/* ── about ─────────────────────────────────────────────────── */
.about-grid{
  display:grid;
  gap:var(--space-l);
  align-items:start;
}
.about-portrait img{border-radius:2px}
.about-portrait figcaption{
  font-size:var(--step--1);
  color:rgba(28,43,42,0.6);
  margin-top:var(--space-2xs);
}

/* ── contact ───────────────────────────────────────────────── */
.contact-grid{
  display:grid;
  gap:var(--space-l);
}
.contact-methods{
  list-style:none;
  margin:var(--space-m) 0 0;
  padding:0;
  display:grid;
  gap:var(--space-s);
}
.contact-methods a{
  font-family:var(--font-heading);
  font-size:var(--step-2);
  color:var(--color-ink);
  text-decoration:none;
  border-bottom:1px solid rgba(28,43,42,0.25);
  padding-bottom:3px;
  word-break:break-word;
}
.contact-methods a:hover{border-bottom-color:var(--color-jade);color:var(--color-jade)}
.contact-methods span{
  display:block;
  font-family:var(--font-body);
  font-size:var(--step--1);
  color:rgba(28,43,42,0.7);
  margin-bottom:var(--space-3xs);
}

/* ── footer ────────────────────────────────────────────────── */
.site-footer{
  background:var(--color-ink);
  color:rgba(250,248,244,0.82);
  padding-block:var(--space-l);
  font-size:var(--step--1);
}
.site-footer a{color:var(--color-paper)}
.footer-grid{
  display:grid;
  gap:var(--space-m);
  align-items:start;
}
.footer-badge{background:var(--color-paper);padding:var(--space-xs);border-radius:2px;max-width:19rem}
.footer-badge img{width:100%}
.footer-badge p{
  font-size:0.8125rem;
  color:var(--color-ink);
  margin-top:var(--space-2xs);
  line-height:1.4;
}
.footer-links{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2xs)}
.colophon{
  margin-top:var(--space-m);
  padding-top:var(--space-s);
  border-top:1px solid rgba(250,248,244,0.2);
  color:rgba(250,248,244,0.6);
  font-size:0.8125rem;
}

/* ── responsive ────────────────────────────────────────────── */
@media (min-width:46em){
  .strip-grid{grid-template-columns:repeat(3,1fr)}
  .offer-grid{grid-template-columns:repeat(2,1fr)}
  .class-list{grid-template-columns:repeat(3,1fr);gap:var(--space-m)}
  .class-notes{grid-template-columns:repeat(3,1fr);gap:var(--space-l)}
  .practice{grid-template-columns:1fr 1.15fr;gap:var(--space-l)}
  .practice.is-flipped .practice-media{order:2}
  .about-grid{grid-template-columns:0.8fr 1.2fr;gap:var(--space-xl)}
  .contact-grid{grid-template-columns:1fr 1fr;gap:var(--space-xl)}
  .footer-grid{grid-template-columns:1.2fr 1fr 1fr}
  .contact-methods{gap:var(--space-m)}
}
@media (min-width:62em){
  .hero-grid{grid-template-columns:1fr 1.05fr;gap:var(--space-xl)}
  .offer-grid{gap:var(--space-xl) var(--space-l)}
  .teach-grid{grid-template-columns:1.15fr 0.85fr;gap:var(--space-xl)}
  .teach-grid .prose{max-width:var(--measure)}
}
@media (max-width:45.99em){
  .marginalia{display:none}
  .hero-wash{opacity:0.34;top:-6%;width:130%}
}

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

/* ── inner page furniture ──────────────────────────────────── */
.page-head{
  position:relative;
  padding-block:var(--space-l) var(--space-m);
  overflow:hidden;
}
.page-head .wrap{position:relative;z-index:1}
.page-head-wash{
  position:absolute;
  top:-46%;
  right:-14%;
  width:min(46rem,90%);
  opacity:0.32;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent 82%);
          mask-image:linear-gradient(to bottom,#000 45%,transparent 82%);
}
.page-head h1{font-size:var(--step-4);margin-bottom:var(--space-s)}
.page-head .standfirst{
  font-family:var(--font-heading);
  font-style:italic;
  font-size:var(--step-2);
  line-height:1.35;
  color:var(--color-jade);
  max-width:26ch;
}

.breadcrumb{
  font-size:var(--step--1);
  margin-bottom:var(--space-s);
}
.breadcrumb a{color:rgba(28,43,42,0.7);text-decoration:none;border-bottom:1px solid rgba(28,43,42,0.25)}
.breadcrumb a:hover{color:var(--color-jade);border-bottom-color:var(--color-jade)}

.page-lead{
  padding-bottom:var(--space-l);
}
.page-lead .wrap > p{max-width:var(--measure);font-size:var(--step-1);line-height:1.55}

/* two-column body: prose beside a charcoal drawing */
.body-grid{
  display:grid;
  gap:var(--space-l);
  align-items:start;
}
.body-figure{margin:0 auto var(--space-l);max-width:20rem}
.body-figure img{width:100%;margin-inline:auto;opacity:0.85}
.body-figure figcaption{
  font-size:var(--step--1);
  color:rgba(28,43,42,0.62);
  text-align:center;
  max-width:24rem;
  margin:var(--space-s) auto 0;
}

.subhead{
  font-family:var(--font-heading);
  font-size:var(--step-3);
  margin-top:var(--space-l);
  margin-bottom:var(--space-s);
}
.subhead:first-child{margin-top:0}

.callout{
  background:var(--color-mist);
  border-left:3px solid var(--color-slate);
  padding:var(--space-s) var(--space-m);
  max-width:var(--measure);
  margin-top:var(--space-l);
}
.callout h3{font-size:var(--step-1);font-family:var(--font-body);font-weight:700;margin-bottom:var(--space-2xs)}
.section.is-mist .callout{background:rgba(250,248,244,0.75)}

.tick-list{
  list-style:none;
  margin:var(--space-s) 0 0;
  padding:0;
  display:grid;
  gap:var(--space-2xs);
  max-width:var(--measure);
}
.tick-list li{
  padding-left:1.6em;
  position:relative;
}
.tick-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.62em;
  width:0.7em;
  height:0.7em;
  border-radius:50%;
  background:var(--color-blue-paper);
}

.next-steps{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-xs);
  margin-top:var(--space-l);
}

/* ── gallery ───────────────────────────────────────────────── */
.gallery{
  columns:1;
  column-gap:var(--space-s);
  margin-top:var(--space-m);
}
.gallery figure{
  break-inside:avoid;
  margin:0 0 var(--space-s);
}
.gallery img{border-radius:2px;width:100%}
.gallery figcaption{
  font-size:var(--step--1);
  color:rgba(28,43,42,0.62);
  margin-top:var(--space-3xs);
}
.gallery .is-drawing{
  background:var(--color-mist);
  padding:var(--space-s);
  border-radius:2px;
}
.gallery .is-drawing img{mix-blend-mode:multiply}

@media (min-width:40em){
  .gallery{columns:2}
}
@media (min-width:62em){
  .gallery{columns:3}
  .body-grid{grid-template-columns:1.2fr 0.8fr;gap:var(--space-xl)}
  .body-grid .prose{max-width:var(--measure)}
  .body-figure{position:sticky;top:var(--space-s);max-width:24rem;margin:0}
}
@media (max-width:61.99em){
  .body-figure{order:-1}
}

/* ── coming soon class ─────────────────────────────────────── */
.class-card.is-upcoming{
  background:rgba(62,124,150,0.07);
  border:1px dashed rgba(62,124,150,0.45);
  border-radius:2px;
  padding:var(--space-s) var(--space-m);
}
@media (min-width:46em){
  .class-card.is-upcoming{
    grid-column:1 / -1;
    margin-top:var(--space-s);
  }
  .class-card.is-upcoming > div{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:var(--space-2xs) var(--space-l);
    align-items:baseline;
  }
  .class-card.is-upcoming .class-flag{grid-row:1;grid-column:1;align-self:center}
  .class-card.is-upcoming .class-when{grid-row:1;grid-column:2;margin-bottom:0}
  .class-card.is-upcoming .class-where{grid-row:2;grid-column:2}
  .class-card.is-upcoming .class-address{grid-row:3;grid-column:2;margin-bottom:var(--space-2xs)}
  .class-card.is-upcoming .class-note-small{grid-row:4;grid-column:2;max-width:58ch}
  .class-card.is-upcoming .link{grid-row:5;grid-column:2;justify-self:start}
}
.class-flag{
  display:inline-block;
  font-family:var(--font-body);
  font-size:0.8125rem;
  font-weight:700;
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:var(--color-slate);
  background:rgba(62,124,150,0.14);
  padding:0.3em 0.8em;
  border-radius:2rem;
  margin-bottom:var(--space-2xs);
}
.class-card.is-upcoming .class-when{color:var(--color-slate)}
.class-note-small{
  font-size:var(--step--1);
  color:rgba(28,43,42,0.72);
  margin-bottom:var(--space-xs);
}
.strip-item.is-upcoming .strip-day{color:var(--color-slate)}
.strip-item.is-upcoming{
  border-left:2px dashed rgba(62,124,150,0.45);
  padding-left:var(--space-s);
}
.strip-flag{
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:var(--color-slate);
}
@media (min-width:46em){
  .strip-grid{grid-template-columns:repeat(4,1fr)}
}


/* ── WordPress block normalisation ─────────────────────────── */
/* Core blocks carry their own wrappers; strip the defaults that
   would otherwise fight the hand-written layout above. */
.wp-block-image{margin:0}
.wp-block-image img{border-radius:2px}
.wp-block-image figcaption{
  font-size:var(--step--1);
  color:rgba(28,43,42,0.62);
  margin-top:var(--space-2xs);
  text-align:left;
}
.wp-block-group{margin-block:0}
.wp-block-columns{margin-bottom:0;gap:var(--space-l)}
.wp-block-list{margin:0}
.wp-block-buttons{gap:var(--space-xs)}
.wp-block-button__link{
  background:var(--color-jade);
  color:var(--color-paper);
  font-family:var(--font-body);
  font-weight:700;
  font-size:var(--step--1);
  padding:0.85em 1.6em;
  border-radius:2rem;
  text-decoration:none;
}
.wp-block-button__link:hover{background:#25674A}
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent;
  color:var(--color-ink);
  border:1px solid rgba(28,43,42,0.35);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:rgba(28,43,42,0.06);
  border-color:rgba(28,43,42,0.35);
  color:var(--color-ink);
}

/* Editor-only: give locked sections a visible but unobtrusive outline so
   Andrew can see the section boundaries he is editing within. */
.is-root-container .mtc-locked{outline:1px dashed rgba(62,124,150,0.35);outline-offset:6px}

/* Skip link */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--color-ink);
  color:var(--color-paper);
  padding:var(--space-2xs) var(--space-s);
  z-index:100;
}
.skip-link:focus{left:0}

/* Badge as a background image so the URL resolves relative to the
   stylesheet, which template-part HTML files cannot do. */
.footer-badge__mark{
  display:block;
  width:100%;
  aspect-ratio:700 / 184;
  background:url('assets/images/tcugb.png') center/contain no-repeat;
}


/* ── decorative artwork (not editable content) ─────────────── */
.hero{position:relative}
.hero::before{
  content:"";
  position:absolute;
  top:-30%;
  left:-20%;
  width:min(58rem,105%);
  aspect-ratio:1/1;
  background:url('assets/images/wash.png') center/contain no-repeat;
  opacity:0.42;
  pointer-events:none;
  z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 42%,transparent 78%);
          mask-image:linear-gradient(to bottom,#000 42%,transparent 78%);
}
.hero > *{position:relative;z-index:1}

.page-head::before{
  content:"";
  position:absolute;
  top:-46%;
  right:-14%;
  width:min(46rem,90%);
  aspect-ratio:1/1;
  background:url('assets/images/wash.png') center/contain no-repeat;
  opacity:0.32;
  pointer-events:none;
  z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent 82%);
          mask-image:linear-gradient(to bottom,#000 45%,transparent 82%);
}

.section--fig{position:relative;overflow:hidden}
.section--fig::after{
  content:"";
  position:absolute;
  pointer-events:none;
  opacity:0.16;
  z-index:0;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}
.section--fig > *{position:relative;z-index:1}
.section--fig-offer::after{
  right:-6rem;top:8%;width:20rem;height:30rem;
  background-image:url('assets/images/sketch-07.png');
}
.section--fig-about::after{
  right:-5rem;top:12%;width:17rem;height:28rem;
  background-image:url('assets/images/sketch-08.png');
}
.section--fig-contact::after{
  left:-6rem;top:-2rem;width:19rem;height:19rem;
  background-image:url('assets/images/sketch-09.png');
}
@media (max-width:45.99em){
  .section--fig::after{display:none}
  .hero::before{opacity:0.34;top:-6%;width:130%}
}

/* Buttons sitting directly under hero copy */
.hero-actions.wp-block-buttons{margin-top:var(--space-m)}