/* ══════════════════════════════════════════════
   Flightparts — product sub-page (previous work)
   Shared styles for the catalogue-style galleries.
   ══════════════════════════════════════════════ */
:root {
  --espresso: #2B2623; --graphite: #4A443F; --taupe: #7A7168;
  --stone: #B0A79E; --ash: #DED6CD; --offwhite: #F4F0EA; --orange: #D05A3A;
  --rule: rgba(122,113,104,0.28);
  --f-sans: "Inter", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
  --pad-x: clamp(20px, 6vw, 120px);
  --maxw: 1320px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--f-sans); font-weight: 300; color: var(--espresso);
       background: var(--offwhite); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }
.eyebrow { font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--orange); font-weight: 500; margin: 0; }

/* buttons (match homepage pills) */
.btn { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; letter-spacing: 0.04em;
       font-weight: 500; padding: 15px 30px; border: 1px solid var(--espresso); border-radius: 100px;
       color: var(--espresso); background: transparent; transition: background .25s, color .25s, border-color .25s; cursor: pointer; }
.btn:hover { background: var(--espresso); color: var(--offwhite); }
.btn.solid { background: var(--orange); border-color: var(--orange); color: var(--offwhite); }
.btn.solid:hover { background: #b94a2d; border-color: #b94a2d; }
.btn .arr { font-size: 17px; line-height: 1; }

/* header — simple solid inner-page bar */
header { position: sticky; top: 0; z-index: 100; background: rgba(244,240,234,0.85);
         -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--rule); padding: 16px 0; }
header .bar { display: flex; align-items: center; justify-content: space-between; }
header .wordmark { height: 22px; width: auto; }
header nav { display: flex; align-items: center; gap: 30px; }
header nav a { font-size: 14px; color: var(--espresso); opacity: 0.75; transition: opacity .2s, color .2s; }
header nav a:hover { opacity: 1; color: var(--orange); }
@media (max-width: 680px) { header nav { display: none; } }

/* placeholder banner */
.ph-banner { background: var(--espresso); color: var(--ash); font-family: var(--f-mono);
             font-size: 12px; letter-spacing: 0.06em; text-align: center; padding: 9px 16px; }
.ph-banner b { color: var(--orange); font-weight: 400; }

/* page body */
.page { padding: clamp(48px, 7vw, 90px) 0 clamp(64px, 9vw, 120px); }
.topline { display: flex; justify-content: space-between; align-items: center; }
.topline .back { font-size: 14px; color: var(--taupe); font-weight: 400; transition: color .2s; }
.topline .back:hover { color: var(--orange); }
.topline .pageno { font-family: var(--f-mono); font-size: 13px; color: var(--taupe); }
.rule { height: 1px; background: var(--rule); margin: 18px 0 clamp(32px, 5vw, 56px); }

.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px;
             flex-wrap: wrap; margin-bottom: clamp(36px, 5vw, 60px); }
.page-head .eyebrow { margin-bottom: 20px; }
.page-head h1 { font-weight: 300; font-size: clamp(38px, 6vw, 84px); letter-spacing: -0.03em;
                line-height: 0.98; margin: 0; max-width: 16ch; }
.page-head h1 b { font-weight: 700; }
.page-head .lede { font-size: clamp(16px, 1.5vw, 21px); line-height: 1.55; color: var(--graphite);
                   font-weight: 300; margin: 20px 0 0; max-width: 54ch; }
.page-head .shown { font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.06em;
                    color: var(--taupe); white-space: nowrap; }

/* gallery — 2-up like catalogue page 9 */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px) clamp(20px, 3vw, 44px); }
.tile { display: flex; flex-direction: column; }
.tile .ph { aspect-ratio: 4/3; overflow: hidden; background: #e6ded3; }
.tile .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.tile:hover .ph img { transform: scale(1.04); }
.tile figcaption { display: flex; flex-direction: column; gap: 5px; margin: 16px 0 0; }
.tile .n { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--orange); }
.tile .cap { font-size: 19px; font-weight: 400; letter-spacing: -0.01em; color: var(--espresso); }

.page-foot { display: flex; justify-content: space-between; align-items: center; gap: 28px;
             flex-wrap: wrap; margin-top: clamp(48px, 7vw, 80px); padding-top: 28px; border-top: 1px solid var(--rule); }
.page-foot .meta { font-family: var(--f-sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
                   color: var(--taupe); font-weight: 500; }

/* legal / text pages */
.prose { max-width: 76ch; }
.prose h2 { font-weight: 500; font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.01em;
            margin: 44px 0 14px; color: var(--espresso); }
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: clamp(16px, 1.35vw, 18px); line-height: 1.65; color: var(--graphite);
           margin: 0 0 16px; font-weight: 300; }
.prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose li { font-size: clamp(16px, 1.35vw, 18px); line-height: 1.65; color: var(--graphite);
            margin: 0 0 9px; font-weight: 300; }
.prose a { color: var(--orange); }
.prose a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .gallery { grid-template-columns: 1fr; }
}