/* pages.css: the one stylesheet for the generated project pages and the static pages (privacy, terms, copyright, 404).
   Tokens are read from the locked homepage (site/N2-Cinema.dc.html): ground #FFFFFF, ink #141318, muted #55535C,
   hairline #E4E4E8, surface #EFEFF1, Tonnelier 400/600, Source Code Pro for labels and ids, gutters clamp(16px,4vw,56px),
   square buttons 48px high, 12px picture tiles with the purple halo (99,91,255). Mobile first; fonts load relative to this file. */

@font-face{font-family:"Tonnelier";src:url("fonts/Tonnelier-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Tonnelier";src:url("fonts/Tonnelier-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Tonnelier";src:url("fonts/Tonnelier-Semibold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}

:root{
  --paper:#FFFFFF;--ink:#141318;--muted:#55535C;--line:#E4E4E8;--surface:#EFEFF1;
  --halo:99,91,255;
  --gutter:clamp(16px,4vw,56px);
  --maxw:1440px;
  --sans:Tonnelier,'Segoe UI',system-ui,sans-serif;
  --mono:'Source Code Pro',monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;overflow-wrap:break-word}
main{flex:1 0 auto}
main:focus{outline:none}
h1,h2,h3,p,ul,ol,dl,dd,figure,address{margin:0}
img,picture{display:block;max-width:100%}
img{height:auto}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--muted)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

/* type */
h1,h2,h3{font-weight:600;letter-spacing:-.02em;text-wrap:balance}
h1,h2,h3,.lede,.crumbs,.card__name,.spec dd{overflow-wrap:anywhere}
h1{font-size:clamp(36px,4.4vw,64px);line-height:1}
h2{font-size:clamp(26px,2.6vw,40px);line-height:1.1}
h3{font-size:23px;line-height:1.2;letter-spacing:-.01em}
.lede{max-width:30em;margin-top:20px;font-size:clamp(22px,2vw,30px);line-height:1.45}
.lede--sm{margin-top:16px;font-size:clamp(18px,1.5vw,21px);line-height:1.5}
.muted{color:var(--muted)}
.lbl{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.lbl--sec{font-size:12px;letter-spacing:.26em}
.lbl b{font-weight:600;color:var(--ink)}
.tbc{font-family:var(--mono);font-size:.85em;padding:1px 6px;background:var(--surface)}

/* skip link */
.skip{position:absolute;left:var(--gutter);top:-120px;z-index:100;display:inline-flex;align-items:center;min-height:48px;padding:0 18px;background:var(--ink);color:#fff;font-weight:600;text-decoration:none}
.skip:focus,.skip:focus-visible,.skip:hover{top:12px;color:#fff}

/* header */
.hdr{border-bottom:1px solid var(--line);background:var(--paper)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:10px}
.hdr__logo{display:block;flex:none;line-height:0}
.hdr__logo img{width:145px;height:auto}
.nav{display:none}
.nav a,.menu nav a{text-decoration:none}
.nav a{display:inline-flex;align-items:center;min-height:40px;padding:9px 12px;font-size:13px}
.nav a[aria-current]{font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.menu{position:relative}
.menu summary{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border:1px solid var(--ink);background:var(--paper);font-size:15px;cursor:pointer;list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--ink);color:#fff}
.menu nav{position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:min(240px,calc(100vw - 2 * var(--gutter)));padding:6px 0;border:1px solid var(--ink);background:var(--paper)}
.menu nav a{display:flex;align-items:center;min-height:48px;padding:0 18px;font-size:17px}
.menu nav a[aria-current]{font-weight:600}
@media (min-width:768px){
  .hdr__logo img{width:165px}
  .menu{display:none}
  .nav{display:flex;gap:4px}
}

/* breadcrumb */
.crumbs{padding-top:18px}
.crumbs ol{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted)}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"/";content:"/" / "";padding:0 10px}
.crumbs a{display:inline-flex;align-items:center;min-height:32px;color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:15px 26px;border:1px solid var(--ink);background:var(--ink);color:#fff;font:600 17px/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:background .25s,color .25s}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn--line{background:transparent;color:var(--ink)}
.btn--line:hover{background:var(--ink);color:#fff}
.btns{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:479px){.btns .btn{flex:1 1 100%}}

/* page head and prose */
.page{padding-block:36px 72px}
.page>.lbl+h1{margin-top:14px}
.page>.btns{margin-top:32px}
.prose{max-width:68ch}
.prose h2{margin:48px 0 12px;font-size:clamp(22px,2vw,28px);line-height:1.2}
.prose p,.prose ul{margin:0 0 16px}
.prose ul{padding-left:1.2em}
.prose li{margin:6px 0}
.prose .lede{margin:20px 0 0}
.note{max-width:68ch;margin-top:28px;padding:14px 18px;border:1px solid var(--ink);font-family:var(--mono);font-size:13px;letter-spacing:.04em}
.prose .note{margin:28px 0 0}
.empty{max-width:640px;margin-top:32px;padding:28px clamp(18px,3vw,32px);border:1px solid var(--line)}
.empty p+p,.empty p+.btns{margin-top:12px}
.empty p{font-size:16.5px;line-height:1.5}

/* department rows (projects index) */
.depts{margin:40px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.dept{display:grid;gap:6px 24px;padding:28px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color .25s}
.dept__name{min-width:0;font-size:clamp(30px,4vw,56px);font-weight:600;letter-spacing:-.02em;line-height:1.05}
.dept__count{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.dept__line{min-width:0;font-size:16.5px;line-height:1.5;color:var(--muted)}
.dept:hover{border-bottom-color:var(--ink);color:var(--ink)}
@media (min-width:700px){
  .dept{grid-template-columns:minmax(0,1fr) auto;align-items:baseline}
  .dept__line{grid-column:1}
  .dept__count{grid-column:2;grid-row:1}
}

/* project header */
.proj{display:grid;gap:24px;padding-block:20px 8px;grid-template-areas:"title" "hero" "spec" "cta"}
.proj__title{grid-area:title;min-width:0}
.proj__title h1{margin-top:14px}
.proj__hero{grid-area:hero;min-width:0}
.proj__hero img{width:100%;height:auto;background:var(--surface)}
.proj__spec{grid-area:spec;min-width:0}
.proj__cta{grid-area:cta}
.proj:not(:has(.proj__spec)){grid-template-areas:"title" "hero" "cta"}
@media (min-width:1024px){
  .proj{grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-rows:auto auto 1fr;grid-template-areas:"hero title" "hero spec" "hero cta";gap:28px 48px;align-items:start}
  .proj:not(:has(.proj__spec)){grid-template-rows:auto 1fr;grid-template-areas:"hero title" "hero cta"}
}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px 16px;padding:22px;border:1px solid var(--line)}
.spec div{min-width:0}
.spec dt{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.spec dd{margin-top:6px;font-size:19px;font-weight:600;line-height:1.4}
.spec .spec__wide{grid-column:1/-1}

/* picture tiles: gallery and cards */
.section{padding-top:56px}
.section>h2{margin-bottom:24px}
.pics,.cards{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.pics{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));align-items:start}
.cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:28px 10px}
.pics picture,.pics img{width:100%}
.pics img,.card__pic{border-radius:12px;background:var(--surface);box-shadow:0 0 0 1px rgba(var(--halo),.4),0 0 7px 1px rgba(var(--halo),.25)}
.card>a{display:block;color:var(--ink);text-decoration:none}
.card__pic{display:block;aspect-ratio:3/2;overflow:hidden;transition:box-shadow .25s}
.card__pic picture,.card__pic img{width:100%;height:100%}
.card__pic img{object-fit:cover;object-position:100% 100%;transition:transform .3s}
.card .lbl{display:block;margin-top:14px}
.card__name{display:block;margin-top:4px;font-size:23px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.card__meta{display:block;margin-top:4px;font-size:16.5px;line-height:1.5;color:var(--muted)}
@media (hover:hover){
  .card>a:hover .card__pic{box-shadow:0 0 0 2px rgba(var(--halo),.65),0 0 14px 3px rgba(var(--halo),.4)}
  .card>a:hover .card__pic img{transform:scale(1.07)}
}
.depts-other{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:48px;font-family:var(--mono);font-size:13px}
.depts-other a{display:inline-flex;align-items:center;min-height:44px}

/* page head of the department and index pages */
.pend{padding-bottom:72px}
.phead{padding-top:36px}
.phead__count{margin-top:20px}
.phead__list{margin-top:40px}
.phead__more{margin-top:24px;font-size:16.5px}

/* closing call to action: the closing frame of the homepage without the photo */
.cta{background:var(--ink);color:#fff}
.cta .lbl{color:rgba(255,255,255,.85)}
.cta__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 48px;padding-block:56px}
.cta h2{max-width:14em;color:#fff}
.cta p{max-width:34em;margin-top:12px;color:rgba(255,255,255,.85)}
.cta .btn{border-color:#fff;background:#fff;color:var(--ink)}
.cta .btn:hover{background:var(--ink);color:#fff}
.cta .btn--line{background:transparent;color:#fff}
.cta .btn--line:hover{background:#fff;color:var(--ink)}
.cta :focus-visible{outline-color:#fff}

/* footer: contact data from content/contact.json */
.ftr{margin-top:0;padding-top:56px;border-top:1px solid var(--line)}
.ftr__top{display:flex;flex-wrap:wrap;gap:36px 56px}
.ftr__logo img{width:180px;height:auto}
.ftr__cols{flex:1 1 560px;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px 32px}
.ftr__cols>div{min-width:0}
.ftr .lbl{display:block}
.ftr address,.ftr__val{display:block;margin-top:6px;font-size:17px;font-weight:600;font-style:normal;line-height:1.4}
.ftr__val a{display:block;text-decoration:none}
.ftr__social{display:flex;margin:2px 0 0 -12px}
.so{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--ink)}
.so:hover{color:var(--muted)}
.ico{display:block;width:20px;height:20px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.i-fb{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E")}
.i-ig{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='20' x='2' y='2' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' x2='17.51' y1='6.5' y2='6.5'/%3E%3C/svg%3E")}
.i-yt{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17'/%3E%3Cpath d='m10 15 5-3-5-3z'/%3E%3C/svg%3E")}
.ftr__legal{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:36px;padding-top:6px;border-top:1px solid var(--line);font-family:var(--mono);font-size:13px}
.ftr__legal a{display:inline-flex;align-items:center;min-height:44px}
.ftr__copy{padding-block:6px 14px;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;color:var(--muted)}
.ftr__end{height:calc(var(--wa-clear,78px) + env(safe-area-inset-bottom,0px))}

/* shared WhatsApp button (/shared/wa-float.css): colours only */
.wa-float{--wa-z:50;--wa-bg:#141318;--wa-fg:#FFFFFF;--wa-bg-light:#FFFFFF;--wa-fg-light:#141318;--wa-hover-bg:#FFFFFF;--wa-hover-fg:#141318;--wa-ring:#141318;--wa-ring-light:#FFFFFF;--wa-border:1px solid #141318;--wa-border-light:1px solid #E4E4E8}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}