/* LonelyIce site: the launcher's look (stone frame, icy scene, navy plates, parchment, gold). */
@font-face { font-family: Forum; src: url(fonts/Forum-Regular.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "PT Sans"; src: url(fonts/PTSans-Regular.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "PT Sans"; font-weight: 700; src: url(fonts/PTSans-Bold.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "PT Mono"; src: url(fonts/PTMono-Regular.ttf) format("truetype"); font-display: swap; }

:root {
  --gold: #e9c66b; --gold-hi: #fff0b8; --gold-dim: #e9c66b99; --gold-line: #e9c66b73;
  --text: #e6dcc3; --text-hi: #eef6fb; --text-2: #d8ecf8; --muted: #a9c0cf; --sect: #7f98a8;
  --ice-1: #1d4d6a; --ice-2: #0f2536; --ice-3: #0a1a26; --plate: #08141ee6;
  --parch-1: #ece3cc; --parch-2: #d6c8a6; --parch-line: #6e5a33; --ink: #2a2117; --ink-2: #4a3d2c; --ink-3: #5e4f3a; --ink-head: #3a1a0c;
  --red-1: #6e1a10; --red-2: #b3441f; --link-ink: #8a2a12;
  --ok: #72d65c; --warn: #f0b33c; --bad: #e0503f; --info: #8fc3e6;
  --serif: Forum, Georgia, serif; --sans: "PT Sans", "Segoe UI", sans-serif; --mono: "PT Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { background: #16181c; }
body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.45; color: var(--text); background: #16181c; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hi); }
button, input, select, textarea { font: inherit; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-weight: 400; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

.frame { min-height: 100vh; padding: 8px; background: linear-gradient(#2b2e34, #1b1d21 60%, #141518); }
.scene { min-height: calc(100vh - 16px); display: flex; flex-direction: column; border: 2px solid #0a0b0d;
  background: linear-gradient(170deg, var(--ice-1), var(--ice-2) 30%, var(--ice-3) 70%) fixed; }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 28px; }
main.page { flex: 1; padding: 24px 0 32px; }

/* type */
.logo { font-family: var(--serif); color: var(--gold); text-shadow: 0 2px #000; line-height: 1; }
.sub { display: inline-block; padding: 2px 14px; font-family: var(--serif); font-size: 12px; color: var(--text-2);
  border-top: 1px solid #e9c66b80; border-bottom: 1px solid #e9c66b80;
  background: linear-gradient(to right, #081e3000, #081e30d9 15%, #081e30d9 85%, #081e3000); }
.title { margin: 0; font-family: var(--serif); font-size: 40px; color: var(--gold); text-shadow: 0 2px #000; line-height: 1.1; }
.lead { margin: 6px 0 0; font-size: 16px; color: var(--text-2); }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.small { font-size: 13px; }

/* header (the forum repeats it in deploy/flarum/lonelyice/forum.less: change both together) */
.top { border-bottom: 2px solid #8a6a22; background: linear-gradient(#2a2d33, #1b1d21); }
.top .wrap { display: flex; align-items: flex-end; gap: 24px; padding-top: 10px; max-width: none; padding-left: 20px; padding-right: 20px; }
.brand { display: flex; flex-direction: column; align-items: center; padding-bottom: 9px; }
.brand .logo { font-size: 30px; }
.brand .sub { margin-top: 4px; font-size: 11px; }
.tabs { display: flex; gap: 3px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tab { flex: 0 0 auto; padding: 6px 14px 7px; border: 1px solid #000; border-bottom: 0; border-radius: 4px 4px 0 0;
  font-family: var(--serif); font-size: 17px; color: #cdbf95; background: linear-gradient(#3a3e46, #26292e); }
.tab:hover { color: var(--gold-hi); }
.tab.on { color: var(--gold-hi); background: linear-gradient(var(--red-2), var(--red-1)); }
.top .tools { margin-left: auto; display: flex; align-items: center; gap: 8px; padding-bottom: 9px; }
.top .tools form { margin: 0; }
.user { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); font-size: 14px; }
.avatar { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--gold-line); background: var(--ice-2); object-fit: cover; flex: 0 0 auto; }
.avatar.lg { width: 44px; height: 44px; }
.badge { display: inline-block; min-width: 18px; margin-left: 5px; padding: 0 5px; border-radius: 9px; font-family: var(--sans);
  font-size: 11px; line-height: 17px; text-align: center; background: var(--warn); color: #2a1a00; }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #000; border-radius: 3px;
  font-family: var(--serif); font-size: 16px; color: var(--gold); background: linear-gradient(#3b4049, #1d2025);
  padding: 5px 14px 6px; text-shadow: 0 1px #000; cursor: pointer; white-space: nowrap; }
.btn:hover { color: var(--gold-hi); background: linear-gradient(#474d57, #23262c); }
.btn:active { background: linear-gradient(#1d2025, #3b4049); }
.btn.sm { font-size: 14px; padding: 3px 10px 4px; }
.btn.icon { width: 34px; height: 30px; padding: 0; }
.btn.danger { color: #ffb4a6; }
.btn[disabled] { opacity: .45; cursor: default; }
/* the launcher's Play button */
.gold { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 2px solid #000;
  border-radius: 4px; background: radial-gradient(circle at 50% 0%, #6b2a12, #3a1307 60%, #1e0903);
  box-shadow: 0 0 0 2px #8a6a22, 0 0 24px #e9963c59; color: var(--gold); font-family: var(--serif); font-size: 24px;
  padding: 10px 28px; text-shadow: 0 2px #000; line-height: 1; cursor: pointer; margin: 2px; }
.gold:hover { color: var(--gold-hi); box-shadow: 0 0 0 2px var(--gold), 0 0 32px #e9963c8c; }
.gold small { font-family: var(--sans); font-size: 12px; color: #e3c99a; text-shadow: 0 1px #000; }
.gold.lg { font-size: 30px; min-width: 250px; min-height: 66px; }
.field { box-sizing: border-box; height: 32px; padding: 3px 8px; border: 1px solid var(--gold-line); background: #08141e; color: var(--text-hi); }
.chip { display: inline-block; font-size: 12px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--ok); color: var(--ok); background: #0000004d; white-space: nowrap; }
.chip.warn { border-color: var(--warn); color: var(--warn); }
.chip.bad { border-color: var(--bad); color: var(--bad); }
.chip.plain { border-color: var(--muted); color: var(--text-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* panels */
.plate { padding: 12px 16px 14px; border: 1px solid var(--gold-line); background: var(--plate); }
.plate h3, .h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 22px; color: var(--gold); }
.parch { color: var(--ink); border: 1px solid var(--parch-line); background: linear-gradient(var(--parch-1), var(--parch-2)); padding: 14px 18px; }
.parch a { color: var(--link-ink); }
.parch a:hover { color: var(--red-2); }
.parch a.btn, .parch a.gold { color: var(--gold); }
.parch a.btn:hover, .parch a.gold:hover { color: var(--gold-hi); }
.ribbon { margin: 0 -18px; padding: 2px 18px 3px; font-family: var(--serif); font-size: 20px; color: var(--gold-hi);
  background: linear-gradient(to right, var(--red-1), var(--red-2) 30%, #b3441f26); }
.parch .muted, .parch .small { color: var(--ink-3); }
.code { font-family: var(--mono); font-size: 13px; color: #dce8ef; background: #0b1620; border: 1px solid #000; padding: 8px 12px; overflow-x: auto; white-space: pre; }
.kv { display: flex; gap: 10px; font-size: 14px; padding: 3px 0; border-bottom: 1px solid #e9c66b1f; }
.kv:last-child { border-bottom: 0; }
.kv .k { flex: 1; color: var(--muted); }
.kv .v { color: var(--text-hi); text-align: right; overflow-wrap: anywhere; }
.sect { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--sect); padding: 14px 14px 4px; }
.side { display: flex; align-items: center; padding: 6px 14px 6px 11px; border-left: 3px solid transparent;
  color: #cdbf95; font-family: var(--serif); font-size: 17px; }
.side:hover { color: var(--gold-hi); }
.side.on { color: var(--gold-hi); border-left-color: var(--gold); background: #e9c66b1f; }
.side span { flex: 1; }
.side small { font-family: var(--sans); font-size: 12px; color: var(--muted); }
.side.sm { font-family: var(--sans); font-size: 15px; }
.inner-tabs { display: flex; gap: 2px; padding: 6px 6px 0; margin: -14px -18px 14px; border-bottom: 2px solid #8a6a22; background: linear-gradient(#2a2d33, #1b1d21); }
.inner-tabs .tab { font-size: 16px; padding: 4px 12px 5px; }
.parch .inner-tabs a.tab { color: #cdbf95; }
.parch .inner-tabs a.tab.on { color: var(--gold-hi); }
.note { display: flex; gap: 12px; padding: 10px 12px; border: 1px solid #8a7447; border-radius: 3px; background: #ffffff59; }
.quote { padding: 8px 12px; border: 1px solid #8a7447; background: #ffffff80; font-size: 14px; white-space: pre-wrap; }

/* layouts */
.cols { display: flex; gap: 14px; align-items: flex-start; }
.cols > .grow { flex: 1; min-width: 0; }
.aside { flex: 0 0 300px; display: flex; flex-direction: column; gap: 12px; }
.aside.narrow { flex-basis: 240px; }
.grid { display: grid; gap: 14px; }
.grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pagehead { display: flex; align-items: flex-end; gap: 24px; margin-bottom: 18px; flex-wrap: wrap; }
.pagehead > div:first-child { flex: 1; min-width: 280px; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

/* hero and home */
.hero { display: flex; gap: 48px; align-items: center; padding: 40px 0 36px; }
.hero .text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hero .big { font-size: 76px; }
.hero p { margin: 4px 0 0; font-size: 21px; color: var(--text-hi); max-width: 540px; }
.shot { flex: 0 0 min(600px, 48%); aspect-ratio: 960 / 680; padding: 6px; background: linear-gradient(#2b2e34, #141518); box-shadow: 0 18px 40px #000000a6; }
.shot > div, .shot img { width: 100%; height: 100%; border: 2px solid #0a0b0d; display: block; object-fit: cover;
  background: linear-gradient(170deg, var(--ice-1), var(--ice-2) 55%, var(--ice-3)); }
.shot .ph { display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 24px; color: var(--gold-dim); }
.step { display: flex; gap: 14px; }
.step .n { font-size: 54px; }
.step p { margin: 0; font-size: 15px; color: var(--text-2); }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid #000; border-radius: 3px;
  background: linear-gradient(#3b4049, #1d2025); color: var(--gold); font-family: var(--serif); font-size: 22px; text-shadow: 0 1px #000; }
.tile:hover { color: var(--gold-hi); background: linear-gradient(#474d57, #23262c); }
.tile small { font-family: var(--sans); font-size: 14px; color: var(--muted); text-shadow: none; }
.center { text-align: center; }
.section { margin-bottom: 40px; }
.news { display: flex; gap: 12px; padding: 10px; border: 1px solid #8a7447; border-radius: 3px; background: #ffffff59; }
.news h3 { margin: 0; font-family: var(--sans); font-weight: 700; font-size: 15px; color: var(--ink-head); }
.news p { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }

/* package cards */
.card { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid #6e5a3333; }
.card:last-child { border-bottom: 0; }
.card .body { flex: 1; min-width: 0; }
.ic { width: 52px; height: 52px; border-radius: 6px; flex: 0 0 52px; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 28px; color: var(--gold-hi); border: 1px solid #00000066; overflow: hidden; }
.ic img { width: 100%; height: 100%; object-fit: cover; }
.ic.sm { width: 44px; height: 44px; flex-basis: 44px; font-size: 24px; }
.ic.xl { width: 96px; height: 96px; flex-basis: 96px; font-size: 54px; border: 2px solid #000; box-shadow: 0 0 0 1px var(--gold-line); border-radius: 10px; }
.ttl { font-weight: 700; font-size: 17px; color: var(--ink-head); }
.parch .ttl a { color: var(--ink-head); }
.ver { font-weight: 400; font-size: 13px; color: var(--ink-3); }
.desc { font-size: 14px; color: var(--ink-2); }
.meta { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.src { display: inline-flex; align-items: center; gap: 4px; font-family: var(--sans); font-size: 13px; }
.acts { display: flex; flex-direction: column; gap: 5px; flex: 0 0 auto; }
.tag { font-size: 12px; padding: 0 7px; border-radius: 9px; border: 1px solid #8a7447; color: var(--ink-3); background: #ffffff59; }
.search-row { display: flex; gap: 10px; align-items: center; }
.search-row input { flex: 1; height: 36px; padding: 4px 10px; font-size: 16px; border: 1px solid var(--parch-line); background: #fbf6ea; color: var(--ink); }
.search-row label { font-family: var(--serif); font-size: 18px; color: var(--ink-head); }
.chk { display: flex; gap: 8px; align-items: center; padding: 3px 14px; font-size: 14px; color: var(--text-2); }
.chk.ink { padding: 0; color: var(--ink); }

/* package page */
.pkghead { display: flex; align-items: center; gap: 20px; margin: 10px 0 22px; flex-wrap: wrap; }
.pkghead .body { flex: 1; min-width: 280px; }
.pkghead .name { font-size: 44px; }
.crumbs { font-size: 14px; color: var(--muted); }
.readme { font-size: 16px; line-height: 1.6; }
.readme h1, .readme h2, .readme h3 { font-family: var(--serif); color: var(--red-1); margin: 16px 0 6px; }
.readme h1 { font-size: 30px; } .readme h2 { font-size: 24px; } .readme h3 { font-size: 20px; }
.readme code, .doc code { font-family: var(--mono); font-size: 14px; padding: 0 4px; background: #fbf6ea; border: 1px solid #c4b089; }
.readme pre, .doc pre { font-family: var(--mono); font-size: 14px; line-height: 1.55; color: #dce8ef; background: #0b1620; border: 1px solid #000; padding: 10px 14px; overflow-x: auto; }
.readme pre code, .doc pre code { padding: 0; background: none; border: 0; color: inherit; }
.readme table, .doc table { border-collapse: collapse; margin: 8px 0; font-size: 14px; }
.readme th, .readme td, .doc th, .doc td { border: 1px solid #a58d5c; padding: 4px 8px; vertical-align: top; text-align: left; }
.readme th, .doc th { background: #ffffff59; }
.vrow { display: flex; gap: 14px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid #6e5a3333; font-size: 15px; }
.vrow .n { font-family: var(--mono); font-size: 14px; color: var(--ink-head); flex: 0 0 70px; }
.vrow .d { flex: 0 0 110px; color: var(--ink-3); font-size: 14px; }

/* docs */
.doc { font-size: 16px; line-height: 1.6; }
.doc h1 { margin: 0 0 8px; font-family: var(--serif); font-size: 40px; color: var(--ink-head); }
.doc h2 { margin: 22px 0 8px; padding-bottom: 3px; font-family: var(--serif); font-size: 26px; color: var(--red-1); border-bottom: 1px solid #a58d5c; }
.doc h3 { margin: 18px 0 6px; font-family: var(--serif); font-size: 21px; color: var(--red-1); }
.doc blockquote { margin: 10px 0; padding: 8px 12px; border: 1px solid #8a7447; border-radius: 3px; background: #ffffff59; }
.doc blockquote p { margin: 0; }
.toc a { display: block; padding: 3px 0; font-size: 14px; color: var(--text-2); }
.toc a:hover { color: var(--gold-hi); }
.pager { display: flex; gap: 10px; margin-top: 20px; padding-top: 12px; border-top: 1px solid #a58d5c; }
.pager a { flex: 1; padding: 8px 12px; border: 1px solid #8a7447; background: #ffffff59; }
.pager a.next { text-align: right; }
.pager small { display: block; font-size: 12px; color: var(--ink-3); }
.pager span { font-family: var(--serif); font-size: 19px; }

/* guides */
.guide { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; color: var(--ink); border: 1px solid var(--parch-line);
  background: linear-gradient(var(--parch-1), var(--parch-2)); }
.guide:hover { box-shadow: 0 0 0 2px var(--gold); color: var(--ink); }
.guide .cat { padding: 2px 14px 3px; font-family: var(--serif); font-size: 15px; color: var(--gold-hi); background: linear-gradient(to right, var(--red-1), var(--red-2) 40%, #b3441f26); }
.guide .t { padding: 0 14px; font-family: var(--serif); font-size: 23px; line-height: 1.15; color: var(--ink-head); }
.guide .d { padding: 0 14px; font-size: 14px; color: var(--ink-2); }
.guide .m { padding: 0 14px; }
.guide[hidden], .guide-group[hidden] { display: none; }
.guide-group { margin-top: 22px; }
.guide-group .h2 { margin: 0 0 10px; padding-bottom: 4px; border-bottom: 1px solid var(--gold-line); font-family: var(--serif);
  font-size: 26px; font-weight: 400; color: var(--gold); text-shadow: 0 2px #000; }
.flt { padding: 3px 12px 4px; border: 1px solid var(--gold-line); border-radius: 14px; font-size: 14px; color: var(--text-2); background: var(--plate); }
.flt.on { background: var(--gold); border-color: var(--gold-hi); color: #2a1d06; font-weight: 700; }

/* forms */
.form { display: flex; flex-direction: column; gap: 14px; }
.form label.lbl { display: block; font-weight: 700; font-size: 14px; color: var(--ink-head); margin-bottom: 3px; }
.form .input { width: 100%; height: 34px; padding: 4px 8px; border: 1px solid var(--parch-line); background: #fbf6ea; color: var(--ink); }
.form textarea.input { height: 110px; padding: 6px 8px; resize: vertical; }
.form .hint { font-size: 13px; color: var(--ink-3); margin-top: 3px; }
.stepno { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; margin-right: 8px; border-radius: 50%;
  background: var(--red-1); color: var(--gold-hi); font-family: var(--serif); font-size: 16px; border: 1px solid #000; }
.drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px; border: 2px dashed #8a7447; border-radius: 4px; background: #ffffff59; text-align: center; }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.checks li { display: flex; gap: 8px; align-items: flex-start; }
.mark { flex: 0 0 auto; min-width: 42px; text-align: center; font-family: var(--mono); font-size: 11px; line-height: 18px; border-radius: 3px; border: 1px solid #0006; }
.mark.ok { background: #2f6b25; color: #e6ffe0; }
.mark.info { background: #2f5a6e; color: #e3f4ff; }
.mark.warn { background: #9a6a0c; color: #fff4d6; }
.mark.fail { background: #8d2616; color: #ffe4de; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-weight: 700; color: var(--ink-3); border-bottom: 1px solid #a58d5c; padding: 4px 6px; }
.tbl td { padding: 6px; border-bottom: 1px solid #6e5a3333; vertical-align: top; }
.tbl td.num { text-align: right; font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.chg { font-family: var(--mono); font-weight: 700; width: 20px; }
.chg.add { color: #2f6b25; } .chg.mod { color: #8a5a00; } .chg.del { color: #8d2616; }
.flash { margin-bottom: 14px; padding: 10px 14px; border: 1px solid var(--gold-line); background: var(--plate); color: var(--text-hi); }
.flash.bad { border-color: var(--bad); }
.progress { height: 10px; border: 1px solid #000; background: #00000080; }
.progress > div { height: 100%; background: linear-gradient(#5aa7d6, var(--ice-1)); }

/* footer */
.foot { border-top: 1px solid #e9c66b33; background: #0a1a26cc; font-size: 13px; color: var(--muted); }
.foot .wrap { display: flex; align-items: center; gap: 20px; padding-top: 12px; padding-bottom: 14px; flex-wrap: wrap; max-width: none; padding-left: 20px; padding-right: 20px; }
.foot .logo { font-size: 18px; color: var(--gold-dim); }
.foot nav { margin-left: auto; display: flex; gap: 16px; align-items: center; }

/* support: donation links */
.donations { margin-bottom: 20px; }
.donate { display: flex; align-items: center; gap: 20px; padding: 16px 20px; }
.grid .donate { flex-direction: column; align-items: stretch; text-align: left; }
.donate-ic { flex: 0 0 auto; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
  color: var(--gold); border: 1px solid var(--gold-line); background: radial-gradient(circle at 50% 30%, #1d4d6a, #08141e); }
.donate-text { flex: 1; min-width: 0; }
.donate-text h3 { margin: 0 0 4px; }
.donate-text p { margin: 0; font-size: 15px; color: var(--text-2); }
.donate .gold { min-width: 240px; }
.gold-row { display: inline-flex; align-items: center; gap: 10px; }

@media (max-width: 1000px) {
  .hero { flex-direction: column; align-items: stretch; }
  .hero .big { font-size: 56px; }
  .shot { flex-basis: auto; width: 100%; }
  .grid.g3, .grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols { flex-direction: column; align-items: stretch; }
  .aside, .aside.narrow { flex-basis: auto; order: 2; }
  .top .wrap { flex-wrap: wrap; align-items: center; }
  .brand { padding-bottom: 0; }
  .tabs { order: 3; width: 100%; }
  .top .tools { padding-bottom: 0; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 12px; }
  .frame { padding: 4px; }
  .scene { min-height: calc(100vh - 8px); }
  .grid.g2, .grid.g3, .grid.g4 { grid-template-columns: minmax(0, 1fr); }
  .title { font-size: 32px; }
  .hero { padding-top: 24px; }
  .hero p { font-size: 17px; }
  .gold.lg { width: 100%; }
  .donate { flex-direction: column; text-align: center; }
  .donate .gold { width: 100%; min-width: 0; }
  .brand .sub, .top .tools .field { display: none; }
  .card { flex-wrap: wrap; }
  .acts { flex-direction: row; width: 100%; }
  .pkghead .name { font-size: 34px; }
  .foot nav { margin-left: 0; flex-wrap: wrap; }
}