/* Extra styles for 1000 Errors only. Loaded after the shared styles, so anything here wins. */

/* Header logo (a long, thin image): sized by height so it sits level with the menu text. */
.brand img { height: 15px; max-height: none; width: auto; display: block; }
@media (max-width: 760px) { .brand img { height: 12px; } }
.brand { font-weight: 600; font-size: 1.1rem; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }

/* Headings use Inter, the same font as the body text. */
h1, h2, h3, .tile-title { letter-spacing: -.01em; font-weight: 600; }
.prose h1, .page-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.block-title { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.product-info h1 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.3; }
.video-card-body h3 { font-size: 1.05rem; line-height: 1.4; }
.tile-title { font-size: 1.2rem; }

/* Homepage hero: the name over the festival photo. */
.page-home .hero-block h1 { text-transform: uppercase; letter-spacing: .14em; font-weight: 700; text-shadow: 0 2px 16px rgba(0,0,0,.6); }
.page-home .hero-block p { max-width: 620px; margin: 0 auto; }

/* Homepage banner parallax (custom.js sets --parallax-image and --parallax-text as you scroll).
   The photo moves onto its own layer so it can drift separately; the dark fade stays put on top of it. */
.page-home .hero-block[style] { background: #000; } /* what the photo fades into (--parallax-fade) */
.page-home .hero-block[style]::before {
  background: var(--hero-image) center / cover no-repeat;
  transform: translate3d(0, var(--parallax-image, 0px), 0); will-change: transform, opacity;
  opacity: var(--parallax-fade, 1);
}
.page-home .hero-block[style]::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.1) 60%);
}
.page-home .hero-block-inner {
  z-index: 2; transform: translate3d(0, var(--parallax-text, 0px), 0); will-change: transform, opacity;
  opacity: var(--parallax-text-fade, 1);
}

/* Outline buttons: no solid white fill. The main button gets a brighter border than secondary ones. */
.button { background: transparent; color: var(--text); border: 1px solid rgba(255, 255, 255, .22); transition: background .2s, border-color .2s; }
.button-primary { background: transparent; color: var(--text); border-color: rgba(255, 255, 255, .6); }
.button:hover:not(:disabled):not(.disabled) { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .85); }

/* Wide layout: header, footer and content run to 40px from the screen edges (capped at 2000px on
   ultra-wide screens). The homepage banner and each project's opening photo run edge to edge.
   Text blocks keep a comfortable reading width. */
:root { --max-width: 2000px; }
body { overflow-x: clip; } /* edge-to-edge sections use 100vw, which on Windows includes the scrollbar */
.site-header, .footer { padding-left: 40px; padding-right: 40px; }
.main { padding-left: 40px; padding-right: 40px; }
.page-home .block-hero { margin: -24px calc(50% - 50vw) 64px; }
.page-home .hero-block { border-radius: 0; }
.project-back + .block-hero { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.project-back + .block-hero .hero-block { border-radius: 0; padding-left: 40px; padding-right: 40px; } /* title lines up with the page text */
.projects { gap: 40px 28px; }
@media (max-width: 760px) {
  .site-header, .footer, .main { padding-left: 16px; padding-right: 16px; }
  .page-home .block-hero { margin-bottom: 44px; }
  .page-home .hero-block { padding-top: 48px; padding-bottom: 48px; }
  .project-back + .block-hero .hero-block { padding-left: 16px; padding-right: 16px; }
}

/* Product grids (home "Latest designs", shop, categories): fixed columns so cards grow with the page,
   matching the category tiles, instead of squeezing in more small cards on wide screens. */
@media (min-width: 761px) {
  .grid { grid-template-columns: repeat(4, 1fr); gap: 32px 20px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* Header: name on the left, menu centred on the page, cart on the right (phones keep the ☰ menu). */
@media (min-width: 761px) {
  .site-header { display: grid; grid-template-columns: 1fr auto 1fr; }
  .brand { justify-self: start; }
  .nav { flex: none; justify-content: center; }
  .cart-button { justify-self: end; margin-left: 0; }
}

/* Subtle hairline under the header. */
.site-header { border-bottom-color: rgba(255, 255, 255, .12); }

/* Phones: keep the name on one line. */
@media (max-width: 760px) {
  .brand { font-size: .95rem; letter-spacing: .12em; }
  .page-home .hero-block h1 { font-size: clamp(1.6rem, 9vw, 2.4rem); white-space: nowrap; letter-spacing: .1em; }
}

/* Photo-and-text sections: larger text so it holds its own beside big photos (chosen in the design lab, option D). */
.split-text p, .split-text li { font-size: 21px; line-height: 1.6; }
.split-text h2 { font-size: 32px; }
@media (max-width: 760px) {
  .split-text p, .split-text li { font-size: 18px; }
  .split-text h2 { font-size: 26px; }
}

/* "Full project on Parabolic Arts" popup (styled in the design lab: _lab/sister-card.html). */
.popup-backdrop:has(.popup-sister) { background: transparent; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.popup-sister { max-width: 500px; background: #1a1a1a; color: #f2f2f2; border-color: #2a2a31; border-radius: 10px; }
.popup-sister p.muted { color: #9a9aa3; }

/* Project pages: the photos beside the text zoom on hover and open full screen when clicked (custom.js). */
.page:has(.project-back) .split-media { overflow: hidden; border-radius: var(--radius); cursor: zoom-in; }
.page:has(.project-back) .split-media img { display: block; }
.page:has(.project-back) .split-media.zooming img { transition: transform .25s ease-out; }

/* Full screen viewer: click the photo to zoom in, click again to zoom out; the background closes it. */
.lightbox { overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  .lightbox img { cursor: zoom-in; transition: transform .25s ease-out; }
  .lightbox.zoomed img { cursor: zoom-out; }
}

/* Homepage category tiles zoom in close on hover and follow the pointer (custom.js), like the product cards. */
@media (hover: hover) and (pointer: fine) { .page-home .tile { cursor: zoom-in; } }
.page-home .tile.zooming img { transition: transform .25s ease-out; }

/* Wedding Archway card: crop from the top so the top of the archway stays in view. */
.project-card[data-path="lasercut-art/wedding-archway"] .project-img img { object-position: top; }