@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/eb-garamond-latin.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/eb-garamond-latin-italic.woff2") format("woff2");
}

:root {
  --paper: #111111;
  --band: #111111;
  --media: #111111;
  --notice: #111111;
  --ink: #e7dfd2;
  --muted: #b5afa4;
  --line: #33312e;
  --portfolio-type: "EB Garamond", Garamond, "Palatino Linotype", "Book Antiqua", Georgia, serif;
}

html, body, html:has(.portrait-viewer[open]) { background: var(--paper); }
body { font-family: var(--portfolio-type); font-size: 18px; font-weight: 400; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4 { font-family: var(--portfolio-type); font-weight: 400; }
h1 { letter-spacing: .005em; }
.brand, .masthead h1 { font-family: var(--portfolio-type); font-weight: 500; }
p { font-size: 18px; line-height: 1.6; }
.project-subtitle { font-size: 19px; font-style: italic; }
.disciplines, .home-link { font-size: 15px; }
.navigation a, .navigation button { font-size: 16px; font-weight: 400; }
.navigation [aria-current="page"] { font-weight: 500; }
.eyebrow { font-size: 13px; font-weight: 400; letter-spacing: .065em; }
.notice { font-size: 14px; }
.footer p, .footer a, footer p, footer a { font-size: 14px; }
figcaption { font-size: 14px; }
figcaption > span { font-weight: 500; }
dt { font-size: 14px; }
dd { font-size: 17px; }
.concept-project-meta dt { font-size: 12px; }
.concept-project-meta dd, .concept-project-meta p { font-size: 14px; }
.concept-project-link[aria-current="true"], .concept-tabs button { background: var(--paper); }
.concept-tabs button { font-size: 16px; }
.concept-tabs button[aria-selected="true"] { font-weight: 500; }
.concept-process { margin-top: 36px; }
.concept-stage-copy p, .tech-project-copy p, .terrain-copy p, .concept-caption p,
.production-detail p, .project-credit p, .experience-points li, .background-grid p { font-size: 18px; }
.tech-project-copy .eyebrow { font-size: 13px; }
.concept-caption h3, .experience-entry h3, .background-grid h3 { font-weight: 500; }
.experience-meta p, .experience-role, .project-credit h4 span, .tech-project-tools { font-size: 15px; }
.experience-meta .experience-dates, .credits dt { font-weight: 500; }
.text-link, .tech-action, .terrain-back { font-size: 16px; }
.terrain-facts dd, .project-facts dd, .credits dd { font-size: 17px; }
.terrain-steps p { font-size: 17px; }
.terrain-channel-table { font-size: 16px; }
.terrain-channel-table th { font-size: 14px; }
.terrain-mask-controls button { font-size: 14px; }
.terrain-code-details > summary { font-weight: 500; font-size: 17px; }

.concept-hero .image-link, .concept-process-panel .image-link,
.tech-project-cover, .terrain-result .image-link, .terrain-overview .image-link,
.terrain-example video, .terrain-mask-demo.is-enhanced .terrain-mask-frames,
.terrain-packed-mask .image-link, .terrain-code-grid .image-link,
.shader-demo video, .lightbox { background: var(--paper); }
.lightbox { color: var(--ink); }
.lightbox::backdrop, .portrait-viewer::backdrop { background: #111111f2; }
.lightbox p { color: var(--muted); font-size: 16px; }
.lightbox-close, .expand-icon { background: #111111e8; color: var(--ink); border-color: var(--muted); }
.lightbox-close:hover, .image-link:hover .expand-icon { background: var(--paper); color: var(--accent); border-color: var(--accent); }
.portrait-figure figcaption { color: var(--ink); font-weight: 400; }
.portrait-greeting { background: var(--paper); color: var(--ink); border-color: var(--accent); font-weight: 500; box-shadow: none; }
code, pre, kbd, samp { font-family: "Cascadia Code", Consolas, monospace; }

@media (max-width: 900px) {
  .navigation a, .navigation button { font-size: 14px; }
}
@media (max-width: 700px) {
  .navigation a, .navigation button { font-size: 14px; }
  .disciplines { font-size: 14px; }
  .project-subtitle { font-size: 18px; }
  .concept-tabs button { font-size: 15px; }
  .terrain-intro > p { font-size: 18px; }
  .concept-process { margin-top: 28px; }
}