/* Personal review 04: the person and a reading choice share the opening. */
.personal-page .personal-hero {
  min-height: 0;
  max-width: 1584px;
  margin: auto;
  padding: 148px var(--pad) 64px;
  grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  grid-template-areas: "heading portrait" "copy portrait" "note portrait";
  gap: 28px 6%;
  align-items: start;
}
.personal-heading { grid-area: heading; }
.personal-page .personal-hero .eyebrow { margin-bottom: 24px; max-width: 420px; line-height: 1.6; }
.personal-page .personal-hero h1 { font-size: clamp(58px,6.7vw,102px); line-height: .98; }
.personal-page .personal-copy { grid-area: copy; margin: 0; display: block; }
.personal-page .personal-copy p { font-size: 17px; max-width: 510px; margin: 0 0 22px; }
.personal-page .personal-actions { gap: 12px 24px; }
.personal-page .personal-actions .button { min-height: 52px; }
.personal-page .personal-portrait {
  grid-area: portrait;
  align-self: stretch;
  width: 100%;
  min-height: 520px;
  aspect-ratio: auto;
  order: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
  background: transparent;
  border: 0;
  isolation: auto;
}
.personal-page .personal-portrait::after { display: none; }
.personal-page .personal-portrait img { position: static; flex: 1; min-height: 0; height: 460px; object-fit: cover; object-position: center 37%; border-radius: 2px; }
.personal-page .personal-portrait figcaption { position: static; display: block; padding-top: 15px; font: 500 12px/1.6 var(--sans); letter-spacing: 0; text-transform: none; }
.personal-page .personal-portrait figcaption span { display: block; }
.personal-page .personal-portrait figcaption span:first-child { font-weight: 650; font-size: 14px; }
.personal-page .personal-portrait figcaption span:last-child { text-align: left; color: var(--muted); }
.latest-note { grid-area: note; display: block; padding: 20px 0 0; border-top: 1px solid var(--line); }
.latest-note .kicker { color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.latest-note h2 { font: 400 clamp(24px,2.3vw,34px)/1.15 var(--serif); letter-spacing: -.02em; margin: 12px 0; }
.latest-note-action { font-size: 13px; font-weight: 650; display: inline-flex; gap: 16px; padding-block: 6px; }
.latest-note:hover h2 { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.personal-page #thinking { padding-top: 64px; }
.personal-page #thinking .section-head { margin-bottom: 36px; }
.personal-page .section-head h2 { font-size: clamp(43px,5.2vw,76px); }
.personal-page .reading-item .when-open { display: none; }
.personal-page .reading-item[open] .when-open { display: inline; }
.personal-page .reading-item[open] .when-closed { display: none; }
.personal-page .article-meta { font: 600 12px/1.6 var(--mono); color: var(--muted); padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.personal-page .history-item { grid-template-columns: 100px minmax(0,1fr); }
.personal-page .venture-panel { min-height: 450px; padding: clamp(30px,5vw,66px); }
.personal-page .venture-panel h3 { font-size: clamp(48px,6vw,88px); margin: 45px 0 26px; }
.personal-page .venture-panel .company-wordmark { margin: 58px 0 40px; }
.personal-page .company-wordmark img { width: min(300px,100%); height: auto; }
.personal-page .venture-panel p { font-size: 17px; }
.personal-page .venture-tablist button small { font-size: 11px; letter-spacing: .06em; }
/* Let enlarged text wrap within the reading and business columns. */
.personal-page .history-title { min-width: 0; overflow-wrap: anywhere; }
.personal-page .venture-tablist button { overflow-wrap: anywhere; }
/* Large text must contribute a breakable minimum width in WebKit grids too. */
.personal-page { overflow-wrap: anywhere; }
.personal-page .display { overflow-wrap: anywhere; }
/* Navigation labels keep their normal word boundaries and intrinsic width. */
.personal-page .header { overflow-wrap: normal; }
@media(max-width:950px) {
  .personal-page .personal-hero { padding-top: 145px; gap: 24px 5%; grid-template-columns: minmax(0,1fr) minmax(0,.8fr); }
  .personal-page .personal-hero h1 { font-size: clamp(52px,7vw,72px); }
  .personal-page .personal-portrait { min-height: 460px; }
  .personal-page .personal-portrait img { height: 380px; }
  .personal-page .personal-copy p { font-size: 16px; }
  .personal-page .personal-actions { display: block; }
  .personal-page .personal-actions .text-link { margin-top: 8px; }
}
@media(max-width:650px) {
  .personal-page .personal-hero { padding-top: 132px; padding-bottom: 44px; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); grid-template-areas: "heading heading" "portrait copy" "note note"; gap: 24px 20px; }
  .personal-page .personal-hero .eyebrow { font-size: 10px; margin-bottom: 18px; letter-spacing: .06em; }
  .personal-page .personal-hero h1 { font-size: clamp(37px,10.8vw,64px); line-height: 1; }
  .personal-page .personal-portrait { min-height: 0; align-self: start; }
  .personal-page .personal-portrait img { flex: none; width: 100%; height: auto; aspect-ratio: 3/4; object-position: center 38%; }
  .personal-page .personal-portrait figcaption { padding-top: 10px; font-size: 11px; line-height: 1.45; }
  .personal-page .personal-portrait figcaption span:first-child { font-size: 12px; }
  .personal-page .personal-copy p { font-size: 14px; line-height: 1.55; margin-bottom: 14px; }
  .personal-page .personal-actions .button { font-size: 12px; padding: 10px 14px; min-height: 48px; gap: 10px; line-height: 1.4; border-radius: 4px; width: 100%; }
  .personal-page .personal-actions .text-link { font-size: 12px; line-height: 1.4; min-height: 44px; }
  .latest-note { padding-top: 19px; }
  .latest-note h2 { font-size: 26px; }
  .latest-note h2 br { display: none; }
  .personal-page #thinking { padding-top: 46px; }
  .personal-page .history-item { grid-template-columns: 66px minmax(0,1fr); gap: 18px; }
  .personal-page .venture-panel { min-height: 390px; }
  .personal-page .venture-tablist { display: block; overflow: visible; }
  .personal-page .venture-tablist button { min-width: 0; }
  .personal-page .venture-panel p { font-size: 16px; }
}

/* Production reading context and progressive enhancement. */
.editorial-context{font-size:14px;color:var(--muted);margin:0 0 32px}
.footer-links a{display:inline-flex;align-items:center;min-height:44px}
html:not(.js) .venture-panel[hidden]{display:block}
@media(max-width:360px){
  .personal-page .header-inner{flex-wrap:wrap}
  .personal-page .mobile-actions{margin-left:auto}
  .personal-page .mobile-menu-panel{max-height:calc(100dvh - 140px)}
  .wordmark strong{font-size:16px}
  .wordmark small{font-size:7px;letter-spacing:.12em}
  .mobile-actions{gap:6px}
  .personal-page .personal-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"heading" "portrait" "copy" "note";gap:20px}
  .personal-page p{overflow-wrap:anywhere}
}

/* Apple-inspired interaction and reading polish, approved November 3, 2026.
   Content stays visible before observers run; original artwork and identity remain intact. */
.personal-page {
  --polish-fast: 100ms;
  --polish-settle: 200ms;
  --polish-ease: cubic-bezier(.2, .75, .25, 1);
}

.personal-page .header.is-scrolled {
  background: var(--header-bg);
  backdrop-filter: none;
}

.personal-page :is(.button, .nav-cta, .mobile-menu summary, .venture-tablist button) {
  transition: background-color var(--polish-fast) ease-out,
    color var(--polish-fast) ease-out,
    border-color var(--polish-fast) ease-out,
    transform var(--polish-fast) ease-out;
}

/* Feedback starts on press; native click, keyboard and cancellation stay intact. */
.personal-page :is(.button, .nav-cta, .mobile-menu summary, .venture-tablist button):active {
  transform: translateY(1px);
  transition-duration: 60ms;
}

.personal-page .button.solid:active {
  background: color-mix(in srgb, var(--button-bg) 90%, var(--button-fg));
  border-color: color-mix(in srgb, var(--button-bg) 90%, var(--button-fg));
}

.personal-page :is(.text-link, .mobile-primary, .latest-note-action) {
  text-underline-offset: .22em;
  transition: color var(--polish-fast) ease-out, opacity var(--polish-fast) ease-out;
}

.personal-page :is(.text-link, .mobile-primary, .latest-note-action):active {
  opacity: .74;
}

.personal-page .reading-item summary {
  border-inline-start: 3px solid transparent;
  border-radius: 3px;
  padding: 12px 16px;
  transition: background-color 120ms ease-out, border-color 120ms ease-out;
}

.personal-page .reading-item[open] summary {
  background: color-mix(in srgb, currentColor 5%, transparent);
  border-inline-start-color: currentColor;
}

.personal-page .reading-item summary:active {
  background: color-mix(in srgb, currentColor 9%, transparent);
}

.personal-page .reading-body {
  padding-inline: 19px;
}

.personal-page :is(.eyebrow, .kicker, .latest-note .kicker) {
  font-size: 11px;
  letter-spacing: .09em;
}

@media (hover: hover) and (pointer: fine) {
  .personal-page .button:hover:not(:active) {
    transform: none;
    background: color-mix(in srgb, var(--button-bg) 96%, var(--button-fg));
  }
  .personal-page .reading-item summary:hover {
    background: color-mix(in srgb, currentColor 4%, transparent);
  }
}

@media (max-width: 650px) {
  .personal-page .personal-copy p {
    font-size: 15px;
    line-height: 1.62;
  }
  .personal-page .reading-item summary { padding-inline: 12px; }
  .personal-page .reading-body { padding-inline: 15px; }
}

/* An observer already sets is-visible in the production script. Content remains
   visible if that observer never runs; there is no first-paint hidden state. */
@media (prefers-reduced-motion: no-preference) {
  .js .personal-page [data-reveal] {
    transition-duration: var(--polish-settle);
    transition-timing-function: var(--polish-ease);
  }
  .js .personal-page [data-reveal].is-visible,
  .personal-page .reading-item[open] .reading-body {
    animation: tlc-personal-arrive var(--polish-settle) var(--polish-ease) both;
  }
}

@keyframes tlc-personal-arrive {
  from { opacity: .76; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .personal-page *, .personal-page *::before, .personal-page *::after {
    animation: none !important;
    transition: none !important;
  }
  .personal-page [data-reveal],
  .personal-page :is(.button, .nav-cta, .mobile-menu summary, .venture-tablist button):active {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .personal-page :is(.header, .header.is-scrolled, .mobile-menu-panel) {
    background: var(--header-bg);
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .personal-page :is(.header, .header.is-scrolled, .mobile-menu-panel) {
    background: var(--header-bg);
    backdrop-filter: none;
  }
  .personal-page .header { border-bottom-color: currentColor; }
  .personal-page :is(.eyebrow, .kicker, .latest-note .kicker, .wordmark small) {
    color: inherit;
    opacity: 1;
  }
  .personal-page .reading-item[open] summary { border-inline-start-width: 3px; }
  .personal-page :focus-visible { outline-width: 4px; }
}