/*
Theme Name: JRK.XLSX
Description: Hand-written theme for jrk.agency. Like-for-like replacement of the Kubio build: same pages, same copy, same layout, no page builder.
Version: 1.0
Author: JRK.XLSX
Text Domain: jrk
*/

:root { color-scheme: light; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: #202a54; font: 300 16px/1.4 Mulish, Helvetica, Arial, sans-serif; }
a { color: #303e7a; text-decoration: none; }
img { max-width: 100%; height: auto; }
.wrap { width: 100%; max-width: 1232px; margin: 0 auto; }

/* ---------- header / navigation ---------- */
.site-header { position: relative; }
.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 10001; padding: 30px 20px; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 50px; }
.logo { font: 700 24px/36px Syncopate, Helvetica, Arial, sans-serif; color: #f6f8fa; }
.menu { display: flex; gap: 50px; list-style: none; margin: 0; padding: 0; }
.menu a { position: relative; display: block; padding: 10px 0; font: 400 16px/24px Mulish, Helvetica, Arial, sans-serif; color: rgba(246, 248, 250, .8); transition: color .2s; }
.menu a:hover, .menu a.current { color: #f6f8fa; }
.menu a.current::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #f6f8fa; }
.burger { display: none; width: 34px; height: 34px; padding: 0; border: 0; background: none; color: #f6f8fa; cursor: pointer; }
.burger svg { display: block; width: 34px; height: 34px; fill: currentColor; }

.offcanvas { position: fixed; top: 0; right: 0; bottom: 0; width: 300px; background: #202a54; z-index: 2000001; transform: translateX(100%); transition: transform .3s; overflow-y: auto; }
.offcanvas.open { transform: none; }
.offcanvas .oc-logo { display: flex; align-items: center; justify-content: center; width: 240px; height: 90px; margin: 25px auto; padding: 10px; }
.offcanvas .oc-logo img { width: 70px; height: 70px; }
.offcanvas ul { list-style: none; margin: 0; padding: 0; }
.offcanvas a { display: block; padding: 20px 0 20px 40px; font: 600 14px/21px Mulish, Helvetica, Arial, sans-serif; color: #f6f8fa; }
.offcanvas a.current { background: #303e7a; }
.overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 20000; opacity: 0; pointer-events: none; transition: opacity .25s linear; }
.overlay.open { opacity: 1; pointer-events: auto; }

/* ---------- hero ---------- */
.hero { position: relative; display: flex; align-items: center; min-height: 100vh; padding: 200px 0 250px; background: #11121a no-repeat 78% 77% / cover; color: #f6f8fa; text-align: center; }
.hero::before { content: ""; position: absolute; inset: 0; background: #11121a; opacity: .6; }
.hero > .wrap { position: relative; padding-top: 110px; }
.hero .content { max-width: 989px; margin: 0 auto; padding: 60px 0; }
.hero h1 { margin: 0; font: 700 88px/1.26 Mulish, Helvetica, Arial, sans-serif; }
.hero p { margin: 0; font-size: 19.2px; line-height: 1.5; font-weight: 400; }
.btns { padding-top: 40px; }
.btn { display: inline-flex; align-items: center; justify-content: center; margin: 0 10px; padding: 15px 40px; border-radius: 3px; background: #f6f8fa; color: #202a54; font: 600 16px/24px Mulish, Helvetica, Arial, sans-serif; transition: all .3s; }
.btn:hover { background: #303e7a; color: #f6f8fa; }

.hero.page { min-height: 0; padding: 120px 0 150px; background-position: 48% 68%; }
.hero.page::before { background: #000; opacity: .5; }
.hero.page .content { max-width: 616px; padding: 15px; }
.hero.page h1 { font-size: 40px; }

.bg-wonder { background-image: url(img/wonder.jpg); }
.bg-wildeburg { background-image: url(img/wildeburg-2023.jpg); }

/* ---------- sections ---------- */
.sec { position: relative; padding: 100px 0; background: no-repeat 50% 50% / cover; color: #f6f8fa; text-align: center; }
.sec.light { color: #202a54; }
.blk { width: 100%; max-width: 1232px; margin: 0 auto; padding: 30px; }
.blk.w50 { max-width: 616px; }
.blk.w75 { max-width: 986px; }
.blk.w-itw { max-width: 746px; }
.blk.w-chateau { max-width: 1010px; }
.blk.w-thanks { max-width: 1149px; }
.sec h2 { margin: 0; font: 700 48px/1.143 Mulish, Helvetica, Arial, sans-serif; }
.sec p { margin: 0; font-size: 16px; line-height: 1.4; }
.sec p.lead { font-size: 21px; }
.sec p.thanks { font-size: 13px; text-align: right; }
.sec .gap { margin-bottom: 20px; }
.sec.muted h2 { color: #ebebeb; }
.thanks-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.thanks-row p.thanks { flex: 1; }
.sc-link { display: inline-block; flex: 0 0 auto; width: 40px; height: 40px; color: #f6f8fa; opacity: .9; transition: opacity .2s; }
.sc-link:hover { opacity: 1; }
.sc-link svg { display: block; width: 100%; height: 100%; fill: currentColor; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .7)); }

.s-wildeweide26 { background-image: url(img/wilde-weide-2026.jpg); background-position: 50% 42%; }
.sec.has-video { overflow: hidden; }
.sec.has-video > .blk { position: relative; z-index: 1; }
.bgv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; z-index: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .bgv { display: none; } }
.s-burningman26 { background-image: url(img/burning-man-nl-2026.jpg); background-position: 50% 62%; }
.s-landjuweel26 { background-image: url(img/landjuweel-2026.jpg); background-position: 50% 72%; }
.s-landjuweel { background-image: url(img/landjuweel-2025.jpg); }
.s-itw25, .s-itw24 { background-image: url(img/into-the-woods-2024.jpg); background-position: 50% 62%; }
.sec.dim::before { content: ""; position: absolute; inset: 0; background: #11121a; opacity: .35; }
.sec.dim > .blk { position: relative; }
.s-ml24 { background-color: #f6f8fa; background-image: url(img/mysteryland-2024.jpg); background-position: 57% 63%; }
.s-wonder24 { background-image: url(img/wonder-2024.jpg); background-position: 48% 41%; }
.s-ml23 { background-image: url(img/mysteryland-2023.jpg); background-position: 48% 79%; }
.s-wildeburg23 { background-image: url(img/wildeburg-2023-b.jpg); background-position: 36% 64%; }
.s-itw22 { background-image: url(img/into-the-woods-2022.jpg); background-size: 100% auto; background-position: 35% 74%; }
.s-chateau { background-image: url(img/chateau-perche-2022.jpg); background-position: 46% 35%; }

.btn-cta { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border: 2px solid #303e7a; border-radius: 5px; background: #303e7a; color: #fff; font: 600 12px/12px "Open Sans", Helvetica, Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; transition: all .3s; }
.btn-cta:hover { background: #071d79; border-color: #071d79; color: #fff; }

/* ---------- embeds (music) ---------- */
.sc { display: block; width: 500px; max-width: 100%; height: 450px; margin: 0 auto 5px; border: 0; }
.embed { max-width: 840px; margin: 16px auto; padding: 0; }
@media (max-width: 869px) { .embed { padding: 0 15px; } }
.embed iframe { display: block; width: 100%; height: 352px; border: 0; border-radius: 12px; }

/* ---------- generic page (fallback template) ---------- */
.page-body { max-width: 840px; margin: 0 auto; padding: 100px 15px; }
.page-body p { margin: 0 0 1em; }

/* ---------- footer ---------- */
.footer { padding: 30px 0; }
.footer .wrap { padding: 45px 0 45px 114px; }
.footer p { margin: 0; font-size: 14px; line-height: 1.4; color: #3b4053; }

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
  .menu { display: none; }
  .burger { display: block; }
  .nav { padding: 10px 20px; }
  .nav .wrap { min-height: 56px; padding: 0 20px; }
  .hero h1 { font-size: 64px; }
}
@media (max-width: 767px) {
  .hero { padding: 90px 0 200px; }
  .hero > .wrap { padding-top: 76px; }
  .hero .content { padding: 30px; }
  .hero h1 { font-size: 40px; }
  .hero p { font-size: 16px; }
  .hero.page { padding: 90px 0 100px; }
  .sec { padding: 30px 0; }
  .blk { padding: 20px 10px; }
  .footer .wrap { padding: 60px 20px 200px; }
}