:root{--ink:#141819;--paper:#eeeeef;--red:#c70912;--sidebar:290px;--gap:10px;color-scheme:light;font-family:"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{color:inherit;cursor:pointer}button{border:0}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--red);outline-offset:4px}button:hover{filter:brightness(.94)}.icon{width:25px;height:25px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.skip{position:fixed;top:-100px;left:20px;background:white;padding:14px;z-index:100}.skip:focus{top:10px}
.sidebar{position:fixed;inset:0 auto 0 0;width:calc(var(--sidebar) + 27px);z-index:5;background-image:url('assets/sidebar-wall.png');background-size:calc(var(--sidebar) * 1.47) 100%;background-position:left top;clip-path:polygon(0 0,89% 0,82% 23%,78% 38%,82% 62%,100% 100%,0 100%);overflow:hidden}.brand{display:flex;flex-direction:column;align-items:center;width:245px;height:187px;padding-top:20px}.brand img{width:119px;height:91px;object-fit:contain}.brand span{font-family:Georgia,"Times New Roman",serif;font-size:29px;font-variant:small-caps;text-align:center;line-height:.96;letter-spacing:1px;margin-top:5px}.sidebar nav{position:relative;z-index:2;width:225px;padding:0 20px 0 29px}.nav-link{display:flex;align-items:center;gap:19px;height:42px;padding:0 10px;font-size:16px;border-radius:5px}.nav-link .icon{width:26px;height:26px;fill:currentColor;stroke-width:1.7}.nav-link:hover,.nav-link[aria-current="page"]:not([href="#home"]){background:#ffffff60}.nav-link[aria-current="page"]:not([href="#home"]){box-shadow:inset 3px 0 var(--red)}.mascot{position:absolute;bottom:0;left:0;width:100%;height:auto;display:block;mask-image:linear-gradient(transparent,#000 6%)}
main{position:relative;margin-left:var(--sidebar);min-height:100vh;padding:0 35px 0 30px;isolation:isolate}.landscape{position:absolute;z-index:-1;top:0;left:-65px;right:0;height:495px;background:linear-gradient(to bottom,transparent 56%,#eeeeef30 65%,#eeeeefdb 87%,var(--paper) 100%),url('assets/bergsee.png') center top/cover no-repeat}.hero{height:322px;position:relative}.toolbar{position:absolute;right:0;top:16px;display:flex;align-items:center;gap:17px}.icon-button{display:inline-flex;align-items:center;justify-content:center;background:transparent;width:34px;height:36px;padding:5px;border-radius:6px}.toolbar .icon{fill:currentColor;stroke-width:1.5}.profile{display:flex;gap:13px;align-items:center;background:transparent;font-size:16px}.profile>svg{width:36px;height:36px;border-radius:50%;border:1px solid #333}.profile .icon{width:17px;fill:none}.welcome{position:absolute;left:4px;top:85px;color:#f4f4f2;text-shadow:0 2px 5px #0008}.eyebrow{text-transform:uppercase;font-size:18px;letter-spacing:7px;margin:0 0 0 2px}.welcome h1{font-family:Georgia,"Times New Roman",serif;font-variant:small-caps;font-weight:400;font-size:70px;line-height:1.03;letter-spacing:1px;margin:0 0 8px}.tagline{font-size:23px;font-weight:300;margin:0}.weather{position:absolute;right:-2px;top:76px;padding:15px 17px 17px;border-radius:12px;color:white;background:linear-gradient(#463c36bf,#111719f0);box-shadow:0 5px 18px #0002;width:194px;backdrop-filter:blur(12px)}.weather>p{font-size:12px;margin:0 0 13px;white-space:nowrap}.weather>div{display:flex;align-items:center;gap:15px}.sun{font-family:Arial,sans-serif;font-size:53px;line-height:1}.weather strong{font-size:27px;font-weight:400;white-space:nowrap}.weather small{display:block;font-size:13px;margin-top:4px}.search{position:absolute;left:3px;top:242px;display:flex;align-items:center;gap:12px;width:484px;max-width:65%;height:41px;padding:0 13px;background:#ffffffe0;backdrop-filter:blur(12px);border:1px solid #fff8;border-radius:13px;box-shadow:0 5px 14px #0002}.search input{background:transparent;border:0;outline:none;width:100%;font-size:14px;color:#252728}.search:focus-within{outline:2px solid #fff;box-shadow:0 0 0 4px #292e2d77}.search .icon{width:23px}
.gallery-content{position:relative}.categories,.albums,.photos{display:grid;gap:var(--gap);grid-template-columns:repeat(6,minmax(0,1fr))}.categories{grid-template-columns:.85fr .88fr .98fr 1.04fr 1.11fr 1.14fr;padding-right:43px;position:relative}.card{display:block;text-align:left;background:linear-gradient(#fff,#ebebed);border:1px solid #ffffffc9;border-radius:6px;overflow:hidden;padding:0;box-shadow:0 4px 10px #0000001a;transition:transform .18s,box-shadow .18s;min-width:0}.card:hover{transform:translateY(-3px);box-shadow:0 7px 15px #0003;filter:none}.photo-art{display:block;width:100%;aspect-ratio:1.78;overflow:hidden}.category .photo-art{height:109px;aspect-ratio:auto}.card-copy{display:flex;align-items:center;gap:12px;padding:10px 12px 12px}.card-copy .icon{width:29px;height:29px;fill:currentColor;stroke-width:1.3}.card-title{display:block;font-size:14px;font-weight:500;white-space:nowrap}.card-count{display:block;font-size:11px;margin-top:2px;color:#424548}.row-next{position:absolute;right:0;top:0;bottom:0;width:37px;background:#ffffff40;border-radius:0 6px 6px 0;display:grid;place-items:center}.section-heading{display:flex;justify-content:space-between;align-items:center;margin:21px 0 8px}.section-heading h2{font-family:Georgia,"Times New Roman",serif;font-size:26px;font-weight:400;margin:0;line-height:1.3}.text-button{display:inline-flex;align-items:center;gap:9px;background:transparent;font-size:13px;padding:7px 0}.text-button .icon{width:18px;height:18px}.photos{padding-right:43px;position:relative}.photo{background:transparent;border-radius:5px;padding:0;overflow:hidden;min-width:0}.photo .photo-art{height:98px;aspect-ratio:auto;transition:transform .2s}.photo:hover .photo-art{transform:scale(1.035)}.album-section .section-heading{margin-top:25px}.album .photo-art{height:104px;aspect-ratio:auto}.album .card-title{padding:10px 11px 11px}.empty{padding:26px;border:1px dashed #bbb;border-radius:8px;color:#555}.expanded{grid-template-columns:repeat(4,minmax(0,1fr));padding-right:0}.expanded .photo-art{height:auto;aspect-ratio:1.78}.expanded .photo{box-shadow:0 2px 8px #0002}.expanded .row-next{display:none}
footer{border-top:1px solid #d8d8db;margin-top:18px;padding:14px 0 22px 20px;display:flex;justify-content:space-between;align-items:center;gap:20px}.storage{display:flex;align-items:center;gap:17px;background:transparent;text-align:left;font-size:12px;padding:0}.storage>.icon{width:27px;height:29px;fill:#555;stroke:#eee}.muted{color:#555}.meter{display:block;width:228px;height:8px;background:#c9c9cc;border-radius:8px;margin-top:4px;overflow:hidden}.meter>span{display:block;background:var(--red);height:100%;width:35%;border-radius:8px}.footer-links{display:flex;align-items:center;gap:13px}.footer-links button{font-size:11px;color:#515156;background:transparent;padding:4px 0}.footer-links i{width:1px;height:11px;background:#888}.mobile-menu{display:none}
dialog{border:1px solid #ffffff66;border-radius:13px;padding:20px;background:#f5f5f6;color:var(--ink);box-shadow:0 20px 100px #0005;max-height:90vh;max-width:90vw}dialog::backdrop{background:#080b0dd6;backdrop-filter:blur(8px)}#viewer{width:850px}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:12px}.dialog-top h2{font:26px Georgia,serif;margin:0}#viewer-image .photo-art{max-height:65vh;aspect-ratio:1.78;border-radius:5px}.viewer-bottom{display:flex;justify-content:space-between;margin-top:10px}#favorite[aria-pressed="true"]{color:var(--red)}#info{width:430px}#info-text{line-height:1.65;margin-bottom:5px}.mobile-menu{z-index:10}
#access{width:min(440px,calc(100vw - 32px))}#access p{line-height:1.5}#access-form,#login-form{display:grid;gap:12px;margin-top:18px}#access-form[hidden],#login-form[hidden]{display:none!important}#access-form label,#login-form label{display:grid;gap:5px;font-size:14px;font-weight:600}#access-form input,#login-form input{height:39px;width:100%;padding:0 10px;border:1px solid #bbb;border-radius:6px;background:#fff}#access-message,#login-message{min-height:22px;margin:0;font-size:13px;color:#444}
@media(min-width:1700px){:root{--sidebar:320px}main{padding-right:45px;padding-left:35px}.brand{width:270px}.hero{height:360px}.welcome{top:105px}.search{top:275px}.landscape{height:555px}.category .photo-art{height:135px}.photo .photo-art{height:120px}.album .photo-art{height:130px}.sidebar nav{padding-left:35px}.nav-link{height:46px}.brand{height:200px}}
@media(max-width:1200px){:root{--sidebar:240px}main{padding-left:22px;padding-right:22px}.brand{width:209px}.brand span{font-size:25px}.sidebar nav{width:202px;padding-left:19px}.nav-link{gap:14px}.welcome h1{font-size:59px}.tagline{font-size:19px}.weather{width:180px}.categories{grid-template-columns:repeat(6,155px);overflow-x:auto;padding-bottom:12px;scrollbar-width:thin}.categories>.row-next{display:none}.card-copy{padding:9px;gap:8px}.albums{grid-template-columns:repeat(3,minmax(0,1fr))}.photos{grid-template-columns:repeat(3,minmax(0,1fr));padding-right:0}.photos>.row-next{display:none}.photo .photo-art{height:auto;aspect-ratio:1.8}.album .photo-art{height:auto;aspect-ratio:1.8}.footer-links{gap:8px}footer{padding-left:0}.meter{width:170px}.mascot{width:110%}}
@media(max-width:760px){:root{--sidebar:0px}.sidebar{width:280px;transform:translateX(-100%);transition:transform .2s;background-size:410px 100%;clip-path:none;box-shadow:10px 0 50px #0008}.sidebar.open{transform:translateX(0)}.sidebar .mascot{width:100%;max-height:45vh}.sidebar nav{width:225px}.brand{height:170px}.nav-link{height:39px}.mobile-menu{display:flex;position:fixed;top:15px;left:12px;background:#ffffffdd;font-size:24px}.sidebar.open~main{pointer-events:none}.brand{padding-left:28px}.hero{height:345px}.toolbar{top:16px;gap:8px}.toolbar>.icon-button{display:none}.profile{gap:7px}.welcome{top:107px;left:0}.eyebrow{font-size:13px;letter-spacing:5px}.welcome h1{font-size:52px}.tagline{font-size:16px;max-width:250px;line-height:1.45}.weather{top:65px;width:auto;padding:8px 10px;background:#2229}.weather>p,.weather small{display:none}.weather>div{gap:5px}.sun{font-size:23px}.weather strong{font-size:15px}.search{top:272px;width:100%;max-width:100%;left:0}.landscape{height:510px;background-position:58% top;left:0}.categories{grid-template-columns:repeat(6,155px)}main{padding:0 18px}.section-heading h2{font-size:23px}.text-button{font-size:12px}.photos,.albums,.expanded{grid-template-columns:repeat(2,minmax(0,1fr))}.section-heading{margin-top:17px}footer{align-items:flex-start;flex-direction:column;gap:19px}.meter{width:200px}.footer-links{align-self:flex-end}.mascot{z-index:-1}.card-title{font-size:13px}dialog{padding:14px}.dialog-top h2{font-size:22px}}
.sidebar{background-size:calc(var(--sidebar) * 1.28) 100%}.nav-link[href="#photos"] .icon,.nav-link[href="#time"] .icon,.nav-link[href="#search"] .icon{fill:none}.nav-link[href="#places"] .icon{fill-rule:evenodd}.welcome h1{font-weight:400}
@media(max-width:760px){.sidebar{background-size:370px 100%;overflow-y:auto}.sidebar nav{padding-bottom:20px}.sidebar .mascot{position:relative;margin-top:8px;max-height:none;z-index:0}.brand{position:relative;z-index:1}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media(max-width:760px){.sidebar{visibility:hidden}.sidebar.open{visibility:visible}}

/* Sidebar: the mural stays one uninterrupted column and meets the mascot. */
@media (min-width:1200px){
  :root{--sidebar:clamp(300px,18vw,360px)}
  .sidebar{width:var(--sidebar);display:block;overflow:hidden!important;overflow-y:hidden!important;clip-path:none;background:#171210;background-image:none}
  .sidebar::before{content:"";position:absolute;inset:0;background:url('assets/sidebar-wall.png') left top / cover no-repeat;pointer-events:none}
  .sidebar-wall{display:none!important;mask-image:none!important}
  .brand{position:relative;z-index:1;width:calc(100% - 44px);height:205px;padding-top:24px}
  .brand img{width:125px;height:96px}.brand span{font-size:30px}
  .sidebar nav{position:relative;z-index:1;width:calc(100% - 42px);padding:18px 18px 0 29px}.nav-link{height:45px}
  .sidebar .mascot{z-index:1;width:min(100%,330px);height:clamp(285px,38vh,455px);max-height:none;object-fit:contain;object-position:left bottom;mask-image:none}
  main{margin-left:var(--sidebar)}
}

/* Tablet: navigation and mascot share the fixed sidebar without a scrollbar. */
@media (min-width:761px) and (max-width:1199px){
  .sidebar{overflow:hidden!important;overflow-y:hidden!important}
  .sidebar .mascot{display:block!important;position:absolute!important;top:auto!important;right:auto!important;bottom:0!important;left:0!important;width:100%!important;height:clamp(190px,30vh,300px)!important;margin:0!important;z-index:0;mask-image:none!important}
  .sidebar nav{position:relative;z-index:1;padding-bottom:0}.brand{position:relative;z-index:1}
}

/* Phone menu uses the viewport; its content is compact enough to avoid scrolling. */
@media (max-width:760px){
  .sidebar{overflow:hidden!important;overflow-y:hidden!important}
  .sidebar .mascot{display:block!important;position:absolute!important;top:auto!important;right:auto!important;bottom:0!important;left:0!important;width:100%!important;height:min(31vh,245px)!important;margin:0!important;z-index:0;mask-image:none!important}
  .sidebar nav{position:relative;z-index:1;padding-bottom:0}.brand{position:relative;z-index:1;height:155px}.nav-link{height:37px}
}

/* PHP layout: continuous wall, compact header and utility footer. */
.sidebar{width:calc(var(--sidebar) + 30px);clip-path:none;background:none;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;scrollbar-width:thin}
.sidebar-wall{position:absolute;inset:0;width:100%;height:100%;min-height:850px;pointer-events:none;z-index:-1;overflow:visible}
.brand{flex-shrink:0;position:relative;z-index:1}
.sidebar nav{flex-shrink:0;margin-top:48px}
.sidebar .mascot{position:relative;inset:auto;margin-top:auto;padding-top:12px;width:100%;height:clamp(230px,calc(100vh - 590px),460px);flex-shrink:0;mask-image:linear-gradient(transparent,#000 9%);z-index:0}
.hero{height:265px}.welcome{top:42px}.search{top:191px}.landscape{height:440px}
.site-footer{min-height:42px;margin-top:14px;padding:5px 0;gap:15px;flex-direction:row;align-items:center;flex-wrap:wrap}
.site-footer .storage{font-size:11px;gap:8px;flex-shrink:0}.site-footer .storage>.icon{width:20px;height:23px}.site-footer .meter{width:157px;height:4px;margin-top:3px}
.site-footer .weather{position:static;display:flex;align-items:center;gap:7px;width:auto;margin:0;padding:0;border-radius:0;background:none;color:var(--ink);box-shadow:none;backdrop-filter:none;white-space:nowrap}
.site-footer .weather .sun{font-size:25px;line-height:1}.site-footer .weather strong{font-size:14px;font-weight:500}.site-footer .weather small{display:inline;font-size:11px;margin:0;color:#555}
.site-footer .toolbar{position:static;display:flex;align-items:center;gap:7px;margin:0}
.site-footer .toolbar>.icon-button{display:inline-flex;width:29px;height:29px}.site-footer .toolbar .icon{width:19px;height:19px}.site-footer .profile{font-size:12px;gap:7px;padding:0}.site-footer .profile>svg{width:26px;height:26px}.site-footer .profile .icon{width:13px;height:13px}
.site-footer .footer-links{margin-left:auto;gap:10px;align-self:auto}.site-footer .footer-links button{font-size:10px}
@media(min-width:1700px){.hero{height:285px}.welcome{top:52px}.search{top:207px}.landscape{height:475px}.sidebar nav{margin-top:55px}.sidebar .mascot{height:clamp(220px,calc(100vh - 635px),500px)}}
@media(max-width:1200px){.site-footer{gap:9px}.site-footer .footer-links{order:4;flex-basis:100%;justify-content:flex-end}.site-footer .toolbar{margin-left:auto}.sidebar nav{margin-top:42px}.sidebar .mascot{width:100%}}
@media(max-width:760px){.sidebar{width:280px;background:none;overflow-y:auto;box-shadow:none}.sidebar-wall{min-height:850px}.sidebar nav{margin-top:40px;padding-bottom:5px}.sidebar .mascot{height:300px;max-height:none;margin-top:15px}.hero{height:272px}.welcome{top:68px}.welcome h1{font-size:48px}.tagline{max-width:100%;font-size:15px}.search{top:210px}.landscape{height:435px}.site-footer{gap:9px 14px;padding:6px 0}.site-footer .weather small{display:inline}.site-footer .toolbar{margin-left:0}.site-footer .footer-links{flex-basis:auto;margin-left:auto;gap:7px;flex-wrap:wrap}.site-footer .storage{font-size:10px}.site-footer .meter{width:145px}}
.sidebar .mascot{overflow:hidden;padding-top:0;margin-top:12px;min-height:230px;flex:1 0 230px}.sidebar{scrollbar-width:none}.sidebar::-webkit-scrollbar{display:none}
@media(min-width:761px) and (max-width:1350px){.categories{grid-template-columns:repeat(6,155px);overflow-x:auto;padding-bottom:10px}.categories>.row-next{display:none}}
.landscape{left:-130px}.sidebar .mascot{mask-image:linear-gradient(transparent,#000 3%)}
@media(max-width:760px){.landscape{left:0}}
.sidebar-wall{mask-image:linear-gradient(to bottom,#000 570px,transparent 600px)}
@media(min-width:1700px){.sidebar-wall{mask-image:linear-gradient(to bottom,#000 620px,transparent 645px)}}
@media(max-width:760px){.sidebar-wall{mask-image:linear-gradient(to bottom,#000 520px,transparent 550px)}}

/* Responsive layout pass: tablet devices use their own compact, labelled rail.
   This prevents the desktop sidebar from consuming the gallery width. */
@media (min-width: 761px) and (max-width: 1199px) {
  :root { --sidebar: 152px; --gap: 12px; }

  .sidebar {
    width: var(--sidebar);
    background: linear-gradient(180deg, #e7e3dd 0%, #c8c1b7 100%);
    border-right: 4px solid var(--red);
    overflow: hidden;
  }
  .sidebar-wall,
  .sidebar .mascot { display: none; }
  .brand {
    width: 100%;
    height: 132px;
    padding-top: 16px;
  }
  .brand img { width: 74px; height: 58px; }
  .brand span { font-size: 19px; letter-spacing: .4px; }
  .sidebar nav {
    width: 100%;
    margin-top: 30px;
    padding: 0 12px;
  }
  .nav-link { height: 46px; gap: 11px; padding: 0 8px; font-size: 14px; }
  .nav-link .icon { width: 22px; height: 22px; }

  main { margin-left: var(--sidebar); padding: 0 24px; }
  .landscape { left: 0; height: 390px; background-position: 58% top; }
  .hero { height: 245px; }
  .welcome { top: 38px; left: 0; }
  .eyebrow { font-size: 14px; letter-spacing: 5px; }
  .welcome h1 { font-size: clamp(48px, 6vw, 62px); }
  .tagline { font-size: clamp(16px, 2vw, 20px); }
  .search { top: 176px; left: 0; width: min(500px, 72%); max-width: none; }

  .categories {
    grid-template-columns: repeat(6, 176px);
    overflow-x: auto;
    padding: 0 0 12px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .categories .card { scroll-snap-align: start; }
  .categories .row-next { display: none; }
  .category .photo-art { height: 112px; }
  .photos,
  .albums { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-right: 0; }
  .photos .row-next { display: none; }
  .photo .photo-art,
  .album .photo-art { height: auto; aspect-ratio: 1.7; }
  .expanded { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .site-footer { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; }
  .site-footer .footer-links { grid-column: 1 / -1; grid-row: 2; margin-left: 0; justify-content: flex-start; }
  .site-footer .toolbar { margin-left: 0; justify-self: end; }
}

@media (min-width: 761px) and (max-width: 900px) {
  :root { --sidebar: 118px; }
  .brand { height: 118px; }
  .brand img { width: 63px; height: 51px; }
  .brand span { font-size: 16px; }
  .sidebar nav { margin-top: 22px; padding: 0 8px; }
  .nav-link { height: 43px; gap: 8px; padding: 0 5px; font-size: 12px; }
  .nav-link .icon { width: 20px; height: 20px; }
  main { padding: 0 18px; }
  .photos,
  .albums,
  .expanded { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer .toolbar { justify-self: start; }
}

@media (max-width: 760px) {
  .landscape { background-position: 60% top; }
  .welcome h1 { font-size: clamp(38px, 12vw, 50px); }
  .search { width: 100%; }
  .categories { scroll-snap-type: x proximity; }
  .categories .card { scroll-snap-align: start; }
  .photo .photo-art,
  .album .photo-art { aspect-ratio: 1.55; object-fit: cover; }
}

/* Final sidebar rules: keep its mural, mascot and navigation in one fixed rail. */
@media (min-width:1200px){
  :root{--sidebar:clamp(300px,18vw,360px)}
  .sidebar{width:var(--sidebar)!important;display:block!important;overflow:hidden!important;overflow-y:hidden!important;clip-path:none!important;background:#171210!important;background-image:none!important}
  .sidebar::before{content:"";position:absolute;inset:0;background:url('assets/sidebar-wall.png') left top / cover no-repeat;pointer-events:none}
  .sidebar-wall{display:none!important;mask-image:none!important}
  .brand{position:relative;z-index:1;width:calc(100% - 44px);height:205px;padding-top:24px}
  .brand img{width:125px;height:96px}.brand span{font-size:30px}
  .sidebar nav{position:relative;z-index:1;width:calc(100% - 42px);margin-top:0;padding:18px 18px 0 29px}.nav-link{height:45px}
  .sidebar .mascot{display:block!important;position:absolute!important;inset:auto auto 0 0!important;width:min(100%,330px)!important;height:clamp(285px,38vh,455px)!important;min-height:0!important;margin:0!important;padding:0!important;z-index:1;mask-image:none!important}
  main{margin-left:var(--sidebar)!important}
}
@media (min-width:761px) and (max-width:1199px){
  .sidebar{overflow:hidden!important;overflow-y:hidden!important}
  .sidebar .mascot{display:block!important;position:absolute!important;inset:auto auto 0 0!important;width:100%!important;height:clamp(190px,30vh,300px)!important;min-height:0!important;margin:0!important;padding:0!important;z-index:0;mask-image:none!important}
  .sidebar nav{position:relative;z-index:1;padding-bottom:0}.brand{position:relative;z-index:1}
}
@media (max-width:760px){
  .sidebar{overflow:hidden!important;overflow-y:hidden!important}
  .sidebar .mascot{display:block!important;position:absolute!important;inset:auto auto 0 0!important;width:100%!important;height:min(31vh,245px)!important;min-height:0!important;margin:0!important;padding:0!important;z-index:0;mask-image:none!important}
  .sidebar nav{position:relative;z-index:1;padding-bottom:0}.brand{position:relative;z-index:1;height:155px}.nav-link{height:37px}
}

/* Desktop wall: only the textured wall is visible; the page runs directly behind its torn edge. */
@media (min-width:1200px){
  .sidebar{overflow:visible!important;background:transparent!important;background-image:none!important}
  .sidebar{clip-path:polygon(0 0,84% 0,84% 100%,0 100%)!important}
  .sidebar::before{clip-path:none!important}
  .landscape{left:calc(-1 * var(--sidebar))!important}
  .sidebar .mascot{overflow:visible!important}
}

/* Keep the complete original mascot inside the visible desktop viewport. */
@media (min-width:1200px){
  .sidebar .mascot{
    bottom:clamp(14px,2vh,28px)!important;
    height:clamp(250px,34vh,400px)!important;
    object-fit:contain!important;
    object-position:left bottom!important;
  }
}

/* Original assets: sidebar.png is the complete wall; mask.png is separate. */
@media (min-width:1200px){
  .sidebar{
    background:#000 url('assets/sidebar.png') left top / auto 100% no-repeat!important;
    background-image:url('assets/sidebar.png')!important;
    overflow:visible!important;
  }
  .sidebar::before{display:none!important;content:none!important;clip-path:none!important}
}

@media (min-width:1200px){
  .sidebar{clip-path:none!important;background:transparent!important;background-image:none!important}
  .sidebar::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    background:url('assets/sidebar.png') left top / auto 100% no-repeat!important;
    clip-path:polygon(0 0,84% 0,84% 100%,0 100%)!important;
    pointer-events:none!important;
  }
}

/* Desktop footer occupies only its own bar and sits beneath the sidebar artwork. */
@media (min-width:1200px){
  main{display:flex;min-height:100vh;flex-direction:column}
  .gallery-content{flex:0 0 auto}
  .site-footer{
    height:34px!important;
    min-height:34px!important;
    margin-top:auto!important;
    margin-left:calc(-1 * var(--sidebar))!important;
    padding:4px 26px 4px calc(var(--sidebar) + 26px)!important;
    overflow:visible!important;
    position:relative;
    z-index:0;
  }
  .site-footer .storage{font-size:11px!important}.site-footer .storage>.icon{width:18px!important;height:19px!important}
  .site-footer .meter{height:4px!important;margin-top:2px!important}.site-footer .weather .sun{font-size:20px!important}
  .site-footer .weather strong{font-size:13px!important}.site-footer .weather small,.site-footer .footer-links button{font-size:10px!important}
  .site-footer .toolbar>.icon-button{width:22px!important;height:22px!important}.site-footer .profile>svg{width:22px!important;height:22px!important}
  .sidebar .mascot{bottom:64px!important;height:clamp(240px,31vh,370px)!important}
}

@media (min-width:1200px){
  .gallery-content{display:flex!important;flex:1 1 auto;min-height:0;flex-direction:column}
  .site-footer{height:34px!important;min-height:34px!important;margin-top:auto!important;padding:4px 26px 4px calc(var(--sidebar) + 26px)!important;gap:9px!important;line-height:1;overflow:visible!important}
  .site-footer .storage{font-size:11px!important}.site-footer .storage>.icon{width:18px!important;height:19px!important}
  .site-footer .meter{height:4px!important;margin-top:2px!important}.site-footer .weather .sun{font-size:20px!important}
  .site-footer .weather strong{font-size:13px!important}.site-footer .weather small,.site-footer .footer-links button{font-size:10px!important}
  .site-footer .toolbar>.icon-button{width:22px!important;height:22px!important}.site-footer .profile>svg{width:22px!important;height:22px!important}
}

/* Show the complete original sidebar image, including its real red edge. */
@media (min-width:1200px){
  :root{--sidebar:clamp(420px,66.667vh,760px)}
  .sidebar{width:var(--sidebar)!important;clip-path:none!important}
  .sidebar::before{
    display:block!important;
    width:100%!important;
    /* The supplied artwork with only its opaque black right side removed. */
    clip-path:none!important;
    background:url('assets/sidebar-transparent.png') left top / 100% 100% no-repeat!important;
  }
  .brand{width:245px!important;height:205px!important;padding-top:24px!important}
  .brand img{width:125px!important;height:96px!important}.brand span{font-size:30px!important}
  .sidebar nav{width:225px!important;margin-top:0!important;padding:18px 18px 0 29px!important}
  /* Let the page continue directly beneath the outer red edge. */
  main{margin-left:calc(var(--sidebar) * .44)!important}
  .site-footer{height:64px!important;min-height:64px!important;padding-left:calc(var(--sidebar) + 26px)!important}
  .sidebar .mascot{height:clamp(280px,36vh,430px)!important}
}

/* On desktop and tablet, only the gallery centre scrolls. */
@media (min-width:761px){
  body{overflow:hidden}
  main{
    height:100dvh!important;
    min-height:0!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr) auto;
    overflow:hidden!important;
  }
  .hero{grid-row:1}
  .gallery-content{grid-row:2;display:block!important;min-height:0;overflow-y:auto;overflow-x:hidden;padding-bottom:8px}
  .site-footer{grid-row:3;margin-top:0!important;z-index:0}
}

@media (min-width:1200px){
  .site-footer{margin-left:calc(-1 * (var(--sidebar) * .44))!important;padding-left:calc((var(--sidebar) * .44) + 26px)!important}
}

/* Tablet navigation never scrolls or overlaps the mascot. */
@media (min-width:761px) and (max-width:1199px){
  .sidebar{overflow:hidden!important;overflow-y:hidden!important}
  .brand{width:140px!important;height:128px!important;padding-top:12px!important}
  .brand img{width:67px!important;height:54px!important}.brand span{font-size:16px!important}
  .sidebar nav{width:148px!important;margin-top:14px!important;padding:0 8px!important}
  .nav-link{height:34px!important;gap:9px!important;padding:0 5px!important;font-size:12px!important}
  .nav-link .icon{width:20px!important;height:20px!important}
  .sidebar .mascot{position:absolute!important;right:auto!important;bottom:18px!important;left:0!important;width:100%!important;height:clamp(160px,25vh,240px)!important;margin:0!important;padding:0!important;z-index:0!important}
  .sidebar nav,.brand{position:relative!important;z-index:1!important}
  .site-footer{
    height:44px!important;
    min-height:44px!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:9px!important;
    padding:4px 12px!important;
    overflow:hidden!important;
  }
  .site-footer .storage{font-size:10px!important;gap:7px!important}.site-footer .meter{width:145px!important;height:3px!important}
  .site-footer .weather{font-size:11px!important}.site-footer .weather .sun{font-size:19px!important}.site-footer .weather strong{font-size:12px!important}
  .site-footer .footer-links{order:initial!important;flex-basis:auto!important;margin-left:auto!important;gap:7px!important;white-space:nowrap}
  .site-footer .footer-links button{font-size:9px!important}.site-footer .toolbar{margin-left:0!important;gap:4px!important;white-space:nowrap}
  .site-footer .toolbar>.icon-button{width:22px!important;height:22px!important}.site-footer .profile{font-size:10px!important}.site-footer .profile>svg{width:21px!important;height:21px!important}
  .landscape{left:calc(-1 * var(--sidebar))!important}
  .site-footer{margin-left:calc(-1 * var(--sidebar))!important;padding-left:calc(var(--sidebar) + 12px)!important}
}

/* The canvas spans the viewport.  The sidebar is an overlay; only the actual
   gallery controls start at its torn edge.  This keeps header and footer
   visually behind the complete sidebar at every desktop size. */
@media (min-width:1200px){
  main{margin-left:0!important;padding-left:0!important}
  .landscape{left:0!important}
  .hero,.gallery-content{margin-left:calc(var(--sidebar) * .44)!important}
  .site-footer{
    margin-left:0!important;
    padding-left:calc((var(--sidebar) * .44) + 72px)!important;
    justify-content:flex-start!important;
  }
  .site-footer .weather{margin-left:0!important}
  .site-footer .footer-links{margin-left:auto!important}
}