/* ==========================================================================
   Global — layout, containers, page furniture
   ========================================================================== */
body{background:var(--cream);overflow-x:hidden;position:relative}

/* Paper grain — the letterpress feel. Do not remove. */
.grain{position:fixed;inset:-120%;pointer-events:none;z-index:var(--z-grain);
  opacity:.4;mix-blend-mode:multiply;
  background-image:url("../assets/textures/paper-grain.png");
  background-repeat:repeat;animation:grain-shift 9s steps(5) infinite}

.wrap{max-width:var(--max-w);margin-inline:auto;width:100%}
.section{padding:var(--section-y) var(--gutter);position:relative;z-index:var(--z-content)}
.section--alt{background:var(--cream-2);border-block:1px solid var(--line)}
.section--tight{padding-block:clamp(48px,7vh,88px)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
@media(max-width:1000px){.grid-2{grid-template-columns:1fr}}
@media(max-width:860px){.grid-3,.grid-4{grid-template-columns:1fr}}

.rule{width:56px;height:1px;background:var(--gold);margin-block:var(--s-5)}
.hr{height:1px;background:var(--line);border:none;margin-block:var(--s-7)}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--cream);
  padding:12px 20px;z-index:var(--z-modal)}
.skip:focus{left:var(--gutter);top:12px}

.stack > * + *{margin-top:var(--s-4)}
.center{text-align:center}
.hidden{display:none!important}