/* ==========================================================================
   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;
}

/* box-shadow spillover (footer only, see home.css for full rationale):
   paint-only, doesn't add scrollable height, just backstops a possible
   dvh-drift gap below the footer with matching accent colour. */
.ont-sec--accent#the-footer {
  box-shadow: 0 150px 0 0 var(--colour-accent);
}

.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(400px, 50dvh);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* Mobile-only reduction (see the >=760px override below, which restores
     the original spacing on wide screens). */
  margin-bottom: calc(min(20px, 2.4dvh) - 30px);
}

.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;
  /* Card 2's logo is scaled up beyond the box (see nth-child(2) img rule
     below) — clip it to the badge box so it enlarges in place instead of
     spilling into the description text next to it. */
  overflow: hidden;
}

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

/* All 4 badges now share the same box (width AND height, mobile and
   desktop) so every card's description text starts at the same x-position
   — this is what keeps the 4 mobile rows' descriptions left-aligned with
   each other. Individual logo art is instead resized via transform:scale
   on the img itself, within that identical box: card 1 & 3 reduced 0.25x,
   card 2 (Logo Wave) reduced a further 0.3x from its earlier +0.15x
   increase (net 1.15 * 0.7 = 0.805), card 4 (Young Guns) reduced 0.1x. */
.ont-award-grid .ont-card:nth-child(1) .ont-card-badge img,
.ont-award-grid .ont-card:nth-child(3) .ont-card-badge img {
  transform: scale(0.75);
}

.ont-award-grid .ont-card:nth-child(2) .ont-card-badge img {
  transform: scale(0.805);
}

.ont-award-grid .ont-card:nth-child(4) .ont-card-badge img {
  transform: scale(0.9);
}

.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-sakmandala-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-top: min(18px, 2dvh);
}

.ont-sakmandala-footer {
  margin-top: 2em;
}

.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-flex;
  align-items: center;
  gap: 5px;
  transition: transform 0.2s ease, color 0.2s ease;
}

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

.ont-ext-icon { flex-shrink: 0; }

/* 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-bottom: min(40px, 5dvh); /* padding-top intentionally NOT overridden here (v29) -- keeps the base min(56px, 8dvh) so this page's title sits at the same vertical position as Thoughts/Cookie Policy, which never had this reduction */ }
  .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; }
  /* Desktop reverted back to its pre-increase size per user correction; the
     mobile-only +25% increase above (min(400px,50dvh)) stays mobile-only. */
  .ont-portrait { height: min(485px, 48dvh); position: relative; top: 10px; margin-bottom: min(20px, 2.4dvh); }
  .ont-intro-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 min(34px, 3cqw); align-items: start; position: relative; top: 25px; }
  .ont-intro-col--profile { grid-column: 1; }
  .ont-intro-col--practice { grid-column: 2 / span 2; position: relative; top: -20px; left: -55px; }
  /* Tablet-portrait only: the -55px left pull-in above sits the content too
     close to the image at this narrower width, so ease it back by 25px
     (to -30px) just for this band, adding 25px of visual space between the
     image and the content — desktop (>900px) keeps the full -55px pull-in
     unchanged. */
  @media (min-width: 760px) and (max-width: 900px) and (orientation: portrait) {
    .ont-intro-col--practice { left: -30px; }
  }
  /* Single rich-text field now (admin/pages/edit.php "Practice description"),
     so there's no longer a fixed pair of paragraph elements to place in two
     grid columns — CSS multi-column flows however many <p> tags the admin
     writes into a balanced two-column layout instead, preserving the same
     visual result. */
  .ont-practice-paras { column-count: 2; column-gap: min(28px, 3cqw); }
  .ont-practice-paras p { break-inside: avoid; }
  .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; }
  /* Same box for all 4 badges on desktop too — see the mobile rule's
     comment above; per-card sizing now happens via the shared img
     transform:scale rules, not the box dimensions. */
  .ont-award-grid .ont-card-badge { width: min(72px, 12cqw); height: min(90px, 10.5dvh); }
  /* Wide-screens-only logo size increase: 1st & 3rd logos +0.15x from their
     base 0.75 scale (0.75 * 1.15 = 0.8625), 2nd logo +0.1x from its base
     0.805 scale (0.805 * 1.1 = 0.8855). Card 4 untouched. Mobile keeps the
     base scale values defined earlier in this file. */
  .ont-award-grid .ont-card:nth-child(1) .ont-card-badge img,
  .ont-award-grid .ont-card:nth-child(3) .ont-card-badge img {
    transform: scale(0.8625);
  }
  .ont-award-grid .ont-card:nth-child(2) .ont-card-badge img {
    transform: scale(0.8855);
  }
  .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; grid-row: span 2; }
  .ont-exhibit-grid img:nth-child(3) { grid-column: span 2; }
  .ont-exhibit-grid img:nth-child(4) { grid-column: span 2; }
  .ont-exhibit-grid img:nth-child(5) { 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; }
}

/* Mobile-only "< Home" back-link — wide screens use the disabled self-link
   in the nav bar instead, so this is hidden there. */
@media (min-width: 760px) {
  .ont-back { display: none; }
}