@font-face { font-family: "Libre Baskerville"; font-weight: 700; font-display: swap; src: url("fonts/libre-baskerville-700.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 400; font-display: swap; src: url("fonts/instrument-sans-400.woff2") format("woff2"); }

:root { --ink: #2a1a5e; --yellow: #ffed24; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--yellow); color: var(--ink); }
body { font: 400 19px/1.5 "Instrument Sans", system-ui, sans-serif; }
h1, p, ul { margin: 0; }

.page { position: relative; min-height: 100svh; overflow: hidden; }
.lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.inner { position: relative; display: flex; flex-direction: column; min-height: 100svh; padding: clamp(20px, 3vw, 40px) max(16px, 3vw); }
.mid { display: grid; gap: 14px; margin-block: auto; }
.logo { font: 700 clamp(42px, 10.5vw, 180px)/1.06 "Libre Baskerville", Georgia, serif; letter-spacing: -.02em; text-wrap: balance; }
.mast { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; border-top: 1px solid var(--ink); padding-top: 8px; font-size: 17px; }

.items { --sep: 1.2em; display: flex; flex-wrap: wrap; gap: 4px 0; margin-left: calc(var(--sep) * -1); padding: 0; list-style: none; clip-path: inset(0 0 0 var(--sep)); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.45; }
.items li { position: relative; padding-left: var(--sep); }
.items li::before { content: "·"; position: absolute; left: 0; width: var(--sep); text-align: center; opacity: .55; }

@media (max-width: 640px) {
  .mast { flex-direction: column; }
  .items { display: block; margin-left: 0; clip-path: none; text-wrap: balance; }
  .items li { display: inline; padding-left: 0; }
  .items li::before { content: none; }
  .items li:not(:last-child)::after { content: "\00a0· "; opacity: .55; }
}
