/* ==========================================================================
   The Brand Ontologist — page-specific styles.
   Normal flowing content page (no scroll-snap, no 100dvh-locked sections),
   same architecture as paradigm.css. Shared button/nav/footer/cookie styles
   live in components.css; global .pg-col/.pg-title/.pg-headline/.pg-body
   type-scale primitives in base.css.
   ========================================================================== */

.ont-sec {
  background: linear-gradient(var(--colour-bg), var(--colour-bg)) center / 100% 100% no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: min(56px, 8dvh) 20px;
}

.ont-sec--accent {
  background: linear-gradient(var(--colour-accent), var(--colour-accent)) center / 100% 100% no-repeat;
}

.ont-back {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: min(0.8rem, 3.6cqw, 2.1dvh);
  letter-spacing: 0.08em;
  color: var(--colour-ink);
  text-transform: uppercase;
}

.ont-back:hover { color: var(--colour-accent); }

.ont-eyebrow {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: min(0.95rem, 4.2cqw, 2.5dvh);
  letter-spacing: 0.12em;
  color: var(--colour-accent);
  text-transform: uppercase;
}

/* Hero portrait */
.ont-portrait {
  width: 100%;
  align-self: stretch;
  height: min(320px, 40dvh);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: min(20px, 2.4dvh);
}

.ont-portrait img {
  height: 100%;
  width: auto;
  max-width: none;
  filter: grayscale(1);
}

/* Introduction — profile (portrait) and The Practice copy, stacked on
   mobile, arranged into a 3-column layout on desktop (same column-based
   visual pattern as the blog post pages' .post-cols): profile takes the
   left column, Practice content spans the remaining two. */
.ont-intro-cols {
  display: flex;
  flex-direction: column;
  gap: min(36px, 4dvh);
  width: 100%;
}

.ont-intro-col--profile { display: flex; flex-direction: column; }

/* Recognition — award cards (same pattern as the Paradigm framework grid) */
.ont-award-grid {
  display: flex;
  flex-direction: column;
  gap: min(14px, 1.6dvh);
  margin-top: min(18px, 2dvh);
}

.ont-card {
  display: flex;
  align-items: center;
  gap: min(16px, 2cqw);
  background: var(--colour-card);
  border-radius: 14px;
  padding: min(15px, 1.7dvh) 18px;
  box-shadow: 0 6px 18px rgba(58, 63, 67, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ont-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(58, 63, 67, 0.16);
}

.ont-card-badge {
  width: min(108px, 27cqw);
  height: min(135px, 15.75dvh);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.ont-card-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Per-card badge size adjustments: card 1 (SG monogram) and card 3 (Vale
   Bikes) are 1.25x the base badge width, card 2 (Logo Wave) is scaled up to
   ~0.905625x the base badge width. On mobile (this base rule), ONLY width
   varies per card — height is held at the shared base badge height
   (min(135px, 15.75dvh)) for every card, so all 4 stacked cards end up the
   same height with no extra top/bottom whitespace; object-fit:contain keeps
   each logo's own aspect ratio intact within its wider-but-same-height box. */
.ont-award-grid .ont-card:nth-child(1) .ont-card-badge,
.ont-award-grid .ont-card:nth-child(3) .ont-card-badge {
  width: min(135px, 33.75cqw);
  height: min(135px, 15.75dvh);
}

.ont-award-grid .ont-card:nth-child(2) .ont-card-badge {
  width: min(97.8075px, 24.451875cqw);
  height: min(135px, 15.75dvh);
}

.ont-card-title {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: min(1rem, 4.6cqw, 2.5dvh);
  color: var(--colour-ink);
}

.ont-card-body {
  margin: 6px 0 0 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: min(0.85rem, 3.8cqw, 2.2dvh);
  line-height: 1.3;
  color: #5C646B;
}

/* Debut Solo Exhibition */
.ont-exhibit-grid {
  display: flex;
  flex-direction: column;
  gap: min(12px, 1.4dvh);
  width: 100%;
  margin-top: min(18px, 2dvh);
}

.ont-exhibit-grid img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.ont-exhibit-caption-strong {
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.ont-exhibit-meta {
  display: flex;
  flex-wrap: wrap;
  gap: min(14px, 1.6dvh) 56px;
  margin-top: min(20px, 2.4dvh);
}

.ont-exhibit-meta-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ont-exhibit-meta-label {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: min(0.68rem, 2.9cqw, 1.7dvh);
  letter-spacing: 0.14em;
  color: var(--colour-accent);
  text-transform: uppercase;
}

.ont-exhibit-meta-value {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: min(0.95rem, 4.2cqw, 2.4dvh);
  color: var(--colour-ink);
}

/* Interviews / Publications — resource link rows */
.ont-reslist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 min(24px, 3cqw);
  margin-top: min(14px, 1.6dvh);
}

.ont-reslist-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: min(16px, 1.8dvh) 0;
  border-top: 1px solid var(--colour-ink-12);
}

.ont-linkrow-title {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: min(1rem, 4.5cqw, 2.5dvh);
  line-height: 1.25;
  color: var(--colour-ink);
}

.ont-linkrow {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: min(0.85rem, 3.7cqw, 2.1dvh);
  color: var(--colour-accent);
  white-space: nowrap;
  display: inline-block;
  transition: transform 0.2s ease, color 0.2s ease;
}

.ont-linkrow:hover { transform: translateX(5px); color: var(--colour-ink); }

/* Quotes */
.ont-quote-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 14px;
  margin-top: min(18px, 2dvh);
}

.ont-quote-card {
  display: flex;
  flex-direction: column;
  background: var(--colour-card);
  border-radius: 16px;
  padding: min(24px, 2.8dvh) min(24px, 5.4cqw);
  box-shadow: 0 6px 18px rgba(58, 63, 67, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ont-quote-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(58, 63, 67, 0.16);
}

.ont-quote-mark {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 44px;
  line-height: 0.6;
  color: var(--colour-accent);
  height: 24px;
}

.ont-quote-text {
  margin-top: 14px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: min(1.15rem, 5.2cqw, 2.6dvh);
  line-height: 1.3;
  color: var(--colour-ink);
}

.ont-quote-author {
  margin-top: 16px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: min(0.85rem, 3.7cqw, 2.1dvh);
  color: #5C646B;
}

/* Monogram + CTA — centred on mobile, left-aligned on desktop */
.ont-mono { text-align: center; }

.ont-mono-img {
  width: min(120px, 30cqw);
  margin: min(20px, 2.4dvh) auto;
}

.ont-mono-img img {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}

.ont-cta-body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: min(0.95rem, 4.4cqw, 2.6dvh);
  line-height: 1.4;
  color: var(--colour-bg);
}

.ont-cta-actions {
  display: flex;
  flex-direction: column;
  gap: min(10px, 1.2dvh);
  margin-top: min(28px, 3.4dvh);
  width: 100%;
}

/* "View The Marks" sits on the accent-coloured CTA section; fill is the page
   (cream) background instead of the standard dusty-blue tone, same contrast
   fix used for the Paradigm CTA button. Hover/active motion + shadow are
   untouched, inherited from .pg-btn. */
.ont-btn-bg { background: var(--colour-bg); }

@media (min-width: 760px) {
  .ont-sec { background-size: 100% 100%; padding-top: min(40px, 5dvh); padding-bottom: min(40px, 5dvh); }
  .ont-sec .pg-col { max-width: min(1200px, calc(100vw - 48px)); }
  .ont-sec .pg-title { font-size: min(16pt, 3dvh); }
  .ont-sec .pg-headline { font-size: min(44px, 5.2dvh); max-width: 900px; }
  .ont-portrait { height: min(460px, 48dvh); }
  .ont-intro-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 min(34px, 3cqw); align-items: start; }
  .ont-intro-col--profile { grid-column: 1; }
  .ont-intro-col--practice { grid-column: 2 / span 2; }
  .ont-practice-paras { display: grid; grid-template-columns: 1fr 1fr; gap: 0 min(28px, 3cqw); align-items: start; }
  .ont-practice-paras .pg-body:nth-child(2) { margin-top: min(16px, 1.8dvh); }
  .ont-eyebrow { font-size: min(12pt, 2.4dvh); }
  .ont-sec .pg-body { font-size: min(12pt, 2.4dvh); line-height: 1.35; max-width: 820px; }
  .ont-cta-body { font-size: min(12pt, 2.4dvh); line-height: 1.35; max-width: 820px; }
  .ont-award-grid { display: flex; flex-direction: row; align-items: stretch; gap: min(14px, 1.6dvh); }
  .ont-award-grid .ont-card { flex: 1 1 0; min-width: 0; }
  .ont-award-grid .ont-card-badge { width: min(72px, 12cqw); height: min(90px, 10.5dvh); }
  .ont-award-grid .ont-card:nth-child(1) .ont-card-badge,
  .ont-award-grid .ont-card:nth-child(3) .ont-card-badge {
    width: min(90px, 15cqw);
    height: min(112.5px, 13.125dvh);
  }
  .ont-award-grid .ont-card:nth-child(2) .ont-card-badge {
    width: min(65.205px, 10.8675cqw);
    height: min(81.50625px, 9.5090625dvh);
  }
  .ont-award-grid .ont-card-title { font-size: min(0.85rem, 3.6cqw, 2.1dvh); line-height: 1.25; }
  .ont-exhibit-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: min(150px, 20dvh); gap: 12px; }
  .ont-exhibit-grid img { height: 100%; object-fit: cover; }
  .ont-exhibit-grid img:nth-child(1) { grid-column: span 3; grid-row: span 2; }
  .ont-exhibit-grid img:nth-child(2) { grid-column: span 3; }
  .ont-exhibit-grid img:nth-child(3) { grid-column: span 3; }
  .ont-exhibit-grid img:nth-child(4) { grid-column: span 2; }
  .ont-exhibit-grid img:nth-child(5) { grid-column: span 2; }
  .ont-exhibit-grid img:nth-child(6) { grid-column: span 2; }
  .ont-reslist { grid-template-columns: repeat(4, 1fr); }
  .ont-linkrow-title { font-size: min(15pt, 2.7dvh); }
  .ont-linkrow { font-size: min(12pt, 2.4dvh); }
  .ont-quote-grid { grid-template-columns: 1fr 1fr; }
  .ont-quote-text { font-size: min(20pt, 3.4dvh); }
  .ont-mono { text-align: left; }
  .ont-mono-img { margin-left: 0; margin-right: 0; }
  .ont-cta-actions { align-items: flex-start; }
  .ont-mono .pg-btn { width: 400px; flex: none; }
}