/* ─────────────────────────────────────────────────────────────────────────
   Layeequddin Mohammed — personal site. Page layout and type.
   Loads after styles.css and builds on its tokens; every value here comes
   from the design spec (design-handoff/SPEC.md). Where a value is a token,
   it stays a token — never the resolved hex.

   Two rules from the Broadsheet system that are easy to violate by
   accident, and that this file must keep keeping:
     · No cards, boxes or dividers between sections. Section separation is
       whitespace only. The only rules on the page are the masthead's
       thick/thin pairs and two hairlines — front-page furniture, not
       section dividers.
     · Everything is set in one serif, including the small-caps chrome and
       the buttons. No sans-serif for UI.

   There are no media queries and none are needed: every section wraps via
   flex/grid and the clamp() scale handles 360px through 1600px. Do not add
   fixed widths or heights.
   ───────────────────────────────────────────────────────────────────────── */

/* — shell — */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 28px;
  text-wrap: pretty;
}

/* Link colors must be defined even though the page has few inline links —
   undefined links render browser-default blue. */
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-600); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 44px) clamp(20px, 4vw, 56px) 0;
}

/* Shared section rhythm (sections 2–7). The close section runs tighter and
   sets its own padding below. */
.section { padding: 0 0 clamp(48px, 7vw, 96px); }

/* The small-caps chrome. These are <p>, deliberately — they are not
   headings and must not be promoted to any. */
.kicker {
  margin: 0 0 20px;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}

/* Front-page furniture. `height` plus `border-top`/`border-bottom` is what
   makes the thick/thin pair: a 2px rule, 2px of paper, a 1px rule. */
.rule-hairline {
  height: 0;
  border: 0;
  border-top: 1px solid var(--color-text);
}
.rule-thickthin {
  height: 5px;
  border: 0;
  border-top: 2px solid var(--color-text);
  border-bottom: 1px solid var(--color-text);
}

/* — 1. masthead — */

.masthead { padding: 0 0 clamp(28px, 4vw, 48px); }

.masthead__rail {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 24px;
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}
.masthead__availability { color: var(--color-accent-700); }

.masthead__rule-top { margin: 0 0 10px; }
.masthead__rule-bottom { margin: 0; }

/* The negative left margin is optical alignment — it pulls the glyph's left
   sidebearing flush with the rules above and below. Keep it.
   `text-box: trim-both` is progressive enhancement; browsers that ignore it
   render correctly. */
.nameplate {
  margin: 0 0 12px -0.04em;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(34px, 8.4vw, 116px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-box: trim-both cap alphabetic;
}

/* — 2. the lead — */

.lead {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
}

.lead__portrait {
  flex: 1 1 280px;
  max-width: 420px;
  margin: 0;
  /* The #sep-all filter clips each plate to the source's own silhouette, so
     the plates paint nothing outside themselves and the figure can let the
     misregistration overhang instead of guillotining it at the box edge.
     This overrides .cmyk's own overflow: hidden. */
  overflow: visible;
}
.lead__portrait .print { aspect-ratio: 4 / 5; }
.lead__portrait picture { display: block; width: 100%; height: 100%; }
.lead__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The offset keeps the face in frame under the 4/5 crop. Preserve it. */
  object-position: 50% 60%;
  display: block;
}

.lead__text {
  flex: 2 1 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The lead's kicker is the page's one accent kicker, and a step larger than
   the neutral ones. */
.lead__kicker {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}

/* The max-width values in `ch` set the measure — they are what keeps the
   copy readable at width. Preserve them. */
.lead__statement {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.16;
  letter-spacing: -0.022em;
}
.lead__body {
  margin: 28px 0 0;
  max-width: 52ch;
  font-size: 17px;
  line-height: 30px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 32px;
}
/* The buttons carry the system's own hover/active states; they are not
   restyled per element. This only stops the global link underline from
   landing on a button. */
.cta-row .btn:hover { text-decoration: none; }

/* — 3. where I've sold and led — */

.companies {
  display: flex;
  flex-wrap: wrap;
  gap: 16px clamp(28px, 5vw, 64px);
  align-items: baseline;
}
/* Set as type, not logos — no images, no wordmark <img>, no third-party
   trademarks. */
.companies__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: -0.01em;
}

/* — 4. what I'm known for — */

.known-for .kicker { margin: 0 0 44px; }

.entry {
  display: flex;
  flex-wrap: wrap;
  gap: 20px clamp(28px, 5vw, 72px);
  margin: 0 0 clamp(40px, 5vw, 64px);
}
.entry:last-child { margin: 0; }

.entry__num {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(44px, 6vw, 80px);
  letter-spacing: -0.03em;
}

.entry__body {
  flex: 1 1 340px;
  min-width: 0;
}
.entry__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.entry__copy {
  margin: 16px 0 0;
  max-width: 58ch;
  font-size: 16px;
  line-height: 28px;
}

/* — 5. recommendation — */

.quote {
  margin: 0;
  max-width: 62ch;
}
/* The true italic, not a synthesized slant — the italic face is self-hosted
   alongside the roman for exactly this. */
.quote blockquote {
  margin: 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(23px, 3vw, 36px);
  line-height: 1.38;
  letter-spacing: -0.01em;
}
.quote__body {
  margin: 26px 0 0;
  font-size: 16px;
  line-height: 28px;
  color: var(--color-neutral-800);
}
.quote figcaption {
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 26px;
  color: var(--color-neutral-700);
}

/* — 6. how I lead — */

.how-i-lead .kicker { margin: 0 0 28px; }

.beliefs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 34px clamp(28px, 4vw, 64px);
}
.beliefs p {
  margin: 0;
  font-size: 16px;
  line-height: 28px;
}
/* The lead-in carries the heading font explicitly. */
.beliefs strong { font-family: var(--font-heading); }

/* — 7. the record — */

.record .kicker { margin: 0 0 24px; }
.record__rule { margin: 0 0 24px; }

.roles {
  display: flex;
  flex-wrap: wrap;
  gap: 24px clamp(28px, 5vw, 64px);
  margin: 0 0 40px;
}
.roles > div { flex: 1 1 160px; }
.role__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  line-height: 24px;
}
.role__meta {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 24px;
  color: var(--color-neutral-700);
}

.credentials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 30px clamp(28px, 4vw, 64px);
}
.credential {
  margin: 0 0 14px;
  font-size: 15.5px;
  line-height: 26px;
}
.credential:last-child { margin: 0; }
.credential span { color: var(--color-neutral-700); }
.credential--note { color: var(--color-neutral-800); }

/* — 8. close + footer — */

.close { padding: 0 0 clamp(40px, 6vw, 72px); }
/* Bookends the masthead. */
.close__rule { margin: 0 0 32px; }
.close__title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(26px, 3.8vw, 44px);
  line-height: 1.16;
  letter-spacing: -0.02em;
}
.close__sub {
  margin: 22px 0 0;
  max-width: 52ch;
  font-size: 16px;
  line-height: 28px;
  color: var(--color-neutral-800);
}
.close .cta-row { margin-top: 28px; }
.close__bio {
  margin: 32px 0 0;
  max-width: 64ch;
  font-size: 15px;
  line-height: 28px;
  color: var(--color-neutral-800);
}

.site-footer {
  padding: 0 0 48px;
  font-size: 13px;
  line-height: 24px;
  color: var(--color-neutral-700);
}