@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Manrope:wght@400;500;600&display=swap");
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Manrope",system-ui,sans-serif;color:#e8e4da;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
a{color:inherit;text-decoration:none}

body.pg-paint{background:#1b1a17}   /* warm charcoal — watercolors */
body.pg-logos{background:#0a0f1c}   /* deep blue-black — campaign logos */
body.pg-photos{background:#17161a}  /* neutral dark — photography landing */

/* banner overlaps the top of the stage (transparent) so the stacks + gutter run up behind the bars */
.topbar{position:absolute;top:0;left:0;right:0;z-index:30;line-height:0;background:transparent;padding-bottom:8px;pointer-events:none}
.topbar .tb-svg{display:block;width:100%;height:auto}

/* the stage holds a single fixed-width WALL that is scaled to fit (js/pages.js). Everything — text,
   images, gutter — is positioned in the wall's own 1400px coordinate space, exactly like the gallery,
   so resizing just rescales the whole thing and nothing ever moves between stacks. */
.stage{position:relative;padding:0 clamp(20px,5vw,72px) 0;overflow:hidden}
.wall{position:absolute;top:0;left:0;width:1400px;transform-origin:0 0}

/* left stack — the text column (dark, light type), left of the gutter */
.lede{position:absolute;top:18px;left:0;width:400px;padding-right:34px;z-index:1}
.lede h1{font-family:"Bebas Neue",sans-serif;font-weight:700;font-size:74px;line-height:0.98;letter-spacing:.01em;color:#f0ece3;overflow-wrap:break-word}
.lede .sub{font-family:"Bebas Neue",sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#8f8f8a;margin:14px 0 20px}
.lede p{font-size:15px;line-height:1.6;color:#c9c5bb;margin:0 0 13px}
.lede a{color:#7cc4ff;text-decoration:underline;text-underline-offset:2px}
.lede a:hover{color:#a6d8ff}

/* right stack background — a subtly lighter panel behind the images, clip set in js/pages.js */
.rpanel{position:absolute;top:0;left:0;pointer-events:none;z-index:0}
body.pg-paint .rpanel{background:#302d27}   /* clearly lighter than the warm-charcoal page */
body.pg-logos .rpanel{background:#18203c}   /* clearly lighter than the blue-black page */
body.pg-photos .rpanel{background:#28272d} /* clearly lighter than the neutral page */

/* the slanted cream gutter — a strip in wall coordinates, clip set in js/pages.js */
.gutter{position:absolute;top:0;left:0;width:1400px;background:#e6e3dc;pointer-events:none;z-index:0}

/* right stack — WATERCOLORS, absolutely positioned in wall coordinates from the layout */
.plate{position:absolute;z-index:1}
.plate img{width:100%;height:auto;border:6px solid #f4f2ec;box-shadow:0 10px 30px rgba(0,0,0,.5);transition:filter .2s ease}

/* right stack — PHOTOGRAPHY LANDING: each plate is a link to a gallery, with a label beneath */
a.plate{text-decoration:none;cursor:pointer}
.plate figcaption{margin-top:11px;font-family:"Bebas Neue",sans-serif}
.plate figcaption .gl-num{display:block;font-size:26px;font-weight:700;letter-spacing:.02em;color:#f0ece3}
.plate figcaption .gl-name{display:block;margin-top:3px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#9a978f}
a.plate:hover img{filter:brightness(1.08)}
a.plate:hover figcaption .gl-num{color:#7cc4ff}

/* right stack — CAMPAIGN LOGOS: placed from the layout. A logo shows a white tile only when its layout
   entry has tile:true (class 'card'); otherwise it sits directly on the dark field. Crop items use
   object-fit:cover + object-position (set inline from the layout). */
.tile{position:absolute;z-index:1;overflow:hidden}
.tile.card{background:#fff;padding:10px 13px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.tile img{width:100%;height:100%;object-fit:contain;display:block}

/* simple placeholder pages (coming-soon) */
.holder{position:relative;min-height:78vh;display:flex;flex-direction:column;justify-content:center;padding:132px clamp(20px,5vw,72px) 90px}
.holder h1{font-family:"Bebas Neue",sans-serif;font-weight:700;font-size:84px;color:#f0ece3;line-height:1.0}
.holder .sub{font-family:"Bebas Neue",sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#8f8f8a;margin:14px 0 22px}
.holder p{font-size:16px;line-height:1.6;color:#c9c5bb;max-width:52ch}
.holder .back{margin-top:26px;font-family:"Bebas Neue",sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#7cc4ff}

/* narrow screens: the two-stack layout can't fit, so reflow to a single column (text, then images).
   js/pages.js decides when (per page) and toggles body.reflow, then clears the desktop inline styles
   so these rules take over. Driving it from a class (not a media query) lets each page pick its own
   threshold — the logo puzzle stays intact much longer than the text pages. */
body.reflow .topbar{position:relative}
body.reflow .stage{padding:22px clamp(16px,5vw,44px) 64px;overflow:visible}
body.reflow .wall{position:static;width:auto;height:auto;transform:none}
body.reflow .gutter,body.reflow .rpanel{display:none}
body.reflow .lede{position:static;width:auto;max-width:640px;transform:none;margin:0 0 34px}
body.reflow .lede h1{font-size:74px}
body.reflow .plate{position:static;left:auto;top:auto;width:auto;max-width:600px;margin:0 0 32px}
body.reflow .plate img{width:100%}
body.reflow a.plate{display:block}
body.reflow .tile{position:static;width:-moz-fit-content;width:fit-content;max-width:90vw;height:auto;margin:0 auto 16px}
body.reflow .tile img{width:auto;height:auto;max-width:min(84vw,400px);max-height:100px;object-fit:contain}

/* footer — the editorial bar, at the end of the page */
.galfoot{position:relative;z-index:5;font-family:"Bebas Neue",sans-serif}
.galfoot a{text-decoration:none}
.galfoot .diag{height:4px;background:repeating-linear-gradient(115deg,#50b4ff 0 16px,#141414 16px 22px,#005487 22px 46px,#50b4ff 46px 58px,#141414 58px 63px,#005487 63px 77px,#50b4ff 77px 109px,#141414 109px 121px,#005487 121px 135px)}
.galfoot .foot{background:#0b0b0b;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:18px clamp(20px,5vw,72px) 18px}
.galfoot .foot-l{display:flex;align-items:center;align-self:stretch}
.galfoot .foot-title{color:#f0ece3;font-size:40px;font-weight:700;letter-spacing:.01em;line-height:1}
.galfoot .foot-r{display:flex;flex-direction:column;align-items:flex-end;gap:11px;text-align:right}
.galfoot .foot-top{display:flex;align-items:center;gap:18px}
.galfoot .foot-top .logo{height:38px;width:auto;display:block}
.galfoot .nav{display:flex;gap:15px}
.galfoot .nav a{font-size:21px;letter-spacing:.05em;text-transform:uppercase;color:#8f8f8a;cursor:pointer}
.galfoot .nav a:hover{color:#f0ece3}
.galfoot .nav a.on{color:#50b4ff}
.galfoot .foot-copy{color:#5c5c58;font-size:10px;letter-spacing:.05em}

/* ABOUT page — same wall/gutter/lede skeleton as Campaigns; the right column holds a contact form (.rede),
   counter-scaled like the .lede text so the inputs stay a fixed size (positioning handled in js/pages.js) */
.rede{position:absolute;z-index:1}
.lede strong{color:#f0ece3;font-weight:600}
.cform{display:flex;flex-direction:column;gap:15px;width:100%;max-width:460px}
.cform label{display:flex;flex-direction:column;gap:6px;font-family:"Bebas Neue",sans-serif;font-size:16px;letter-spacing:.07em;text-transform:uppercase;color:#8f8f8a}
.cform input,.cform textarea{font-family:"Manrope",system-ui,sans-serif;font-size:15px;color:#f0ece3;background:rgba(255,255,255,.06);border:1px solid #3a3a40;border-radius:4px;padding:11px 13px;width:100%}
.cform input:focus,.cform textarea:focus{outline:none;border-color:#7cc4ff;background:rgba(255,255,255,.09)}
.cform textarea{resize:vertical;min-height:120px}
.cform button{align-self:flex-start;margin-top:4px;font-family:"Bebas Neue",sans-serif;font-size:21px;letter-spacing:.06em;text-transform:uppercase;color:#0b0b0b;background:#7cc4ff;border:0;border-radius:4px;padding:10px 28px;cursor:pointer;transition:background .2s}
.cform button:hover{background:#a6d8ff}
.cform .fb-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform-err{color:#e0908f;font-size:14px}
.cform-thanks{font-size:16px;line-height:1.6;color:#c9c5bb}
/* when the page reflows to a single column, the form stacks under the bio */
body.reflow .rede{position:static;width:auto;max-width:560px;transform:none;margin:30px 0 0}