/* Separate typography comparison; the original preview keeps its own styles. */
@font-face {
  font-family: 'Libre Caslon Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/libre-caslon-condensed.ttf') format('truetype');
}
h1, .footer-quote, .card-heading h2 {
  font-family: 'Libre Caslon Condensed', Georgia, serif;
  font-weight: 400;
  letter-spacing: -.012em;
}
h1 { font-size: clamp(28px, 2.65vw, 51px); line-height: 1.16; }
.intro-line { display: block; white-space: normal; }
.footer-quote { font-size: clamp(29px, 2.85vw, 55px); line-height: 1.12; display: flex; flex-direction: column; white-space: normal; }
.footer-line { display: flex; align-items: baseline; gap: clamp(14px, 1.25vw, 24px); }
.quote-copy { display: inline-block; flex: 0 0 auto; white-space: nowrap; transition: transform 280ms ease, filter 280ms ease; }
.quote-copy strong { font-weight: inherit; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: left 100%; background-size: 0 .055em; transition: background-size 340ms ease; }
.footer-quote:hover .quote-copy, .footer-quote:focus-within .quote-copy { transform: translateY(-2px); filter: brightness(1.08); }
.footer-quote:hover strong, .footer-quote:focus-within strong { background-size: 100% .055em; }
.footer-quote .footer-contact { display: inline-flex; flex-direction: row; align-items: baseline; gap: clamp(22px, 1.7vw, 32px); padding: 0; white-space: nowrap; }
.footer-quote .resume-control { transform: none; }
.card-heading h2 { font-size: clamp(18px, 1.22vw, 23px); }
.site-links { font-size: clamp(16px, 1.18vw, 23px); }
.project-index { font-size: clamp(15px, 1.05vw, 20px); }
.filters { font-size: clamp(14px, 1.06vw, 20px); }
.credentials { font-size: clamp(12px, .9vw, 17px); }
.footer-contact, .back-to-top { font-size: clamp(16px, 1.18vw, 23px); }
.footer-base { font-size: clamp(11px, .82vw, 15px); }
.hero-phrase { font-size: clamp(21px, 1.95vw, 37px); }
.footer-phrase { font-size: clamp(17px, 1.3vw, 25px); }
.bracket, .footer-brace { font-size: clamp(22px, 1.58vw, 30px); }
.card-arrow { font-size: 20px; }
.card-subtitle { font-size: clamp(14px, .9vw, 16px); }
.site-header { position: sticky; top: 0; z-index: 5; height: var(--nav-height); background: var(--page); justify-content: space-between; gap: 12px; }
.site-header .site-links { width: auto; min-width: 0; max-width: none; justify-content: flex-end; gap: clamp(24px, 5vw, 96px); }
.nav-brand { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: clamp(144px, 14vw, 210px); min-height: 44px; font: 400 clamp(22px, 1.58vw, 30px)/1 var(--mono); white-space: nowrap; }
.nav-brand-brace { paint-order: stroke fill; -webkit-text-stroke: 6px white; }
.nav-brand-name { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: none; overflow: visible; opacity: 0; padding: 7px 0; font: 400 clamp(24px, 1.9vw, 34px)/1.1 'Libre Caslon Condensed', Georgia, serif; letter-spacing: -.012em; transition: opacity 180ms ease; }
.nav-brand-name > span { display: block; padding: 0 7px; paint-order: stroke fill; -webkit-text-stroke: .22em var(--accent); }
.nav-brand.is-open .nav-brand-name { opacity: 1; }
.smooth-brackets .nav-brand .smooth-brace { left: 22px; transition: transform 560ms cubic-bezier(.22,.8,.22,1), left 560ms cubic-bezier(.22,.8,.22,1); }
.smooth-brackets .nav-brand.is-open .smooth-brace { left: 50%; }
/* The name opens into the header from its original left position, retaining the same glyphs. */
html[data-nav-surface] .site-header { background: transparent; }
html[data-nav-surface] .site-header::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); z-index: -1; pointer-events: none; }
html[data-nav-surface='fade'] .site-header::before { bottom: -22px; background: linear-gradient(to bottom, rgb(242 242 242 / .99) 0%, rgb(242 242 242 / .96) 44%, rgb(242 242 242 / .8) 65%, rgb(242 242 242 / .4) 84%, rgb(242 242 242 / 0) 100%); }
html[data-nav-surface='glass'] .site-header::before,
html[data-nav-surface='feathered'] .site-header::before { background: rgb(242 242 242 / .96); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-nav-surface='glass'] .site-header::before,
  html[data-nav-surface='feathered'] .site-header::before { background: rgb(242 242 242 / .76); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  html[data-nav-surface='feathered'] .site-header::before { bottom: -24px; -webkit-mask-image: linear-gradient(to bottom, black 0%, black 58%, transparent 100%); mask-image: linear-gradient(to bottom, black 0%, black 58%, transparent 100%); }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-nav-surface] .site-header::before { bottom: 0; background: var(--page); -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none; }
}
@media (forced-colors: active) {
  html[data-nav-surface] .site-header { background: Canvas; }
  html[data-nav-surface] .site-header::before { display: none; }
}
.smooth-brackets .bracket:hover { transform: none; }
.smooth-brackets .bracket, .smooth-brackets .footer-brace { overflow: visible; }
.smooth-brackets .smooth-brace { position: absolute; left: 50%; top: 50%; display: block; width: max-content; font: inherit; line-height: 1; pointer-events: none; paint-order: stroke fill; -webkit-text-stroke: 6px white; transition: transform 560ms cubic-bezier(.22,.8,.22,1); }
.smooth-brackets .smooth-brace-left { transform: translate(calc(-100% - var(--bracket-spread, 0px) / 2), -50%); }
.smooth-brackets .smooth-brace-right { transform: translate(calc(var(--bracket-spread, 0px) / 2), -50%); }
.smooth-brackets .smooth-phrase { padding: 0; display: block; opacity: 1; clip-path: none; transform: translate(-50%, -50%); transition: none; }
.smooth-brackets .smooth-phrase .phrase-copy { display: block; position: static; margin: 0; transform: none; }
.smooth-brackets .bracket:focus-visible, .smooth-brackets .footer-brace:focus-visible { outline: none; }
.smooth-brackets .bracket-field:focus-within .smooth-phrase.is-visible, .smooth-brackets .footer-bracket-field:focus-within .smooth-phrase.is-visible { outline: 2px solid var(--ink); outline-offset: 7px; }
.hero .bracket-2 { left: 81%; }
.hero .bracket-3 { right: 14%; }
.project-sidebar { top: var(--nav-height); }
.work { scroll-margin-top: var(--nav-height); }
.project-card { scroll-margin-top: calc(var(--nav-height) + var(--work-filter-height) + 24px); }
.hero { min-height: clamp(250px, 16vw, 310px); padding-top: clamp(30px, 2.2vw, 42px); padding-bottom: clamp(54px, 4vw, 76px); }
.footer-main { grid-template-columns: minmax(0, 65%) minmax(0, 35%); min-height: clamp(270px, 17.5vw, 336px); padding-top: clamp(32px, 2.65vw, 51px); }
:root { --section-gap: clamp(40px, 3.5vw, 68px); --nav-height: clamp(68px, 4.8vw, 92px); --work-filter-height: 0px; --bracket-anchor: source; --rule: var(--ink); }
.footer-brace-0 { left: 40%; }
.footer-brace-1 { left: 47%; bottom: 90px; }
@media (max-width: 1200px) {
  h1 { font-size: clamp(28px, 2.9vw, 35px); }
  .footer-quote { font-size: clamp(29px, 3.1vw, 37px); }
  .footer-nav { font-size: 16px; }
  .hero { min-height: 260px; }
  .footer-main { grid-template-columns: minmax(0, 68%) minmax(0, 32%); }
}
@media (max-width: 850px) {
  :root { --work-filter-height: 66px; }
  h1 { font-size: clamp(28px, 3.7vw, 32px); }
  .footer-quote { font-size: 33px; }
  .site-links { font-size: 17px; }
  .hero { min-height: 300px; padding-top: 28px; padding-bottom: 120px; }
  .footer-main { grid-template-columns: 1fr; min-height: 360px; align-content: start; }
  .footer-nav { max-width: 390px; }
  .hero-phrase { font-size: 23px; }
  .footer-contact, .back-to-top { font-size: 16px; }
  .footer-brace-0 { left: 38%; bottom: 70px; }
  .footer-brace-1 { left: 49%; bottom: 100px; }
  .hero .bracket-0 { left: 24%; }
  .hero .bracket-1 { left: 45%; }
  .hero .bracket-2 { left: 65%; }
  .hero .bracket-3 { right: 20%; }
}
@media (max-width: 560px) {
  h1 { font-size: clamp(27px, 7.2vw, 34px); }
  .footer-quote { font-size: clamp(28px, 7.4vw, 36px); }
  .footer-quote { gap: 8px; }
  .footer-line:first-child { display: contents; }
  .footer-line:first-child .quote-copy { order: 0; }
  .footer-line:last-child { order: 1; }
  .footer-contact-inline { order: 2; margin-top: 8px; }
  .footer-quote .footer-contact { gap: 24px; }
  .card-heading h2 { font-size: 20px; }
  .hero { min-height: 360px; }
  .footer-main { min-height: 470px; padding-bottom: 230px; }
  .footer-brace-0 { bottom: 90px; }
  .footer-brace-0 { left: 35%; }
  .footer-brace-1 { left: 49%; bottom: 150px; }
  .hero-phrase { font-size: clamp(19px, 5vw, 23px); }
  .nav-brand-name { font-size: 22px; }
  .site-header .site-links { gap: 18px; }
}
@media (max-width: 350px) {
  .nav-brand { width: 126px; }
  .site-header .site-links { gap: 12px; font-size: 15px; }
}
@media (max-width: 390px) {
  .nav-brand-name { font-size: 20px; }
  .site-header .site-links { gap: 14px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-quote:hover .quote-copy, .footer-quote:focus-within .quote-copy { transform: none; filter: none; }
}