/* MB Stone International - feuille de style de l'echantillon */
/* Polices hebergees avec le site - licences : fonts/Poppins-OFL.txt, fonts/PublicSans-OFL.txt */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/Poppins-Light.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Poppins-Regular.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Poppins-Medium.ttf") format("truetype"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 200 600; font-display: swap; src: url("fonts/PublicSans-VF.ttf") format("truetype"); }
:root {
  --text: #7A7A7A;
  --ink: #111;
  --link: #836E59;
  --current: #265E6F;
  --bronze: #9F6A29;
  --taupe: #555347;
  --line: #e4e4e4;
  --col: calc(100vw - 230px);  /* pleine largeur : tout l'espace a gauche de la bande du menu */
  --gut: 10px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font: 300 14px/21px "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
img { max-width: 100%; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { color: var(--ink); font-weight: 400; }
p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.1em; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 400; letter-spacing: .04em; }

/* ---------- en-tete et menu (desktop : logo a gauche, menu vertical a droite) ---------- */
.site-header {
  width: calc(var(--col) + 130px);
  margin: 0 auto;
  padding: 30px 0 40px;
  display: flex; align-items: center; justify-content: space-between;
}
.site-header .logo img { width: 133px; height: auto; }
.burger { display: none; }
.site-nav {
  position: absolute; top: 164px;
  left: calc(50% + var(--col) / 2 + 30px - 65px);
  width: 120px;
}
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav li { margin: 0 0 12px; font-size: 14px; letter-spacing: .08em; font-weight: 500; }
.site-nav a { color: var(--ink); }
.site-nav a:hover { color: var(--bronze); text-decoration: none; }
.site-nav .current { position: relative; display: inline-block; padding-bottom: 3px; border-bottom: 2px solid var(--bronze); }
.site-nav .current::before { content: ""; position: absolute; top: 0; bottom: -2px; left: -25px; width: 3px; background: var(--bronze); }

.content {
  width: var(--col);
  margin: 0 auto;
  position: relative; left: -65px;
  min-height: 60vh;
}
.page-title {
  text-align: center; font-size: 18px; font-weight: 400; letter-spacing: .12em;
  margin: 0 0 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.section-title, .col-title {
  font-size: 14px; letter-spacing: .12em; margin: 28px 0 14px;
}
.section-title { text-align: center; margin-top: 48px; }
.col h4 { font-size: 12px; letter-spacing: .1em; margin: 18px 0 6px; }
.center { text-align: center; }

/* ---------- photos (recadrage cover, gouttiere 10 px) ---------- */
.grid { display: grid; gap: var(--gut); }
.ph { display: block; overflow: hidden; background: #f4f4f4; cursor: zoom-in; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
a.card .ph, .refs .ph { cursor: pointer; }

/* ---------- accueil ---------- */
.slider { position: relative; aspect-ratio: 900 / 480; overflow: hidden; background: #222; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.slide.active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide-text {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff; padding: 0 60px 44px; background: rgba(0, 0, 0, .18);
}
.s-big { font-weight: 200; font-size: 40px; line-height: 1.15; letter-spacing: .06em; margin: 6px 0; }
.s-small { font-weight: 300; font-size: 17px; letter-spacing: .08em; margin: 3px 0; }
.slide .s-line { width: 220px; height: 1px; max-width: 60%; margin: 10px 0; object-fit: fill; filter: brightness(0) invert(1); }
.sl-prev, .sl-next, .lb-prev, .lb-next, .lb-close {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: #fff; font: 200 44px/1 "Public Sans", sans-serif; cursor: pointer; padding: 10px 14px;
}
.sl-prev { left: 4px; } .sl-next { right: 4px; }
.sl-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 0 20px; }
.sl-dots button { width: 7px; height: 7px; flex: none; border-radius: 50%; border: 1px solid #fff; background: transparent; padding: 0; cursor: pointer; }
.sl-dots button.on { background: #fff; }

.band {
  margin-top: 40px; height: 140px; display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center; position: relative;
}
.band::before { content: ""; position: absolute; inset: 0; background: rgba(20, 20, 20, .45); }
.band h2 { position: relative; color: #fff; font-weight: 200; font-size: 28px; letter-spacing: .08em; margin: 0; }
.wash { position: relative; padding: 32px 36px 16px; background-size: cover; background-position: center; }
.wash::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .9); }
.wash > * { position: relative; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 40px; margin-top: 12px; }
.about-block h3 { font-size: 13px; letter-spacing: .12em; margin: 10px 0 8px; font-weight: 600; }
.help ul { list-style: none; padding: 0; }
.help li::before { content: "• "; color: var(--link); }

/* ---------- collection ---------- */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 0 0 22px; }
.filters button {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font: 400 11px/1.4 "Public Sans", sans-serif; letter-spacing: .1em; color: var(--link);
}
.filters button.on { color: var(--ink); border-bottom: 1px solid var(--bronze); }
@media (hover: hover) { .filters button:hover { color: var(--bronze); } }
.stones { grid-template-columns: repeat(4, 1fr); }
.card { display: block; color: var(--ink); }
.card .ph { aspect-ratio: 1 / 1; }
.card-title { display: block; padding: 8px 0 12px; text-align: center; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.card[hidden] { display: none; }

/* ---------- fiche pierre ---------- */
.samples { grid-template-columns: repeat(3, 1fr); margin-bottom: 26px; }
.samples.n4 { grid-template-columns: repeat(4, 1fr); }
.samples.n6 { grid-template-columns: repeat(6, 1fr); }
.samples .ph { aspect-ratio: 4 / 3; }
.samples.n6 .ph { aspect-ratio: 1 / 1; }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.finishes { grid-template-columns: repeat(5, 1fr); margin-bottom: 12px; }
.finishes .ph { aspect-ratio: 1 / 1; }
.pdf { display: inline-flex; align-items: center; gap: 10px; }
.pdf-ico { font: 500 10px/1 Poppins, sans-serif; color: #fff; background: var(--bronze); padding: 7px 6px; letter-spacing: .05em; }
.tech { margin: 40px 0 0; text-align: center; font-family: Poppins, "Public Sans", sans-serif; }
.tech h3 { font-size: 13px; font-weight: 500; margin: 0 0 2px; letter-spacing: .02em; }
.tech .sub { font-style: italic; font-size: 12px; margin-bottom: 12px; }
.tech table { margin: 0 auto; border-collapse: collapse; font-size: 13px; }
.tech th, .tech td { padding: 3px 8px; font-weight: 300; }
.tech tbody th { text-align: right; color: var(--text); }
.tech td { text-align: left; color: var(--ink); }
.tech thead th { color: var(--text); font-size: 11px; text-align: left; }
.tech .cm { font-size: 11px; }
.refs { grid-template-columns: repeat(3, 1fr); gap: 26px var(--gut); }
.ref .ph { aspect-ratio: 4 / 3; }
.ref h4 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin: 10px 0 4px; }
.ref h4 a { color: var(--ink); }
.ref-text { margin: 0 0 4px; }
.more { font-size: 12px; font-weight: 400; }

/* ---------- fiche chantier ---------- */
.btn-outline {
  display: inline-block; border: 1px solid var(--link); color: var(--link); padding: 8px 22px;
  letter-spacing: .08em; font-size: 12px; text-transform: uppercase; margin-bottom: 22px;
}
.btn-outline:hover { background: var(--bronze); border-color: var(--bronze); color: #fff; text-decoration: none; }
.gallery { grid-template-columns: repeat(3, 1fr); }
.gallery .ph { aspect-ratio: 4 / 3; }

/* ---------- pages d'attente ---------- */
.pending { text-align: center; padding: 40px 0 60px; }
.pending .addr { color: var(--ink); word-break: break-all; }

/* ---------- pied de page ---------- */
.site-footer {
  width: var(--col); margin: 60px auto 0; position: relative; left: -65px;
  border-top: 1px solid var(--line); padding: 26px 0 30px; font-size: 12px;
}
.footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.site-footer h4 { font-size: 12px; letter-spacing: .12em; margin: 0 0 8px; }
.site-footer ul { list-style: none; padding: 0; }
.placeholder { font-style: italic; }
.copyright { text-align: center; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 10px; }

/* ---------- visionneuse ---------- */
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(255, 255, 255, .97); display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; text-align: center; }
.lightbox img { max-width: 88vw; max-height: 84vh; }
.lb-count { margin-top: 8px; font-size: 12px; }
.lightbox button { color: #222; }
.lb-prev { left: 10px; } .lb-next { right: 10px; }
.lb-close { top: 30px; right: 14px; transform: none; font-size: 36px; }

/* ---------- 1024 px et moins : hamburger ---------- */
@media (max-width: 1199px) {
  .site-header, .content, .site-footer { width: auto; left: 0; margin-left: 20px; margin-right: 20px; }
  .site-header { padding: 20px 0; }
  .burger {
    display: block; width: 50px; height: 50px; background: none; border: 0; cursor: pointer; padding: 13px 11px;
  }
  .burger span { display: block; height: 2px; background: #333; margin: 5px 0; }
  .site-nav { display: none; position: absolute; top: 90px; left: 0; right: 0; width: auto; background: var(--taupe); z-index: 40; padding: 10px 20px; }
  .site-nav.open { display: block; }
  .site-nav li { margin: 0; border-bottom: 1px solid rgba(255, 255, 255, .15); }
  .site-nav a, .site-nav .current { display: block; padding: 12px 0; color: #fff; font-weight: 600; }
  .site-nav li { font-size: 13px; letter-spacing: .06em; }
  .site-nav a:hover { color: #fff; }
  .site-nav .current, .site-nav .current:hover { border-bottom: 0; text-decoration-line: underline; text-decoration-color: var(--bronze); text-decoration-thickness: 2px; text-underline-offset: 6px; }
  .site-nav .current::before { bottom: 0; left: -14px; }
}
@media (max-width: 900px) {
  .stones, .refs, .gallery { grid-template-columns: repeat(2, 1fr); }
  .finishes { grid-template-columns: repeat(4, 1fr); }
  .samples.n6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .site-header { padding: 20px 0 10px; }
  .site-header .logo img { width: 95px; }
  .site-nav { top: 80px; }
  .stones, .refs, .gallery, .two-cols, .about-grid, .footer-cols { grid-template-columns: 1fr; }
  .two-cols { gap: 0; }
  .samples, .samples.n4 { grid-template-columns: repeat(2, 1fr); }
  .samples.n6 { grid-template-columns: repeat(2, 1fr); }
  .finishes { grid-template-columns: repeat(3, 1fr); }
  .slider { aspect-ratio: 4 / 5; }
  .s-big { font-size: 28px; } .s-small { font-size: 14px; }
  .slide-text { padding: 0 34px 80px; }
  .sl-dots { gap: 5px; }
  .sl-dots button { width: 6px; height: 6px; }
  .wash { padding: 24px 16px 8px; }
  .band { height: 110px; } .band h2 { font-size: 22px; }
  .tech table { font-size: 12px; }
  .tech th, .tech td { padding: 3px 4px; }
}

/* =====================================================================
   Pleine largeur + trois exemples + page pierre (visionneuse et donnees techniques en tete)
   ===================================================================== */
/* accueil : diaporama raccourci pour que les trois pierres tiennent dans le premier ecran */
.home .slider { aspect-ratio: auto; height: clamp(300px, calc(100vh - 372px), 70vh); }
.examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); margin-top: var(--gut); }
.ex { position: relative; display: block; height: 220px; overflow: hidden; color: #fff; background: #222; }
.ex:hover { text-decoration: none; }
.ex-ph { position: absolute; inset: 0; }
.ex-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ex:hover .ex-ph img, .ex:focus-visible .ex-ph img { transform: scale(1.04); }
.ex::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .65)); }
.ex-sw { position: absolute; left: 16px; bottom: 16px; width: 64px; height: 64px; border: 2px solid #fff; z-index: 1; }
.ex-sw img { width: 100%; height: 100%; object-fit: cover; }
.ex-name { position: absolute; left: 96px; bottom: 30px; z-index: 1; font-size: 18px; font-weight: 400; letter-spacing: .16em; padding: 4px 10px; background: rgba(0, 0, 0, .5); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }

/* collection : les trois exemples en tete, les autres en attente */
.stones-ex { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stones-ex .card .ph { aspect-ratio: 4 / 3; }
.stones-ex .card-title { font-size: 14px; }
.stones-wait { margin-top: 36px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.card-wait { opacity: .5; filter: grayscale(1); cursor: default; }
.card-wait .ph { cursor: default; }
.card-wait .card-title { padding-bottom: 0; }
.wait { display: block; text-align: center; font-size: 11px; font-style: italic; color: var(--text); padding-bottom: 12px; }

/* page pierre : images a gauche, donnees techniques a droite, des l'arrivee */
.stone-top { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 30px; align-items: start; margin-bottom: 40px; }
.v-stage { position: relative; height: min(52vh, 560px); min-height: 300px; background: #f4f4f4; }
.v-slide { display: none; position: absolute; inset: 0; margin: 0; }
.v-slide.on { display: flex; flex-direction: column; }
.v-slide a { flex: 1; min-height: 0; display: block; cursor: zoom-in; }
.v-slide img { width: 100%; height: 100%; object-fit: contain; }
.v-slide figcaption { padding: 8px 12px; font-size: 12px; color: var(--ink); background: #fff; border-top: 1px solid var(--line); }
.v-group { color: var(--text); letter-spacing: .1em; font-size: 11px; margin-right: 6px; }
.v-prev, .v-next { position: absolute; top: calc(50% - 18px); transform: translateY(-50%); background: rgba(255, 255, 255, .8); border: 0; color: var(--ink); font: 200 40px/1 "Public Sans", sans-serif; cursor: pointer; padding: 6px 12px 10px; }
.v-prev { left: 0; } .v-next { right: 0; }
.v-count { position: absolute; top: 8px; right: 10px; font-size: 12px; color: var(--ink); background: rgba(255, 255, 255, .8); padding: 2px 8px; }
.v-thumbs { display: flex; gap: 6px; overflow-x: auto; padding: 8px 3px 4px; margin: 0 -3px; }   /* 3 px de chaque côté : place pour le cadre .v-th.on (2 px + décalage 1 px), compensés par la marge négative : vignettes à la même place */
.v-th { flex: none; width: 58px; height: 58px; padding: 0; border: 1px solid #ddd; background: none; cursor: pointer; }
.v-th img { width: 100%; height: 100%; object-fit: cover; }
.v-th.on { outline: 2px solid var(--bronze); outline-offset: 1px; }
.tech-panel { background: #f7f7f5; border: 1px solid var(--line); padding: 18px 22px 8px; font-size: 13px; color: var(--ink); }
.tech-panel h2 { font-size: 14px; letter-spacing: .12em; margin: 10px 0 10px; }
.tech-panel table { border-collapse: collapse; width: 100%; font-family: Poppins, "Public Sans", sans-serif; font-size: 13px; }
.tech-panel th, .tech-panel td { padding: 3px 10px 3px 0; font-weight: 300; text-align: left; vertical-align: top; }
.tech-panel tbody th { color: var(--text); }
.tech-panel td { white-space: nowrap; }
.tech-panel thead th { font-size: 11px; color: var(--text); }
.tech-panel .cm { font-size: 11px; }
.tech-panel .src { font-size: 11px; font-style: italic; color: var(--text); margin: 8px 0; }
.tech-panel h4 { font-size: 11px; letter-spacing: .1em; margin: 10px 0 4px; }
.tp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid var(--line); margin-top: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 10px; letter-spacing: .1em; border: 1px solid var(--link); color: var(--link); padding: 2px 8px; }

@media (min-width: 901px) {
  .refs, .gallery { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1199px) {
  .home .slider { height: clamp(260px, calc(100vh - 340px), 60vh); }
}
@media (max-width: 900px) {
  .stone-top { grid-template-columns: minmax(0, 1fr); }
  .stones-wait { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .home .slider { aspect-ratio: auto; height: 62vw; }
  .examples { grid-template-columns: 1fr; }
  .ex { height: 84px; }
  .ex-sw { left: 10px; bottom: 10px; width: 62px; height: 62px; }
  .ex-name { left: 84px; bottom: 26px; font-size: 15px; }
  .stones-ex { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stones-ex .card .ph { aspect-ratio: 1 / 1; }
  .stones-ex .card-title { font-size: 11px; letter-spacing: .06em; }
  .stones-wait { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v-stage { height: 72vw; min-height: 0; }
  .tech-panel { padding: 14px 14px 6px; }
  .tech-panel td { white-space: normal; }
  .tp-cols { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- fil d'Ariane (pages pierre et projet) ---------- */
.crumbs {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px;
  margin: 0 0 14px; font-size: 12px; line-height: 18px; letter-spacing: .06em; text-transform: uppercase;
}
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.crumbs li:not(:last-child)::after { content: "\203A"; margin: 0 8px; color: var(--text); }
.crumbs a { color: var(--link); }
.crumbs [aria-current] { color: var(--text); }
.crumbs-stone { margin: 0; color: var(--text); }

/* Accueil (campagne home, 02/10) : deux portes STONES / PORTFOLIO a la place des trois cartes .examples ; le lien est le
   bloc entier (comme .ex) ; libelle + ligne d'echelle centres en bas, sur voile sombre. */
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gut); margin-top: var(--gut); }
.door { position: relative; display: block; height: 260px; overflow: hidden; color: #fff; background: #222; }
.door:hover { text-decoration: none; }
.door-ph { position: absolute; inset: 0; }
.door-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.door:hover .door-ph img, .door:focus-visible .door-ph img { transform: scale(1.04); }
.door::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .65)); }
.door-txt { position: absolute; left: 0; right: 0; bottom: 28px; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 12px; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.door-name { font-size: 22px; font-weight: 400; letter-spacing: .16em; padding: 4px 12px; background: rgba(0, 0, 0, .5); }
.door-scale { font-size: 13px; letter-spacing: .08em; }
@media (max-width: 767px) {
  .doors { grid-template-columns: 1fr; }
  .door { height: 120px; }
  .door-txt { bottom: 16px; gap: 6px; }
  .door-name { font-size: 16px; }
  .door-scale { font-size: 12px; }
}

/* Accueil editorial (campagne home2, 02/10, specification de Ludovic) : encarts STONES / PORTFOLIO sans image (lien =
   bloc entier, inversion au survol et au focus clavier comme .btn-outline:hover) ; About us et How we help you choose
   sans image de fond. Valeurs reprises de la feuille : couleurs :root, filet var(--line), fond #f7f7f5 (.tech-panel),
   tailles/interlettrages de .door-name, .band h2, .about-block h3, .col h4, transition .5s ease, rupture 767 px.
   Les regles .doors/.door*, .ex*, .band, .wash restent dans la feuille (inutilisees par l'accueil). */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gut); margin-top: 40px; }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 220px; padding: 0 12px; text-align: center; background: #fff; border: 1px solid var(--line); color: var(--ink); box-shadow: none; transition: background-color .5s ease, border-color .5s ease, color .5s ease; }
.tile-name { font-size: 22px; font-weight: 400; letter-spacing: .16em; }
.tile-scale { font-size: 13px; letter-spacing: .08em; color: var(--text); transition: color .5s ease; }
.tile-go { margin-top: 8px; padding: 8px 22px; border: 1px solid var(--link); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--link); opacity: 1; transition: opacity .5s ease, color .5s ease, border-color .5s ease; }
.tile:hover, .tile:focus-visible { background: var(--bronze); border-color: var(--bronze); color: #fff; text-decoration: none; outline: none; }
.tile:hover .tile-scale, .tile:focus-visible .tile-scale, .tile:hover .tile-go, .tile:focus-visible .tile-go { color: #fff; }
.tile:hover .tile-go, .tile:focus-visible .tile-go { opacity: 1; border-color: #fff; }
.ed { margin-top: 40px; padding: 32px 36px 16px; }
.ed-title { margin: 0 0 16px; text-align: center; font-size: 28px; font-weight: 200; letter-spacing: .08em; }
.ed-lead { max-width: 760px; margin: 0 auto 28px; text-align: center; font-size: 17px; line-height: 1.5; color: var(--ink); }
.ed-note { max-width: 760px; margin: -12px auto 28px; text-align: center; }
.ed .about-grid { margin-top: 0; }
.ed .about-block, .ed-step, .ed-crit { border-top: 1px solid var(--line); }
.ed h3 { font-size: 13px; letter-spacing: .12em; margin: 10px 0 8px; font-weight: 600; }
.ed-help h3 { text-transform: uppercase; }
.ed h4 { font-size: 12px; letter-spacing: .1em; margin: 18px 0 6px; text-transform: uppercase; }
.ed ul { list-style: none; padding: 0; }
.ed li { margin: 0 0 6px; }
.ed li::before { content: "• "; color: var(--link); }
.ed-help { background: #f7f7f5; border: 1px solid var(--line); }
.ed-steps, .ed-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 40px; }
.ed-crit { margin-top: 18px; }
.ed-cat h4 { margin-top: 6px; }
@media (max-width: 767px) {
  .tiles { grid-template-columns: 1fr; }
  .tile { height: 150px; gap: 6px; }
  .tile-name { font-size: 16px; }
  .tile-scale { font-size: 12px; }
  .tile-go { opacity: 1; }
  .ed { padding: 24px 16px 8px; }
  .ed-title { font-size: 22px; }
  .ed-lead { font-size: 14px; }
  .ed-steps, .ed-cats { grid-template-columns: 1fr; gap: 0; }
}