/* ==========================================================================
   layout.css — page structure: masthead, shell, section grid, footer.
   Sections own their vertical padding. Children never set outer margins that
   would fight it.
   ========================================================================== */

/* --- shell --------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

/* --- masthead ------------------------------------------------------------ */
/* Solid, not translucent-and-blurred. A frosted bar is the house style of every
   template this page is trying not to resemble, and a document's running head
   does not show you what is underneath it. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--masthead-h);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  height: 100%;
}

.masthead__name {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.masthead__name b {
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--signal);
}

.masthead__nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-width: 0;
  margin-inline-start: auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.masthead__nav::-webkit-scrollbar {
  display: none;
}

.masthead__nav a {
  font-family: var(--font-mono);
  font-size: var(--step-mono-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--space-1);
  border-bottom: 1px solid transparent;
}

.masthead__nav a:hover,
.masthead__nav a[aria-current="true"] {
  color: var(--ink);
  border-bottom-color: var(--signal);
}

/* Nav labels are the first thing to go on a narrow screen: the page is
   short enough to scroll. The theme control stays. */
@media (max-width: 560px) {
  .masthead__nav {
    display: none;
  }

  /* With four controls in the bar, the full name is what has to give. Zeroing
     the font size collapses the text node while leaving the MA badge sized
     normally, and unlike display:none it stays available to a screen reader.
     Tightening the gap buys back the rest. */
  .masthead__inner {
    gap: var(--space-3);
  }

  .masthead__name {
    font-size: 0;
    gap: 0;
  }

  .masthead__name b {
    font-size: var(--step-mono);
  }
}

/* --- sections ------------------------------------------------------------ */
/* 3rem, not 4.5: with the rule between sections, 9rem of combined padding read
   as a gap rather than a rhythm. (Feedback from a UI review.) */
.section {
  padding-block: var(--space-7);
  border-top: 1px solid var(--rule);
}

.section--hero {
  padding-block: var(--space-7) var(--space-8);
  border-top: 0;
}

.section__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

/* Grid items default to min-width:auto, which lets a wide child (the ER
   diagram) stretch the track and push the whole page sideways. Pinning the
   track and the items to zero minimum keeps overflow inside the element that
   opted into scrolling. */
.section__grid > * {
  min-width: 0;
}

@media (min-width: 900px) {
  .section__grid {
    grid-template-columns: var(--gutter-col) minmax(0, 1fr);
    gap: var(--space-7);
  }
}

/* The annotation gutter: mono labels that track alongside the content the way
   a spec sheet's margin notes do. */
.gutter {
  align-self: start;
}

@media (min-width: 900px) {
  .gutter {
    position: sticky;
    top: calc(var(--masthead-h) + var(--space-5));
  }
}

.gutter__label {
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
}

/* A short rule under the label, so it reads as the section's marker rather
   than one more piece of bold text. */
.gutter__label::after {
  content: "";
  display: block;
  width: 1.75rem;
  height: 2px;
  margin-top: var(--space-2);
  background: var(--signal);
}

.gutter__meta {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--step-mono-sm);
  line-height: 1.5;
  color: var(--ink-faint);
}

/* --- content rhythm ------------------------------------------------------ */
.prose {
  max-width: 62ch;
}

.lead {
  max-width: 58ch;
  font-size: var(--step-lead);
  line-height: 1.58;
  color: var(--ink-soft);
}

/* Justified running text. Restricted to prose: headings, table cells, figure
   captions and mono labels stay ragged, because justifying short or tabular
   lines opens gaps rather than closing them.

   `hyphens: auto` is what makes this safe in English — justification without it
   is how you get rivers of white space down a column. It relies on the `lang`
   attribute, which both language versions set on <html>. Arabic does not
   hyphenate, so the property is inert there and the script justifies the way it
   traditionally does, on the spaces. */
.prose p,
.prose ul.bullets li,
.lead,
.note {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.eyebrow {
  margin-bottom: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.section__intro {
  max-width: 58ch;
  margin-bottom: var(--space-6);
}

.section__intro h2 {
  margin-bottom: var(--space-4);
}

.stack-v {
  display: grid;
  gap: var(--space-6);
}

.stack-v--tight {
  gap: var(--space-4);
}

.stack-v--loose {
  gap: var(--space-7);
}

/* --- hero bits ----------------------------------------------------------- */
.hero__lead {
  margin-top: var(--space-5);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* --- utilities ----------------------------------------------------------- */
.u-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-spaced {
  margin-top: var(--space-6);
}

/* --- footer -------------------------------------------------------------- */
.footer {
  padding-block: var(--space-6) var(--space-7);
  border-top: 1px solid var(--rule);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--step-mono-sm);
  line-height: 1.6;
  color: var(--ink-faint);
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  z-index: 50;
}

.skip-link:focus {
  inset-inline-start: var(--shell-pad);
  top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--paper-raised);
  border: 1px solid var(--signal);
  font-family: var(--font-mono);
  font-size: var(--step-mono-sm);
}