@font-face {
  font-family: "SUIT";
  src: url("fonts/SUIT-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raleway";
  src: url("fonts/Raleway-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #fbf5e9;
  --surface: #fffdf9;
  --text: #24221f;
  --muted: #6f685f;
  --quiet: #918779;
  --line: #e7d9c7;
  --accent: #d9823b;
  --accent-strong: #b85f22;
  --accent-2: #7f8c4b;
  --accent-soft: #f7e6d3;
  --olive-soft: #edf0df;
  --navy: #302a25;
  --navy-soft: #40372f;
  --code-bg: #f5ecdf;
  --content: 760px;
  --revenue-shadow: 0 18px 46px rgba(69, 48, 27, 0.08);
}

html { scroll-padding-top: 90px; }
body {
  background: #fffdf9;
  color: var(--text);
  font-family: "SUIT", "Noto Sans KR", sans-serif;
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: -0.012em;
}

h1, h2, h3, h4, h5, h6 { font-family: "SUIT", "Noto Sans KR", sans-serif; letter-spacing: -0.045em; }
.revenue-kicker,
.site-brand__tagline,
.journey-card__number,
.revenue-loop__label,
.curriculum-week__header > span,
.curriculum-week__header p { font-family: "Raleway", "SUIT", sans-serif; letter-spacing: 0.1em; }

.site-header {
  background: rgba(255, 253, 249, 0.94);
  border-bottom-color: var(--line);
  backdrop-filter: blur(18px);
}
.site-header__inner { max-width: 1200px; }
.site-brand__mark { background: var(--navy); color: #f4b34f; border-radius: 14px; }
.site-brand__tagline { color: var(--accent-strong); font-size: 10px; }
.site-nav__link { color: #443d36; border-radius: 999px; }
.site-nav__link:hover,
.site-nav__link.is-current { color: #fff; background: var(--accent); }
.site-nav__link.site-nav__link--plain,
.site-nav__link.site-nav__link--plain:hover,
.site-nav__link.site-nav__link--plain.is-current { color: #443d36; background: transparent; }

.site-main { background: #fffdf9; }
.revenue-shell { width: min(100% - 48px, 1180px); margin-inline: auto; }
.revenue-section { padding: clamp(76px, 9vw, 122px) 0; }
.revenue-section--ivory { background: var(--bg); border-block: 1px solid var(--line); }
.revenue-section--olive { background: var(--olive-soft); border-block: 1px solid #dce1c8; }
.revenue-section__heading { max-width: 760px; margin-bottom: 42px; }
.revenue-section__heading--row { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 28px; }
.revenue-section__heading h2 { margin: 6px 0 12px; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.12; }
.revenue-section__heading p:not(.revenue-kicker) { color: var(--muted); margin: 0; }
.revenue-kicker { margin: 0 0 12px; color: var(--accent-strong); font-size: 13px; font-weight: 800; }

.revenue-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(78px, 9vw, 126px) 0;
  background:
    linear-gradient(rgba(217,130,59,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217,130,59,.05) 1px, transparent 1px),
    radial-gradient(circle at 84% 18%, rgba(217,130,59,.22), transparent 31rem),
    var(--bg);
  background-size: 44px 44px, 44px 44px, auto, auto;
  border-bottom: 1px solid var(--line);
}
.revenue-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); gap: clamp(48px, 7vw, 96px); align-items: center; }
.revenue-hero h1 { margin: 0 0 26px; font-size: clamp(45px, 6.3vw, 78px); line-height: .99; font-weight: 860; }
.revenue-hero h1 span { color: var(--accent-strong); }
.revenue-hero__lead { max-width: 660px; margin: 0; color: var(--muted); font-size: clamp(18px, 2vw, 22px); }
.revenue-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.revenue-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 11px 22px; border: 1px solid transparent; border-radius: 12px; font-weight: 750; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s; }
.revenue-button:hover { transform: translateY(-2px); }
.revenue-button--primary { color: #fff; background: var(--accent); box-shadow: 0 12px 24px rgba(184,95,34,.18); }
.revenue-button--primary:hover { color: #fff; background: var(--accent-strong); }
.revenue-button--secondary { color: var(--text); border-color: var(--line); background: #fffdf9; }
.revenue-button--light { color: var(--text); background: #fffdf9; border-color: rgba(255,255,255,.7); }
.revenue-text-link { color: var(--accent-strong); font-weight: 750; text-decoration: none; }

.revenue-loop { position: relative; padding: 30px; border-radius: 26px; background: var(--navy); color: #fff; box-shadow: 0 30px 70px rgba(36,34,31,.2); transform: rotate(1deg); }
.revenue-loop::after { content: ""; position: absolute; width: 78px; height: 78px; right: -24px; top: -26px; border-radius: 25px; background: var(--accent); transform: rotate(13deg); }
.revenue-loop__label { color: #efb56d; font-size: 12px; font-weight: 800; }
.revenue-loop ol { list-style: none; display: grid; gap: 11px; padding: 0; margin: 22px 0 0; }
.revenue-loop li { display: grid; grid-template-columns: 42px 1fr; gap: 0 12px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: rgba(255,255,255,.045); }
.revenue-loop li span { grid-row: 1/3; align-self: center; color: #efb56d; font-family: "Raleway", sans-serif; font-size: 12px; font-weight: 800; }
.revenue-loop li strong { font-size: 17px; }
.revenue-loop li small { color: #c9c0b7; }

.journey-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 15px; }
.journey-card { position: relative; min-height: 275px; padding: 28px 24px 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fffdf9; box-shadow: var(--revenue-shadow); color: var(--text); text-decoration: none; transition: transform .2s, border-color .2s; }
.journey-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--stage-color, var(--accent)); }
.journey-card:hover { color: var(--text); transform: translateY(-6px); border-color: var(--stage-color, var(--accent)); }
.journey-card--learn { --stage-color: #7f8c4b; }.journey-card--plan { --stage-color: #d09a3e; }.journey-card--build { --stage-color: #d9823b; }.journey-card--grow { --stage-color: #b85f22; }.journey-card--validate { --stage-color: #5f4938; }
.journey-card__number { display: block; margin-bottom: 32px; color: var(--stage-color); font-size: 14px; font-weight: 850; }
.journey-card strong { display: block; font-size: 21px; line-height: 1.25; }
.journey-card p { color: var(--muted); font-size: 15px; line-height: 1.65; }
.journey-card small { position: absolute; bottom: 22px; color: var(--stage-color); font-weight: 750; }

.project-showcase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.project-showcase-card,
.project-archive-card { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--revenue-shadow); }
.project-showcase-card__visual,
.project-archive-card__visual { aspect-ratio: 16/10; display: flex; flex-direction: column; justify-content: end; padding: 28px; background: linear-gradient(135deg, #f1d0ab, #d9823b 62%, #8c4a26); color: #fff; text-decoration: none; }
.project-showcase-card:nth-child(2) .project-showcase-card__visual,
.project-archive-card:nth-child(2) .project-archive-card__visual { background: linear-gradient(135deg, #e7ebce, #7f8c4b 62%, #465026); }
.project-showcase-card:nth-child(3) .project-showcase-card__visual,
.project-archive-card:nth-child(3) .project-archive-card__visual { background: linear-gradient(135deg, #eedbc6, #5f4938 62%, #2d241d); }
.project-showcase-card__visual span,
.project-archive-card__visual span { font-size: 70px; line-height: 1; font-weight: 850; }
.project-showcase-card__visual small,
.project-archive-card__visual small { font-family: "Raleway", sans-serif; letter-spacing: .12em; font-weight: 800; }
.project-showcase-card__body,
.project-archive-card__body { padding: 26px; }
.project-showcase-card__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.project-showcase-card__meta span,
.record-card__badges span,
.curriculum-record__badges span,
.single-record__badges > * { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 12px; font-weight: 750; text-decoration: none; }
.project-showcase-card h3,
.project-archive-card h2 { margin: 0 0 12px; font-size: 26px; line-height: 1.2; }
.project-showcase-card h3 a,
.project-archive-card h2 a { text-decoration: none; }
.project-showcase-card p,
.project-archive-card p { color: var(--muted); }

.curriculum-preview { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px 80px; align-items: start; }
.curriculum-preview .revenue-section__heading { margin: 0; }
.curriculum-preview__list { display: grid; gap: 10px; }
.curriculum-preview__list a { display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; align-items: center; padding: 17px 19px; border: 1px solid #d6dcc0; border-radius: 14px; background: rgba(255,255,255,.65); color: var(--text); text-decoration: none; }
.curriculum-preview__list a:hover { background: #fff; }
.curriculum-preview__list span { color: var(--accent-2); font-size: 13px; font-weight: 800; }
.curriculum-preview__list small { color: var(--quiet); }
.curriculum-preview > .revenue-button { grid-column: 2; justify-self: start; }

.record-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.record-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 12px 34px rgba(69,48,27,.055); }
.record-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; border-radius: 18px 18px 0 0; background: var(--accent); }
.record-card[data-stage="learn"]::before { background: #7f8c4b; }.record-card[data-stage="plan"]::before { background: #d09a3e; }.record-card[data-stage="build"]::before { background: #d9823b; }.record-card[data-stage="grow"]::before { background: #b85f22; }.record-card[data-stage="validate"]::before { background: #5f4938; }
.record-card__meta { display: flex; justify-content: space-between; gap: 14px; color: var(--quiet); font-size: 12px; font-weight: 750; }
.record-card__meta span { color: var(--accent-strong); }
.record-card__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.record-card h2,
.record-card h3 { margin: 18px 0 10px; font-size: 23px; line-height: 1.3; }
.record-card h2 a,
.record-card h3 a { color: var(--text); text-decoration: none; }
.record-card p { flex: 1; color: var(--muted); font-size: 15px; }
.record-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.record-card__tags a { color: var(--quiet); font-size: 12px; text-decoration: none; }

.revenue-cta { padding: 72px 0; background: var(--navy); color: #fff; }
.revenue-cta__inner { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.revenue-cta h2 { max-width: 820px; margin: 0; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.12; }
.revenue-cta .revenue-kicker { color: #efb56d; }

.project-archive { padding: clamp(70px, 8vw, 112px) 0; }
.project-archive__header { max-width: 900px; margin-bottom: 44px; }
.project-archive__header h1 { margin: 8px 0 18px; font-size: clamp(42px, 6vw, 70px); line-height: 1.03; }
.project-archive__header > p:last-child { max-width: 760px; color: var(--muted); font-size: 20px; }
.project-archive__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.project-archive__filters button,
.articles-explorer__category-buttons button,
.articles-explorer__category-buttons a,
.articles-explorer__type-buttons button,
.articles-explorer__type-buttons a,
.curriculum-board__filters button,
.curriculum-board__filters a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); font: inherit; font-size: 14px; font-weight: 750; text-decoration: none; cursor: pointer; }
.project-archive__filters button.is-active,
.articles-explorer__category-buttons button.is-active,
.articles-explorer__category-buttons a.is-active,
.articles-explorer__type-buttons button.is-active,
.articles-explorer__type-buttons a.is-active,
.curriculum-board__filters button.is-active,
.curriculum-board__filters a.is-active { color: #fff; border-color: var(--accent); background: var(--accent); }
.project-archive__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.project-archive-card dl { display: grid; grid-template-columns: 74px 1fr; gap: 8px 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.project-archive-card dt { color: var(--accent-strong); font-weight: 800; }.project-archive-card dd { margin: 0; color: var(--muted); font-size: 14px; }

.project-detail { padding: clamp(68px, 8vw, 110px) 0; }
.project-detail__hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items: center; margin-bottom: 64px; }
.project-detail__hero h1 { margin: 7px 0 20px; font-size: clamp(48px, 7vw, 82px); line-height: 1; }
.project-detail__hero > div > p:not(.revenue-kicker) { color: var(--muted); font-size: 20px; }
.project-detail__mark { aspect-ratio: 1; display: flex; flex-direction: column; justify-content: end; padding: 36px; border-radius: 28px; background: linear-gradient(145deg, #efc392, #d9823b 65%, #8c4a26); color: #fff; box-shadow: var(--revenue-shadow); }
.project-detail__mark span { font-size: 100px; line-height: 1; font-weight: 850; }.project-detail__mark small { font-family: "Raleway", sans-serif; letter-spacing: .14em; font-weight: 800; }
.project-detail__facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 72px; }
.project-detail__facts > div { padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); }
.project-detail__facts span { color: var(--accent-strong); font-size: 13px; font-weight: 850; }.project-detail__facts p { margin-bottom: 0; }
.project-detail__content { margin-bottom: 72px; }
.project-detail__records { scroll-margin-top: 100px; }

.articles-page--v2 { padding: clamp(66px, 8vw, 105px) 0; }
.articles-page__heading { padding: 0; margin-bottom: 44px; }
.articles-page__heading h1 { margin: 6px 0 18px; font-size: clamp(44px, 6vw, 70px); line-height: 1.04; }
.articles-page__heading > p:not(.revenue-kicker) { max-width: 780px; color: var(--muted); font-size: 20px; }
.articles-page__heading-actions { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 24px; }
.articles-explorer { padding: 0; }
.articles-explorer__controls { display: grid; gap: 22px; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); }
.articles-explorer__search label,
.articles-explorer fieldset legend,
.articles-explorer__sort label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 13px; font-weight: 800; }
.articles-explorer__search input { width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--text); font: inherit; }
.articles-explorer fieldset { min-width: 0; padding: 0; border: 0; }
.articles-explorer__category-buttons,
.articles-explorer__type-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.articles-explorer__sort select { min-height: 44px; padding: 7px 36px 7px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; }
.articles-explorer__summary { display: flex; justify-content: space-between; margin: 22px 0; color: var(--muted); }
.articles-explorer__summary button { border: 0; background: transparent; color: var(--accent-strong); font: inherit; font-weight: 750; cursor: pointer; }.articles-explorer__summary button:disabled { opacity: .4; }

.curriculum-board { padding: clamp(66px, 8vw, 105px) 0; background: linear-gradient(180deg, var(--bg), #fffdf9 520px); }
.curriculum-board__hero { display: grid; grid-template-columns: 1fr auto; gap: 50px; align-items: end; }
.curriculum-board__hero h1 { max-width: 850px; margin: 6px 0 18px; font-size: clamp(44px, 6vw, 70px); line-height: 1.04; }
.curriculum-board__hero > div > p:not(.revenue-kicker) { max-width: 730px; color: var(--muted); font-size: 19px; }
.curriculum-board__summary { display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--revenue-shadow); }
.curriculum-board__summary div { min-width: 112px; padding: 20px; text-align: center; }.curriculum-board__summary div + div { border-left: 1px solid var(--line); }.curriculum-board__summary strong { display: block; color: var(--accent-strong); font-family: "Raleway", sans-serif; font-size: 30px; }.curriculum-board__summary span { color: var(--muted); font-size: 12px; }
.curriculum-board__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 44px; }
.curriculum-board__weeks { display: grid; gap: 30px; margin-top: 38px; }
.curriculum-week { display: grid; grid-template-columns: 210px 1fr; gap: 32px; padding: 32px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--revenue-shadow); }
.curriculum-week__header { display: flex; align-items: start; gap: 14px; }.curriculum-week__header > span { color: var(--accent); font-size: 34px; line-height: 1; font-weight: 850; }.curriculum-week__header p { margin: 0; color: var(--accent-strong); font-size: 11px; font-weight: 800; }.curriculum-week__header h2 { margin: 5px 0 0; font-size: 22px; line-height: 1.3; }
.curriculum-week__records { display: grid; gap: 12px; }
.curriculum-record { display: grid; grid-template-columns: 5px 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fffdf9; }.curriculum-record__rail { background: var(--accent); }.curriculum-record__body { padding: 20px 22px; }.curriculum-record__badges { display: flex; flex-wrap: wrap; gap: 6px; }.curriculum-record__badges .is-private { color: #fff; background: var(--navy); }.curriculum-record h3 { margin: 13px 0 8px; font-size: 20px; }.curriculum-record h3 a { text-decoration: none; }.curriculum-record p { color: var(--muted); font-size: 14px; }.curriculum-record__meta,.curriculum-record__actions { display: flex; flex-wrap: wrap; gap: 16px; color: var(--quiet); font-size: 12px; }.curriculum-record__actions { margin-top: 14px; }.curriculum-record__actions a { color: var(--accent-strong); font-weight: 750; text-decoration: none; }

.single-record { max-width: 980px; padding: clamp(65px, 8vw, 105px) 0; }
.single-record__header { max-width: 860px; margin-bottom: 44px; }
.single-record__badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.single-record__header h1 { margin: 0 0 22px; font-size: clamp(42px, 6vw, 68px); line-height: 1.08; }
.single-record__summary { color: var(--muted); font-size: 20px; }
.single-record__meta { display: flex; gap: 18px; color: var(--quiet); font-size: 13px; }
.single-record__context { display: grid; grid-template-columns: 58px 1fr; gap: 18px; max-width: 860px; margin-bottom: 44px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); }.single-record__context > span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--accent); color: #fff; font-family: "Raleway", sans-serif; font-weight: 850; }.single-record__context p { margin: 3px 0 0; color: var(--muted); font-size: 14px; }
.single-record__content { margin: 0; }.single-record__content > * { max-width: 760px; margin-inline: auto; }.single-record__content > .alignwide { max-width: 980px; }.single-record__content h2 { margin-top: 2.3em; font-size: 34px; }.single-record__content h3 { margin-top: 1.9em; font-size: 25px; }.single-record__content p,.single-record__content li { font-size: 17px; line-height: 1.82; }.single-record__content blockquote { border-left-color: var(--accent); background: var(--bg); }
.single-record__related { margin-top: 80px; }.single-record__footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 70px; padding-top: 24px; border-top: 1px solid var(--line); }.single-record__footer a { color: var(--accent-strong); font-weight: 750; text-decoration: none; }

.archive-v2 { padding: clamp(66px, 8vw, 105px) 0; }.archive-v2__header { max-width: 860px; margin-bottom: 42px; }.archive-v2__header h1 { margin: 5px 0 18px; font-size: clamp(42px, 6vw, 68px); line-height: 1.05; }.archive-v2__header > div { color: var(--muted); }.archive-v2__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.learning-map-page,
.curriculum-page { font-family: "SUIT", sans-serif; }
.map-hero,
.curriculum-hero { background: var(--bg) !important; }

.site-footer { background: var(--navy); color: #fff; border-top: 0; }.site-footer a { color: #fff; }

[hidden] { display: none !important; }

@media (max-width: 980px) {
  .revenue-hero__grid,
  .project-detail__hero { grid-template-columns: 1fr; }
  .revenue-loop { max-width: 620px; transform: none; }
  .journey-grid { grid-template-columns: repeat(3, 1fr); }
  .project-showcase-grid,
  .record-card-grid { grid-template-columns: repeat(2, 1fr); }
  .curriculum-preview { grid-template-columns: 1fr; }.curriculum-preview > .revenue-button { grid-column: 1; }
  .curriculum-board__hero { grid-template-columns: 1fr; }.curriculum-board__summary { width: fit-content; }
  .curriculum-week { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .revenue-shell { width: min(100% - 32px, 1180px); }
  .revenue-section { padding: 70px 0; }
  .revenue-hero { padding: 60px 0 74px; }.revenue-hero h1 { font-size: clamp(41px, 13vw, 58px); }.revenue-hero__lead { font-size: 18px; }
  .revenue-loop { padding: 23px; }.revenue-loop::after { width: 54px; height: 54px; right: -12px; top: -16px; }
  .journey-grid,
  .project-showcase-grid,
  .record-card-grid,
  .project-archive__grid,
  .archive-v2__grid,
  .project-detail__facts { grid-template-columns: 1fr; }
  .journey-card { min-height: 230px; }
  .revenue-section__heading--row,
  .revenue-cta__inner { display: block; }.revenue-section__heading--row .revenue-text-link { display: inline-block; margin-top: 18px; }.revenue-cta .revenue-button { margin-top: 28px; }
  .curriculum-preview__list a { grid-template-columns: 64px 1fr; }.curriculum-preview__list small { grid-column: 2; }
  .project-detail__mark { max-width: 360px; }
  .articles-explorer__controls { padding: 20px; }
  .curriculum-board__summary { width: 100%; }.curriculum-board__summary div { flex: 1; min-width: 0; padding: 15px 8px; }
  .curriculum-week { padding: 22px; }.curriculum-week__header { display: grid; grid-template-columns: auto 1fr; }
  .single-record__header h1 { font-size: clamp(38px, 11vw, 54px); }.single-record__summary { font-size: 18px; }
  .single-record__footer { flex-direction: column; }
}