/* Photographic Pattern Room refinement. The specimen's measurement styles stay
   in styles.css; imagery is decorative and never contains interface content. */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/Lato-Regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/Lato-Bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("assets/fonts/Lato-Black-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --ui: "Lato", "Segoe UI", Arial, sans-serif;
  --shadow-paper: 8px 16px 24px rgba(9, 21, 62, .27);
}

/* Declare the embedded image once without a custom property: large data URLs
   exceed Chromium's custom-property value limit. */
.tabletop {
  background-image: url("assets/images/pattern-room-worktable.png");
}

.site-nav { position: relative; z-index: 5; min-height: 104px; }
.site-nav .brand { font-size: 30px; }
.nav-cta { background: var(--brand); color: white; padding-inline: 26px; }
.hero { position: relative; isolation: isolate; gap: 38px; padding-top: 34px; padding-bottom: 48px; }
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -104px;
  bottom: 0;
  left: calc((100% - 100vw) / 2);
  width: 100vw;
  pointer-events: none;
  background-position: left center;
  background-size: 5000px 2500px;
  background-repeat: no-repeat;
  opacity: .22;
}
.hero-copy { position: relative; z-index: 2; padding-bottom: 0; }
.headline { font-size: clamp(54px, 5.8vw, 88px); font-weight: 900; letter-spacing: -.035em; line-height: 1.02; margin-bottom: 28px; }
.descriptor { display: flex; align-items: center; gap: 16px; font-size: 11px; letter-spacing: .055em; }
.descriptor::before { content: ""; width: 36px; height: 2px; flex: none; background: var(--brand); }
.intro { max-width: 495px; font-size: 18px; line-height: 1.65; }
.actions .cta { min-height: 56px; padding-inline: 24px; }
.cta.secondary { background: var(--canvas); }
.hero-note { margin-top: 31px; }
.hero-note .globe { width: 116px; height: 116px; }
.hero-note p { font-size: 14px; }
.globe-pause { min-height: 32px; font-size: 10px; }

.workbench { padding-top: 0; }
.workbench-heading { top: 28px; left: 27px; width: calc(100% - 54px); color: white; z-index: 2; }
.workbench-heading span { background: var(--brand); padding: 4px 7px; }
.tabletop {
  /* Cobalt remains the fallback if the decorative asset cannot be decoded. */
  background-color: var(--brand);
  background-size: auto 100%;
  background-position: right center;
  padding: 73px 28px 26px;
  border-radius: 2px;
  box-shadow: 10px 18px 34px rgba(23, 37, 80, .13);
}
.table-header { position: relative; font-size: 9px; padding-bottom: 20px; }
.table-header > span:first-child { background: var(--brand); padding: 5px 7px; }
.table-header .sample-tag { padding: 5px 8px; }
.mat-stage { grid-template-columns: minmax(0, 1fr) 170px; gap: 17px; }
.papers { min-height: 418px; }
.paper {
  background-color: var(--paper);
  background-size: 1500px 750px;
  background-position: left center;
  background-blend-mode: luminosity;
}
.control-panel { padding: 24px 16px; border-radius: 3px; box-shadow: 7px 12px 20px rgba(9, 21, 62, .16); }
.control-label { color: var(--brand); }
.panel-group + .panel-group { margin-top: 19px; padding-top: 19px; }
.table-controls { position: relative; background: var(--brand); border: 0; margin: 0 -10px -8px; padding: 11px 10px; border-radius: 2px; }
.workbench-caption { margin-top: 16px; max-width: 490px; }
.feature-strip { padding-block: 29px; }

@media (min-width: 1600px) {
  .hero { gap: 60px; padding-top: 44px; padding-bottom: 56px; }
  .headline { font-size: 88px; }
  .tabletop { padding: 82px 34px 30px; }
  .mat-stage { grid-template-columns: minmax(0, 1fr) 180px; }
}
@media (max-width: 1150px) {
  .hero { gap: 28px; }
  .headline { font-size: 5.6vw; }
  .intro { font-size: 16px; }
  .descriptor { font-size: 10px; gap: 10px; }
  .descriptor::before { width: 24px; }
  .tabletop { padding: 69px 16px 22px; }
  .workbench-heading { left: 20px; width: calc(100% - 40px); }
  .mat-stage { grid-template-columns: minmax(0, 1fr) 146px; gap: 8px; }
  .control-panel { padding: 18px 11px; }
  .actions .cta { font-size: 13px; padding-inline: 16px; }
  .hero-note { gap: 14px; }
  .hero-note .globe { width: 95px; height: 95px; }
  .hero-note p { font-size: 13px; }
}
@media (max-width: 950px) {
  .site-nav { min-height: 90px; }
  .site-nav .brand { font-size: 25px; }
  .nav-cta { padding-inline: 16px; }
  .hero { grid-template-columns: 1fr 1fr; padding-top: 26px; }
  .hero::before { top: -90px; }
  .hero-copy { padding-top: 15px; }
  .mat-stage { grid-template-columns: 1fr; }
  .control-panel { padding: 15px 11px; }
  .panel-group + .panel-group { margin: 0; padding: 0; }
  .papers { min-height: 403px; }
  .table-controls { margin-top: 13px; }
  .hero-note { align-items: flex-start; }
  .hero-note .globe { width: 85px; height: 85px; }
}
@media (max-width: 700px) {
  .site-nav { min-height: 78px; }
  .hero { display: block; padding-top: 24px; padding-bottom: 28px; }
  .hero::before { top: -78px; background-size: 4000px 2000px; }
  .hero-copy { padding-top: 0; }
  .descriptor { font-size: 9px; gap: 10px; margin-bottom: 21px; }
  .descriptor::before { width: 23px; }
  .headline { font-size: clamp(42px, 10.9vw, 73px); line-height: 1.035; margin-bottom: 23px; }
  .intro { font-size: 16px; line-height: 1.6; }
  .actions .cta { min-height: 50px; padding-inline: 15px; }
  .hero-note { margin-top: 26px; align-items: center; }
  .hero-note .globe { width: 85px; height: 85px; }
  .hero-note .globe-pause { min-height: 29px; bottom: -15px; font-size: 9px; }
  .workbench { margin-top: 43px; }
  .workbench-heading { top: 26px; left: 18px; width: calc(100% - 36px); font-size: 10px; }
  .tabletop { padding: 64px 14px 21px; }
  .table-header { padding-bottom: 16px; gap: 7px; font-size: 8px; }
  .table-header .sample-tag { font-size: 9px; }
  .control-panel { padding: 15px 12px; }
  .table-controls { margin: 12px -4px -7px; padding: 9px 6px; }
  .feature-strip { padding-block: 4px; }
}