/* Editorial grid: 8px spacing unit, consistent gutters, restrained motion. */
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/BarlowCondensed-Regular.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/BarlowCondensed-SemiBold.ttf') format('truetype'); font-style: normal; font-weight: 500 600; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/BarlowCondensed-Bold.ttf') format('truetype'); font-style: normal; font-weight: 700; font-display: swap; }
:root {
  --font-heading: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --rail-width: 256px;
  --page-gutter: clamp(24px, 4vw, 64px);
  --grid-gutter: 32px;
  --text-color: #222;
  --text-light: #666;
}
html { scroll-padding-top: 0; scrollbar-gutter: stable; }
body { font-size: 20px; line-height: 1.4; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; letter-spacing: 0; }
p { margin: 0 0 24px; }
.sidebar {
    inset: 0 auto 0 0;
    width: var(--rail-width);
    height: 100dvh;
    padding-right: 24px;
    padding-left: 4vh;
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 4vh, 40px);
    overflow: visible;
    box-shadow: none;
    padding-top: 22px;
}
.sidebar-logo { flex: 0 0 auto; margin: 0; }
.fullname { font-family: var(--font-heading); font-size: 40px; line-height: 1; margin: 0 0 16px; letter-spacing: .01em; }
.tagline { font-size: 17px; line-height: 24px; color: #aaa; }
.nav-menu { flex: 0 1 auto; min-height: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.nav-menu li { position: relative; margin: 0; }
.nav-menu a { padding: 4px 0; font-size: 20px; line-height: 24px; letter-spacing: .04em; transition: color 160ms ease; }
.nav-menu a:hover { transform: none; }
.submenu { margin: 8px 0 0; padding: 0; border: 0; max-height: 0; }
.has-submenu.active .submenu { max-height: 320px; }
.submenu li { margin: 0; opacity: 1; transform: none; transition: none; }
.submenu a { font-family: var(--font-secondary); font-size: 18px; line-height: 24px; padding: 4px 0 4px 16px; color: #ccc; opacity: 1; letter-spacing: 0; }
.submenu a.active { color: #fff; font-weight: 400; }
.submenu a.active::before { content: ''; position: absolute; left: 0; top: 12px; width: 4px; height: 8px; background: var(--primary-color); }
.section-active-indicator { display: none; }
.social-links { margin: auto 0 0; justify-content: flex-start; flex: 0 0 auto; gap: 16px; }
.social-link { border-radius: 0; background: transparent; }
.social-link[href="#"] { display: none; }
.main-content {
  margin-left: var(--rail-width);
  width: calc(100% - var(--rail-width));
  max-width: 1600px;
  min-width: 0;
  padding: 48px var(--page-gutter) 64px;
}
.gallery-header, .category-header, .carousel-placeholder, .section, .site-footer { padding-right: 0; }
.gallery-header {
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
    /* [disabled]margin-bottom: 64px; */
}
.gallery-header h2 {
    font-size: 48px;
    line-height: 48px;
    /* [disabled]margin-top: 25px; */
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 24px;
}
.gallery-intro { max-width: 64ch; font-size: 22px; line-height: 32px; margin: 0; color: #555; }
.gallery-grid { gap: 64px; }
.category-section { margin: 0; }
.category-header { margin: 0 0 32px; }
.category-header h2, .section > h2 {
    font-size: 32px;
    line-height: 40px;
    margin: 0 0 4px;
}
.section-divider { width: 48px; height: 2px; margin: 0; }
.carousel-placeholder { margin: 0 0 24px; }
.carousel-container { background: transparent; padding: 0; border-radius: 0; margin: 0; }
.carousel-content { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gutter); }
.carousel-content > .carousel { grid-column: span 8; }
.carousel-content > .project-info { grid-column: span 4; }
.carousel { border-radius: 0; background: #f4f4f4; }
.project-info { background: transparent; border-radius: 0; padding: 0; }
.project-info h3 { font-size: 28px; line-height: 32px; margin: 0 0 16px; }
.project-info p {
    font-size: 16px;
    line-height: 22px;
    margin: 0 0 24px;
}
.project-navigation { gap: 16px; padding-top: 16px; border-color: #ddd; }
.project-nav-button { border: 0; border-radius: 0; padding: 0; text-align: left; font-size: 16px; line-height: 24px; color: #555; }
.project-nav-button:hover { color: var(--primary-color); }
.keyboard-help { padding: 0; margin-top: 16px; border-radius: 0; background: transparent; font-size: 14px; line-height: 20px; color: #777; }
.horizontal-scroll-container { margin: 0; padding: 0 0 16px; }
.project-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--grid-gutter)) / 4); gap: var(--grid-gutter); padding: 8px 0; margin: 0; }
.gallery-item { width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0; border-radius: 0; box-shadow: none; animation: none; opacity: 1; transition: box-shadow 160ms ease; }
.gallery-item:hover, .gallery-item.active-project { transform: none; box-shadow: 0 2px 0 var(--primary-color); }
.gallery-item:hover img { transform: none; }
.thumbnail-overlay { border-radius: 0; }
.about-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--grid-gutter); }
.about-image { border-radius: 0; box-shadow: none; }
.about-image:hover img { transform: none; }
.about-text { max-width: 66ch; }
.about-text p, .contact-intro p { font-size: 20px; line-height: 28px; }
.section { margin: 64px 0 0; padding: 0; }
.section > .section-divider { margin-bottom: 32px; }
.contact-info { margin: 0; padding: 0; }
.info-item { margin-bottom: 24px; }
.site-footer { margin-top: 64px; font-size: 16px; line-height: 24px; }
.mobile-menu-toggle { border-radius: 0; box-shadow: none; }
@media (max-height: 760px) and (min-width: 769px) {
  .sidebar { padding-top: 24px; padding-bottom: 24px; gap: 24px; }
  .fullname { font-size: 36px; margin-bottom: 8px; }
  .nav-menu { gap: 8px; }
  .submenu a { padding-top: 2px; padding-bottom: 2px; }
}
@media (max-width: 1100px) {
  :root { --rail-width: 224px; --grid-gutter: 24px; }
  .sidebar { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 992px) {
  .carousel-content { grid-template-columns: minmax(0, 1fr) !important; gap: 24px; }
  .carousel-content > .carousel, .carousel-content > .project-info { grid-column: 1; }
  .project-row { grid-auto-columns: 240px; }
  .project-info { margin: 0; height: 240px; }
  .about-layout { grid-template-columns: minmax(0, 1fr); }
  .about-image { max-width: 320px; margin: 0; }
}
@media (max-width: 768px), (max-height: 600px) {
  :root { --page-gutter: 24px; }
  .sidebar { width: 280px; height: 100dvh; transform: translateX(-100%); padding: 24px; gap: 24px; z-index: 100; }
  .sidebar.mobile-open { transform: translateX(0); }
  .main-content { width: 100%; max-width: 100%; margin: 0; padding: 88px var(--page-gutter) 48px; }
  .mobile-menu-toggle { display: flex; top: 24px; right: 24px; }
  .gallery-header { margin: 0 0 48px; }
  .gallery-header h2 { font-size: 40px; line-height: 40px; }
  .gallery-intro { font-size: 20px; line-height: 28px; }
  .category-header h2, .section > h2 { font-size: 28px; line-height: 32px; }
  .gallery-grid { gap: 48px; }
  .category-header { margin-bottom: 24px; }
  .carousel-content { grid-template-columns: minmax(0, 1fr) !important; }
  .carousel-content > .carousel, .carousel-content > .project-info { grid-column: 1; }
  .project-row { grid-auto-columns: min(240px, 80vw); }
  .project-info { height: 240px; }
  .project-info p { font-size: 19px; line-height: 28px; }
  .project-navigation { flex-direction: row; }
  .project-nav-button { width: auto; }
}
@media (max-height: 460px) {
  .sidebar { width: min(520px, 100vw); padding: 16px 24px; gap: 12px; }
  .sidebar-logo { display: flex; align-items: baseline; gap: 16px; }
  .fullname { font-size: 28px; margin: 0; }
  .tagline { font-size: 16px; white-space: nowrap; }
  .nav-menu { gap: 4px; }
  .nav-menu a { font-size: 18px; padding-top: 2px; padding-bottom: 2px; }
  .has-submenu.active .submenu { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 4px; }
  .submenu a { font-size: 17px; }
  .social-links { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, .nav-menu a, .gallery-item { transition: none; }
}

@media (min-width: 993px) and (max-width: 1200px) {
  .project-row { grid-auto-columns: calc((100% - 2 * var(--grid-gutter)) / 3); }
}

/* Transparent edge controls; chevrons are drawn, independent of typography. */
.carousel .carousel-nav {
  inset: 0; height: 100%; padding: 0; transform: none;
  display: block; pointer-events: none;
}
.carousel .carousel-nav .carousel-button,
.carousel .carousel-nav .carousel-button:hover,
.carousel .carousel-nav .carousel-button:active {
  position: absolute; top: 0; bottom: 0; width: 20%; height: 100%;
  border: 0; border-radius: 0; background: transparent;
  box-shadow: none; transform: none; padding: 0;
  pointer-events: auto;
}
.carousel .carousel-nav .carousel-button.prev { left: 0; right: auto; }
.carousel .carousel-nav .carousel-button.next { right: 0; left: auto; }
.carousel .carousel-nav .carousel-button::before {
  content: ''; position: absolute; top: calc(50% - 8px);
  width: 16px; height: 16px; border: solid white; border-width: 0 2px 2px 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.65));
  opacity: 0; transition: opacity 180ms ease;
}
.carousel .prev::before { left: 24px; transform: rotate(135deg); }
.carousel .next::before { right: 24px; transform: rotate(-45deg); }
@media (hover: hover) and (pointer: fine) {
  .carousel .carousel-nav .carousel-button:hover::before { opacity: .85; }
}
.carousel .carousel-nav .carousel-button:focus-visible::before { opacity: 1; }
.carousel .carousel-nav .carousel-button:focus-visible { outline-offset: -4px; }
@media (hover: none) and (pointer: coarse) {
  .carousel .carousel-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .carousel .carousel-nav .carousel-button::before { transition: none; }
}

/* Align the two-line introduction to the heading's actual font metrics. */
.gallery-header {
  --subhead-leading: 24px;
  display: flex; align-items: last baseline; gap: 48px;
  padding-block: var(--subhead-leading); margin-bottom: 40px;
}
.gallery-header h2 { position: relative; flex: 0 0 auto; margin: 0; text-transform: uppercase; }
.gallery-header h2::after {
  content: ''; position: absolute; left: calc(100% + 24px);
  top: var(--rule-top, -18px); height: var(--rule-height, 82px);
  width: 1px; background: #aaa;
}
.gallery-header .gallery-intro { font-size: 22px; line-height: var(--subhead-leading); max-width: none; }
.gallery-intro em, .intro-line { display: block; }
.intro-line { white-space: nowrap; }
.type-baseline { display: inline-block; width: 0; height: 0; padding: 0; vertical-align: baseline; }
@media (min-width: 769px) and (max-width: 1200px) {
  .gallery-header { gap: 32px; }
  .gallery-header h2 { font-size: 40px; line-height: 40px; }
  .gallery-header h2::after { left: calc(100% + 16px); }
  .gallery-header .gallery-intro { font-size: 18px; }
}
@media (max-width: 860px) {
  .gallery-header { display: block; padding-block: 0; margin-bottom: 48px; }
  .gallery-header h2 { margin-bottom: 16px; }
  .gallery-header h2::after { display: none; }
  .gallery-header .gallery-intro { font-size: 20px; line-height: 28px; }
  .intro-line { display: inline; white-space: normal; }
}

/* A quiet email viewport with a readable, above-the-fold opening crop. */
.carousel[data-category="digital"] { container-type: size; }
.carousel[data-category="digital"] .carousel-slide.tall-scroll {
  display: block; padding: 24px 24px 48px;
  background: #f1f2f3; cursor: default;
  scrollbar-width: thin; scrollbar-color: #b7bcc1 #f1f2f3;
}
.carousel[data-category="digital"] .carousel-slide.tall-scroll img {
  display: block; width: min(600px, 100%, 85cqh); max-width: 600px;
  height: auto; max-height: none; margin: 0 auto; object-fit: contain;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.carousel[data-category="digital"] .carousel-slide.tall-scroll .image-caption { display: none; }
.carousel[data-category="digital"] .carousel-slide.tall-scroll::-webkit-scrollbar-thumb { background: #b7bcc1; border-radius: 4px; }
.carousel[data-category="digital"] .carousel-slide.tall-scroll::-webkit-scrollbar-track { background: #f1f2f3; }
.carousel-slide.tall-scroll:focus-visible { outline: 2px solid var(--primary-color); outline-offset: -2px; }
.image-scroll-cue {
  position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%);
  z-index: 25; pointer-events: none; opacity: 0;
  padding: 6px 12px; background: rgba(255,255,255,.94); color: #555;
  border: 1px solid #dfe2e4; border-radius: 3px;
  font-family: var(--font-heading); font-size: 15px; line-height: 20px;
  letter-spacing: .02em; white-space: nowrap; transition: opacity 200ms ease;
}
.image-scroll-cue::after { content: ''; display: inline-block; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); margin: 0 0 3px 9px; }
.image-scroll-cue.visible { opacity: 1; }
.carousel.scroll-preview .carousel-button::before { border-color: #555; filter: none; }
@media (max-width: 768px) {
  .carousel[data-category="digital"] .carousel-slide.tall-scroll { padding: 16px 16px 48px; }
  .carousel[data-category="digital"] .carousel-slide.tall-scroll img { width: min(600px, 100%, 85cqh); }
}
@media (prefers-reduced-motion: reduce) { .image-scroll-cue { transition: none; } }
.carousel.scroll-preview .indicator { background: #bcc1c5; box-shadow: none; }
.carousel.scroll-preview .indicator.active { background: #555; }

/* Category anchors retain breathing room and align with the sidebar wordmark. */
:root { --category-top: 72px; --category-cap: 28px; --thumbnail-height: clamp(48px, 10dvh, 88px); }
.fullname > span { display: block; }
.category-anchor { scroll-margin-top: var(--category-top); }
.category-header { position: relative; height: var(--category-cap); margin-bottom: 24px; }
.category-header h2 { font-size: 32px; line-height: 1; margin: 0; transform: translateY(var(--category-title-offset, -4px)); }
.category-header .section-divider { position: absolute; left: 0; top: calc(var(--category-cap) - 1px); width: 48px; height: 1px; }
.carousel-placeholder { margin-bottom: 16px; }
.project-row { grid-auto-columns: min(180px, 25vw); gap: 24px; padding: 8px 0; }
.project-row .gallery-item { height: var(--thumbnail-height); aspect-ratio: auto; }
.horizontal-scroll-container { padding-bottom: 16px; }
@media (min-width: 769px) {
  .carousel-content { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: var(--grid-gutter); }
  .carousel-content > .carousel { grid-column: span 8; }
  .carousel-content > .project-info { grid-column: span 4; }
  .carousel:not(.fullscreen) { aspect-ratio: 16 / 9; max-height: max(80px, calc(100dvh - var(--category-top) - var(--category-cap) - var(--thumbnail-height) - 96px)); }
  .project-info { height: 0; min-height: 100%; overflow-y: auto; }
}
@media (max-width: 768px) {
  .category-header { height: auto; }
  .category-header h2 { font-size: 28px; line-height: 32px; transform: none; margin-bottom: 4px; }
  .category-header .section-divider { position: static; }
  .project-row { grid-auto-columns: 144px; gap: 16px; }
}
@media (max-height: 460px) { .fullname > span { display: inline; } }

/* Persistent white masthead: content passes behind it, below fullscreen views. */
:root { --page-header-height: 122px; --category-top: 154px; --thumbnail-height: clamp(56px, 12dvh, 104px); }
.gallery-header {
  position: fixed; top: 0; left: var(--rail-width); right: 0;
  height: var(--page-header-height); margin: 0; padding: 0;
  display: block; z-index: 60; background: #fff;
  overflow: visible;
}
.gallery-header-content {
  position: absolute; top: var(--header-content-top, 58px);
  left: var(--page-gutter); right: var(--page-gutter);
  display: flex; align-items: last baseline; gap: 48px;
}
.gallery-header h2 { margin: 0; }
.gallery-header::after {
  content: ''; position: absolute; top: 100%; left: 0; right: 0;
  height: 24px; pointer-events: none;
  background: linear-gradient(to bottom, #fff, rgba(255,255,255,0));
  transition: height 200ms ease;
}
.gallery-header[data-direction="up"]::after { height: 36px; background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,.75) 30%, rgba(255,255,255,0)); }
.gallery-header-content[data-section="about"] .gallery-intro,
.gallery-header-content[data-section="contact"] .gallery-intro,
.gallery-header-content[data-section="about"] h2::after,
.gallery-header-content[data-section="contact"] h2::after { display: none; }
.header-exit { pointer-events: none; }
.main-content { padding-top: var(--category-top); }
.category-header { height: calc(var(--category-cap) + 12px); margin-bottom: 24px; }
.category-header .section-divider { top: calc(var(--category-cap) + 11px); width: 100%; }
.project-row { grid-auto-columns: min(208px, 28vw); }
@media (min-width: 769px) {
  .carousel:not(.fullscreen) { max-height: max(80px, calc(100dvh - var(--category-top) - var(--category-cap) - var(--thumbnail-height) - 108px)); }
}
@media (min-width: 861px) and (max-width: 1200px) { .gallery-header-content { gap: 32px; } }
@media (max-width: 860px) {
  .gallery-header-content { display: block; }
  .gallery-header .gallery-intro, .gallery-header h2::after { display: none; }
}
@media (max-width: 768px), (max-height: 600px) {
  .gallery-header { left: 0; }
  .main-content { padding-top: var(--category-top); }
}
@media (max-width: 768px) {
  .category-header { height: auto; }
  .category-header h2 { margin-bottom: 16px; }
  .category-header .section-divider { position: static; width: 100%; }
  .project-row { grid-auto-columns: 164px; }
}
@media (prefers-reduced-motion: reduce) { .gallery-header::after { transition: none; } }
/* Let Contact reach the same clear position beneath the masthead. */
#contact { min-height: calc(100dvh - var(--category-top)); }

/* Restore the lockup's original position and contain section transitions. */
.gallery-header-window { position: absolute; inset: 0; overflow: hidden; }
.gallery-header-window { mask-image: linear-gradient(to bottom, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
.gallery-header[data-direction="up"]::after { height: 24px; background: linear-gradient(to bottom, #fff, rgba(255,255,255,0)); }
@media (max-width: 860px) {
  .gallery-header .gallery-intro { display: block; font-size: 20px; line-height: 28px; }
  .gallery-header h2 { margin-bottom: 16px; }
  .gallery-header-content[data-section="about"] .gallery-intro,
  .gallery-header-content[data-section="contact"] .gallery-intro { display: none; }
}

/* No feather: the white header and clipped slide transition stand on their own. */
.gallery-header::after { content: none; }
.gallery-header-window { mask-image: none; }
/* Per-image fitting replaces category-wide image-fit assumptions. */
.carousel .carousel-slide img { object-fit: cover; object-position: var(--image-position, center); }
.carousel .carousel-slide.image-contain img,
.carousel .carousel-slide.image-email img { object-fit: contain; }
.carousel.fullscreen .carousel-slide:not(.image-email) img { object-fit: contain; }
/* A gallery-first landing view with thumbnails approximately 12% larger. */
:root { --thumbnail-height: clamp(63px, 13.5dvh, 117px); }
.project-row { grid-auto-columns: min(234px, 31.5vw); }
@media (max-width: 768px) { .project-row { grid-auto-columns: 184px; } }
/* Closed category rows use 80% of the normal spacing. */
.gallery-grid { --category-row-gap: 64px; row-gap: 0; }
.gallery-grid > .category-section + .category-section { margin-top: calc(var(--category-row-gap) * .8); }
.gallery-grid > .category-section:has(.carousel-placeholder.active) + .category-section { margin-top: var(--category-row-gap); }
@media (max-width: 768px), (max-height: 600px) {
  .gallery-grid { --category-row-gap: 48px; }
}
/* Phone and tablet portrait: budget the image and description together. */
@media (max-width: 768px) {
  :root { --mobile-info-height: clamp(72px, 12dvh, 112px); }
  .project-info { height: var(--mobile-info-height); min-height: 0; }
  .carousel:not(.fullscreen) {
    max-height: max(64px, calc(100dvh - var(--category-top) - var(--mobile-category-height, 49px) - var(--thumbnail-height) - var(--mobile-info-height) - 120px));
    min-height: 0;
  }
}
@media (max-width: 1024px) and (max-height: 700px) {
  .gallery-header .gallery-intro, .gallery-header h2::after { display: none; }
  .gallery-header h2 { margin-bottom: 0; }
}

.site-home { display: block; color: inherit; text-decoration: none; }
.site-home:hover { color: inherit; }
/* PDF pages use their own controls and keep the carousel's reserved dimensions. */
.carousel .pdf-slide { display: block; background: #f1f2f3; cursor: default; }
.pdf-viewer { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; min-height: 0; }
.pdf-toolbar { display: flex; align-items: center; gap: 5px; padding: 8px 94px 8px 8px; background: #fff; border-bottom: 1px solid #ddd; font-family: var(--font-heading); font-size: 15px; line-height: 24px; }
.pdf-toolbar button, .pdf-toolbar a, .pdf-toolbar input { min-height: 30px; padding: 2px 7px; border: 1px solid #ddd; border-radius: 2px; background: #fff; color: #333; font-family: var(--font-heading); font-size: 16px; line-height: 24px; }
.pdf-toolbar button { min-width: 28px; cursor: pointer; }
.pdf-toolbar button:disabled { opacity: .4; cursor: default; }
.pdf-toolbar a { text-decoration: none; white-space: nowrap; }
.pdf-toolbar input { width: 42px; padding: 2px; text-align: center; }
.pdf-page-count { white-space: nowrap; }
.pdf-viewport { position: relative; overflow: auto; padding: 12px; min-height: 0; scrollbar-width: thin; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; }
.pdf-viewport canvas { display: block; margin: auto; max-width: none; box-shadow: 0 1px 5px rgba(0,0,0,.1); }
.pdf-status { position: absolute; inset: 0; display: grid; place-content: center; padding: 16px; color: #555; font-size: 17px; text-align: center; pointer-events: none; }
.pdf-status:empty { display: none; }
.pdf-readable-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; }
.pdf-native-preview { display: block; width: 100%; height: 100%; border: 0; }
.carousel.pdf-active .carousel-nav, .carousel.pdf-active .image-scroll-cue, .carousel.pdf-active .image-counter, .carousel.pdf-active .carousel-indicators { display: none; }
@media (max-width: 768px) { .pdf-toolbar { flex-wrap: wrap; gap: 4px; padding-right: 88px; } .pdf-toolbar button, .pdf-toolbar a { padding: 2px 5px; } }
/* Keep a real page preview visible even on small phones. */
@media (max-width: 768px) {
  .category-section:has(.pdf-slide) { --thumbnail-height: 72px; --mobile-info-height: 64px; }
  .carousel.pdf-active:not(.fullscreen) { min-height: 120px; }
  .pdf-toolbar { flex-wrap: nowrap; gap: 2px; padding: 6px 8px; }
  .pdf-toolbar button, .pdf-toolbar a { min-width: 24px; padding: 2px 4px; font-size: 15px; }
  .pdf-toolbar input { width: 32px; font-size: 15px; }
  .pdf-page-count { font-size: 14px; }
  .carousel.pdf-active .fullscreen-toggle, .carousel.pdf-active .carousel-close { top: auto; bottom: 10px; }
}
.pdf-native .pdf-toolbar button, .pdf-native .pdf-toolbar input, .pdf-native .pdf-page-count { display: none; }
.pdf-viewport { display: grid; place-items: safe center; }
.carousel.fullscreen .pdf-slide { background: #f1f2f3; }
.pdf-native canvas { display: none; }
.carousel.pdf-active .carousel-indicators { display: flex; background: rgba(255,255,255,.92); padding: 6px 10px; border-radius: 2px; }
.carousel.pdf-active .carousel-indicators .indicator { background: #b7bcc1; }
.carousel.pdf-active .carousel-indicators .indicator.active { background: #555; }
.carousel.pdf-active[data-slide-count="1"] .carousel-indicators { display: none; }
/* Document actions sit together immediately above the project navigation rule. */
.project-pdf-actions { display: flex; gap: 12px; margin-top: auto; padding-bottom: 16px; flex: 0 0 auto; }
.project-pdf-actions a { display: inline-flex; align-items: center; justify-content: center; padding: 7px 12px; border: 1px solid #ddd; color: #444; text-decoration: none; font-family: var(--font-heading); font-size: 16px; line-height: 24px; white-space: nowrap; }
.project-pdf-actions a:hover { border-color: #888; color: #222; }
.project-pdf-actions + .project-navigation { margin-top: 0; flex-shrink: 0; }
.project-info:has(.project-pdf-actions) > h3, .project-info:has(.project-pdf-actions) > p { flex-shrink: 0; }
.pdf-native .pdf-toolbar { display: none; }
@media (max-width: 768px) { .project-pdf-actions { gap: 8px; } .project-pdf-actions a { padding: 6px 10px; } }
.pdf-native { grid-template-rows: minmax(0, 1fr); }
/* Thumbnail frames scale as a unit; the height budget uses the same ratio. */
:root {
  --thumbnail-target-width: clamp(176px, 16vw, 234px);
  --thumbnail-height: min(calc(var(--thumbnail-target-width) * 9 / 16), 13.5dvh);
}
.project-row { grid-auto-columns: calc(var(--thumbnail-height) * 16 / 9); }
.project-row .gallery-item { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.project-row .gallery-item img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 768px) {
  :root { --thumbnail-target-width: 184px; }
  .project-row { grid-auto-columns: calc(var(--thumbnail-height) * 16 / 9); }
}