/* Keep this source in CSS syntax; build-assets.php includes it before style.scss. */
@font-face {
  font-family: "Fragment Mono";
  src: url("../fonts/fragment-mono/FragmentMono-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Die Grotesk A";
  src: url("../fonts/die-grotesk/die-grotesk-a-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Die Grotesk B";
  src: url("../fonts/die-grotesk/die-grotesk-b-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Die Grotesk C";
  src: url("../fonts/die-grotesk/die-grotesk-c-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Die Grotesk D";
  src: url("../fonts/die-grotesk/die-grotesk-d-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}


/* Apart from the font include, this SCSS uses CSS syntax. */
:root {
  --ink: #121212;
  --secondary: #525252;
  --rule: #c1c1c1;
  --paper: #eaeaea;
  --gutter: 16px;
  --edge: 24px;
  --font: "Die Grotesk A", Arial, Helvetica, sans-serif;
  --font-title: "Fragment Mono", ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
*, *::before, *::after { box-sizing: border-box; }
::selection { background: #ff9000; color: var(--ink); }
html { font: 400 12px/1.2 var(--font); color: var(--ink); background: white; -webkit-font-smoothing: antialiased; text-wrap: pretty; }
body { margin: 0; min-height: 100svh; padding: 20px var(--edge) 150px; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(to bottom, var(--paper), #fff); pointer-events: none; transform-origin: top center; animation: background-breathe 16s ease-in-out infinite; }
@keyframes background-breathe {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.50); }
}
h1, h2, h3, h4, h5, h6, p, ul, figure { margin: 0; padding: 0; font: inherit; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
:where(p, .short-bio, .long-bio, .article-text, figcaption) a { text-decoration-color: var(--rule); text-decoration-thickness: 1px; text-underline-offset: 2px; }
:where(p, .short-bio, .long-bio, .article-text, figcaption) a:focus-visible { text-decoration-line: underline; }
button { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.venture-name, .press-name, .thought-name { font-family: var(--font-title); text-transform: uppercase; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
:where(p) + p { margin-top: 1.2em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: 12px; left: 24px; padding: 8px; background: white; z-index: 20; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.site-header { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gutter); min-height: 42px; align-items: start; }
.site-name { grid-column: 1; margin-top: 4px; width: max-content; }
.contact-links { grid-column: 3; display: flex; flex-direction: column; align-items: start; }
.copyright { grid-column: 5; margin-top: 4px; color: var(--rule); }
.profile-layout { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: var(--bio-height, 182px) auto; gap: 72px var(--gutter); margin-top: 106px; align-items: start; }
.short-bio { grid-column: 2; grid-row: 1; padding-right: 16px; }
.long-bio { grid-column: 4 / span 2; grid-row: 1; }
.portfolio-panel { grid-column: 1 / span 2; grid-row: 2; min-width: 0; }
.right-content { grid-column: 3 / span 3; grid-row: 2; min-width: 0; outline: none; }
.section-heading { margin-bottom: 16px; }
.panel-switch { cursor: default; }
.press-section { margin-top: 52px; }
.index-table { border-top: 1px solid var(--rule); }
.index-row { display: grid; align-items: start; gap: 16px; padding: 4px 2px; }
.index-table .index-row { border-bottom: 1px solid var(--rule); }
.venture-row, .press-row { grid-template-columns: 18ch minmax(0, 1fr) max-content; }
.thought-row, .article-summary { grid-template-columns: minmax(120px, 193px) minmax(0, 1fr) max-content; }
.row-description, .row-meta { color: var(--secondary); }
.row-meta { white-space: nowrap; text-align: right; }
.date-short { display: none; }
.excerpt-short, .title-short { display: none; }
.concealed-name { width: 97px; white-space: nowrap; }
.concealed-symbol { display: inline-block; width: 1ch; text-align: center; }
.concealed-row { width: 100%; }
.venture-status { display: grid; }
.established-status { display: grid; align-items: center; }
.established-status > * { grid-area: 1 / 1; transition: opacity 180ms ease; }
.status-launch { width: 1em; height: 1em; justify-self: end; opacity: 0; }
.venture-row:focus-within .status-established, .press-row:focus-within .status-established { opacity: 0; }
.venture-row:focus-within .status-launch, .press-row:focus-within .status-launch { opacity: 1; }
.venture-status > span { grid-area: 1 / 1; transition: opacity 180ms ease, transform 180ms ease; }
.status-soon { opacity: 0; transform: translateY(3px); }
.concealed-row.is-revealed .status-current { opacity: 0; transform: translateY(-3px); }
.concealed-row.is-revealed .status-soon { opacity: 1; transform: translateY(0); }
.is-article .right-content { grid-row: 1 / span 2; }
.article-summary { border-top: 1px solid var(--rule); }
.article-body { display: flex; flex-direction: column; align-items: end; gap: 52px; margin-top: 52px; }
.article-block--body, .article-block--small { width: calc((100% * 2 - var(--gutter)) / 3); max-width: 546px; }
.article-block--wide { width: calc((100% - var(--gutter)) * 5 / 6 + var(--gutter) / 2); }
.article-block--full { width: 100%; }
.article-image :is(img, video, iframe) { display: block; width: 100%; height: auto; aspect-ratio: var(--image-ratio); object-fit: cover; }
.article-image iframe { border: 0; }
.article-block--small :is(img, video, iframe) { width: calc((100% - var(--gutter)) / 2); max-width: 264px; }
figcaption { color: var(--secondary); margin-top: 2px; }
.article-footer { margin-top: 52px; text-align: right; }
.transition-row { position: fixed; z-index: 10; pointer-events: none; transform-origin: top left; margin: 0; border-top: 1px solid var(--rule); }
@media (min-width: 761px) {
  body.is-article { height: 100svh; overflow: hidden; padding-bottom: 20px; }
  .is-article .thought-article { display: flex; flex-direction: column; height: calc(100svh - 188px); }
  .is-article .article-summary { flex: 0 0 auto; position: relative; z-index: 1; }
  .is-article .article-scroll { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; padding-bottom: 130px; }
}
@media (hover: hover) {
  :where(p, .short-bio, .long-bio, .article-text, figcaption) a:hover { text-decoration-line: underline; }
  .venture-row:hover .status-established, .press-row:hover .status-established { opacity: 0; }
  .venture-row:hover .status-launch, .press-row:hover .status-launch { opacity: 1; }
  a.venture-row:hover .venture-name, a.press-row:hover .press-name { color: var(--secondary); }
  .contact-links a:hover, .site-name:hover, .venture-name:hover, .press-name:hover, .article-footer a:hover { color: var(--secondary); }
  .thought-row:hover .thought-name { color: var(--secondary); }
}
@media (min-width: 761px) and (max-width: 1150px) {
  .venture-row, .press-row { grid-template-columns: 18ch minmax(0, 1fr) max-content; gap: 8px; }
  .thought-row, .article-summary { grid-template-columns: minmax(85px, 23%) minmax(0, 1fr) max-content; gap: 8px; }
  .concealed-name { width: 82px; }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}