/* Theme values (colors, fonts, sizes, button shape) come from content.json as :root vars,
   and @font-face rules for the chosen fonts are inlined by render.js. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{container-type:inline-size;overflow-x:clip;margin:0;background:var(--bg);color:var(--text);font:400 var(--fs-body)/1.6 var(--font-body);-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2{color:var(--heading);font-family:var(--font-heading);font-weight:700;margin:0;line-height:1.15}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* header */
.site-header{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:24px;height:64px;padding:0 var(--header-pad,5%);font-family:var(--font-heading);transition:background .3s}
.site-header.solid,.site-header.scrolled{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.brand{font-weight:700;text-decoration:none;color:var(--heading);white-space:nowrap;transition:opacity .3s}
.name-scroll .brand{opacity:0}
.name-scroll.scrolled .brand,body:not(.has-hero) .name-scroll .brand{opacity:1}
.name-never .brand{display:none}
.site-header nav{display:flex;gap:22px;margin-inline-start:auto;align-items:center}
.site-header nav a{text-decoration:none;color:var(--heading);font-size:17px;opacity:.75}
.site-header nav a[aria-current],.site-header nav a:hover{opacity:1}
.site-header nav a[aria-current]{font-weight:700}
.site-header .lang{font-size:15px;border:1px solid currentColor;border-radius:99px;padding:2px 12px}
.header-social{margin:0}
.nav-left nav{order:-1;margin-inline-start:0}.nav-left .brand{margin-inline-start:auto}
.nav-center nav{margin-inline:auto}.nav-center .brand{position:absolute;inset-inline-start:var(--header-pad,5%)}
.nav-center .header-social{position:absolute;inset-inline-end:var(--header-pad,5%)}

/* social icons */
.social{list-style:none;margin:0;padding:0;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.social a{display:grid;place-items:center;width:40px;height:40px;color:var(--heading);opacity:.85;transition:opacity .2s,transform .2s}
.social a:hover{opacity:1;transform:translateY(-2px)}
.social svg{width:24px;height:24px}
.block-social a{width:46px;height:46px;border:1px solid color-mix(in srgb,var(--heading) 22%,transparent);border-radius:var(--btn-radius);background:transparent}
.block-social a:hover{border-color:var(--heading)}
.header-social a{width:32px;height:32px}.header-social svg{width:18px;height:18px}

/* buttons (UI kit): shape from --btn-radius, style from .btn-* */
.btn{--fg:var(--accent);display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--btn-radius);font:500 16px/1 var(--font-heading);text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s,opacity .2s;padding:14px 28px}
.btn svg{width:19px;height:19px;flex:none}
.btn-sm{padding:10px 18px;font-size:14px}.btn-lg{padding:18px 36px;font-size:18px}
.btn-solid{background:var(--fg);color:var(--bg)}
.btn-solid:hover{opacity:.85}
.btn-outline{border-color:var(--fg);color:var(--fg);background:transparent}
.btn-outline:hover{background:var(--fg);color:var(--bg)}
.btn-soft{background:color-mix(in srgb,var(--fg) 12%,transparent);color:var(--fg)}
.btn-soft:hover{background:color-mix(in srgb,var(--fg) 22%,transparent)}
.btn-text{color:var(--fg);padding-inline:4px;text-decoration:underline;text-underline-offset:5px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;padding:8px 5%}
.btn-row.align-left{justify-content:flex-start}.btn-row.align-right{justify-content:flex-end}
.hero .btn-row{margin-top:28px;padding:0}

/* hero */
.hero{position:relative;display:grid;place-items:center;min-height:100svh;padding:120px 5% 80px;overflow:hidden;text-align:center;isolation:isolate}
.hero-half{min-height:60svh}.hero-large{min-height:80svh}
/* scroll cue under the hero icons: gentle drift, fades out once the visitor scrolls */
.hero-arrow{display:block;width:16px;height:16px;margin:30px auto 0;border:solid var(--heading);border-width:0 1.25px 1.25px 0;transform:rotate(45deg);opacity:.7;animation:nudge 2.4s ease-in-out infinite;transition:opacity .4s}
@keyframes nudge{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(7px) rotate(45deg);opacity:.35}}
.is-scrolled .hero-arrow{animation:none;opacity:0;pointer-events:none}
.hero .hero-bg,.hero .hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-video{opacity:0;transition:opacity .8s}.hero-video.playing{opacity:1}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--overlay-color);opacity:var(--overlay)}
.hero-text{max-width:800px}
.hero h1{font-size:clamp(34px,7vw,var(--fs-hero));letter-spacing:-.01em}
.hero p{color:color-mix(in srgb,var(--heading) 80%,transparent);font-size:clamp(16px,2.2vw,24px);margin:20px 0 0}
.hero-social{margin-top:32px;gap:8px}.hero-social a{width:34px;height:34px}.hero-social svg{width:19px;height:19px}

/* main layout */
main{max-width:var(--max);margin:0 auto;padding:0 var(--page-pad,0) 40px}
/* edge to edge: cqw = body width without the scrollbar (100vw would overflow) */
.block.bleed{width:100cqw;margin-inline:calc(50% - 50cqw)}
main.w-narrow{max-width:min(var(--max),820px)}
main.w-full{max-width:none}
body:not(.has-hero) main{padding-top:64px}
.page-header{text-align:center;padding:72px 5% 64px}
.page-header h1{font-size:clamp(28px,5vw,var(--fs-page))}
.page-header p{color:var(--muted);margin:14px 0 0}
.block{margin-bottom:var(--gap)}
.b-hero{margin:0}

/* covers */
.covers{display:grid;grid-template-columns:repeat(var(--c-d),1fr);gap:var(--cover-gap);padding:60px 0 0}
.cover{position:relative;display:block;border-radius:var(--radius);overflow:hidden;aspect-ratio:var(--cover-ratio);text-decoration:none;background:var(--surface)}
.cover .pic,.cover img{width:100%;height:100%;object-fit:cover;transition:filter .35s,transform .6s}
.cover-hover-grayscale .cover img{filter:grayscale(1)}
.cover-hover-grayscale .cover:hover img,.cover-hover-grayscale .cover:focus-visible img{filter:none}
.cover-hover-zoom .cover:hover img{transform:scale(1.04)}
.cover-title{position:absolute;inset:auto 0 0;padding:18px;color:#fff;font:700 18px/1.2 var(--font-heading);background:linear-gradient(transparent,rgba(0,0,0,.6))}

/* text: per-block overrides arrive as --t-* / --b-* vars */
.text{padding:0 5%;max-width:900px;margin-inline:auto;color:var(--t-color,var(--text))}
.text.align-left{text-align:left}.text.align-center{text-align:center}.text.align-right{text-align:right}.text.align-justify{text-align:justify}
.text h2{color:var(--t-color,var(--muted));font-family:var(--t-font,var(--font-heading));font-size:var(--t-size,clamp(22px,3.4vw,var(--fs-block)));font-weight:var(--t-weight,700);line-height:1.4;padding-top:clamp(56px,12vw,160px);margin-bottom:16px}
.text p{margin:0 0 6px;font-family:var(--t-font,var(--font-body));font-size:var(--b-size,var(--fs-body));font-weight:var(--b-weight,400)}
.text.tight h2,.col .text h2{padding-top:0}

/* media */
.pic{display:block}
.pic img{width:100%;height:auto;background-size:cover}
figure{margin:0}
figcaption{color:var(--muted);font-size:14px;text-align:center;padding:10px 5% 0}
.img a{display:block;cursor:zoom-in}
.img.rounded img{border-radius:var(--radius)}
.vid{position:relative;margin:0 auto;max-width:100%;background:var(--surface)}
.vid video{position:relative;width:100%;height:100%;object-fit:contain}
.vid .vid-poster,.vid .vid-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.vid.portrait{max-height:88svh;max-width:calc(88svh * 9 / 16)}

/* rows */
.row{display:grid;grid-template-columns:var(--cols);gap:var(--gap)}
.row.valign-top{align-items:start}.row.valign-middle{align-items:center}.row.valign-bottom{align-items:end}
.col{min-width:0;display:flex;flex-direction:column;gap:var(--gap)}
.col>.block{margin:0}
.gallery{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:var(--gap)}
.embed iframe{width:100%;height:100%;border:0}
.divider{border:0;border-top:1px solid color-mix(in srgb,var(--heading) 15%,transparent);margin:32px 5%}

/* contact */
.contact{display:grid;gap:16px;padding:0 5%;max-width:560px;margin-inline:auto}
.contact label{display:grid;gap:6px;color:var(--heading);font-size:15px}
.contact input,.contact textarea{width:100%;padding:12px 14px;border:1px solid color-mix(in srgb,var(--heading) 18%,transparent);border-radius:min(var(--btn-radius),12px);background:color-mix(in srgb,var(--heading) 3%,var(--bg));color:var(--heading);font:inherit;transition:border-color .2s}
.contact input::placeholder,.contact textarea::placeholder{color:var(--muted)}
.contact input:focus,.contact textarea:focus{outline:none;border-color:var(--accent)}
.contact .btn{justify-self:start}
.contact .sent{color:var(--heading)}

/* footer */
.site-footer{text-align:center;color:var(--footer);font-size:15px;padding:56px 5% 48px}
.site-footer p{margin:14px 0 0}
.footer-social a{color:var(--footer)}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 94%,transparent);cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{max-width:96vw;max-height:94svh;object-fit:contain}
.lightbox button{position:absolute;top:12px;inset-inline-end:16px;background:none;border:0;color:var(--heading);font-size:36px;cursor:pointer}

@media (max-width:1024px){.covers{grid-template-columns:repeat(var(--c-t),1fr)}}
@media (max-width:640px){
  .site-header{gap:14px;padding:0 4%}.site-header nav{gap:14px}.header-social{display:none}
  .covers{grid-template-columns:repeat(var(--c-m),1fr);padding:24px 4% 0;gap:12px}
  .row{grid-template-columns:1fr}
  .row.rev .col:first-child{order:2}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .page-header{padding:48px 5% 36px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}