/* ============================================================
   The Harbor Post — site stylesheet
   Coastal broadsheet: chalk paper on driftwood planks.
   Seed e9a6b6161557abe6 · palette 6 (coastal) · layout 0 (broadsheet)
   motif 3 (wood grain) · density 2 (12px radii, layered shadows)
   All texture authored in CSS/SVG. No external images.
   ============================================================ */

:root {
  --paper: #F6F2E9;          /* chalk white page stock            */
  --panel: #FCFAF4;          /* brighter panel / card stock       */
  --panel-2: #EFEADD;        /* recessed panel                    */
  --ink: #1E2D34;            /* body ink — 12.7:1 on paper        */
  --ink-strong: #14222A;     /* headlines — 14.6:1                */
  --muted: #4E463A;          /* secondary text — 8.3:1            */
  --line: #C9BEA9;           /* hairline rules                    */
  --line-strong: #8F8470;
  --teal: #1D555C;           /* weathered teal — links, 7.5:1     */
  --teal-deep: #163F45;
  --teal-wash: #DDE8E4;
  --red: #9E2F23;            /* signal red — kickers, 6.5:1       */
  --focus: #0E3A40;
  --hint-ring: #B7791F;
  --card-face: #FDFCF8;
  --card-edge: #B9B2A2;
  --shadow-1: 0 1px 2px rgba(20, 34, 42, .16);
  --shadow-2: 0 1px 2px rgba(20, 34, 42, .14), 0 6px 18px rgba(20, 34, 42, .16);
  --shadow-3: 0 2px 3px rgba(20, 34, 42, .14), 0 10px 28px rgba(20, 34, 42, .18), 0 28px 64px rgba(20, 34, 42, .14);
  --radius: 12px;
  --radius-s: 8px;
  --wood-a: #C9BCA3;
  --wood-b: #BFB098;
  --wood-c: #D3C7B0;
  --serif: "Zilla Slab", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", Verdana, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14232A;
    --panel: #1C313A;
    --panel-2: #16282F;
    --ink: #EAE3D3;          /* 12.6:1 on paper, 10.6:1 on panel  */
    --ink-strong: #F4EFE2;
    --muted: #C9C0AC;        /* 8.9:1 */
    --line: #3D5058;
    --line-strong: #5C707A;
    --teal: #9FD0D5;         /* 9.6:1 on paper */
    --teal-deep: #BCE0E4;
    --teal-wash: #1E3B42;
    --red: #E8998C;
    --focus: #FFD37E;
    --hint-ring: #E5B45A;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .4);
    --shadow-3: 0 2px 3px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .45), 0 28px 64px rgba(0, 0, 0, .35);
    --wood-a: #2A333177;
    --wood-b: #232B2A;
    --wood-c: #313B39;
  }
}

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 18px; }
html.large { font-size: 22.5px; }   /* "Large text" — scales the whole UI +25% */

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--wood-b);
  /* Driftwood planks: vertical boards + authored SVG grain overlay. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.11 0.008' numOctaves='3' seed='47'/%3E%3CfeColorMatrix values='0 0 0 0 0.32 0 0 0 0 0.27 0 0 0 0 0.19 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23g)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg,
      var(--wood-a) 0, var(--wood-a) 6.8rem,
      var(--wood-b) 6.8rem, var(--wood-b) 6.95rem,
      var(--wood-c) 6.95rem, var(--wood-c) 13.6rem,
      var(--wood-b) 13.6rem, var(--wood-b) 13.75rem);
}

img, svg { max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink-strong);
  line-height: 1.25;
  margin: 0 0 .5em;
  font-weight: 700;
}
h1 { font-size: 2.1rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

a { color: var(--teal); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--teal-deep); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

button { font: inherit; color: inherit; }

.vh {  /* visually hidden, kept for screen readers */
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip {
  position: absolute; left: 1rem; top: -4rem;
  background: var(--panel); color: var(--ink-strong);
  padding: .6rem 1rem; border-radius: var(--radius-s);
  box-shadow: var(--shadow-2); z-index: 900; transition: top .15s;
}
.skip:focus { top: 1rem; }

/* ---------- the sheet (paper on the table) ---------- */
.sheet {
  max-width: 82rem;
  margin: 1.4rem auto 2.6rem;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
  padding: 0 clamp(1rem, 3vw, 3rem) 1rem;
}

/* ---------- masthead ---------- */
.dateline {
  display: flex; flex-wrap: wrap; gap: .5rem 1.2rem;
  align-items: center; justify-content: space-between;
  padding: .7rem 0 .5rem;
  border-bottom: 1px solid var(--line);
  font-size: .85rem; color: var(--muted);
}
.dateline .ed { letter-spacing: .04em; }

.prefbar { display: flex; gap: .5rem; }
.toggle {
  min-height: 2.45rem; padding: .3rem .85rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--panel); color: var(--ink); cursor: pointer;
  font-size: .85rem;
}
.toggle[aria-pressed="true"] { background: var(--teal); color: var(--paper); border-color: var(--teal); }
@media (prefers-color-scheme: dark) {
  .toggle[aria-pressed="true"] { color: #10242B; }
}

.masthead { text-align: center; }
.wordmark { display: inline-block; color: var(--ink-strong); margin: 1.1rem 0 .2rem; }
.wordmark svg { display: block; }
.mast-tagline {
  font-family: var(--serif); font-size: .95rem; color: var(--muted);
  margin: .2rem 0 .8rem; letter-spacing: .02em;
}

.mainnav {
  border-top: 3px double var(--line-strong);
  border-bottom: 3px double var(--line-strong);
  display: flex; flex-wrap: wrap; justify-content: center;
}
.mainnav a {
  display: flex; align-items: center;
  min-height: 2.6rem; padding: .2rem 1.35rem;
  font-family: var(--serif); font-weight: 600; font-size: 1.02rem;
  color: var(--ink-strong); text-decoration: none;
  border-left: 1px solid var(--line);
}
.mainnav a:first-child { border-left: 0; }
.mainnav a:hover { color: var(--teal); }
.mainnav a[aria-current="page"] { color: var(--teal); box-shadow: inset 0 -3px 0 var(--teal); }

/* compact header for game & trust pages */
.masthead.compact { display: flex; align-items: center; gap: 1.4rem; text-align: left; flex-wrap: wrap; padding-top: .4rem; }
.masthead.compact .wordmark { margin: .4rem 0; }
.masthead.compact .mainnav { border-top: 0; border-bottom: 0; margin-left: auto; }

/* ---------- kickers, rules, buttons ---------- */
.kicker {
  font-family: var(--sans); font-weight: 600; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--red);
  margin: 0 0 .4rem;
}
.rule { border: 0; border-top: 1px solid var(--line); margin: 1.6rem 0; }
.rule.double { border-top: 3px double var(--line-strong); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 2.6rem; padding: .5rem 1.3rem;
  border: 0; border-radius: var(--radius-s);
  background: var(--teal); color: #FFFFFF;
  font-weight: 600; font-size: 1rem; text-decoration: none;
  cursor: pointer; box-shadow: var(--shadow-1);
}
.btn:hover { background: var(--teal-deep); color: #fff; }
@media (prefers-color-scheme: dark) {
  .btn { color: #10242B; }
  .btn:hover { color: #10242B; }
}
.btn.big { font-size: 1.1rem; min-height: 3rem; padding: .6rem 1.7rem; font-family: var(--serif); }
.btn.quiet {
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line-strong); box-shadow: none;
}
.btn.quiet:hover { background: var(--panel-2); color: var(--ink-strong); }
.btn:disabled { opacity: .45; cursor: default; }

select.ctl, .ctl-label {
  font: inherit; font-size: .95rem;
}
select.ctl {
  min-height: 2.45rem; padding: .25rem .6rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  background: var(--panel); color: var(--ink);
}

/* ---------- front page ---------- */
.lead {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.4rem;
  padding: 1.8rem 0 1.4rem;
}
.lead h1 { font-size: 2.5rem; margin-bottom: .6rem; }
.lead .intro p { max-width: 62ch; }
.houserules {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--shadow-1);
  padding: 1.3rem 1.5rem; align-self: start;
}
.houserules h2 { font-size: 1.1rem; border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
.houserules ul { margin: .8rem 0 0; padding-left: 1.1rem; }
.houserules li { margin-bottom: .45rem; }

.gamegrid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  border-top: 3px double var(--line-strong);
}
.gamecol {
  padding: 1.6rem 1.8rem 2rem;
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: flex-start;
}
.gamecol:first-child { border-left: 0; padding-left: .2rem; }
.gamecol:last-child { padding-right: .2rem; }
.gamecol .vignette { margin-bottom: 1rem; }
.gamecol h2 { font-size: 1.6rem; }
.gamecol .facts { font-size: .85rem; color: var(--muted); margin: .2rem 0 1.1rem; }
.gamecol .btn { margin-top: auto; }
.gamecol p { max-width: 46ch; }

.ledger {
  margin: 0 0 1.5rem; padding: 1.1rem 1.4rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel-2);
  display: flex; flex-wrap: wrap; gap: .6rem 2.2rem; align-items: baseline;
  font-size: .92rem;
}
.ledger strong { font-family: var(--serif); }
.ledger .note { color: var(--muted); font-size: .82rem; }

/* ---------- game pages ---------- */
.gamehead { margin: 1.2rem 0 .6rem; display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap; }
.gamehead h1 { font-size: 1.7rem; margin: 0; }
.gamehead .sub { color: var(--muted); font-size: .9rem; }

.toolbar {
  display: flex; flex-wrap: wrap; gap: .55rem; align-items: center;
  padding: .7rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-bottom: 1.1rem;
}
.toolbar .spacer { flex: 1; }
.toolbar .btn { min-height: 2.45rem; padding: .35rem 1rem; font-size: .95rem; }
.statusline {
  display: flex; flex-wrap: wrap; gap: .4rem 1.6rem;
  font-size: .9rem; color: var(--muted); margin: .9rem 0 0;
}
.statusline b { color: var(--ink); font-weight: 600; }

.stage { position: relative; }
.banner {
  margin: .8rem auto; padding: .8rem 1.2rem; max-width: 46rem;
  border: 1px solid var(--line-strong); border-left: 4px solid var(--red);
  border-radius: var(--radius-s); background: var(--panel);
  display: flex; flex-wrap: wrap; gap: .7rem; align-items: center;
  box-shadow: var(--shadow-2);
}
.banner p { margin: 0; flex: 1 1 14rem; }

/* win / dialog overlay */
.overlay {
  position: fixed; inset: 0; z-index: 5000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12, 22, 27, .55); padding: 1rem;
}
.overlay[hidden] { display: none; }
.panel {
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius); border-top: 5px solid var(--teal);
  box-shadow: var(--shadow-3);
  max-width: 30rem; padding: 1.8rem 2.1rem;
}
.panel h2 { margin-bottom: .4rem; }
.panel .paneldata { color: var(--muted); font-size: .92rem; margin-bottom: 1.1rem; }
.panel .row { display: flex; gap: .7rem; flex-wrap: wrap; }

/* ad reservations — labelled, fixed height, never above the fold */
.adslot { margin: 2.4rem auto 1rem; max-width: 45rem; }
.adslot .adlabel {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); text-align: center; margin-bottom: .3rem;
}
.adslot .adbox {
  height: 250px;                       /* reserved — prevents layout shift */
  border: 1px dashed var(--line); border-radius: var(--radius-s);
  background: var(--panel-2);
}

/* ---------- articles (the prose columns) ---------- */
.article { max-width: 66rem; margin: 0 auto; padding: 1.4rem 0 .6rem; }
.article .cols { columns: 2; column-gap: 3rem; column-rule: 1px solid var(--line); }
.article .cols > * { break-inside: avoid-column; }
.article h2 { margin-top: 1.1em; }
.article p, .article li { max-width: 68ch; }
.article ul { padding-left: 1.2rem; }

.onecol { max-width: 46rem; margin: 0 auto; padding: 1.6rem 0; }
.onecol h1 { border-bottom: 3px double var(--line-strong); padding-bottom: .6rem; }

/* ---------- footer ---------- */
.footer {
  border-top: 3px double var(--line-strong);
  margin-top: 2rem; padding: 1.2rem 0 1.4rem;
  font-size: .88rem; color: var(--muted);
}
.footer nav { display: flex; flex-wrap: wrap; gap: .2rem 1.6rem; margin-bottom: .6rem; }
.footer nav a { display: inline-flex; align-items: center; min-height: 2.45rem; }
.footer p { margin: 0; }

/* ============================================================
   SOLITAIRE
   ============================================================ */
.sol-wrap { display: flex; justify-content: center; }
.sol-board {
  --card-w: 4.5rem; --card-h: 6.2rem;   /* 81 × 112 px at base size */
  display: grid;
  grid-template-columns: repeat(7, var(--card-w));
  gap: .8rem .9rem;
  padding: 1.2rem 1.2rem 1.6rem;
  background: var(--teal-wash);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-1) inset;
}
.pile { position: relative; width: var(--card-w); height: var(--card-h); border-radius: .55rem; }
.pile.empty::after {
  content: ""; position: absolute; inset: 0;
  border: 2px dashed var(--line-strong); border-radius: .55rem; opacity: .7;
}
.pile.f-pile.empty::after { content: "A"; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.6rem; color: var(--line-strong); border-style: solid; opacity: .55; }
.pile.t-pile { height: calc(var(--card-h) + 18 * 1.45rem); }
.pile:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.card {
  position: absolute; left: 0;
  width: var(--card-w); height: var(--card-h);
  border-radius: .55rem;
  background: var(--card-face);
  border: 1px solid var(--card-edge);
  box-shadow: 0 1px 2px rgba(20,34,42,.22);
  cursor: pointer; user-select: none; touch-action: none;
  color: #1E242A;
}
.card .ix {
  position: absolute; top: .18rem; left: .3rem;
  font-family: var(--serif); font-weight: 700; font-size: 1.32rem; line-height: 1.05;
  text-align: center;
}
.card .ix small { display: block; font-size: 1.05rem; line-height: 1; }
.card .pip {
  position: absolute; right: .35rem; bottom: .15rem;
  font-size: 2.05rem; line-height: 1;
}
.card.down {
  cursor: default;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.09) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.09) 0 6px, transparent 6px 12px),
    #29616B;
  border-color: #1B4A52;
}
.card.down .ix, .card.down .pip { display: none; }

/* suit colours — standard deck */
.card.s-s, .card.s-c { color: #1E242A; }
.card.s-h, .card.s-d { color: #B02E2E; }
/* four-colour deck (accessibility option) */
body.fourcolor .card.s-d { color: #1F5FA8; }
body.fourcolor .card.s-c { color: #1E6B43; }

.card.sel { outline: 3px solid var(--focus); outline-offset: 1px; }
.card.hint, .pile.hint { box-shadow: 0 0 0 4px var(--hint-ring); }
.card.drag { opacity: 0; }

.ghost { position: fixed; z-index: 6000; pointer-events: none; }
.ghost .card { position: absolute; box-shadow: var(--shadow-2); }

.stockcount {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700; font-size: 1.1rem;
  color: #F6F2E9; text-shadow: 0 1px 2px rgba(0,0,0,.5); pointer-events: none; z-index: 60;
}
.pile#stock.empty .stockcount { color: var(--muted); text-shadow: none; }

/* ============================================================
   SUDOKU
   ============================================================ */
.su-layout { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; align-items: flex-start; }
.su-board {
  display: grid; grid-template-columns: repeat(9, 3.1rem);
  border: 3px solid var(--line-strong); border-radius: 4px;
  background: var(--panel); box-shadow: var(--shadow-2);
}
.su-cell {
  width: 3.1rem; height: 3.1rem;           /* 56 px targets */
  border: 1px solid var(--line);
  background: var(--panel); color: var(--teal);
  font-family: var(--serif); font-size: 1.5rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; position: relative;
}
.su-cell:nth-child(3n) { border-right: 2.5px solid var(--line-strong); }
.su-cell:nth-child(9n) { border-right: 1px solid var(--line); }
.su-cell.boxr { border-right: 2.5px solid var(--line-strong) !important; }
.su-cell.boxb { border-bottom: 2.5px solid var(--line-strong); }
.su-cell.given { color: var(--ink-strong); font-weight: 700; background: var(--panel-2); cursor: default; }
.su-cell.peer { background: var(--teal-wash); }
.su-cell.given.peer { background: var(--panel-2); box-shadow: inset 0 0 0 2px var(--teal-wash); }
.su-cell.same { box-shadow: inset 0 0 0 2.5px var(--teal); }
.su-cell.sel { outline: 3px solid var(--focus); outline-offset: -3px; z-index: 2; }
.su-cell.conflict { color: var(--red); text-decoration: underline wavy; text-underline-offset: 4px; }
.su-cell .notes {
  position: absolute; inset: 2px; display: grid;
  grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
  font-family: var(--sans); font-size: .6rem; font-weight: 600; color: var(--muted);
  line-height: 1; pointer-events: none;
}
.su-cell .notes span { display: flex; align-items: center; justify-content: center; }

.su-rail { max-width: 21rem; }
.numpad { display: grid; grid-template-columns: repeat(3, 3.2rem); gap: .5rem; margin-bottom: 1rem; }
.numpad button {
  height: 3.2rem; border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  background: var(--panel); color: var(--ink-strong);
  font-family: var(--serif); font-size: 1.4rem; font-weight: 600; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.numpad button:hover { background: var(--teal-wash); }
.numpad button .left { font-family: var(--sans); font-size: .62rem; font-weight: 600; color: var(--muted); margin-top: .18rem; }
.numpad button:disabled { opacity: .4; cursor: default; }
.su-tools { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ============================================================
   MAHJONG
   ============================================================ */
.mj-wrap { display: flex; justify-content: center; overflow-x: auto; }
.mj-stage {
  position: relative;
  background: var(--teal-wash);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-1) inset;
}
.tile {
  --tw: 2.7rem; --th: 3.5rem;              /* 49 × 63 px targets */
  position: absolute; width: var(--tw); height: var(--th);
  border-radius: .4rem; border: 1px solid #A99F8A;
  background: linear-gradient(160deg, #FDFAF1, #F1EADA);
  box-shadow: -3px 4px 0 #C4B99F, -4px 6px 10px rgba(20,34,42,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; line-height: 1; cursor: pointer; user-select: none;
  padding: 0; color: #1E242A;
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", var(--serif);
}
.tile .lbl {
  position: absolute; top: .12rem; right: .22rem;
  font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .02em;
}
.tile.k-char .lbl { color: #B02E2E; }
.tile.k-bam  .lbl { color: #1E6B43; }
.tile.k-dot  .lbl { color: #1F5FA8; }
.tile.k-wind .lbl, .tile.k-drg .lbl { color: #1E242A; }
.tile.k-flo .lbl, .tile.k-sea .lbl { color: #8A5A18; }
.tile.blocked { cursor: default; background: linear-gradient(160deg, #EDE7D6, #DFD7C2); }
.tile.blocked .g { opacity: .8; }
.tile.free:hover { transform: translateY(-2px); }
.tile.sel { outline: 3px solid var(--focus); outline-offset: 2px; transform: translateY(-3px); }
.tile.hint { box-shadow: -3px 4px 0 #C4B99F, 0 0 0 4px var(--hint-ring); }
.tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; z-index: 4000 !important; }

/* ============================================================
   index vignettes (authored line art)
   ============================================================ */
.vignette { color: var(--ink-strong); }
.vignette .accent { color: var(--teal); }
.vignette .warm { color: var(--red); }

/* ---------- motion & responsive ---------- */
@media (prefers-reduced-motion: no-preference) {
  .card, .tile { transition: transform .12s ease, box-shadow .12s ease; }
  .btn, .toggle { transition: background-color .12s ease; }
  @keyframes softpulse { 0%,100% { box-shadow: 0 0 0 4px var(--hint-ring); } 50% { box-shadow: 0 0 0 7px var(--hint-ring); } }
  .card.hint, .pile.hint { animation: softpulse 1s ease 2; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 980px) {
  .lead { grid-template-columns: 1fr; }
  .gamegrid { grid-template-columns: 1fr; }
  .gamecol { border-left: 0; border-top: 1px solid var(--line); padding-left: .2rem; }
  .article .cols { columns: 1; }
  .masthead.compact .mainnav { margin-left: 0; }
}