/* ==========================================================================
   NAVAL ORIENTATION: Inner pages (About, Contact)

   Built entirely from the tokens and components established on the homepage.
   Nothing here introduces a new colour, type step, radius or easing curve.
   ========================================================================== */

/* =========================================================================
   PAGE HERO: shorter sibling of the homepage hero
   ========================================================================= */
.no-phero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--no-ink-900);
  color: var(--no-text-invert-muted);
  padding-top: calc(var(--no-header-h) + var(--no-topbar-h) + clamp(2.5rem, 2rem + 4vw, 5.5rem));
  padding-bottom: clamp(2.5rem, 2rem + 4vw, 5.5rem);
}
@media (max-width: 1024px) {
  .no-phero { padding-top: calc(var(--no-header-h) + clamp(2.5rem, 2rem + 4vw, 5rem)); }
}
.no-phero__media { position: absolute; inset: 0; z-index: -3; }
.no-phero__media img { width: 100%; height: 100%; object-fit: cover; }
.no-phero__scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(11, 30, 44, .88) 0%, rgba(11, 30, 44, .74) 55%, rgba(6, 15, 23, .95) 100%),
    linear-gradient(90deg, rgba(11, 30, 44, .82) 0%, rgba(11, 30, 44, .38) 70%, transparent 100%);
}
.no-phero .no-gridlines { z-index: -1; opacity: .5; }
.no-phero__inner { position: relative; max-width: 900px; }

/*
 * Page titles.
 *
 * These sat on the shared 4xl step, which topped out around 51px on a desktop
 * and read small against the hero photograph. They now have their own fluid
 * step, roughly one size up at every width (36px at 320px, about 58px at
 * 1440px), applied in one place so About, Services, every service page,
 * Contact, the blog and the article template stay identical to each other.
 */
.no-phero__title {
  font-size: clamp(2.25rem, 1.8rem + 2vw, 3.625rem);
  line-height: 1.1;
  letter-spacing: var(--no-tr-tight);
  color: #fff;
  margin-top: var(--no-s-4);
  text-wrap: balance;
  max-width: 22ch;
}
.no-phero__lead {
  font-size: clamp(1.0625rem, 1rem + .28vw, 1.25rem);
  line-height: var(--no-lh-relaxed);
  color: rgba(255, 255, 255, .82);
  max-width: 58ch;
  margin-top: var(--no-s-5);
}

/* Breadcrumb */
.no-crumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-3xs);
  letter-spacing: var(--no-tr-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: var(--no-s-5);
}
.no-crumb a { color: rgba(255, 255, 255, .7); }
.no-crumb a:hover { color: var(--no-accent); }
.no-crumb svg { display: block; opacity: .6; }

/* =========================================================================
   INTRODUCTION
   ========================================================================= */
.no-intro {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 1.2rem + 3.5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) { .no-intro { grid-template-columns: minmax(0, 1fr); } }

.no-intro__aside h2 { margin-top: 1rem; font-size: var(--no-fs-2xl); }

/* In this narrower column the two action buttons cannot sit side by side, and
   two stacked buttons of different widths read as a mistake. Letting them grow
   makes each fill the column, so the wrap looks deliberate. */
.no-intro__body .no-about__cta .no-btn { flex: 1 1 auto; }

.no-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--no-s-8);
  background: var(--no-border);
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-md);
  overflow: hidden;
  list-style: none;
  padding: 0;
}
.no-facts li {
  background: var(--no-bg-soft);
  padding: 1.125rem 1.25rem;
}
.no-facts b {
  display: block;
  font-family: var(--no-font-display);
  font-size: var(--no-fs-base);
  line-height: 1.25;
  color: var(--no-ink-800);
}
.no-facts span {
  display: block;
  margin-top: .25rem;
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-3xs);
  letter-spacing: var(--no-tr-wide);
  text-transform: uppercase;
  color: var(--no-text-faint);
}

/* =========================================================================
   HISTORY TIMELINE
   A marker rail plus one detail panel. Selecting a milestone swaps the panel
   instead of stacking every milestone on the page.
   ========================================================================= */
.no-history { background: var(--no-grad-deep); position: relative; overflow: hidden; }
.no-history > * { position: relative; }

.no-tl {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 1.2rem + 3vw, 4rem);
  align-items: start;
}

.no-tl__rail { position: relative; display: grid; gap: .25rem; padding-left: 2.25rem; }
.no-tl__line {
  position: absolute;
  left: 1.06rem;
  top: 1.4rem;
  bottom: 1.4rem;
  width: 2px;
  background: rgba(255, 255, 255, .12);
  border-radius: 2px;
  overflow: hidden;
}
.no-tl__progress {
  display: block;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, var(--no-primary-400), var(--no-accent));
  transition: height .5s var(--no-ease-out);
}

.no-tl__marker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: .875rem 1rem;
  margin-left: -2.25rem;
  padding-left: 2.25rem;
  background: none;
  border: 0;
  border-radius: var(--no-r-md);
  color: rgba(255, 255, 255, .66);
  text-align: left;
  cursor: pointer;
  transition: background-color .32s var(--no-ease), color .32s var(--no-ease);
}
.no-tl__marker:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.no-tl__marker.is-active { background: rgba(19, 134, 179, .18); color: #fff; }

.no-tl__dot {
  position: relative;
  z-index: 1;
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--no-ink-800);
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .55);
  transition: all .32s var(--no-ease);
}
.no-tl__marker.is-active .no-tl__dot {
  background: var(--no-primary-action);
  border-color: var(--no-accent);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(111, 207, 255, .14);
}
.no-tl__marker-text { display: block; min-width: 0; }
.no-tl__no {
  display: block;
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-3xs);
  letter-spacing: var(--no-tr-wide);
  color: var(--no-accent);
}
.no-tl__marker-title {
  display: block;
  font-family: var(--no-font-display);
  font-weight: 600;
  font-size: var(--no-fs-sm);
  line-height: 1.35;
  margin-top: .125rem;
}

.no-tl__panels { position: relative; }
.no-tl__panel {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--no-r-lg);
  animation: noTlIn .5s var(--no-ease-out) both;
}
.no-tl__panel[hidden] { display: none; }
@keyframes noTlIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.no-tl__ghost {
  position: absolute;
  right: -.05em; top: -.22em;
  font-family: var(--no-font-display);
  font-size: clamp(6rem, 5rem + 6vw, 11rem);
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(111, 207, 255, .12);
  pointer-events: none;
  user-select: none;
}
.no-tl__eyebrow {
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-2xs);
  letter-spacing: var(--no-tr-wider);
  text-transform: uppercase;
  color: var(--no-accent);
}
.no-tl__panel h3 { color: #fff; font-size: var(--no-fs-xl); margin-top: .625rem; }
.no-tl__text {
  margin-top: .875rem;
  font-size: var(--no-fs-sm);
  line-height: var(--no-lh-relaxed);
  color: rgba(255, 255, 255, .74);
  max-width: 58ch;
}

/*
 * Under 900px the rail-plus-panel model stops working: there is no room for
 * two columns and tapping to reveal hides content behind an interaction.
 * Each milestone becomes a self-contained card in a single vertical run.
 */
@media (max-width: 900px) {
  .no-tl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .no-tl__rail { display: none; }
  .no-tl__panels { display: grid; gap: 1rem; }
  .no-tl__panel { animation: none; }
  .no-tl__panel[hidden] { display: block; }
  .no-tl__ghost { font-size: 5.5rem; opacity: .8; }
  .no-tl__panel::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--no-grad-brand);
  }
}

/* =========================================================================
   VISION / MISSION / VALUES
   ========================================================================= */
.no-vm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, .7rem + 1.2vw, 1.75rem);
}
@media (max-width: 760px) { .no-vm { grid-template-columns: minmax(0, 1fr); } }

.no-vm__card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  border-radius: var(--no-r-lg);
  border: 1px solid var(--no-border);
  background: var(--no-bg-soft);
  transition: transform .38s var(--no-ease-out), box-shadow .38s var(--no-ease);
}
.no-vm__card:hover { transform: translateY(-4px); box-shadow: var(--no-sh-md); }
.no-vm__card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--no-grad-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--no-ease-out);
}
.no-vm__card.is-visible::after { transform: scaleX(1); }
.no-vm__ico {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--no-r-md);
  background: var(--no-primary-50);
  border: 1px solid var(--no-primary-100);
  color: var(--no-primary-700);
}
.no-vm__card h3 { margin-top: 1.25rem; font-size: var(--no-fs-xl); }
.no-vm__card p {
  margin-top: .75rem;
  font-size: var(--no-fs-sm);
  line-height: var(--no-lh-relaxed);
  color: var(--no-text-muted);
}

.no-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, .7rem + 1.2vw, 1.75rem);
  margin-top: clamp(1rem, .7rem + 1.2vw, 1.75rem);
}
@media (max-width: 900px) { .no-values { grid-template-columns: minmax(0, 1fr); } }

.no-value {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.375rem 1.5rem;
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-md);
  background: var(--no-white);
}
.no-value__ico {
  flex: none;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--no-r-sm);
  background: var(--no-primary-50);
  color: var(--no-primary-700);
}
.no-value h4 { font-size: var(--no-fs-base); }
.no-value p {
  margin-top: .375rem;
  font-size: var(--no-fs-xs);
  line-height: 1.7;
  color: var(--no-text-muted);
}

/* Certifications on a deep background reuse the homepage component. */
.no-certs--deep { background: var(--no-ink-900); }

/* ---- Certifications in detail (About) -----------------------------------
 * Two labelled groups: Part 1 ISO, Part 2 international frameworks, sit
 * below the certificate cards. Each entry is a row rather than a card so a
 * long standard name and its scope stay readable at 320px without the text
 * being squeezed into a narrow column.
 */
.no-certdetail { margin-top: var(--no-s-10); }
.no-certdetail + .no-certdetail { margin-top: var(--no-s-8); }

.no-certdetail__head {
  display: flex;
  align-items: center;
  gap: .875rem;
  font-family: var(--no-font-display);
  font-size: var(--no-fs-lg);
  line-height: 1.3;
  color: #fff;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  text-wrap: balance;
}
.no-certdetail__head::before {
  content: "";
  flex: none;
  width: 4px;
  align-self: stretch;
  min-height: 1.25em;
  border-radius: 4px;
  background: var(--no-accent);
}

/* Each group holds three entries, so three columns fill a row exactly and no
   card is left orphaned in a half-empty second row. */
.no-certdetail__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--no-s-5);
  margin-top: var(--no-s-6);
}
@media (max-width: 1100px) { .no-certdetail__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .no-certdetail__grid { grid-template-columns: minmax(0, 1fr); } }

.no-certdetail__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  min-width: 0;
  padding: clamp(1rem, .8rem + .6vw, 1.375rem);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--no-r-md);
  transition: background-color .28s var(--no-ease), border-color .28s var(--no-ease);
}
.no-certdetail__item:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(111, 207, 255, .38);
}
.no-certdetail__item > div { min-width: 0; }

.no-certdetail__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: var(--no-r-sm);
  color: var(--no-accent);
  background: rgba(111, 207, 255, .1);
  border: 1px solid rgba(111, 207, 255, .22);
}

.no-certdetail__item h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem .75rem;
  font-size: var(--no-fs-base);
  line-height: 1.35;
  color: #fff;
  overflow-wrap: anywhere;
}
.no-certdetail__item h4 span {
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-3xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--no-accent);
  background: rgba(111, 207, 255, .1);
  border: 1px solid rgba(111, 207, 255, .22);
  border-radius: var(--no-r-xs);
  padding: .25rem .4375rem;
}
.no-certdetail__item p {
  margin-top: .5rem;
  font-size: var(--no-fs-sm);
  line-height: var(--no-lh-relaxed);
  color: var(--no-text-invert-muted);
}

/* ---- About CTA ----------------------------------------------------------
 * Single centred column, unlike the homepage CTA which pairs copy with the
 * inquiry form. The buttons wrap to full width on narrow screens so the long
 * "Download Our Full Certified Corporate Profile (PDF)" label never overflows.
 */
.no-aboutcta { text-align: center; }
/* The measure is capped on the copy, not on the block, so the button row can
   use the full container width and keep both actions on one line. */
.no-aboutcta .no-cta__title,
.no-aboutcta .no-cta__answer { max-width: 860px; margin-inline: auto; }
.no-aboutcta .no-cta__title { margin-top: 1rem; }

.no-aboutcta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--no-s-4);
  margin-top: var(--no-s-8);
}
.no-aboutcta__actions .no-btn { max-width: 100%; }
@media (max-width: 640px) {
  .no-aboutcta__actions .no-btn { flex: 1 1 100%; }
  .no-aboutcta__actions .no-btn--lg { padding-inline: 1.25rem; }
}

/* =========================================================================
   CONTACT
   ========================================================================= */
.no-contact {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 1.2rem + 3.5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 960px) { .no-contact { grid-template-columns: minmax(0, 1fr); } }

.no-cinfo { display: grid; gap: .75rem; margin-top: var(--no-s-8); }
.no-cinfo__row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-md);
  background: var(--no-white);
  transition: border-color .32s var(--no-ease), transform .32s var(--no-ease-out);
}
.no-cinfo__row:hover { border-color: var(--no-primary-300); transform: translateX(3px); }
/* The flex child must be allowed to shrink, and long addresses like
   operations@navalorientation.com have to be able to break, or the row pushes
   past the viewport at 320px. */
.no-cinfo__row > span:last-child { min-width: 0; flex: 1; }
.no-cinfo__ico {
  flex: none;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--no-r-sm);
  background: var(--no-primary-50);
  color: var(--no-primary-700);
}
.no-cinfo__label {
  display: block;
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-3xs);
  letter-spacing: var(--no-tr-wide);
  text-transform: uppercase;
  color: var(--no-text-faint);
}
.no-cinfo__value {
  display: block;
  margin-top: .25rem;
  font-size: var(--no-fs-sm);
  line-height: 1.55;
  color: var(--no-ink-800);
  font-style: normal;
  overflow-wrap: anywhere;
}
.no-cinfo__value a { color: var(--no-ink-800); }
.no-cinfo__value a:hover { color: var(--no-primary-action); }

/* Direct-contact buttons */
.no-cactions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: var(--no-s-6);
}
.no-cactions .no-btn { flex: 1 1 auto; }
.no-btn--whatsapp { --btn-bg: #25D366; --btn-fg: #062f18; --btn-veil: rgba(255, 255, 255, .4); }

/* Map panel reuses the homepage chart component */
.no-cmap {
  margin-top: var(--no-s-8);
  background: var(--no-grad-deep);
  border-radius: var(--no-r-xl);
  padding: clamp(1rem, .7rem + 1.4vw, 1.75rem);
  border: 1px solid rgba(255, 255, 255, .1);
}
.no-cmap .no-map { min-height: 0; border: 0; background: none; padding: 0; }
.no-cmap .no-map__legend { position: static; margin-top: 1rem; }

/* Contact form sits in the shared .no-form component */
.no-contact .no-form { position: sticky; top: calc(var(--no-header-h) + 1.5rem); }
@media (max-width: 960px) { .no-contact .no-form { position: static; } }

.no-cmap__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem 1rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.no-cmap__list li {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: var(--no-fs-xs);
  color: rgba(255, 255, 255, .78);
}
.no-cmap__list span {
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-3xs);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--no-accent);
  background: rgba(111, 207, 255, .1);
  border: 1px solid rgba(111, 207, 255, .22);
  border-radius: var(--no-r-xs);
  padding: .25rem .375rem;
}
@media (max-width: 420px) { .no-cmap__list { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
   IMAGE GALLERY

   Shared by Vessels, Projects and anything else with a set of images. Scroll
   snap does the work; the script only syncs the thumbnails. The main image
   ratio is set per use through --gal-ratio.
   ========================================================================= */
.no-gal { position: relative; }

.no-gal__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--no-s-3, .75rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--no-r-lg);
}
.no-gal__track::-webkit-scrollbar { display: none; }
.no-gal__slide { margin: 0; scroll-snap-align: start; }

.no-gal__zoom {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--no-grad-deep);
  border-radius: var(--no-r-lg);
  overflow: hidden;
  cursor: zoom-in;
}
.no-gal__zoom img {
  display: block;
  width: 100%;
  aspect-ratio: var(--gal-ratio, 4 / 3);
  object-fit: cover;
  object-position: center center;
}
@media (max-width: 900px) {
  .no-gal__zoom img { aspect-ratio: 16 / 10; }
}
.no-gal__zoomico {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  background: rgba(11, 30, 44, .72);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
  transition: transform .25s var(--no-ease-out);
}
.no-gal__zoom:hover .no-gal__zoomico { transform: scale(1.08); }

.no-gal__controls {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .875rem;
}
.no-gal__nav {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--no-primary-action);
  background: #fff;
  border: 1px solid var(--no-border);
  cursor: pointer;
  transition: background-color .25s var(--no-ease), color .25s var(--no-ease), border-color .25s var(--no-ease);
}
.no-gal__nav:hover,
.no-gal__nav:focus-visible {
  color: #fff;
  background: var(--no-primary-action);
  border-color: var(--no-primary-action);
}
.no-gal__nav--prev { transform: rotate(180deg); }

.no-gal__thumbs {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
.no-gal__thumbs::-webkit-scrollbar { display: none; }
.no-gal__thumb {
  flex: none;
  width: 74px;
  height: 52px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--no-r-sm);
  overflow: hidden;
  background: var(--no-bg-soft);
  cursor: pointer;
  opacity: .6;
  transition: opacity .25s var(--no-ease), border-color .25s var(--no-ease);
}
.no-gal__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.no-gal__thumb:hover { opacity: 1; }
.no-gal__thumb.is-active { opacity: 1; border-color: var(--no-primary-action); }

@media (max-width: 620px) {
  .no-gal__nav { display: none; }
}

/* =========================================================================
   DETAIL PAGE PRIMITIVES

   The showcase layout was written for the vessel page and is now shared with
   Projects, so it lives here rather than in vessels.css: a breadcrumb strip,
   a media-and-facts grid, a write-up band and a related band. Anything that
   is genuinely about a vessel (key figures, availability, specifications)
   stays in vessels.css.
   ========================================================================= */

/* Breadcrumb strip above the showcase. */
.no-pagebar {
  border-bottom: 1px solid var(--no-border);
  background: var(--no-bg-soft);
}
.no-pagebar .no-crumb {
  padding-block: .875rem;
  flex-wrap: wrap;
  row-gap: .25rem;
}
.no-crumb--light { color: var(--no-text-muted); }
.no-crumb--light a { color: var(--no-text-muted); }
.no-crumb--light a:hover { color: var(--no-primary-action); }
.no-crumb--light [aria-current="page"] { color: var(--no-ink-800); font-weight: 650; }

/* Showcase: media left, name and facts right, both in the first screen. */
.no-show { padding-block: clamp(1.75rem, 1.3rem + 2.2vw, 3rem); }

.no-show__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  align-items: start;
}
@media (max-width: 900px) { .no-show__grid { grid-template-columns: minmax(0, 1fr); } }

.no-show__info { min-width: 0; }
.no-show__title {
  margin-top: .625rem;
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: var(--no-tr-tight);
  color: var(--no-ink-800);
  text-wrap: balance;
}

/* The page's headline facts as one compact row of chips. */
.no-show__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.125rem 0 0;
  padding: 0;
  list-style: none;
}
.no-show__fact {
  min-width: 0;
  padding: .5rem .75rem;
  background: var(--no-bg-soft);
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-sm);
}
.no-show__fact span {
  display: block;
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-3xs);
  letter-spacing: var(--no-tr-wide);
  text-transform: uppercase;
  color: var(--no-text-muted);
}
.no-show__fact b {
  display: block;
  margin-top: .125rem;
  font-family: var(--no-font-display);
  font-size: var(--no-fs-sm);
  color: var(--no-ink-800);
}

.no-show__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
}
@media (max-width: 520px) {
  .no-show__actions { flex-direction: column; }
  .no-show__actions .no-btn { width: 100%; }
}

/* Write-up band below the showcase. */
.no-detail {
  padding-block: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
  border-top: 1px solid var(--no-border);
}
.no-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 900px) { .no-detail__grid { grid-template-columns: minmax(0, 1fr); } }

.no-detail h2 { font-size: var(--no-fs-xl); line-height: 1.25; }
.no-detail__body { max-width: 68ch; }
.no-detail__body > * + * { margin-top: .9em; }
.no-detail__body h2 { margin-bottom: .75rem; }

/* Related work at the foot of the page. */
.no-related {
  padding-block: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
  background: var(--no-bg-soft);
  border-top: 1px solid var(--no-border);
}
.no-related__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 1.5rem;
}
.no-related__head h2 { font-size: var(--no-fs-xl); }

/* =========================================================================
   PAGINATION

   Shared by every paginated archive. This used to live in blog.css, which the
   project archives do not load, so the numbers rendered unstyled there.
   ========================================================================= */
.no-pagination { margin-top: clamp(2rem, 1.4rem + 2vw, 3rem); }
.no-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}
.no-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 .875rem;
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-xs);
  color: var(--no-ink-700);
  background: #fff;
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-sm);
  transition: background-color var(--no-dur) var(--no-ease),
              color var(--no-dur) var(--no-ease),
              border-color var(--no-dur) var(--no-ease);
}
.no-pagination .page-numbers:hover,
.no-pagination .page-numbers:focus-visible {
  color: #fff;
  background: var(--no-primary-action);
  border-color: var(--no-primary-action);
}
.no-pagination .page-numbers.current {
  color: #fff;
  background: var(--no-ink-800);
  border-color: var(--no-ink-800);
}
.no-pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }