/* louisingelaere.be */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;src:url("/fonts/bricolage-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;src:url("/fonts/bricolage-latin-ext.woff2") format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#f6f5f3; --fg:#1d1d1f; --muted:#5f5f5f; --line:#d8d7d3; --field:#fbfbfa; --field-border:#8a8a8a;
  --accent:#ff383c; --on-accent:#1d1d1f; --band-field:#f6f5f3;
  --gutter:20px; --radius:2px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#1e1e20; --fg:#eceae6; --muted:#a8a7a3; --line:#3c3c3f; --field:#1e1e20; --field-border:#6a6a6e;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1e1e20; --fg:#eceae6; --muted:#a8a7a3; --line:#3c3c3f; --field:#1e1e20; --field-border:#6a6a6e;
    color-scheme:dark;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto;border-radius:var(--radius)}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius)}
h1,h2,h3,p,figure{margin:0}
.muted{color:var(--muted)}
.link{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- shell ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px var(--gutter)}
.topbar .logo img{width:88px;border-radius:0}
.menu-btn{width:44px;height:44px;border:0;background:none;color:var(--fg);display:grid;place-items:center;cursor:pointer;padding:0}
.side{display:none}
.side.open{display:flex;position:fixed;inset:0;z-index:20;background:var(--bg);overflow:auto;padding:16px var(--gutter) 32px}
.side{flex-direction:column;gap:40px}
.side .logo img{width:132px;border-radius:0}
.side-head{display:flex;justify-content:space-between;align-items:flex-start}
.nav{display:flex;flex-direction:column;gap:28px;font-size:20px}
.nav-group{display:flex;flex-direction:column;gap:4px}
.nav a,.nav summary{display:flex;align-items:center;gap:6px;min-height:44px}
.nav .sub{color:var(--muted)}
.nav a[aria-current="page"]{font-weight:600;color:var(--fg)}
.nav details summary{list-style:none;cursor:pointer;color:var(--muted)}
.nav details summary::-webkit-details-marker{display:none}
.nav details[open] summary svg{transform:rotate(180deg)}
.nav details a{padding-left:16px;color:var(--muted)}
.side-nl{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:28px}
.side-nl p{font-size:15px;line-height:1.45}
.side-nl label{font-size:13px;color:var(--muted)}
.theme-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;color:var(--muted);font:inherit;font-size:14px;cursor:pointer}
.theme-btn:hover{color:var(--fg)}
.theme-btn .to-light{display:none}
:root[data-theme="dark"] .theme-btn .to-light{display:inline-flex}
:root[data-theme="dark"] .theme-btn .to-dark{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn .to-light{display:inline-flex}
  :root:not([data-theme="light"]) .theme-btn .to-dark{display:none}
}
.theme-btn span{display:inline-flex;align-items:center;gap:8px}

main{display:flex;flex-direction:column;gap:64px;min-width:0;padding-bottom:0}
.pad{padding-left:var(--gutter);padding-right:var(--gutter)}

@media (min-width:960px){
  :root{--gutter:0px}
  .topbar{display:none}
  .shell{display:grid;grid-template-columns:300px minmax(0,1fr);align-items:start;max-width:1760px;margin:0 auto}
  .side,.side.open{display:flex;position:sticky;top:0;inset:auto;z-index:auto;max-height:100vh;overflow:auto;padding:44px 32px 40px 40px;gap:56px}
  .side-head .menu-btn{display:none}
  .nav{font-size:17px}
  .nav a,.nav summary{min-height:36px}
  main{padding:44px 56px 0 24px;gap:96px}
}

/* ---------- forms ---------- */
input,textarea,button{font:inherit}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:14px}
.input{height:52px;border:1px solid var(--field-border);border-radius:var(--radius);padding:0 16px;background:var(--field);color:var(--fg);width:100%}
textarea.input{height:auto;min-height:180px;padding:14px 16px;resize:vertical;line-height:1.5}
.input.sm{height:44px;padding:0 12px;font-size:15px}
.btn{height:52px;border:0;border-radius:var(--radius);background:var(--fg);color:var(--bg);font-weight:600;cursor:pointer;padding:0 24px}
.btn:hover{opacity:.88}
.btn.accent{background:var(--accent);color:var(--on-accent)}
.btn.sm{height:44px}
.btn-outline{display:flex;align-items:center;justify-content:center;min-height:52px;border:1px solid var(--fg);border-radius:var(--radius);font-weight:500;padding:0 24px}
.form-msg{font-size:15px;min-height:1.5em}

/* ---------- pieces ---------- */
.hero{display:flex;flex-direction:column;gap:12px}
.hero img{width:100%}
@media (max-width:959px){.hero img{border-radius:0}}
.cap{font-size:14px;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.cap b{font-weight:600}
.cap .enquire{flex:none;min-height:44px;display:inline-flex;align-items:center}
@media (min-width:960px){.cap{font-size:15px}.cap .enquire{min-height:0}.hero{gap:16px}}

.intro{display:flex;flex-direction:column;gap:16px}
.intro h1{font-size:clamp(56px,11vw,80px);line-height:.9;font-weight:500;letter-spacing:-.04em}
.intro .lead{font-size:18px;line-height:1.5}
.intro .meta{font-size:14px;color:var(--muted)}
@media (min-width:960px){
  .intro{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .intro .lead{font-size:20px}
  .intro .meta{font-size:15px}
  .intro .txt{display:flex;flex-direction:column;gap:16px;padding-top:6px}
}
.intro .txt{display:flex;flex-direction:column;gap:12px}

.rows{display:flex;flex-direction:column;gap:40px}
.row{display:grid;gap:40px 20px;align-items:end}
.work{display:flex;flex-direction:column;gap:10px}
.work a.img{display:block}
.work img{width:100%}
@media (min-width:960px){
  .rows{gap:96px}
  .row{gap:56px}
  .row.r2{grid-template-columns:1fr 1fr}
  .row.r3a{grid-template-columns:1.25fr 1fr .75fr}
  .row.r3b{grid-template-columns:1.4fr .5fr .6fr}
  .work{gap:14px}
}
@media (max-width:959px){
  .row.r3a,.row.r3b{grid-template-columns:1fr 1fr}
  .row.r3a>.work:first-child,.row.r3b>.work:first-child{grid-column:1/-1}
}

/* all works: columns, never cropped, small works shown smaller */
.wall{columns:1;column-gap:20px}
.wall .work{break-inside:avoid;margin-bottom:40px}
.wall .work.s{width:62%}
.wall .work.m{width:82%}
@media (min-width:600px){.wall{columns:2;column-gap:40px}.wall .work{margin-bottom:56px}}
@media (min-width:1280px){.wall{columns:3;column-gap:56px}.wall .work{margin-bottom:72px}}

.band{background:var(--accent);color:var(--on-accent);padding:48px var(--gutter);display:flex;flex-direction:column;gap:24px}
.band h2{font-size:28px;line-height:1.15;font-weight:500;letter-spacing:-.02em}
.band form{display:flex;flex-direction:column;gap:12px}
.band .input{background:var(--band-field);color:#1d1d1f;border-color:#1d1d1f}
.band .btn{background:#1d1d1f;color:#f6f5f3;margin-top:6px}
.band a{text-decoration:underline;text-underline-offset:3px}
.band a:hover{color:inherit;opacity:.7}
@media (min-width:960px){
  .band{padding:72px 64px;display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center;border-radius:var(--radius)}
  .band h2{font-size:40px;line-height:1.1}
}

.teaser{display:flex;flex-direction:column;gap:16px}
.teaser h2{font-size:40px;line-height:1;font-weight:500;letter-spacing:-.03em}
.eyebrow{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media (min-width:960px){
  .teaser{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .teaser h2{font-size:48px}
  .teaser .txt{display:flex;flex-direction:column;gap:16px}
}
.teaser .txt{display:flex;flex-direction:column;gap:12px}

.page-title{font-size:clamp(48px,9vw,80px);line-height:.95;font-weight:500;letter-spacing:-.04em}
.prose{max-width:680px;display:flex;flex-direction:column;gap:20px;font-size:18px;line-height:1.6}
.prose h2{font-size:28px;line-height:1.2;font-weight:500;letter-spacing:-.02em;margin-top:28px}
.prose .lead{font-size:22px;line-height:1.45}
.split{display:flex;flex-direction:column;gap:32px}
@media (min-width:960px){.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:56px;align-items:start}.split .sticky{position:sticky;top:44px}}
.narrow{max-width:560px;display:flex;flex-direction:column;gap:16px}
.stack{display:flex;flex-direction:column;gap:24px}

footer.foot{padding:28px var(--gutter) 32px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;font-size:14px;color:var(--muted);border-top:1px solid var(--line)}
footer.foot nav{display:flex;flex-wrap:wrap;gap:8px 24px}
footer.foot a{min-height:44px;display:inline-flex;align-items:center}
@media (min-width:960px){footer.foot{padding:24px 0 48px}footer.foot a{min-height:0}}

/* lightbox */
.lb{position:fixed;inset:0;z-index:50;background:var(--bg);display:none;flex-direction:column}
.lb.open{display:flex}
.lb-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;font-size:15px}
.lb-stage{flex:1;min-height:0;position:relative;margin:0 16px 16px}
.lb-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:0}
.lb button{width:44px;height:44px;border:0;background:none;color:var(--fg);cursor:pointer;display:grid;place-items:center;padding:0}
.lb-nav{display:flex;gap:4px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.sec-title{font-size:28px;line-height:1.15;font-weight:500;letter-spacing:-.02em}
@media (min-width:960px){.sec-title{font-size:36px}}
.prose .fig{margin:28px 0 0;display:flex;flex-direction:column;gap:10px}
.prose .fig figcaption{font-size:14px;line-height:1.45;color:var(--muted)}
.prose .fig+h2{margin-top:8px}

/* sidebar must always fit the window: it tightens on shorter screens and scrolls with the page on very short ones */
@media (min-width:960px){
  .side,.side.open{height:100vh;height:100dvh;max-height:none;overflow:visible;gap:clamp(18px,4.5vh,56px);padding-top:clamp(20px,4.5vh,44px);padding-bottom:clamp(16px,3vh,40px)}
  .side .logo img{width:clamp(92px,13vh,132px)}
  .nav{gap:clamp(12px,2.6vh,28px)}
  .nav-group{gap:clamp(0px,.6vh,4px)}
  .nav a,.nav summary{min-height:clamp(30px,4.2vh,36px)}
  .side-nl{padding-top:clamp(14px,3vh,28px);gap:8px}
  .side-nl .form-msg:empty{display:none}
}
@media (min-width:960px) and (max-height:900px){
  .side .side-nl{display:none}
}
@media (min-width:960px) and (max-height:560px){
  .side,.side.open{position:static;height:auto}
}