:root {
  --bg: #fbfaf7;
  --surface: #ffffff;
  --ink: #1c1b18;
  --ink-soft: #55534c;
  --ink-faint: #8a877e;
  --rule: #e4e1d9;
  --accent: #2f5d50;
  --accent-soft: #e8f0ec;
  --warn: #8a5a1f;
  --measure: 34rem;
  --font: ui-serif, "Iowan Old Style", "Source Serif 4", Georgia, serif;
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14150f;
    --surface: #1c1e17;
    --ink: #eceadf;
    --ink-soft: #b2afa2;
    --ink-faint: #817e72;
    --rule: #2e3128;
    --accent: #8fc4b0;
    --accent-soft: #23302a;
    --warn: #d6a15e;
  }
}
:root[data-theme="dark"] {
  --bg: #14150f;
  --surface: #1c1e17;
  --ink: #eceadf;
  --ink-soft: #b2afa2;
  --ink-faint: #817e72;
  --rule: #2e3128;
  --accent: #8fc4b0;
  --accent-soft: #23302a;
  --warn: #d6a15e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 44rem; margin: 0 auto; padding: 0 16px; }

a { color: inherit; }

.site-head {
  border-bottom: 1px solid var(--rule);
  padding: 20px 0;
  margin-bottom: 40px;
}
.site-head .wrap { display: flex; align-items: baseline; gap: 12px; }
.brand {
  font-family: var(--font-ui);
  font-weight: 650;
  letter-spacing: -0.015em;
  text-decoration: none;
  font-size: 1.05rem;
}
.brand-mark { color: var(--accent); }
.tagline {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--ink-faint);
}

h1 {
  font-size: clamp(1.75rem, 5vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  max-width: var(--measure);
}
h2 {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-faint);
  margin: 48px 0 16px;
  font-weight: 620;
}
.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: var(--measure); margin: 0 0 24px; }

.method {
  font-family: var(--font-ui);
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--accent-soft);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 8px;
}
.method strong { color: var(--ink); font-weight: 620; }

.place { border-top: 1px solid var(--rule); padding: 32px 0 8px; }
.place-head { display: flex; gap: 16px; align-items: flex-start; }
.place-head .txt { flex: 1; min-width: 0; }
.place h3 {
  font-size: 1.3rem;
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}
.place .ko { font-family: var(--font-ui); font-size: 0.82rem; color: var(--ink-faint); }
.place .why { margin: 12px 0 0; max-width: var(--measure); }

.facts { list-style: none; padding: 0; margin: 18px 0 0; font-family: var(--font-ui); font-size: 0.87rem; }
.facts li { display: flex; gap: 10px; padding: 5px 0; color: var(--ink-soft); }
.facts .k { color: var(--ink-faint); min-width: 7.5rem; flex-shrink: 0; }
.facts .v { color: var(--ink); }
.facts .v.warn { color: var(--warn); }

.hours {
  font-family: var(--font-ui);
  font-size: 0.87rem;
  border-left: 2px solid var(--rule);
  padding: 2px 0 2px 14px;
  margin: 18px 0 0;
  color: var(--ink-soft);
}
.hours .asof { color: var(--ink-faint); font-size: 0.78rem; display: block; margin-top: 6px; }

.maplinks { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; font-family: var(--font-ui); font-size: 0.83rem; }
.maplinks a {
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 5px 12px;
  color: var(--ink-soft);
  background: var(--surface);
}
.maplinks a.primary { border-color: var(--accent); color: var(--accent); font-weight: 600; }

.guide-list { list-style: none; padding: 0; margin: 0; }
.guide-list li { border-top: 1px solid var(--rule); padding: 20px 0; }
.guide-list a { text-decoration: none; }
.guide-list .t { font-size: 1.2rem; letter-spacing: -0.01em; display: block; margin-bottom: 4px; }
.guide-list .d { font-family: var(--font-ui); font-size: 0.87rem; color: var(--ink-soft); }
.crumb { font-family: var(--font-ui); font-size: 0.8rem; color: var(--ink-faint); margin-bottom: 14px; }
.crumb a { text-decoration: none; }

footer { margin: 72px 0 48px; border-top: 1px solid var(--rule); padding-top: 20px; font-family: var(--font-ui); font-size: 0.8rem; color: var(--ink-faint); }

@media (max-width: 560px) {
  .place-head { flex-direction: column; gap: 12px; }
  .facts li { flex-direction: column; gap: 0; }
  .facts .k { min-width: 0; }
}

/* ── 페이지 폭과 2단 레이아웃 ──────────────────────────────────────────
   Base.astro 의 스코프 <style> 이 아니라 여기 둔다. 원래 전역 성격인 규칙이고,
   Astro dev 가 스코프 스타일을 캐시해서 고쳐도 화면이 안 바뀌는 일이 반복됐다. */
/* 2단 레이아웃. 본문 폭(44rem)은 그대로 두고 옆칸을 붙인다.
   헤더·푸터도 .wide 를 같이 받아서 왼쪽 시작점이 본문과 맞는다. */
.wrap.wide { max-width: 64rem; }
@media (min-width: 1080px) {
  main.has-rail { display: grid; grid-template-columns: minmax(0, 44rem) 15rem; gap: 48px;
                  align-items: start; }
  main.has-rail .col  { grid-column: 1; min-width: 0; }
  main.has-rail .side { grid-column: 2; position: sticky; top: 24px;
                        max-height: calc(100vh - 48px); overflow-y: auto;
                        scrollbar-width: none; }
  main.has-rail .side::-webkit-scrollbar { display: none; }
}
/* 좁은 화면: 옆칸을 풀어서 차례는 본문 위, 추천은 본문 아래로 보낸다.
   DOM 순서를 바꾸지 않고 order 만 쓴다 — 차례가 화면 위에 붙으려면
   본문보다 앞선 위치에 있어야 하는데, 마크업은 하나로 유지하고 싶다. */
@media (max-width: 1079px) {
  main.has-rail { display: flex; flex-direction: column; }
  main.has-rail .side { display: contents; }
  main.has-rail .col { order: 0; }
  main.has-rail .toc  { order: -1; }
  main.has-rail .also { order: 1; }
/* 차례가 화면 위에 붙으므로 제목이 그 밑에 숨지 않게 여백을 준다 */
  main.has-rail h2[id] { scroll-margin-top: 56px; }
}

/* ── 장소 페이지 (옛 Astro 컴포넌트에서 되살림) ─────────────── */
  .dates { font-family: var(--font-ui); font-size: .78rem; color: var(--ink-faint);
           margin: -14px 0 24px; }
  .dates .sep { margin: 0 8px; opacity: .6; }
  .sub { font-family: var(--font-ui); font-size: .87rem; color: var(--ink-faint); margin: -6px 0 24px; }
  .kv { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: .87rem; margin: 6px 0 0; }
  .kv th { text-align: left; font-weight: 500; color: var(--ink-faint); padding: 7px 14px 7px 0; vertical-align: top; }
  .kv td { padding: 7px 0; color: var(--ink); }
  /* '51 / 141' 이 줄바꿈되지 않게. 라벨이 길면 값 칸이 눌린다. */
  .kv.narrow td { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
  .kv.narrow th { padding-right: 18px; }
  .menu { list-style: none; padding: 0; margin: 8px 0 0; }
  .menu li { border-top: 1px solid var(--rule); padding: 14px 0 16px; }
  .menu .row { display: flex; align-items: baseline; gap: 10px; }
  .menu .row.sub { margin-top: 4px; gap: 12px; }
  .ko-name { font-size: 1.02rem; color: var(--ink); }
  .ko-title { margin: -2px 0 0; font-size: 1.05rem; color: var(--dim); }
  .sources { margin: 10px 0 0; padding: 0; list-style: none;
             font-family: var(--font-ui); font-size: .78rem; }
  .sources li { margin-top: 3px; }
  .sources a { color: var(--ink-faint); text-decoration: none; border-bottom: 1px solid var(--rule); }
  .sources a:hover { color: var(--accent); border-color: var(--accent); }
  .lede { margin: 0 0 28px; font-size: 1.06rem; line-height: 1.75; max-width: var(--measure); }
  .price { margin-left: auto; font-family: var(--font-ui); font-variant-numeric: tabular-nums; color: var(--ink); }
  .ro { font-family: var(--font-ui); font-size: .78rem; color: var(--ink-faint); font-style: italic; }
  .cnt { margin-left: auto; font-family: var(--font-ui); font-size: .76rem; color: var(--ink-faint); }
  /* 메뉴에서 주인공은 가격이 아니라 「몇 명이 먹었나」다. 그 자리를 바꿔 준다. */
  .cnt.lead { font-size: .88rem; color: var(--ink); font-variant-numeric: tabular-nums; }
  .menu .row.sub .price { font-size: .78rem; color: var(--ink-faint); }
  /* 지도 그림. 받은 비율 그대로 줄인다 — NAVER 로고가 잘리면 약관 위반이다. */
  .mapshot { display: block; margin: 10px 0 12px; border-radius: 10px; overflow: hidden;
             border: 1px solid var(--rule); }
  .mapshot img { display: block; width: 100%; height: auto; }
  /* 눈에는 안 보이고 소리로만 읽히는 글. display:none 은 리더도 건너뛰므로 쓰면 안 된다. */
  .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  /* 건너뛰기 링크. 평소엔 화면 밖에 있다가 탭으로 잡으면 내려온다. */
  .skip { position: absolute; left: 8px; top: -48px; z-index: 10;
          padding: 8px 14px; border-radius: 0 0 8px 8px;
          background: var(--accent); color: var(--bg);
          font-family: var(--font-ui); font-size: .85rem; text-decoration: none;
          transition: top .12s ease; }
  .skip:focus { top: 0; }
  h3.lbl { font-size: inherit; font-weight: inherit; }
  .about { font-family: var(--font-ui); font-size: .84rem; line-height: 1.6;
           color: var(--ink-soft); margin: 8px 0 0; max-width: var(--measure); }
  button.say { display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; padding: 0; border: 1px solid var(--rule); border-radius: 50%;
    background: var(--surface); color: var(--ink-faint); cursor: pointer; flex-shrink: 0; }
  /* flex 항목이라 줄어들 수 있다. 실제로 너비 0 이 되어 빈 동그라미만 보였다. */
  button.say svg { flex-shrink: 0; }
  button.say:hover { color: var(--accent); border-color: var(--accent); }
  button.say[data-playing] { color: var(--accent); border-color: var(--accent); }
  /* 지도 그림. 받은 비율 그대로 줄인다 — NAVER 로고가 잘리면 약관 위반이다. */
  .mapshot { display: block; margin: 10px 0 12px; border-radius: 10px; overflow: hidden;
             border: 1px solid var(--rule); }
  .mapshot img { display: block; width: 100%; height: auto; }
  /* 눈에는 안 보이고 소리로만 읽히는 글. display:none 은 리더도 건너뛰므로 쓰면 안 된다. */
  .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  /* 건너뛰기 링크. 평소엔 화면 밖에 있다가 탭으로 잡으면 내려온다. */
  .skip { position: absolute; left: 8px; top: -48px; z-index: 10;
          padding: 8px 14px; border-radius: 0 0 8px 8px;
          background: var(--accent); color: var(--bg);
          font-family: var(--font-ui); font-size: .85rem; text-decoration: none;
          transition: top .12s ease; }
  .skip:focus { top: 0; }
  h3.lbl { font-size: inherit; font-weight: inherit; }
  @media (max-width: 560px) {
    .menu .row.sub { flex-wrap: wrap; }
  }
  .kv.menu td { text-align: right; font-variant-numeric: tabular-nums; }
  .kv.narrow { max-width: 20rem; }
  .kv thead th { color: var(--ink); border-bottom: 1px solid var(--rule); }
  .dim { color: var(--ink-faint); }
  .visitor { margin-top: 38px; border: 1px solid var(--accent); border-radius: 10px;
             padding: 20px 22px 24px; background: var(--surface); }
  .visitor h2 { margin: 0 0 4px; color: var(--ink); }
  .visitor ul { list-style: none; padding: 0; margin: 0; font-family: var(--font-ui); font-size: .88rem; }
  .visitor .known li { display: flex; gap: 12px; align-items: baseline;
                       padding: 7px 0; border-bottom: 1px solid var(--rule); color: var(--ink); }
  .visitor .known li:last-child { border-bottom: none; }
  .visitor .known .v { flex: 1; }
  .visitor .known .n { color: var(--ink-faint); font-variant-numeric: tabular-nums; font-size: .8rem; }
  .visitor .unknown li { padding: 7px 0 7px 20px; position: relative; color: var(--ink-soft); }
  .visitor .unknown li::before { content: '?'; position: absolute; left: 0; top: 7px;
                                 color: var(--warn); font-weight: 700; }
  .changed th { white-space: nowrap; vertical-align: top; }
  .wx { margin-top: 22px; }
  /* 위의 표와 같은 줄로 보여야 한다. 스타일을 안 주면 본문 세리프를 물려받아
     바로 위 산세리프 표와 따로 놀았다. */
  .wx .known { list-style: none; margin: 0; padding: 0; font-family: var(--font-ui); font-size: .82rem; }
  .wx .known li { display: flex; gap: 12px; align-items: baseline;
                  padding: 5px 0; border-bottom: 1px solid var(--rule); color: var(--ink-soft); }
  .wx .known li:last-child { border-bottom: none; }
  .wx .known .v { flex: 1; }
  .wx .known .n { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
  .wx .note { margin-top: 8px; }
  .cafes { list-style: none; padding: 0; margin: 10px 0 0; font-family: var(--font-ui);
           font-size: .82rem; color: var(--ink-faint); display: grid; gap: 6px; }
  .cafes li { border: 1px solid var(--rule); border-radius: 8px; padding: 7px 12px;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; }
  .cafes .what { color: var(--ink); }
  .cafes .cnt { color: var(--dim); font-variant-numeric: tabular-nums; }
  .cafes .ko-name { color: var(--dim); font-size: .88em; }
  .take { margin-top: 38px; border-top: 2px solid var(--accent); padding-top: 4px; }
  .take h2 { color: var(--ink); font-size: .84rem; margin: 18px 0 4px; }
  .take ol { list-style: none; counter-reset: t; padding: 0; margin: 0; }
  .take li { counter-increment: t; position: relative; padding: 16px 0 16px 46px;
             border-bottom: 1px solid var(--rule); font-size: 1rem; line-height: 1.66;
             color: var(--ink-soft); max-width: var(--measure); }
  .take li:last-child { border-bottom: none; }
  .take li::before { content: counter(t); position: absolute; left: 0; top: 17px;
    width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft);
    color: var(--accent); font-family: var(--font-ui); font-size: .78rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; }
  .take li strong { color: var(--ink); font-weight: 600; }
  @media (max-width: 560px) { .take li { padding-left: 38px; } }
  .mapshot { display: block; margin-top: 26px; border-radius: 10px; overflow: hidden;
             border: 1px solid var(--rule); line-height: 0; }
  .mapshot img { width: 100%; height: auto; display: block; }
  .maplinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
              font-family: var(--font-ui); font-size: .83rem; }
  .maplinks a { text-decoration: none; border: 1px solid var(--rule); border-radius: 999px;
                padding: 5px 13px; color: var(--ink-soft); background: var(--surface); }
  .maplinks a.primary { border-color: var(--accent); color: var(--accent); font-weight: 600; }
  .said { border: 1px solid var(--rule); border-radius: 10px; padding: 22px 24px 26px;
          margin-top: 34px; background: var(--surface); }
  .said h2 { margin-top: 0; color: var(--ink); font-size: .84rem; }
  .said .lead { font-size: 1.04rem; line-height: 1.62; color: var(--ink);
                max-width: var(--measure); margin: 0 0 20px; }
  @media (max-width: 560px) { .said { padding: 18px 16px 22px; } }
  .lbl { font-family: var(--font-ui); font-size: .78rem; text-transform: uppercase;
         letter-spacing: .07em; color: var(--ink-faint); margin: 14px 0 6px; }
  .lbl.gap { margin-top: 26px; }
  .note { font-family: var(--font-ui); font-size: .85rem; line-height: 1.68;
          color: var(--ink-soft); max-width: var(--measure); margin: 16px 0 0; }
  .note.sample { color: var(--ink-faint); font-size: .78rem; border-top: 1px solid var(--rule);
                 padding-top: 14px; margin-top: 34px; }
  details.series { margin-top: 16px; }
  details.series summary { font-family: var(--font-ui); font-size: .8rem; color: var(--ink-faint);
    cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
  details.series summary::-webkit-details-marker { display: none; }
  details.series summary::before { content: '▸'; font-size: .7em; }
  details.series[open] summary::before { content: '▾'; }
  details.series summary:hover { color: var(--ink); }
  .todo { font-family: var(--font-ui); font-size: .85rem; color: var(--ink-soft); padding-left: 18px; margin: 6px 0 0; }
  .todo li { padding: 4px 0; }


/* ── 막대 ── */

  .bar-row { display: grid; grid-template-columns: 13rem 1fr 4.5rem; gap: 12px; align-items: center; padding: 4px 0; font-family: var(--font-ui); font-size: .85rem; }
  .bar-label { color: var(--ink-soft); }
  .bar-track { background: var(--rule); border-radius: 3px; height: 9px; overflow: hidden; }
  .bar-fill { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
  .bar-fill.warn { background: var(--warn); }
  .bar-fill.mute { background: var(--ink-faint); }
  .bar-val { color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
  .bar-val em { color: var(--ink-faint); font-style: normal; font-size: .8em; margin-left: 3px; }
  @media (max-width: 560px) { .bar-row { grid-template-columns: 8rem 1fr 3.6rem; gap: 8px; font-size: .8rem; } }


/* ── 차례 ── */

  .toc { font-family: var(--font-ui); font-size: .8rem; }
  .toc-h { margin: 0 0 8px; color: var(--ink-faint); text-transform: uppercase;
           letter-spacing: .06em; font-size: .68rem; }
  .toc ol { list-style: none; margin: 0; padding: 0; }
  .toc a { display: block; padding: 4px 0 4px 10px; color: var(--ink-faint);
           text-decoration: none; border-left: 2px solid var(--rule); line-height: 1.35; }
  .toc a:hover { color: var(--ink); }
  .toc a[aria-current="true"] { color: var(--accent); border-left-color: var(--accent); }

  /* 좁은 화면: 헤더 밑에 붙는 가로 줄. 목차가 세로로 길게 자리를 먹지 않게 한다. */
  @media (max-width: 1079px) {
    .toc { position: sticky; top: 0; z-index: 5; margin: 0 -16px 20px;
           padding: 8px 16px; background: var(--bg);
           border-bottom: 1px solid var(--rule); }
    .toc-h { display: none; }
    .toc ol { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
    .toc ol::-webkit-scrollbar { display: none; }
    .toc li { flex: 0 0 auto; }
    .toc a { border: 1px solid var(--rule); border-radius: 999px;
             padding: 4px 11px; white-space: nowrap; }
    .toc a[aria-current="true"] { border-color: var(--accent); }
  }


/* ── 월별 분포 (옛 MonthBars) ── */
.mb { width: 100%; height: 108px; display: block; }
.mb-x { display: flex; font-family: var(--font-ui); font-size: .68rem; color: var(--ink-faint); margin-top: 2px; }
.mb-x span { flex: 1; text-align: center; }

/* ── 머리(언어 전환 등) — Base.astro 에서 되살림 ── */

  .site-head .wrap { flex-wrap: wrap; }
  /* 링크 셋이 붙어 보였다. 간격을 넓히고 가운뎃점으로 나눈다. */
  .more { margin: 16px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0; }
  .more a { color: var(--ink-soft); text-decoration: none; padding: 2px 0; }
  .more a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  /* --rule 은 선 색이라 글자로 쓰면 배경에 묻힌다 */
  .more a + a::before { content: '·'; color: var(--ink-faint); padding: 0 12px; }
  .langs { margin-left: auto; }
  .langs { display: flex; gap: 10px; font-family: var(--font-ui); font-size: .78rem; }
  .langs a { color: var(--ink-faint); text-decoration: none; }
  .langs a:hover { color: var(--ink); }
  .langs .on { color: var(--accent); font-weight: 600; }
  @media (max-width: 620px) { .langs { margin-left: 0; width: 100%; padding-top: 6px; } }



/* ── 공유 — Share.astro 에서 되살림 ── */

  .share { margin: 22px 0 6px; }
  .share-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .share-legacy-h { margin: 0 0 10px; font-family: var(--font-ui); font-size: .68rem;
             text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
  .share .row { display: flex; flex-wrap: wrap; gap: 8px; }
  /* 공유 버튼만. 전에는 `.row button` 이라 메뉴의 발음 버튼까지 덮었다 —
     명시도가 같아서 나중에 쓴 이 규칙이 이겼다. */
  .share .row a, .share .row button {
    font-family: var(--font-ui); font-size: .8rem; color: var(--ink-soft);
    border: 1px solid var(--rule); border-radius: 999px; padding: 5px 13px;
    text-decoration: none; background: transparent; cursor: pointer; line-height: 1.4;
  }
  .share .row a:hover, .share .row button:hover { color: var(--ink); border-color: var(--ink-faint); }
  .share .row button.ok { color: var(--accent); border-color: var(--accent); }


/* ── 근거 목록 ──────────────────────────────────────────────────────
   인용이다. 본문보다 조용해야 한다 — 읽으라고 있는 글이 아니라
   「어디서 나왔는지 확인할 수 있다」는 사실을 보이려고 있는 목록이다. */
ol.src { list-style: decimal; padding-left: 2em; margin: 10px 0 0;
         font-family: var(--font-ui); font-size: .78rem; line-height: 1.55;
         color: var(--ink-faint); }
ol.src li { margin: 5px 0; padding-left: 2px; }
ol.src li::marker { color: var(--ink-faint); font-size: .9em; }
ol.src a { color: var(--ink-soft); text-decoration: none;
           border-bottom: 1px solid var(--rule); }
ol.src a:hover { color: var(--ink); border-bottom-color: var(--ink-faint); }
ol.src .dim { color: var(--ink-faint); }
@media (max-width: 560px) { ol.src { font-size: .74rem; padding-left: 1.6em; } }