/* Komposisi tata letak SATSET. Primitif ada di base.css. */

/* ─────────── Kerangka halaman ─────────── */
.app-shell{display:flex;flex-direction:column;min-height:100vh}

.site-header{
  position:sticky;top:0;z-index:40;
  background:hsl(var(--surface-raised) / .92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid hsl(var(--border));
  padding-top:env(safe-area-inset-top,0px);
}
.site-header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  height:var(--header-height);
  max-width:100%;margin:0 auto;padding:0 var(--space-8);
}
.brand{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.brand img{width:145px;height:auto}

.connection{
  display:inline-flex;align-items:center;gap:var(--space-2);
  height:1.75rem;padding:0 var(--space-3);
  border:1px solid hsl(var(--border));border-radius:999px;
  background:hsl(var(--card));
  font-size:0.75rem;font-weight:500;color:hsl(var(--muted-foreground));
}
.connection .dot{width:0.4375rem;height:0.4375rem;border-radius:999px;background:currentColor;flex:none}
.connection.is-online{color:hsl(var(--success));border-color:hsl(var(--success) / .3);background:hsl(var(--success) / .08)}
.connection.is-offline{color:hsl(var(--destructive));border-color:hsl(var(--destructive) / .3);background:hsl(var(--destructive) / .08)}
.connection-label{display:inline}

/* ─────────── Bilah ronde ─────────── */
.round-bar{
  position:sticky;top:calc(var(--header-height) + env(safe-area-inset-top,0px));z-index:30;
  background:hsl(var(--surface-raised));
  border-bottom:1px solid hsl(var(--border));
}
.round-bar-inner{
  display:flex;align-items:center;gap:var(--space-3) var(--space-4);flex-wrap:wrap;
  max-width:80rem;margin:0 auto;padding:var(--space-3) var(--space-6);
}
.round-bar-title{display:grid;gap:0.125rem;min-width:0}
.round-bar-title strong{font-size:0.9375rem;font-weight:600;letter-spacing:-0.01em}
/* Navigasi ronde: peserta dapat membuka kembali ronde sebelumnya. */
.round-nav{display:flex;gap:var(--space-1);flex:none}
.round-pill{
  display:grid;place-items:center;
  width:2rem;height:2rem;border-radius:0.5rem;
  border:1px solid hsl(var(--border));background:hsl(var(--card));
  font-size:0.8125rem;font-weight:600;color:hsl(var(--muted-foreground));
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.round-pill:hover:not(:disabled){border-color:hsl(var(--primary) / .5);color:hsl(var(--foreground))}
.round-pill:disabled{opacity:.45;cursor:not-allowed}
.round-pill.is-done{color:hsl(var(--success));border-color:hsl(var(--success) / .35);background:hsl(var(--success) / .08)}
.round-pill.is-viewed,
.round-pill.is-viewed.is-done{
  background:hsl(var(--primary));border-color:hsl(var(--primary));color:hsl(var(--primary-foreground));
}
.round-pill > span:first-child{font-variant-numeric:tabular-nums}
/* Pil ronde yang memuat nama ronde melebar mengikuti teksnya. */
.round-pill:has(.round-name){
  display:inline-flex;align-items:center;justify-content:center;
  width:auto;height:2.375rem;padding:0 var(--space-3);gap:var(--space-2);
}
.round-name{font-size:0.75rem;font-weight:500}
.timer{
  display:inline-flex;align-items:center;gap:var(--space-2);
  height:2rem;padding:0 var(--space-3);
  border-radius:var(--radius);background:hsl(var(--muted));
  font-size:0.9375rem;font-weight:600;font-variant-numeric:tabular-nums;
}
.timer.is-low{background:hsl(var(--destructive) / .1);color:hsl(var(--destructive))}
.timer.is-paused{background:hsl(var(--warning) / .12);color:hsl(var(--warning))}
/* Waktu habis: ronde masih terbuka, tetapi pengiriman sudah ditutup. */
.timer.is-expired{
  background:hsl(var(--destructive) / .12);color:hsl(var(--destructive));
  font-size:0.8125rem;letter-spacing:0;
}

/* ─────────── Kanvas halaman ─────────── */
.page{
  width:100%;max-width:80rem;margin:0 auto;
  padding:var(--space-8) var(--space-6) var(--space-12);
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);
}
.page-sm{max-width:30rem}
.page-md{max-width:48rem}
.page-header{display:grid;gap:var(--space-2);max-width:60ch}
.page-header h1{margin-top:var(--space-1)}

/* Ruang kerja lokakarya: dua panel terpisah.
   Di layar lebar halaman itu sendiri tidak menggulung. Hanya kolom konten yang
   menggulung; kolom preview terkunci di tempatnya dan emulator selalu utuh. */
.workshop{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);align-items:start}
.workshop > *{min-width:0}
.workshop-main{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);align-content:start}
.workshop-aside{display:grid;gap:var(--space-4)}
.workshop-aside > .card{background:hsl(var(--surface-sunken));border-color:hsl(var(--border))}

/* Panggung emulator. Telepon berukuran tetap 360x780 dan hanya diskalakan,
   sehingga tata letak di dalamnya tidak pernah berubah. */
.preview-stage{position:relative;min-height:0;overflow:hidden}
.preview-stage .phone-holder{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  transform-origin:center center;
  will-change:transform;
}
.preview-hint{
  font-size:0.6875rem;color:hsl(var(--muted-foreground));line-height:1.5;text-align:center;
  min-height:1rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* Di layar sempit panggung mengikuti lebar kolom dengan rasio perangkat. */
.preview-stage{aspect-ratio:360/780;width:100%;max-width:22.5rem;margin:0 auto}

/* Alat bantu di atas emulator: pemilih halaman dan tombol kembali ke beranda.
   Navigasi warga sendiri ada di dalam telepon; ini hanya jalan pintas penulis. */
.preview-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);
  font-size:0.6875rem;color:hsl(var(--muted-foreground));
}
.preview-toolbar select{
  max-width:10.625rem;padding:var(--space-1) var(--space-2);
  border:1px solid hsl(var(--border));border-radius:var(--radius-sm);
  background:hsl(var(--surface-raised));font-size:0.75rem;
}

@media (min-width:1024px){
  /* Kerangka mengisi tepat satu layar; gulungan pindah ke kolom konten. */
  .app-shell.is-split{height:100dvh;min-height:100dvh;overflow:hidden}
  .app-shell.is-split > .page{
    flex:1 1 auto;min-height:0;overflow:hidden;
    grid-template-rows:minmax(0,1fr);
    /* Jarak vertikal dirapatkan: sisanya jadi tinggi emulator. */
    padding:var(--space-6) var(--space-8);
  }
  /* Ruang kerja dua panel butuh lebih banyak lebar daripada halaman biasa. */
  .app-shell.is-split > .page,
  .app-shell.is-split .site-header-inner,
  .app-shell.is-split .round-bar-inner{max-width:96rem}
  /* Header dan bilah ronde tidak lagi perlu menempel: halaman tidak menggulung. */
  .app-shell.is-split .site-header,
  .app-shell.is-split .round-bar{position:static;flex:0 0 auto}

  .page-split .workshop{
    height:100%;min-height:0;align-items:stretch;
    grid-template-columns:minmax(0,1fr) minmax(21.875rem,0.8fr);
    gap:var(--space-8);
  }
  /* Satu-satunya area yang menggulung. */
  .page-split .workshop-main{
    min-height:0;overflow-y:auto;overscroll-behavior:contain;
    padding:var(--space-3) var(--space-6) var(--space-10) 0;
  }

  /* Rail preview: tinggi tetap, tidak pernah ikut menggulung.
     Jarak dirapatkan karena setiap piksel di sini diambil dari emulator. */
  .page-split .workshop-aside{height:100%;min-height:0;position:relative;z-index:1}
  .page-split .workshop-aside > .card{height:100%;min-height:0;overflow:hidden;border-radius:1rem}
  .page-split .workshop-aside .card-header{flex:0 0 auto;padding:var(--space-5) var(--space-6) 0}
  .page-split .workshop-aside .card-content{
    flex:1 1 auto;min-height:0;
    display:flex;flex-direction:column;gap:var(--space-3);
    padding:var(--space-3) var(--space-6) var(--space-5);
  }
  .page-split .workshop-aside .preview-hint{flex:0 0 auto}
  /* Panggung mengambil seluruh sisa tinggi rail; skala dihitung dari situ. */
  .page-split .workshop-aside .preview-stage{
    flex:1 1 0;min-height:0;
    /* `margin:0 auto` pada item flex mematikan peregangan lebar, sehingga
       panggung menjadi selebar nol dan skala tidak dapat dihitung. */
    width:auto;max-width:none;aspect-ratio:auto;margin:0;align-self:stretch;
  }
}

/* ─────────── Daftar anggota ─────────── */
.member-row{
  display:flex;align-items:center;gap:var(--space-2) var(--space-3);flex-wrap:wrap;
  padding:var(--space-3) var(--space-4);
  border:1px solid hsl(var(--border));border-radius:var(--radius);
  background:hsl(var(--card));
}
.member-row > .grow{flex-basis:8rem}
.avatar{
  display:grid;place-items:center;flex:none;
  width:2.25rem;height:2.25rem;border-radius:999px;
  background:hsl(var(--accent));color:hsl(var(--accent-foreground));
  font-size:0.8125rem;font-weight:600;
}
.member-name{font-size:0.875rem;font-weight:500;line-height:1.35}
.member-role{font-size:0.75rem;color:hsl(var(--muted-foreground))}

/* Ringkasan instansi: dipakai peserta biasa, menggantikan deretan avatar
   yang tidak terbaca begitu satu instansi berisi puluhan orang. */
.team-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:var(--space-3)}
.team-summary-item{
  padding:var(--space-3) var(--space-4);
  border:1px solid hsl(var(--border));border-radius:var(--radius);
  background:hsl(var(--card));
}
.team-summary-value{
  font-size:1.25rem;font-weight:600;letter-spacing:-0.02em;line-height:1.2;
  overflow-wrap:anywhere;
}
.team-summary-item.is-muted .team-summary-value{font-size:1rem;color:hsl(var(--muted-foreground))}
.team-summary-label{font-size:0.75rem;color:hsl(var(--muted-foreground));margin-top:0.125rem}

/* ─────────── Agregat ─────────── */
.aggregate{display:grid;gap:var(--space-4)}
.aggregate-row{display:grid;gap:var(--space-2)}
.aggregate-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4)}
.aggregate-label{font-size:0.875rem;font-weight:500;display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.aggregate-value{font-size:0.75rem;font-weight:600;color:hsl(var(--muted-foreground));white-space:nowrap;font-variant-numeric:tabular-nums}
.aggregate-row .progress > i{background:hsl(var(--primary))}
.aggregate-row.is-agreed .progress > i{background:hsl(var(--success))}
.aggregate-row.is-split .progress > i{background:hsl(var(--warning))}
.aggregate-note{font-size:0.6875rem;color:hsl(var(--muted-foreground))}

/* ─────────── QR ─────────── */
.qr-panel{display:grid;justify-items:center;gap:var(--space-4);text-align:center}
.qr-frame{padding:var(--space-3);background:#fff;border:1px solid hsl(var(--border));border-radius:var(--radius)}
.qr-frame svg{width:min(12rem,58vw);height:auto}
.code-display{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1.25rem;font-weight:600;letter-spacing:0.28em;text-indent:0.28em;
  padding:var(--space-2) var(--space-4);
  background:hsl(var(--muted));border-radius:var(--radius);
}

/* ─────────── Kendali identitas aplikasi (Ronde 4 dan studio) ─────────── */
.field-group{display:grid;gap:var(--space-4)}
.field-group + .field-group{
  margin-top:var(--space-2);padding-top:var(--space-6);
  border-top:1px solid hsl(var(--border));
}
.logo-upload{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);
  padding:var(--space-4);
  border:1px dashed hsl(var(--border));border-radius:var(--radius);
  background:hsl(var(--surface-raised));
}
.logo-upload strong{font-size:0.8125rem}
.logo-upload img,
.upload-mark{width:2.625rem;height:2.625rem;object-fit:contain}
.upload-mark{display:grid;place-items:center;font-size:1.5rem;color:hsl(var(--muted-foreground))}
.color-swatches{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.color-swatch{
  width:2rem;height:2rem;border-radius:50%;
  border:3px solid hsl(var(--card));
  box-shadow:0 0 0 1px hsl(var(--border));
}
.color-swatch[aria-pressed="true"]{box-shadow:0 0 0 2px hsl(var(--foreground) / .6);transform:scale(1.05)}
.color-input-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3)}
.color-input-row input[type="color"]{
  width:3rem;height:2.5rem;padding:3px;cursor:pointer;
  background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:0.5rem;
}
.color-input-row input[type="text"],
.color-input-row .input{max-width:9.375rem}
.branding-options{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.field-group-header{display:grid;gap:0.125rem}
.field-group-title{font-size:0.875rem;font-weight:600}
.field-group-description{font-size:0.75rem;color:hsl(var(--muted-foreground))}
.order-row{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-2) var(--space-3);
  border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--card));
}
.order-index{
  display:grid;place-items:center;flex:none;
  width:1.5rem;height:1.5rem;border-radius:var(--radius-sm);
  background:hsl(var(--muted));font-size:0.75rem;font-weight:600;
}
.order-label{flex:1;min-width:0;font-size:0.875rem}
.order-actions{display:flex;gap:var(--space-1)}

/* ─────────── Kartu insight (studio dan Ronde 4) ─────────── */
.insight-card{
  display:grid;gap:var(--space-2);padding:var(--space-5);
  background:hsl(var(--surface-raised));
  border:1px solid hsl(var(--border));border-radius:var(--radius-lg);
}
.insight-card h3{font-size:0.875rem}
.insight-card p{font-size:0.8125rem;color:hsl(var(--muted-foreground));line-height:1.7}
.insight-tags{display:flex;gap:var(--space-2);flex-wrap:wrap}
.insight-tags span{
  padding:0.25rem var(--space-2);border-radius:var(--radius-sm);
  background:hsl(var(--muted));font-size:0.6875rem;
}
/* Catatan bernada hati-hati: dipakai di mana pun batas simulasi perlu terbaca. */
.studio-note{
  padding:var(--space-3) var(--space-4);
  background:hsl(var(--muted) / .7);
  border-left:2px solid hsl(var(--primary));
  font-size:0.75rem;line-height:1.7;color:hsl(var(--muted-foreground));
}

/* ─────────── Daftar ringkas dan pelipat ─────────── */
.concept-section-title{
  font-size:0.6875rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  color:hsl(var(--muted-foreground));
}
.concept-list{display:grid;gap:0.125rem;font-size:0.8125rem;color:hsl(var(--muted-foreground));line-height:1.5}
details.disclosure summary{
  cursor:pointer;font-size:0.8125rem;font-weight:500;padding:var(--space-1) 0;
  color:hsl(var(--primary));list-style:none;
}
details.disclosure summary::-webkit-details-marker{display:none}
details.disclosure summary::before{content:"";display:inline-block;width:12px;height:12px;margin-right:6px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m8 4 8 8-8 8' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}
details.disclosure[open] summary::before{transform:rotate(90deg)}
details.disclosure p{font-size:0.8125rem;color:hsl(var(--muted-foreground));line-height:1.6;padding-top:var(--space-2)}


/* ─────────── Dasbor host ─────────── */
/* Baris instansi yang dapat dibentangkan: seluruh keterangan satu meja —
   kemajuan ronde, kapten, dan daftar pesertanya — tinggal di satu tabel. */
.row-toggle{
  display:flex;align-items:center;gap:var(--space-2);width:100%;
  background:none;border:0;padding:0;text-align:left;cursor:pointer;color:inherit;font:inherit;
}
.row-toggle:hover .member-name{color:hsl(var(--primary))}
.row-toggle:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px;border-radius:var(--radius-sm)}
.row-toggle-icon{flex:none;color:hsl(var(--muted-foreground))}
.table tr.is-open > td{background:hsl(var(--accent) / .35)}
.table tr.row-detail > td{padding:var(--space-4);background:hsl(var(--muted) / .4)}

.host-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);align-items:start}
@media (min-width:1100px){.host-layout{grid-template-columns:minmax(0,1fr) 22rem}}

.round-row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;
  padding:var(--space-4);
  border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--card));
}
.round-row.is-active{border-color:hsl(var(--primary));background:hsl(var(--accent) / .4)}
.round-row-label{display:grid;gap:0.125rem;min-width:0}
.round-row-label strong{font-size:0.875rem;font-weight:600}
.round-row-label span{font-size:0.75rem;color:hsl(var(--muted-foreground))}
.round-row-actions{display:flex;gap:var(--space-2);flex-wrap:wrap}

.tick{color:hsl(var(--success));font-size:1rem}
.tick.is-off{color:hsl(var(--muted-foreground) / .45)}

/* Layar proyektor */
@media (min-width:1600px){
  .presentation .stat-value{font-size:2.25rem}
  .presentation table.table{font-size:0.9375rem}
  .presentation .page{padding-top:var(--space-10)}
}

/* ─────────── Halaman masuk ─────────── */
.entry-landing{
  max-width:71.25rem;margin:auto;
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:5rem;align-items:center;
  padding:var(--space-10) var(--space-8);
}
.entry-intro h1{font-size:clamp(2.625rem,5vw,4rem);max-width:37.5rem;margin:var(--space-5) 0 var(--space-6)}
.entry-intro .lead{font-size:1rem;max-width:28.75rem}
.entry-details{display:grid;gap:var(--space-4);margin-top:var(--space-8)}
.entry-feature{
  display:flex;align-items:center;gap:var(--space-3);
  font-size:0.8125rem;color:hsl(var(--muted-foreground));
}
.entry-feature > .icon{font-size:1.25rem;color:hsl(var(--primary))}
.entry-card{display:grid;gap:var(--space-4)}
.entry-card .card{padding:var(--space-2)}
.entry-note{font-size:0.75rem;color:hsl(var(--muted-foreground));line-height:1.6}
.entry-demo{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-5);
  border:1px solid hsl(var(--border));border-radius:var(--radius-lg);
  background:hsl(var(--surface-sunken));
  color:hsl(var(--foreground));text-decoration:none;
}
.entry-demo strong{display:block;font-size:0.875rem}
.entry-demo span{font-size:0.75rem;color:hsl(var(--muted-foreground))}
.entry-demo > .icon{font-size:1.5rem}

/* ─────────── Sakelar editor / pratinjau ─────────── */
/* Hanya muncul saat kedua panel tidak muat berdampingan. Bentuk dasarnya
   dipakai lokakarya maupun studio; posisinya diatur tiap media query. */
/* Bentuknya selalu sama; yang berubah hanya kapan sakelar ini terlihat.
   Lokakarya menampilkannya di bawah 1024 px, studio di bawah 641 px. */
.mobile-view-switch{
  display:none;
  position:fixed;z-index:30;
  bottom:calc(var(--space-4) + env(safe-area-inset-bottom,0px));
  left:50%;transform:translateX(-50%);
  gap:var(--space-1);padding:var(--space-1);
  border:1px solid hsl(var(--border));border-radius:0.75rem;
  background:hsl(var(--surface-raised));box-shadow:var(--shadow-lg);
}
.mobile-view-switch button{
  padding:var(--space-2) var(--space-5);
  border-radius:0.5rem;font-size:0.75rem;white-space:nowrap;min-height:2.5rem;
}
.mobile-view-switch button[aria-pressed="true"]{
  background:hsl(var(--foreground));color:hsl(var(--background));
}

/* ─────────── Tablet: satu panel dalam satu waktu ─────────── */
@media (max-width:1150px){
  .round-name{display:none}
}
@media (max-width:1023px){
  /* Di bawah 1024 px rail pratinjau disembunyikan dan dibuka lewat sakelar. */
  .app-shell.is-split .mobile-view-switch{display:flex}
  .page-split .workshop-aside{display:none}
  .page-split{padding-bottom:5.9375rem}
  .app-shell.show-preview .workshop-main{display:none}
  .app-shell.show-preview .workshop-aside{display:grid}
  .app-shell.show-preview .workshop-aside .preview-stage{
    height:calc(100dvh - 20.625rem);min-height:18.75rem;max-width:22.5rem;aspect-ratio:auto;
  }
}

/* ─────────── Ponsel ─────────── */
@media (max-width:640px){
  .site-header-inner{padding:0 var(--space-4)}
  .round-bar-inner{padding:var(--space-2) var(--space-4) var(--space-3);gap:var(--space-2)}
  /* Judul ronde satu baris penuh, navigasi dan timer di baris berikutnya. */
  .round-bar-title{flex:1 1 100%}
  .round-bar-inner > .grow{display:none}
  .round-nav{flex:1 1 auto}
  .round-pill{flex:1}
  .page{padding:var(--space-6) var(--space-4) var(--space-10);gap:var(--space-5)}
  .round-bar-title strong{font-size:0.875rem}
  .round-pill{width:1.875rem;height:1.875rem;font-size:0.75rem}
  .round-pill:has(.round-name){height:2rem;padding:0 var(--space-2)}
  .toaster{right:var(--space-4);left:var(--space-4);width:auto}
  /* Kepala halaman lokakarya membungkus agar timer tidak menekan merek. */
  .site-header-inner:has(.timer){height:auto;min-height:var(--header-height);padding:var(--space-3) var(--space-4)}
  .site-header-inner:has(.timer) .brand{flex:none}
  .site-header-inner:has(.timer) .brand img{width:108px}
  .site-header-inner:has(.timer) > .row{justify-content:flex-end;gap:var(--space-2)}
  .app-shell.show-preview .page-split{padding-top:var(--space-3)}
  .app-shell.show-preview .workshop-aside .preview-stage{
    height:calc(100dvh - 25.3125rem);min-height:15rem;
  }
  .app-shell.show-preview .workshop-aside .card-content{padding:var(--space-3)}
  .app-shell.show-preview .workshop-aside .card-header{padding:var(--space-4) var(--space-4) 0}
  .entry-landing{grid-template-columns:1fr;gap:var(--space-8);padding:var(--space-8) var(--space-5)}
  .entry-intro h1{font-size:2.75rem;max-width:23.75rem}
  .entry-intro .lead{font-size:0.875rem}
  .entry-details{display:none}
  .logo-upload{gap:var(--space-2);padding:var(--space-3)}
  .branding-options{gap:var(--space-3)}
}
@media (max-width:900px) and (min-width:641px){
  .entry-landing{gap:var(--space-8);padding:var(--space-12) var(--space-6)}
  .entry-intro h1{font-size:2.75rem}
}