/* About (owner-approved mockup, 3 Nov 2026): Void black, one gold (#B8975A), Cormorant headings, Inter body.
   Phones first (the mockup's 390 layout); from 900px the desktop layout (1440 mockup). Everything is scoped to
   .ab so the page's older inline styles can't reach it. Reveals: noirix-about-story.js adds .is-in. */
.ab { --ab-ink: #070707; --ab-text: #EDEAE4; --ab-body: #C9C5BE; --ab-muted: #ABA7A0; --ab-faint: #8E8A84; --ab-gold: #B8975A; --ab-line: rgba(237, 234, 228, 0.1);
  background: var(--ab-ink); color: var(--ab-text); font-family: Inter, "Helvetica Neue", Arial, sans-serif; }
.ab *, .ab *::before, .ab *::after { box-sizing: border-box; }
.ab h1, .ab h2, .ab h3, .ab p, .ab ol { margin: 0; padding: 0; }
.ab h1, .ab h2, .ab h3 { font-family: "Cormorant Garamond", Georgia, serif; color: var(--ab-text); text-transform: none; letter-spacing: 0; }
.ab-eyebrow { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ab-gold); }
.ab-wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 24px; }

/* Hero: the Void photograph, faces in frame, shade only behind the words. */
.ab-hero { position: relative; height: min(640px, 84svh); min-height: 520px; overflow: hidden; }
.ab-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 46% 0; }
.ab-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,7,7,.96) 0%, rgba(7,7,7,.6) 32%, rgba(7,7,7,0) 60%); }
.ab-hero__words { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 40px; display: flex; flex-direction: column; gap: 14px; }
.ab-hero h1 { font-weight: 300; font-size: clamp(48px, 14vw, 112px); line-height: .95; letter-spacing: .04em; }
.ab-hero__line { font-size: 15px; line-height: 1.6; color: #D9D5CE; max-width: 520px; }

/* The story */
.ab-story { padding: 64px 0 56px; }
.ab-story .ab-wrap { display: flex; flex-direction: column; gap: 18px; }
.ab-h2 { font-weight: 400; font-size: 40px; line-height: 1.02; }
.ab-story__copy { display: flex; flex-direction: column; gap: 18px; }
.ab-story__copy p { font-size: 16px; line-height: 1.75; color: var(--ab-body); }

/* Chapter by chapter: date column + one gold rule on phones; a horizontal rule with dots on desktop. */
.ab-chapters { padding: 56px 0 64px; border-top: 1px solid rgba(237,234,228,.08); }
.ab-chapters .ab-wrap { display: flex; flex-direction: column; gap: 32px; }
.ab-chapters__head { display: flex; flex-direction: column; gap: 10px; }
.ab-timeline { list-style: none; display: grid; grid-template-columns: 84px minmax(0, 1fr); }
.ab-chapter { display: contents; }
.ab-chapter__when { padding: 2px 8px 28px 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ab-gold); }
.ab-chapter__what { padding: 0 0 28px 20px; border-left: 1px solid rgba(184,151,90,.45); display: flex; flex-direction: column; gap: 6px; }
.ab-chapter:last-child .ab-chapter__when, .ab-chapter:last-child .ab-chapter__what { padding-bottom: 0; }
.ab-chapter h3 { font-weight: 500; font-size: 24px; line-height: 1.1; }
.ab-chapter p { font-size: 14px; line-height: 1.65; color: var(--ab-muted); }
.ab-chapter__dot { display: none; }

/* What NOIRIX stands for */
.ab-values { padding: 0 0 64px; }
.ab-values .ab-wrap { display: flex; flex-direction: column; gap: 20px; }
.ab-values__photo { width: 100%; height: 420px; object-fit: cover; object-position: 50% 20%; display: block; }
.ab-values__list { display: flex; flex-direction: column; border-bottom: 1px solid var(--ab-line); }
.ab-value { padding: 20px 0; border-top: 1px solid var(--ab-line); display: flex; flex-direction: column; gap: 6px; }
.ab-value h3 { font-weight: 500; font-size: 26px; line-height: 1.1; }
.ab-value p { font-size: 14px; line-height: 1.65; color: var(--ab-muted); }

/* From the founder: only when admin has a founder note (data-company-if). */
.ab-founder { padding: 0 0 64px; }
.ab-founder .ab-wrap { display: flex; flex-direction: column; gap: 14px; }
.ab-founder p[data-company] { font-family: "Cormorant Garamond", Georgia, serif; font-size: 24px; line-height: 1.45; color: var(--ab-text); }

/* Manchester / the mission */
.ab-city { position: relative; height: 560px; overflow: hidden; }
.ab-city img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ab-city::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,7,7,.94) 0%, rgba(7,7,7,.45) 45%, rgba(7,7,7,.1) 100%); }
.ab-city__words { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 40px; display: flex; flex-direction: column; gap: 12px; }
.ab-city__words p:last-child { font-size: 15px; line-height: 1.7; color: #D9D5CE; }

/* Closing */
.ab-close { padding: 72px 0 80px; text-align: center; }
.ab-close .ab-wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.ab-close h2 { font-weight: 300; font-size: 38px; line-height: 1.05; }
.ab-actions { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.ab-btn { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: center; padding: 0 24px; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.ab-btn--gold { background: var(--ab-gold); color: var(--ab-ink); }
.ab-btn--gold:hover, .ab-btn--gold:focus-visible { background: #CDAE74; }
.ab-btn--line { border: 1px solid rgba(237,234,228,.3); color: var(--ab-text); }
.ab-btn--line:hover, .ab-btn--line:focus-visible { border-color: var(--ab-gold); color: var(--ab-gold); }
.ab-legal { font-size: 12px; line-height: 1.6; color: var(--ab-faint); }
.ab-legal:empty { display: none; }

/* Reveal (IntersectionObserver in noirix-about-story.js). Without JS or with Reduce Motion, all is shown. */
.js-about .ab [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.js-about .ab [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-about .ab [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* Desktop (the 1440 mockup) */
@media (min-width: 900px) {
  .ab-wrap { padding: 0 104px; }
  .ab-eyebrow { font-size: 12px; letter-spacing: .3em; }
  .ab-hero { height: min(820px, 88vh); min-height: 640px; }
  .ab-hero img { object-position: 50% 2%; }
  .ab-hero::after { background: linear-gradient(0deg, rgba(7,7,7,.92) 0%, rgba(7,7,7,.35) 38%, rgba(7,7,7,0) 62%), linear-gradient(90deg, rgba(7,7,7,.55) 0%, rgba(7,7,7,0) 50%); }
  .ab-hero__words { left: 104px; right: auto; bottom: 96px; width: 640px; gap: 20px; }
  .ab-hero__line { font-size: 19px; }
  .ab-h2 { font-size: 64px; line-height: 1; }
  .ab-story { padding: 140px 0; }
  .ab-story .ab-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .ab-story__head { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 18px; }
  .ab-story__copy { grid-column: 6 / span 6; gap: 24px; padding-top: 34px; }
  .ab-story__copy p { font-size: 20px; }
  .ab-chapters { padding: 120px 0 140px; }
  .ab-chapters .ab-wrap { gap: 72px; }
  .ab-chapters__head { gap: 14px; }
  .ab-timeline { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 32px; border-top: 1px solid rgba(184,151,90,.5); }
  .ab-chapter { display: flex; flex-direction: column; gap: 12px; padding-top: 32px; position: relative; }
  .ab-chapter__dot { display: block; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--ab-gold); }
  .ab-chapter--next .ab-chapter__dot { background: var(--ab-ink); border: 1px solid var(--ab-gold); }
  .ab-chapter__when, .ab-chapter:last-child .ab-chapter__when { padding: 0; letter-spacing: .12em; }
  .ab-chapter__what, .ab-chapter:last-child .ab-chapter__what { padding: 0; border-left: 0; gap: 12px; }
  .ab-chapter h3 { font-size: 28px; }
  .ab-chapter p { font-size: 15px; }
  .ab-values { padding: 0 0 140px; }
  .ab-values .ab-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .ab-values__photo { grid-column: 1 / span 6; grid-row: 1 / span 2; height: 720px; }
  .ab-values .ab-eyebrow, .ab-values__list { grid-column: 8 / span 5; }
  .ab-values .ab-eyebrow { align-self: end; margin-bottom: 20px; }
  .ab-values__list { align-self: start; }
  .ab-value { padding: 28px 0; gap: 8px; }
  .ab-value h3 { font-size: 34px; }
  .ab-value p { font-size: 16px; line-height: 1.7; }
  .ab-founder { padding: 0 0 140px; }
  .ab-founder .ab-wrap { max-width: 1040px; }
  .ab-founder p[data-company] { font-size: 32px; }
  .ab-city { height: 760px; }
  .ab-city img { object-position: 50% 35%; }
  .ab-city::after { background: linear-gradient(90deg, rgba(7,7,7,.9) 0%, rgba(7,7,7,.55) 42%, rgba(7,7,7,.05) 75%); }
  .ab-city__words { left: 104px; right: auto; bottom: auto; top: 50%; transform: translateY(-50%); width: 560px; gap: 20px; }
  .ab-city__words .ab-h2 { font-size: 72px; line-height: .98; }
  .ab-city__words p:last-child { font-size: 19px; }
  .ab-close { padding: 150px 0 130px; }
  .ab-close .ab-wrap { gap: 28px; }
  .ab-close h2 { font-size: 72px; line-height: 1; }
  .ab-actions { width: auto; flex-direction: row; gap: 16px; margin-top: 12px; }
  .ab-btn { width: auto; min-width: 260px; min-height: 56px; letter-spacing: .22em; }
  .ab-legal { font-size: 13px; }
}

/* Dates not yet confirmed stay hidden whatever else applies. */
.ab [data-placeholder][hidden] { display: none !important; }

/* The site-wide brand stylesheets set every h1-h3 (and some p) to small uppercase Inter with wide tracking,
   with !important. The approved About design is Cormorant in sentence case: restated here, About only. */
main.ab h1, main.ab h2, main.ab h3, main.ab .ab-founder p[data-company] { font-family: "Cormorant Garamond", Georgia, serif !important; text-transform: none !important; }
main.ab h1 { font-weight: 300 !important; font-size: clamp(48px, 14vw, 56px) !important; line-height: .95 !important; letter-spacing: .04em !important; }
main.ab .ab-h2 { font-weight: 400 !important; font-size: 40px !important; line-height: 1.02 !important; letter-spacing: 0 !important; }
main.ab .ab-chapter h3 { font-weight: 500 !important; font-size: 24px !important; line-height: 1.1 !important; letter-spacing: 0 !important; }
main.ab .ab-value h3 { font-weight: 500 !important; font-size: 26px !important; line-height: 1.1 !important; letter-spacing: 0 !important; }
main.ab .ab-close h2 { font-weight: 300 !important; font-size: 38px !important; line-height: 1.05 !important; letter-spacing: 0 !important; }
main.ab .ab-founder p[data-company] { font-weight: 400 !important; font-size: 24px !important; line-height: 1.45 !important; letter-spacing: 0 !important; color: #EDEAE4 !important; }
@media (min-width: 900px) {
  main.ab h1 { font-size: 112px !important; line-height: .92 !important; }
  main.ab .ab-h2 { font-size: 64px !important; line-height: 1 !important; }
  main.ab .ab-city__words .ab-h2 { font-size: 72px !important; line-height: .98 !important; }
  main.ab .ab-chapter h3 { font-size: 28px !important; }
  main.ab .ab-value h3 { font-size: 34px !important; }
  main.ab .ab-close h2 { font-size: 72px !important; line-height: 1 !important; }
  main.ab .ab-founder p[data-company] { font-size: 32px !important; }
}