/* VYLEW — inner pages (About, Contact, Case study). Loaded after site.css;
   brand v3 tokens only. Sections reuse .sec / .shead from site.css. */

.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
p.label { display: flex; }
.ttl { font-size: clamp(44px, 6vw, 96px); font-weight: 300; letter-spacing: -.055em; line-height: .96; }
.ttl .tone { color: var(--smoke); }
.pg-glass { background: rgba(255,255,255,.5); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.45), 0 12px 36px rgba(0,0,0,.10); }
.pg-glass-d { background: rgba(28,28,30,.38); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); color: var(--paper);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.10), 0 16px 40px rgba(0,0,0,.3); }
.pg-glass-d .label { color: rgba(255,255,255,.6); }
.pg-ghost { position: absolute; left: 3%; right: 3%; top: 0; z-index: 0; color: var(--mist); line-height: 0; pointer-events: none; }
.pg-ghost svg { display: block; width: 100%; height: auto; }
.pg-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.pg-pill { -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; height: 36px; padding: 0 15px; border-radius: 999px; font: 500 13px/1 var(--sans); color: var(--obsidian); background: var(--paper); box-shadow: inset 0 0 0 1px var(--silver); transition: background-color .24s var(--ease), color .24s var(--ease); }
.pg-pill.on { background: var(--obsidian); color: var(--paper); box-shadow: none; }
.pg-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-back { display: inline-flex; gap: 8px; align-items: center; }

/* stat cards */
.pg-stats { row-gap: var(--gap); }
.pg-stat { display: grid; align-content: space-between; min-height: 210px; padding: 20px; border-radius: 18px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--silver); }
.pg-stat strong { display: block; margin-top: 36px; font-size: clamp(44px, 4.4vw, 70px); font-weight: 200; letter-spacing: -.06em; line-height: 1; }
.pg-stat p { margin-top: 10px; color: var(--ash); font-size: 14px; }

/* ruled rows (rules, story, fit lists) */
.pg-rows { border-top: 1px solid var(--obsidian); }
.pg-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); padding: 24px 0; border-bottom: 1px solid var(--silver); align-items: baseline; }
.pg-row > .label { grid-column: 1; }
.pg-row h3 { grid-column: 2 / 4; font-size: clamp(22px, 2.2vw, 32px); font-weight: 300; letter-spacing: -.035em; line-height: 1.15; }
.pg-row > p { grid-column: 4; color: var(--ash); font-size: 15px; }

/* questions that open in place */
.pg-faq { border-top: 1px solid var(--obsidian); }
.pg-q { border-bottom: 1px solid var(--silver); }
.pg-q > button { -webkit-appearance: none; appearance: none; border: 0; background: none; width: 100%; cursor: pointer; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; padding: 22px 0; text-align: left; color: var(--obsidian); font: inherit; }
.pg-q > button .label { grid-column: 1; justify-self: start; }
.pg-q > button b { grid-column: 2 / 4; font-size: clamp(20px, 2vw, 28px); font-weight: 300; letter-spacing: -.035em; line-height: 1.2; }
.pg-q > button i { grid-column: 4; justify-self: end; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-style: normal; box-shadow: inset 0 0 0 1px var(--silver); transition: rotate .4s var(--ease), background-color .3s var(--ease), color .3s var(--ease); }
.pg-q.open > button i { rotate: 45deg; background: var(--obsidian); color: var(--paper); box-shadow: none; }
.pg-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.pg-q.open .pg-a { grid-template-rows: 1fr; }
.pg-a > div { overflow: hidden; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
.pg-a p { grid-column: 2 / 4; padding-bottom: 24px; color: var(--charcoal); font-size: 17px; line-height: 1.6; max-width: 58ch; }

/* work cards (selected work, next case) */
.pg-cards { row-gap: 40px; }
.pg-card { grid-column: span 2; display: grid; gap: 14px; }
.pg-card__img { position: relative; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; background: var(--mist); }
.pg-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.pg-card:hover .pg-card__img img { transform: scale(1.04); }
.pg-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.pg-card__row b { font-size: 24px; font-weight: 300; letter-spacing: -.035em; }

@media (max-width: 860px) {
  .g4 { grid-template-columns: 1fr 1fr; }
  .pg-row { grid-template-columns: 1fr; row-gap: 8px; }
  .pg-row > * { grid-column: 1 !important; }
  .pg-q > button { grid-template-columns: 1fr 36px; row-gap: 8px; }
  .pg-q > button .label { grid-column: 1 / -1; }
  .pg-q > button b { grid-column: 1; } .pg-q > button i { grid-column: 2; grid-row: 2; }
  .pg-a > div { grid-template-columns: 1fr; } .pg-a p { grid-column: 1; }
  .pg-card { grid-column: 1 / -1; }
}

/* ================================================================ ABOUT */
/* 01 about Vylew: two-tone promise over a faint VYLEW, facts on the grid, beliefs as ruled rows */
.ab-co { position: relative; overflow: hidden; padding: calc(var(--nav) + 96px) 0 120px; }
.ab-co .pg-ghost { top: calc(var(--nav) + 40px); }
.ab-co__head { position: relative; row-gap: 28px; align-items: end; }
.ab-co__head .label { grid-column: 1; align-self: start; padding-top: 1em; }
.ab-co__head .ttl { grid-column: 2 / 5; }
.ab-co__lead { position: relative; margin-top: 56px; row-gap: 20px; }
.ab-co__lead p { grid-column: 2 / 4; font-size: clamp(20px, 1.7vw, 26px); font-weight: 300; letter-spacing: -.02em; line-height: 1.35; color: var(--ash); }
.ab-co__lead b { font-weight: 300; color: var(--obsidian); }
.ab-co__facts { position: relative; margin-top: 110px; border-top: 1px solid var(--obsidian); }
.ab-co__fact { display: grid; align-content: space-between; gap: 34px; padding: 18px 18px 22px 0; border-bottom: 1px solid var(--silver); }
.ab-co__fact b { font-size: clamp(26px, 2.4vw, 36px); font-weight: 300; letter-spacing: -.04em; line-height: 1.05; }
.ab-co__beliefs { position: relative; margin-top: 120px; }
/* 04 the person behind it: the whole headshot, its edges fading into the backdrop */
.ab-bh { display: grid; grid-template-columns: 1fr 1fr; border-radius: 24px; overflow: hidden; background: #2D2D2E; color: var(--paper); }
.ab-bh__pic { position: relative; min-height: 540px; background: #121214; }
.ab-bh__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%), linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 24%), linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); mask-composite: intersect; }
.ab-bh__copy { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: clamp(28px, 4vw, 56px); }
.ab-bh__copy .label { color: rgba(255,255,255,.55); }
.ab-bh__name { font-size: clamp(48px, 6vw, 96px); font-weight: 200; letter-spacing: -.065em; line-height: .88; }
.ab-bh__name span { color: rgba(255,255,255,.4); }
.ab-bh__line { margin-top: 22px; font-size: clamp(22px, 2vw, 30px); font-weight: 300; letter-spacing: -.035em; line-height: 1.15; max-width: 20ch; }
.ab-bh__line span { color: rgba(255,255,255,.45); }
.ab-bh__yrs { border-top: 1px solid rgba(255,255,255,.14); }
.ab-bh__yrs div { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 14px; color: rgba(255,255,255,.7); }
.ab-bh__yrs b { font: 500 11px/1.6 var(--mono); letter-spacing: .08em; color: var(--paper); }
.ab-fit { row-gap: 40px; }
.ab-fit__col { grid-column: span 2; }
.ab-fit__col h3 { font-size: clamp(26px, 2.6vw, 40px); font-weight: 300; letter-spacing: -.045em; line-height: 1.05; margin-bottom: 22px; }
.ab-fit__col h3 span { color: var(--smoke); }
.ab-fit__col ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--obsidian); }
.ab-fit__col li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--silver); font-size: 17px; line-height: 1.4; }
.ab-fit__col li i { font-style: normal; font: 500 13px/1.4 var(--mono); color: var(--ash); }
.ab-fit__col--no li { color: var(--ash); }
.ab-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--obsidian); border-left: 1px solid var(--silver); }
.ab-tool { display: flex; flex-direction: column; justify-content: space-between; min-height: 132px; padding: 16px 18px; border-right: 1px solid var(--silver); border-bottom: 1px solid var(--silver); }
.ab-tool b { font-size: clamp(20px, 1.8vw, 26px); font-weight: 300; letter-spacing: -.03em; }
@media (max-width: 860px) {
  .ab-co { padding: calc(var(--nav) + 56px) 0 80px; }
  .ab-co__head > *, .ab-co__lead p, .ab-fit__col { grid-column: 1 / -1 !important; }
  .ab-co__facts { margin-top: 72px; } .ab-co__beliefs { margin-top: 80px; }
  .ab-bh { grid-template-columns: 1fr; } .ab-bh__pic { min-height: 380px; }
  .ab-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================== CONTACT */
.ct-top { background: var(--cloud); padding: calc(var(--nav) + 80px) 0 104px; }
.ct-head { row-gap: 24px; align-items: end; }
.ct-head .label { grid-column: 1; align-self: start; padding-top: .9em; }
.ct-head .ttl { grid-column: 2 / 5; }
.ct-paths { margin-top: 64px; row-gap: var(--gap); }
.ct-path { -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; text-align: left; display: grid; align-content: space-between; gap: 36px; min-height: 210px; padding: 22px; border-radius: 22px; color: var(--obsidian); font: inherit; transition: background-color .3s var(--ease), color .3s var(--ease), transform .4s var(--ease); }
.ct-path:hover { transform: translateY(-3px); }
.ct-path b { display: block; font-size: clamp(24px, 2.2vw, 32px); font-weight: 300; letter-spacing: -.035em; line-height: 1.1; }
.ct-path small { display: block; margin-top: 8px; color: var(--ash); font-size: 14px; }
.ct-path.on { background: var(--obsidian); color: var(--paper); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ct-path.on small, .ct-path.on .label { color: var(--smoke); }
.ct-conv { grid-column: 1 / -1; margin-top: var(--gap); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--gap); align-items: start; }
.ct-stage { grid-column: 1 / 4; position: relative; overflow: hidden; border-radius: 28px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--silver); min-height: 440px; padding: clamp(24px, 4vw, 52px); display: grid; align-content: space-between; gap: 36px; }
.ct-prog { display: flex; gap: 6px; }
.ct-prog i { flex: 1; height: 2px; background: var(--silver); transition: background-color .4s var(--ease); }
.ct-prog i.on { background: var(--obsidian); }
.ct-q { display: none; }
.ct-q.on { display: grid; gap: 22px; animation: ct-in .55s var(--ease); }
@keyframes ct-in { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } }
.ct-q h2 { font-size: clamp(32px, 3.8vw, 60px); font-weight: 300; letter-spacing: -.05em; line-height: 1.02; }
.ct-q input { width: 100%; border: 0; outline: none; background: none; border-bottom: 1px solid var(--obsidian); padding: 10px 0; font: 300 clamp(22px, 2.2vw, 32px)/1.3 var(--sans); letter-spacing: -.03em; color: var(--obsidian); border-radius: 0; }
.ct-q input::placeholder { color: var(--smoke); }
.ct-days .pg-pill { height: 60px; padding: 0 18px; line-height: 1.2; }
.ct-mail { font-size: clamp(34px, 4.4vw, 68px); font-weight: 300; letter-spacing: -.05em; line-height: 1; width: fit-content; }
.ct-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.ct-back { -webkit-appearance: none; appearance: none; border: 0; background: none; cursor: pointer; color: var(--ash); font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.ct-back[disabled] { visibility: hidden; }
.ct-err { min-height: 1.2em; font-size: 14px; color: var(--charcoal); }
.ct-brief { grid-column: 4; position: sticky; top: calc(var(--nav) + 20px); padding: 22px; border-radius: 22px; display: grid; gap: 4px; }
.ct-brief h3 { margin: 4px 0 12px; font-size: 22px; font-weight: 300; letter-spacing: -.035em; }
.ct-brief dl { margin: 0; display: grid; }
.ct-brief dl > div { padding: 12px 0; border-top: 1px solid rgba(11,11,12,.1); }
.ct-brief dt { margin-bottom: 4px; }
.ct-brief dd { margin: 0; font-size: 16px; min-height: 1.4em; overflow-wrap: anywhere; }
.ct-brief dd:empty::before { content: "—"; color: var(--smoke); }
.ct-next { grid-column: 1 / -1; margin-top: 72px; padding-top: 18px; border-top: 1px solid var(--obsidian); row-gap: 24px; }
.ct-next div { display: grid; gap: 8px; }
.ct-next b { font-size: 20px; font-weight: 300; letter-spacing: -.03em; }
.ct-next p { color: var(--ash); font-size: 14px; }
.ct-gets { row-gap: var(--gap); }
.ct-get { display: grid; align-content: space-between; gap: 40px; min-height: 230px; padding: 22px; border-radius: 20px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--silver); }
.ct-get h3 { font-size: 24px; font-weight: 300; letter-spacing: -.035em; line-height: 1.15; }
.ct-get p { margin-top: 10px; color: var(--charcoal); font-size: 15px; line-height: 1.5; }
.ct-price { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 28px; padding: 22px 0; border-top: 1px solid var(--silver); border-bottom: 1px solid var(--silver); }
.ct-price b { font-size: clamp(22px, 2vw, 30px); font-weight: 300; letter-spacing: -.035em; }
.ct-note { align-items: center; row-gap: 32px; }
.ct-note__pic { grid-column: 1; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: #1b1b1c; }
.ct-note__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.ct-note__say { grid-column: 2 / 5; }
.ct-note__say p.big { font-size: clamp(28px, 3.2vw, 50px); font-weight: 300; letter-spacing: -.045em; line-height: 1.1; color: var(--smoke); max-width: 24ch; }
.ct-note__say p.big b { font-weight: 300; color: var(--obsidian); }
.ct-note__say .sig { margin-top: 28px; display: flex; gap: 12px; align-items: center; }
@media (max-width: 860px) {
  .ct-head > *, .ct-stage, .ct-brief, .ct-note__pic, .ct-note__say { grid-column: 1 / -1 !important; }
  .ct-brief { position: static; }
  .ct-paths { grid-template-columns: 1fr; } .ct-conv { grid-template-columns: 1fr; }
  .ct-note__pic { max-width: 320px; }
}

/* =========================================================== CASE STUDY */
.cs { padding: calc(var(--nav) + 72px) 0 96px; }
.cs-head { row-gap: 32px; }
.cs-head .pg-back { grid-column: 1; align-self: start; padding-top: .9em; }
.cs-head .ttl { grid-column: 2 / 5; }
.cs-meta { grid-column: 2 / 5; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 20px; padding-top: 22px; border-top: 1px solid var(--silver); }
.cs-meta div { display: grid; gap: 6px; }
.cs-meta b { font-weight: 400; font-size: 16px; }
.cs-body { margin-top: 64px; align-items: start; row-gap: 40px; }
.cs-side { grid-column: 1; position: sticky; top: calc(var(--nav) + 24px); display: grid; gap: 28px; }
.cs-side ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.cs-side .who { display: flex; gap: 10px; align-items: center; font-size: 15px; line-height: 1.3; }
.cs-main { grid-column: 2 / 5; display: grid; gap: 64px; min-width: 0; }
.cs-cover { aspect-ratio: 16 / 10; border-radius: 24px; overflow: hidden; background: var(--mist); }
.cs-cover img, .cs-pair img { width: 100%; height: 100%; object-fit: cover; }
.cs-lede { font-size: clamp(24px, 2.4vw, 34px); font-weight: 300; letter-spacing: -.035em; line-height: 1.25; max-width: 32ch; }
.cs-sec h2 { font-size: clamp(26px, 2.4vw, 36px); font-weight: 300; letter-spacing: -.04em; margin-bottom: 14px; }
.cs-sec p { max-width: 62ch; font-size: 17px; line-height: 1.65; color: var(--charcoal); }
.cs-sec ul { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--silver); max-width: 62ch; }
.cs-sec li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--silver); font-size: 16px; line-height: 1.5; color: var(--charcoal); }
.cs-sec li span { font: 500 11px/1.6 var(--mono); letter-spacing: .1em; color: var(--ash); }
.cs-res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); padding-top: 22px; border-top: 1px solid var(--obsidian); }
.cs-res strong { display: block; margin: 14px 0 6px; font-size: clamp(40px, 4vw, 68px); font-weight: 200; letter-spacing: -.06em; line-height: 1; white-space: nowrap; }
.cs-res p { color: var(--ash); font-size: 14px; }
.cs-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cs-table th, .cs-table td { text-align: left; padding: 16px 0; border-bottom: 1px solid var(--silver); font-weight: 300; }
.cs-table th { font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ash); border-bottom-color: var(--obsidian); }
.cs-table td { font-size: clamp(17px, 1.5vw, 22px); letter-spacing: -.025em; }
.cs-table td:first-child { width: 44%; padding-right: 12px; }
.cs-table .bar { display: block; height: 2px; margin-top: 10px; background: var(--obsidian); transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ease); }
.cs-table.is-in .bar { transform: scaleX(var(--to)); }
.cs-shipped { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.cs-shipped div { padding: 18px; border-radius: 18px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--silver); display: grid; gap: 22px; }
.cs-shipped strong { font-size: clamp(32px, 3vw, 48px); font-weight: 200; letter-spacing: -.05em; line-height: 1; }
.cs-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.cs-pair figure { margin: 0; display: grid; gap: 10px; }
.cs-pair figure div { aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: var(--mist); }
.cs-quote { padding: 28px; border-radius: 22px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--silver); }
.cs-quote p { font-size: 22px; font-weight: 300; letter-spacing: -.03em; line-height: 1.35; }
.cs-quote .label { margin-top: 16px; }
.cs-next { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 24px; align-items: end; }
.cs-next__txt { grid-column: 1 / 3; display: grid; gap: 14px; }
.cs-next__txt h2 { font-size: clamp(40px, 5vw, 80px); font-weight: 300; letter-spacing: -.055em; line-height: .96; }
.cs-next__txt h2 span { color: var(--smoke); }
.cs-next__img { grid-column: 3 / 5; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; background: var(--mist); }
.cs-next__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.cs-next:hover .cs-next__img img { transform: scale(1.04); }
@media (max-width: 860px) {
  .cs-head > *, .cs-side, .cs-main, .cs-meta, .cs-next__txt, .cs-next__img { grid-column: 1 / -1 !important; }
  .cs-side { position: static; } .cs-meta { grid-template-columns: 1fr 1fr; }
  .cs-res { grid-template-columns: 1fr; } .cs-shipped { grid-template-columns: 1fr 1fr; }
  .cs-table td:first-child { width: auto; }
}


/* ================================================================ LEGAL */
.lg { padding-bottom: 120px; }
.lg__idx { grid-column: 1; align-self: start; position: sticky; top: calc(var(--nav) + 24px); display: grid; gap: 10px; }
.lg__idx a { font-size: 14px; color: var(--ash); transition: color .2s var(--ease); }
.lg__idx a:hover { color: var(--obsidian); }
.lg__body { grid-column: 2 / 5; border-top: 1px solid var(--obsidian); }
.lg__sec { display: grid; grid-template-columns: 56px 1fr; gap: 0 16px; padding: 32px 0; border-bottom: 1px solid var(--silver); scroll-margin-top: calc(var(--nav) + 24px); }
.lg__sec > .label { padding-top: .5em; }
.lg__sec h2 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 300; letter-spacing: -.04em; line-height: 1.15; margin-bottom: 14px; }
.lg__sec p, .lg__sec li { max-width: 66ch; font-size: 16px; line-height: 1.65; color: var(--charcoal); }
.lg__sec p + p { margin-top: 12px; }
.lg__sec ul { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 6px; list-style: disc; }
.lg__sec li::marker { color: var(--smoke); }
.lg__sec a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) {
  .lg__idx { display: none; }
  .lg__body { grid-column: 1 / -1; }
  .lg__sec { grid-template-columns: 1fr; row-gap: 8px; }
}