/* ==========================================================================
   SAMMES — Layout: shell, grid, sections, meta bars
   ========================================================================== */

/* --- Shell --------------------------------------------------------------- */
.shell {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
}

/* --- Container ----------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide {
  max-width: none;
}
.wrap--flush {
  padding-inline: 0;
}

/* --- 12-column grid ------------------------------------------------------ */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-lg);
}
.grid--rule {
  border-top: var(--rule) solid var(--line);
  padding-top: var(--space-md);
}
.grid--fill {
  align-items: end;
}
/* Spans use grid-column-END so that an explicit .start-* offset composes with
   them instead of overriding them. */
.col-1 { grid-column-end: span 1; }
.col-2 { grid-column-end: span 2; }
.col-3 { grid-column-end: span 3; }
.col-4 { grid-column-end: span 4; }
.col-5 { grid-column-end: span 5; }
.col-6 { grid-column-end: span 6; }
.col-7 { grid-column-end: span 7; }
.col-8 { grid-column-end: span 8; }
.col-9 { grid-column-end: span 9; }
.col-10 { grid-column-end: span 10; }
.col-12 { grid-column-end: span 12; }
.start-2 { grid-column-start: 2; }
.start-3 { grid-column-start: 3; }
.start-4 { grid-column-start: 4; }
.start-5 { grid-column-start: 5; }
.start-6 { grid-column-start: 6; }
.start-7 { grid-column-start: 7; }
.start-8 { grid-column-start: 8; }
.start-9 { grid-column-start: 9; }

@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    row-gap: var(--space-md);
  }
  .start-2, .start-3, .start-4, .start-5, .start-6,
  .start-7, .start-8, .start-9 { grid-column-start: auto; }
  .col-1, .col-2 { grid-column-end: span 6; }
  .col-3, .col-4 { grid-column-end: span 3; }
  .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-12 { grid-column-end: span 6; }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-12 { grid-column-end: span 1; grid-column-start: auto; }
}

/* --- Sections ------------------------------------------------------------ */
.section {
  position: relative;
  padding-block: var(--space-2xl);
}
.section--tight {
  padding-block: var(--space-xl);
}
.section--flush {
  padding-block: 0;
}
.section--rule {
  border-top: var(--rule) solid var(--line);
}
.section--paper {
  background: var(--paper);
  color: var(--ink);
  --fg: var(--ink);
  --muted: var(--grey-500);
  --line: rgba(11, 11, 12, 0.12);
  --line-strong: rgba(11, 11, 12, 0.26);
}
.section--ink {
  background: var(--ink);
  color: var(--paper);
}
.section--accent {
  background: var(--accent);
  color: var(--on-accent);
  --fg: var(--on-accent);
  --muted: color-mix(in srgb, var(--on-accent) 70%, transparent);
  --line: color-mix(in srgb, var(--on-accent) 22%, transparent);
  --line-strong: color-mix(in srgb, var(--on-accent) 40%, transparent);
}
.section--accent ::selection {
  background: var(--on-accent);
  color: var(--accent);
}

/* --- Meta bar: the recurring top/bottom information strip ---------------- */
.metabar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-xs);
  border-bottom: var(--rule) solid var(--line);
}
.metabar--top {
  border-bottom: 0;
  border-top: var(--rule) solid var(--line);
}
.metabar__group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: baseline;
}
.metabar__group--center {
  justify-content: center;
  text-align: center;
}
.metabar__group--end {
  justify-content: flex-end;
  text-align: right;
}
@media (max-width: 720px) {
  .metabar {
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-sm);
  }
  .metabar__group--center {
    display: none;
  }
}

/* --- Column rule: thin vertical hairline between meta columns ------------ */
.colrule {
  border-left: var(--rule) solid var(--line);
  padding-left: var(--space-sm);
}

/* --- Full-bleed ---------------------------------------------------------- */
.bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}