@charset "utf-8";
/* Content page typography, responsive text and form layout. */
body { font-family: Avalon; }
@font-face {
	font-family: TitleFont;
	src: url(../fonts/RobotoCondensed-Bold.ttf);
}

@font-face {
	font-family: Avalon;
	src: url(../fonts/SourceSansPro-Light.otf);
}

@font-face {
	font-family: AvalonBold;
	src: url(../fonts/SourceSansPro-Bold.otf);
}

#text {
	color: #fff;
	margin: 0;
	padding: 0;
}

#text p {
	margin: 0 14px 20px var(--paragraph-indent, 0);
}

b {
	font-family: AvalonBold;
}

h1 {
	margin: 0 0 12px 0;
	padding: 0;
	font-family: TitleFont;
	font-size: calc(var(--paragraph-size) * 2);
	color: #fff;
}


::-webkit-scrollbar {
 width: 8px;
}

::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 -webkit-border-radius: 10px;
 border-radius: 10px;
}

::-webkit-scrollbar-thumb {
 -webkit-border-radius: 10px;
 border-radius: 10px;
 background: #ff6600;
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
 background: rgba(204,204,204,0.3);
}

/* The shade and its header clearance stay fixed; only #content scrolls. */
body:is([data-page="about"], [data-page="contact"], [data-page="model"], [data-page="terms_of_use"], [data-page="privacy_policy"], [data-page="2257_compliance"]) {
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}
#container { display: flow-root; }
#shade {
  position: fixed;
  inset: var(--site-overlay-inset);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: calc(var(--site-content-top) - var(--site-overlay-inset))
           calc(var(--site-control-right) - var(--site-overlay-inset))
           calc(var(--site-content-bottom) - var(--site-overlay-inset))
           calc(var(--site-control-left) - var(--site-overlay-inset));
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}
#content {
  box-sizing: border-box;
  flex: 1;
  min-height: 0;
  width: auto;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}/* Portfolio introduction uses the same clipped content panel as other pages. */
.portfolio-introduction h2 { margin: 2vmin 0; }
.portfolio-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 2vmin; }


.shooting-map { margin: 2vmin 0 3vmin; break-inside: avoid; }
.shooting-map img { display: block; width: 100%; height: auto; }

/* Reserve room for content bullets inside the clipped scrolling panel. */
#text ul { font-family: var(--paragraph-font); list-style: disc outside; padding-inline-start: 3em; margin-block: 1em; font-size: var(--paragraph-size); }
#text li { margin-block: .5em; font-weight: var(--list-weight); line-height: 1.5; }
#text li p { font-weight: inherit; }
#text li::marker { color: var(--action-orange); }

.pdf-download { margin-block: 1vmin 3vmin; }
.pdf-download a { display: inline-flex; align-items: center; gap: .5em; }
.pdf-download img { width: 1.25em; height: 1.25em; }

/* One shared reading column, centered within the fixed scrolling panel. */
@media (min-width: 1200px) {
  #content { width: 100%; max-width: 1200px; margin-inline: auto; }
}

/* Explicit sections stay together; narrow screens stack them in reading order. */
.content-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3vmin; align-items: start; }
.content-columns > section { min-width: 0; }
@media (min-width: 800px) {
  .content-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5vmin; }
}

/* Extra scrollbar breathing room belongs to mouse/trackpad layouts only. */
@media (hover: hover) and (pointer: fine) {
  #content { padding-inline-end: clamp(20px, 3vmin, 36px); }
}

/* About service articles follow the travel-card treatment. */
#text .work {
  min-width: 0;
  margin-block: 2vmin;
  padding: clamp(14px, 2.5vmin, 24px);
  border: 1px solid rgba(255, 255, 255, .18);
  border-left: 3px solid var(--action-orange);
  background: rgba(0, 0, 0, .35);
}
#text .work h3 { margin: 0 0 1vmin; color: var(--action-orange); }
#text .work p { --paragraph-indent: 0; margin: 0; }
#text .work p + p { margin-top: 1em; }