/* 1.5.1 layout recovery layer. Kept separate so release-specific fixes cannot be hidden by older cascade rules. */

/* One shared public grid. */
.shellpath{box-sizing:border-box;width:min(100%,1280px)!important;max-width:1280px!important;margin:0 auto!important;padding:14px 34px 0!important}
main{overflow:clip}

/* Archive controls must read as controls, never as concatenated inline links. */
.blogfilters,.projectfilters{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px!important;margin:2rem 0 2.6rem!important;padding:0 0 1.1rem!important;border-bottom:1px solid var(--line)!important}
.blogfilters a,.projectfilters a{display:inline-flex!important;align-items:center!important;gap:.35rem!important;min-height:38px!important;padding:.5rem .72rem!important;border:1px solid var(--line)!important;text-decoration:none!important;color:var(--muted)!important;font-size:.72rem!important;line-height:1!important;white-space:nowrap!important}
.blogfilters a:hover,.blogfilters a.active,.projectfilters a:hover,.projectfilters a.active{border-color:var(--line2)!important;background:var(--surface)!important;color:var(--text)!important}
.blogfilters small{margin:0!important;opacity:.62}

/* Projects: editorial intro, quiet principle, scannable cards. */
.projectsarchive{max-width:1180px;margin-inline:auto}
.projectsarchive>h1{max-width:15ch}
.projectsarchive .projectintro{max-width:820px!important;white-space:normal!important}
.projectsarchive .projectintro p{margin:0 0 1rem!important}
.projectprinciple{max-width:900px!important;margin:2.5rem 0 2.2rem!important;padding:1.15rem 0!important;border-top:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important;display:grid!important;grid-template-columns:140px minmax(0,1fr)!important;gap:.35rem 1.5rem!important}
.projectprinciple span{grid-column:1!important;grid-row:1/3!important;padding-top:.15rem!important;font-size:.62rem!important;letter-spacing:.14em!important;color:var(--muted)!important}
.projectprinciple strong{grid-column:2!important;font-size:1rem!important;line-height:1.35!important}
.projectprinciple p{grid-column:2!important;margin:0!important;max-width:690px!important;color:var(--muted)!important;line-height:1.65!important}
.projectcards{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;border-left:1px solid var(--line)!important}
.projectcards .projectcard{display:flex!important;flex-direction:column!important;align-items:flex-start!important;min-height:260px!important;padding:32px!important}
.projectcards .projectcard>p:not(.eyebrow){max-width:48ch!important}
.projectcard .projectopen{margin-top:auto!important;padding-top:1.4rem!important}
.dailybadge{display:inline-flex!important;margin:.55rem 0 .15rem!important;padding:.34rem .48rem!important;border:1px solid var(--line)!important;font-size:.61rem!important;letter-spacing:.12em!important;color:var(--muted)!important}
.projecttags{display:flex!important;flex-wrap:wrap!important;gap:.4rem .7rem!important;margin:.7rem 0!important}.projecttags a{font-size:.72rem!important;color:var(--muted)!important;text-decoration:none!important}

/* Project detail: screenshots support the text instead of becoming the whole page. */
.projectdetail{max-width:980px!important}
.projectdetail>.lead{max-width:720px}
.projectgallery{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;margin:2.5rem 0 3rem!important}
.projectgallery figure{min-width:0!important}.projectgallery figure:first-child{grid-column:1/-1!important}
.projectshot{width:100%!important;max-height:640px!important;overflow:hidden!important;background:var(--surface)!important}
.projectshot picture,.projectshot img{width:100%!important;height:auto!important;max-height:640px!important;object-fit:contain!important;background:var(--surface)!important}
.projectgallery figure:not(:first-child) .projectshot img{aspect-ratio:16/10!important;object-fit:cover!important}

/* Site info: deliberately compact system facts. */
.siteabout{max-width:900px!important}
.sitefacts{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;margin:2.2rem 0 3rem!important;border:1px solid var(--line)!important}
.sitefacts>div{display:grid!important;gap:.28rem!important;padding:1rem 1.1rem!important;border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important}
.sitefacts>div:nth-child(3n){border-right:0!important}.sitefacts>div:nth-last-child(-n+3){border-bottom:0!important}
.sitefacts span{font-size:.61rem!important;letter-spacing:.13em!important;color:var(--muted)!important}.sitefacts strong{font-size:.95rem!important;font-weight:550!important}

/* Blog follow block: keep form readable and separate from prose. */
.blogfollow{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(300px,.72fr)!important;gap:clamp(2rem,7vw,6rem)!important;margin-top:4.5rem!important;padding:3rem 0!important;border-top:1px solid var(--line)!important}
.subscribeform{display:grid!important;gap:.8rem!important;align-content:start!important}.subscribeform label{display:grid!important;gap:.45rem!important}.subscribeform input{display:block!important;width:100%!important;min-height:46px!important;padding:.8rem .9rem!important;border:1px solid var(--line2)!important;background:var(--surface)!important;color:var(--text)!important}.subscribeform button{justify-self:start!important;min-height:44px!important}.subscribeform small{display:block!important;color:var(--muted)!important;line-height:1.55!important}

/* Atmosphere images are decorative layers. They must never enter document flow. */
.atmospherepage{position:relative!important;isolation:isolate!important;overflow:visible!important}
.atmospherepage>.atmospherevisual{position:absolute!important;display:block!important;z-index:0!important;pointer-events:none!important;overflow:hidden!important;right:-6rem!important;top:-1.5rem!important;width:min(58vw,760px)!important;height:clamp(34rem,55vw,44rem)!important;margin:0!important;border:0!important;background:transparent!important;clip-path:polygon(9% 0,100% 0,100% 92%,0 100%)!important;mask-image:linear-gradient(90deg,transparent 0%,#000 42%,#000 100%),linear-gradient(0deg,transparent 0%,#000 18%,#000 88%,transparent 100%)!important;mask-composite:intersect!important;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 42%,#000 100%),linear-gradient(0deg,transparent 0%,#000 18%,#000 88%,transparent 100%)!important;-webkit-mask-composite:source-in!important}
.atmospherepage>.atmospherevisual>img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;object-position:var(--ax,72%) var(--ay,45%)!important;opacity:var(--ao,.14)!important;filter:grayscale(1) contrast(1.08) brightness(.88)!important;margin:0!important}
.atmospherepage>:not(.atmospherevisual){position:relative!important;z-index:1!important}
.musicpage>.atmospherevisual{right:-8rem!important;top:-2rem!important;width:min(62vw,820px)!important;height:45rem!important}
.nerdpage>.atmospherevisual{right:-4rem!important;top:0!important;width:min(50vw,650px)!important;height:36rem!important}
.photoarchive>.atmospherevisual{right:-4rem!important;top:0!important;width:min(66vw,860px)!important;height:31rem!important}

/* Privacy-first video: local poster + one compact consent action. */
.videoembed{position:relative!important;display:block!important;width:min(100%,760px)!important;max-width:760px!important;aspect-ratio:16/9!important;margin:1.8rem 0!important;overflow:hidden!important;border:1px solid var(--line)!important;background:#090909!important;color:#fff!important}
.videoembed.is-short{width:min(100%,390px)!important;max-width:390px!important;aspect-ratio:9/16!important}
.videoembed .videoposter{position:absolute!important;inset:0!important;z-index:0!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;filter:grayscale(1) contrast(1.05) brightness(.78)!important;opacity:1!important;margin:0!important}
.videoembed::after{content:''!important;position:absolute!important;inset:0!important;z-index:1!important;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.32) 58%,rgba(0,0,0,.9) 100%)!important;pointer-events:none!important}
.videoembed .videooverlay{position:absolute!important;inset:0!important;z-index:2!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;align-items:flex-start!important;gap:.55rem!important;padding:1.15rem!important;box-sizing:border-box!important}
.videoembed .videooverlay span{font-size:.61rem!important;letter-spacing:.14em!important;color:rgba(255,255,255,.72)!important}.videoembed .videooverlay strong{font-size:1rem!important}.videoembed .videooverlay button{min-height:42px!important;padding:.65rem .9rem!important;border:1px solid rgba(255,255,255,.4)!important;background:rgba(0,0,0,.56)!important;color:#fff!important}.videoembed .videooverlay small{max-width:36rem!important;color:rgba(255,255,255,.72)!important;font-size:.72rem!important;line-height:1.45!important}.videoembed.is-loaded::after,.videoembed.is-loaded .videooverlay{display:none!important}.videoembed iframe{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important;z-index:3!important}

@media(max-width:800px){
  .blogfollow{grid-template-columns:1fr!important;gap:1.6rem!important}
  .projectcards{grid-template-columns:1fr!important}
  .projectgallery{grid-template-columns:1fr!important}.projectgallery figure:first-child{grid-column:auto!important}
  .projectprinciple{grid-template-columns:1fr!important}.projectprinciple span{grid-column:1!important;grid-row:auto!important}.projectprinciple strong,.projectprinciple p{grid-column:1!important}
}
@media(max-width:620px){
  .shellpath{padding:11px 18px 0!important}
  .blogfilters,.projectfilters{flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:none!important;margin-left:-18px!important;margin-right:-18px!important;padding-left:18px!important;padding-right:18px!important}.blogfilters::-webkit-scrollbar,.projectfilters::-webkit-scrollbar{display:none}
  .sitefacts{grid-template-columns:1fr 1fr!important}.sitefacts>div,.sitefacts>div:nth-child(3n){border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important}.sitefacts>div:nth-child(2n){border-right:0!important}.sitefacts>div:nth-last-child(-n+2){border-bottom:0!important}
  .atmospherepage{overflow:hidden!important;margin-left:-18px!important;margin-right:-18px!important;padding-left:18px!important;padding-right:18px!important}
  .atmospherepage>.atmospherevisual,.musicpage>.atmospherevisual,.nerdpage>.atmospherevisual,.photoarchive>.atmospherevisual{right:-24vw!important;top:-.5rem!important;width:108vw!important;height:22rem!important;clip-path:polygon(14% 0,100% 0,100% 84%,0 100%)!important}
  .atmospherepage>.atmospherevisual>img{opacity:calc(var(--ao,.14) * .72)!important}
  .storypage>h1{max-width:10ch}
  .videoembed.is-short{width:min(82vw,360px)!important}.videoembed .videooverlay{padding:.9rem!important}.videoembed .videooverlay small{font-size:.68rem!important}
}

/* 1.5.2 regression guard: restore the proven public layouts before adding anything new. */

/* Header: full-width sticky surface, content still aligned to the 1280px site grid. */
.top{
  position:sticky!important;top:0!important;z-index:100!important;
  width:100%!important;max-width:none!important;margin:0!important;
  padding-left:max(34px,calc((100vw - 1280px)/2 + 34px))!important;
  padding-right:max(34px,calc((100vw - 1280px)/2 + 34px))!important;
  background:color-mix(in srgb,var(--bg) 96%,transparent)!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}

/* Home identity: NICKLAS is the visual call-name, the other names are supporting information. */
.hero-wide .heroname span,.homehero .heroname span{font-size:.68em!important;font-weight:500!important;opacity:.72!important;letter-spacing:-.045em!important}
.hero-wide .heroname strong,.homehero .heroname strong{font-size:1em!important;font-weight:850!important;opacity:1!important;letter-spacing:-.065em!important}

/* Changelog: one calm row per event. Never collapse into a run of inline text. */
.changeloglist{display:block!important;width:100%!important;border-top:1px solid var(--line)!important}
.changeloglist>a{display:grid!important;grid-template-columns:minmax(150px,190px) minmax(0,1fr) 24px!important;gap:1.25rem!important;align-items:center!important;width:100%!important;padding:.9rem 0!important;border-bottom:1px solid var(--line)!important;text-decoration:none!important}
.changeloglist>a time{display:block!important;color:var(--muted)!important;font-size:.75rem!important;white-space:nowrap!important}
.changeloglist>a strong{display:block!important;min-width:0!important;font-weight:550!important;overflow-wrap:anywhere!important}
.changeloglist>a span{display:block!important;text-align:right!important;color:var(--muted)!important}
.homechangelog .sectionhead{margin-bottom:0!important}

/* About: restore the two editorial destination cards. */
.aboutdestinations{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;margin-top:4.5rem!important;border-top:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important}
.aboutdestinations>a{display:flex!important;min-height:220px!important;flex-direction:column!important;padding:1.8rem 2rem!important;color:var(--text)!important;text-decoration:none!important}
.aboutdestinations>a+a{border-left:1px solid var(--line)!important}
.aboutdestinations span,.aboutdestinations strong,.aboutdestinations small,.aboutdestinations b{display:block!important}
.aboutdestinations span{font-size:.66rem!important;letter-spacing:.14em!important;color:var(--muted)!important}
.aboutdestinations strong{margin-top:2.2rem!important;font-size:clamp(1.35rem,2.2vw,2rem)!important;line-height:1.05!important;letter-spacing:-.035em!important}
.aboutdestinations small{max-width:28rem!important;margin-top:.75rem!important;color:var(--muted)!important;font-size:.86rem!important;line-height:1.6!important}
.aboutdestinations b{margin-top:auto!important;padding-top:1.5rem!important;font-size:.72rem!important;font-weight:500!important}

/* Nörd was intentionally a readable story page. Do not let an older experimental two-column rule win. */
.nerdpage{display:block!important;max-width:1050px!important}
.nerdpage>h1{max-width:12ch!important}
.nerdpage>.lead{max-width:43rem!important}
.nerdpage>.prose{max-width:760px!important;margin-left:0!important}
.nerdpage .nerdnote,.nerdpage .nerdlinks{max-width:760px!important}

/* Photo archive: compact Instagram-like overview. Full proportions belong to photo-view. */
.photoarchive{max-width:1180px!important;margin-inline:auto!important}
.photogrid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin-top:2.25rem!important;width:100%!important}
.photocard{display:block!important;margin:0!important;min-width:0!important;overflow:hidden!important}
.photocard>a{position:relative!important;display:block!important;width:100%!important;height:auto!important;aspect-ratio:1/1!important;overflow:hidden!important;background:var(--surface)!important;text-decoration:none!important;color:#fff!important}
.photocard picture{display:block!important;width:100%!important;height:100%!important}
.photocard .photoimage,.photocard:nth-child(n) .photoimage{display:block!important;width:100%!important;height:100%!important;max-width:none!important;aspect-ratio:auto!important;object-fit:cover!important;margin:0!important;transition:transform .3s ease!important}
.photooverlay{position:absolute!important;inset:auto 0 0!important;display:block!important;padding:3rem 1rem .9rem!important;background:linear-gradient(transparent,rgba(0,0,0,.78))!important;color:#fff!important;opacity:.9!important;transform:none!important}
.photooverlay strong,.photooverlay small{display:block!important}.photooverlay small{margin-top:.2rem!important;color:#ddd!important;font-size:.68rem!important;letter-spacing:.08em!important;text-transform:uppercase!important}
.photocard>a:hover .photoimage,.photocard>a:focus-visible .photoimage{transform:scale(1.015)!important}
.photocard>a:hover .photooverlay,.photocard>a:focus-visible .photooverlay{opacity:1!important}

@media(max-width:900px){
  .top{padding-left:20px!important;padding-right:20px!important}
  .photogrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:700px){
  .aboutdestinations{grid-template-columns:1fr!important;margin-top:3.2rem!important}
  .aboutdestinations>a{min-height:180px!important;padding:1.5rem 0!important}
  .aboutdestinations>a+a{border-left:0!important;border-top:1px solid var(--line)!important}
  .changeloglist>a{grid-template-columns:1fr 24px!important;gap:.35rem .8rem!important}
  .changeloglist>a time{grid-column:1/-1!important}
}
@media(max-width:620px){
  .top{padding-left:14px!important;padding-right:14px!important}
  .photogrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
  .photooverlay{padding:2.5rem .7rem .65rem!important}
  .hero-wide .heroname span,.homehero .heroname span{font-size:.72em!important}
}


/* 1.5.3: surgical refinements. Preserve the recovered 1.5.2 layout invariants. */

/* Home identity: three deliberate lines. NICKLAS is emphasized by tone/weight, not a disruptive size jump. */
.hero-wide .heroname,.homehero .heroname{display:flex!important;flex-direction:column!important;align-items:flex-start!important;max-width:12ch!important;gap:0!important}
.hero-wide .heroname .name-prefix,.homehero .heroname .name-prefix{display:block!important;font-size:.68em!important;line-height:1.02!important;font-weight:500!important;color:rgba(244,242,237,.62)!important;opacity:1!important;letter-spacing:-.045em!important}
.hero-wide .heroname .name-call,.homehero .heroname .name-call{display:block!important;font-size:1em!important;line-height:.9!important;font-weight:850!important;color:#f4f2ed!important;opacity:1!important;letter-spacing:-.065em!important}
.hero-wide .heroname .name-suffix,.homehero .heroname .name-suffix{display:block!important;font-size:1em!important;line-height:.92!important;font-weight:650!important;color:rgba(244,242,237,.62)!important;opacity:1!important;letter-spacing:-.06em!important}

/* External media: privacy is part of the interaction, not fine print. */
.videoembed .videooverlay{gap:.65rem!important}
.videoembed .videooverlay>span{font-weight:650!important}
.videoembed .videooverlay>small{display:block!important;max-width:34rem!important;padding-top:.1rem!important;color:rgba(255,255,255,.78)!important;font-size:.72rem!important;line-height:1.5!important}
.videoembed .videooverlay>small b{color:#fff!important;font-weight:650!important}
.videoembed .videoposter{filter:grayscale(1) contrast(1.04) brightness(.86)!important}

/* Detail paths use the same terminal grammar as the rest of the site. */
.shellpath a{color:inherit;text-decoration:none}.shellpath a:hover,.shellpath a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.shellcwd{min-width:0}.shellcwd strong{overflow-wrap:anywhere}

/* The breadcrumb now handles hierarchy; keep the in-page archive link as a quiet utility. */
.photodetail .photoback{margin-bottom:1.25rem;color:var(--muted);font-size:.72rem}

@media(max-width:620px){
  .hero-wide .heroname .name-prefix,.homehero .heroname .name-prefix{font-size:.72em!important}
  .shellpath{display:flex!important;min-width:0!important;overflow:hidden!important;white-space:nowrap!important}
  .shellpath .shellhost{display:none!important}.shellpath .shellcwd{display:flex!important;min-width:0!important;overflow:hidden!important}.shellpath .shellcwd strong{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .videoembed .videooverlay>small{font-size:.66rem!important;line-height:1.42!important}
}

/* 1.5.4: lock the two remaining presentation invariants without touching archive/header layouts. */
/* The line breaks are present in the HTML as a fallback. CSS controls scale and rhythm only. */
.hero-wide .heroname,.homehero .heroname{display:block!important;max-width:11ch!important;line-height:.88!important}
.hero-wide .heroname br,.homehero .heroname br{display:block!important;content:""!important}
.hero-wide .heroname .name-prefix,.homehero .heroname .name-prefix{display:inline!important;font-size:.68em!important;line-height:1!important;font-weight:500!important;color:rgba(244,242,237,.58)!important;letter-spacing:-.045em!important}
.hero-wide .heroname .name-call,.homehero .heroname .name-call{display:inline!important;font-size:1em!important;line-height:.9!important;font-weight:850!important;color:#f4f2ed!important;letter-spacing:-.065em!important}
.hero-wide .heroname .name-suffix,.homehero .heroname .name-suffix{display:inline!important;font-size:1em!important;line-height:.9!important;font-weight:650!important;color:rgba(244,242,237,.58)!important;letter-spacing:-.06em!important}

/* Photo detail is editorial, not a second full-screen gallery. The archive remains untouched. */
.photodetail{width:min(100%,980px)!important;max-width:980px!important;margin:0 auto!important;padding:1.35rem 0 6rem!important}
.photodetailimage{display:flex!important;align-items:center!important;justify-content:center!important;min-height:0!important;width:100%!important;background:transparent!important}
.photodetailimage picture{display:flex!important;justify-content:center!important;width:100%!important}
.photodetailimage img{display:block!important;width:auto!important;height:auto!important;max-width:100%!important;max-height:min(72vh,760px)!important;object-fit:contain!important;margin:0 auto!important}
.photodetailcopy{width:min(100%,760px)!important;max-width:760px!important;margin:2rem auto 0!important;text-align:left!important}
.photodetailcopy h1{font-size:clamp(2rem,4vw,3.65rem)!important;line-height:.98!important;letter-spacing:-.045em!important;margin:0 0 .65rem!important;max-width:15ch!important}
.photodetailcopy .photometa{margin:.65rem 0 0!important}.photodetailcopy .photobody{margin-top:1.5rem!important}
.photonav{width:min(100%,760px)!important;margin:3.5rem auto 0!important}
.photoback{display:none!important}
@media(max-width:620px){
  .hero-wide .heroname,.homehero .heroname{max-width:10ch!important;line-height:.9!important}
  .photodetail{padding:1rem 0 4.5rem!important}
  .photodetailimage img{max-height:68vh!important}
  .photodetailcopy{margin-top:1.35rem!important}
  .photodetailcopy h1{font-size:clamp(1.85rem,10vw,2.8rem)!important;max-width:13ch!important}
  .photonav{margin-top:2.5rem!important}
}

/* 1.5.5: identity/favicon/editorial cleanup only. No layout overrides. */

/* 1.5.6 · Om webbplatsen */
.siteabout .siteintro{margin-top:2rem}
.siteclosing{margin-top:3.5rem;padding:1.35rem 0 0;border-top:1px solid var(--line)}
.siteclosing>span{display:block;font-size:.62rem;letter-spacing:.16em;color:var(--muted);margin-bottom:.35rem}
.siteclosing>strong{display:block;font-size:1rem;font-weight:550}
.siteclosing>p{color:var(--muted);max-width:46rem;margin:1.2rem 0}
.siteclosing>div{display:flex;gap:1.25rem;flex-wrap:wrap}
.siteclosing a{text-decoration:underline;text-underline-offset:.22em}
.aboutdestinations{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media(max-width:820px){.aboutdestinations{grid-template-columns:1fr!important}}

/* 1.6.2: additive UI only. Everything above is the exact 1.5.6 visual baseline. */
.top>nav{display:flex;align-items:center;gap:.1rem}
.navgroup-public{position:relative;display:flex;align-items:center}
.navgroup-public>button{appearance:none;border:0;background:transparent;color:inherit;font:inherit;padding:.45rem .4rem;cursor:pointer;display:flex;align-items:center;gap:.28rem}
.navgroup-public>button span{font-size:.68em;color:var(--muted)}
.navsubmenu{position:absolute;top:calc(100% + .65rem);left:-.65rem;z-index:80;min-width:185px;padding:.42rem;background:var(--bg);border:1px solid var(--line);box-shadow:0 18px 45px rgba(0,0,0,.3);display:none}
.navsubmenu:before{content:"";position:absolute;left:0;right:0;top:-.7rem;height:.7rem}
.navsubmenu a{display:block!important;padding:.62rem .7rem!important;white-space:nowrap;color:var(--muted)!important}
.navsubmenu a:hover,.navsubmenu a:focus{color:var(--text)!important;background:var(--surface)}
.navgroup-public:hover .navsubmenu,.navgroup-public:focus-within .navsubmenu,.navgroup-public.is-open .navsubmenu{display:block}
.homelatest{margin:0 0 92px}
.homelatest>.sectionhead{padding-bottom:14px}
.homelatestgrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(250px,.7fr);gap:clamp(34px,5vw,72px);align-items:start}
.latestsubhead{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:0;padding:.15rem 0 .8rem;border-bottom:1px solid var(--line)}
.latestsubhead strong{font-size:.62rem;letter-spacing:.16em}.latestsubhead a{font-size:.72rem;color:var(--muted)}
.latestblog .homebloggrid{border-top:0}
.latestphotogrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:16px}
.latestphotogrid>a{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:var(--surface);color:#fff}
.latestphotogrid picture,.latestphotogrid img{display:block;width:100%;height:100%}.latestphotogrid img{object-fit:cover;transition:transform .2s ease}
.latestphotogrid>a:hover img{transform:scale(1.015)}
.latestphotogrid span{position:absolute;inset:auto 0 0;padding:1.8rem .65rem .55rem;background:linear-gradient(transparent,rgba(0,0,0,.7));font-size:.66rem;color:#eee}
.genericpage{position:relative}.genericpage>.eyebrow,.genericpage>h1,.genericpage>.lead,.genericpage>.prose,.genericpage>.contentupdated{position:relative;z-index:1}
.genericpage.template-editorial>.prose{max-width:700px}.genericpage.template-editorial>h1{max-width:13ch}
.genericpage.template-feature{max-width:1120px!important}.genericpage.template-feature>.lead{max-width:48rem}.genericpage.template-feature>.prose{max-width:760px}
.genericpage.template-minimal>.eyebrow{display:none}.genericpage.template-minimal>.lead{max-width:42rem}.genericpage.template-minimal>.prose{max-width:680px}
.genericpage .generic-atmosphere{pointer-events:none;right:0;top:0;width:min(48vw,620px);height:520px}
@media(max-width:900px){.homelatestgrid{grid-template-columns:1fr}.latestphotos{max-width:620px}.navsubmenu{position:static;box-shadow:none;border:0;border-left:1px solid var(--line);margin:.15rem 0 .5rem .7rem;padding:.15rem 0 .15rem .55rem}.navsubmenu:before{display:none}.navgroup-public{display:block}.navgroup-public>button{width:100%;justify-content:space-between;padding:10px 0}.navgroup-public:hover .navsubmenu{display:none}.navgroup-public.is-open .navsubmenu,.navgroup-public:focus-within .navsubmenu{display:block}}
@media(max-width:620px){.homelatest{margin-bottom:58px}.latestphotogrid{gap:5px}}
.latestphotogrid>a:only-child{grid-column:1/-1;aspect-ratio:16/10}


/* 1.6.3: navigation rhythm and consistent homepage editorial alignment. */
.top>nav{gap:1.05rem}
.top>nav>a,.navgroup-public>button{padding:.45rem .1rem;font-size:.88rem;color:var(--muted)}
.navgroup-public>button:hover,.navgroup-public>button:focus-visible{color:var(--text)}
.navgroup-public>button span{margin-left:.08rem;opacity:.72}
.creativehome,.nerdtease{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,8vw,110px)}
.creativehome>div:last-child,.nerdtease>div:last-child{align-self:center;max-width:650px}
@media(max-width:900px){.top>nav{gap:0}.creativehome,.nerdtease{grid-template-columns:1fr;gap:20px}.creativehome>div:last-child,.nerdtease>div:last-child{align-self:start}}


/* 1.6.4: deterministic dropdowns and touch-first mobile navigation.
   Desktop groups open one at a time via JS. This avoids overlapping hover menus. */
@media (min-width:901px){
  .navgroup-public:hover .navsubmenu{display:none}
  .navgroup-public:focus-within .navsubmenu{display:none}
  .navgroup-public.is-open .navsubmenu{display:block}
  .navsubmenu{top:calc(100% + .5rem)}
}
@media (max-width:900px){
  .top nav.open{display:flex;flex-direction:column;gap:0;padding:8px 12px}
  .top nav>a,.navgroup-public{width:100%;border-bottom:1px solid var(--line)}
  .top nav>a{min-height:48px;padding:13px 4px;border-bottom:1px solid var(--line)}
  .navgroup-public{display:block}
  .navgroup-public>button{min-height:48px;padding:13px 4px;width:100%;font-size:.82rem;text-align:left}
  .navgroup-public>button span{margin-left:auto}
  .navgroup-public:hover .navsubmenu,.navgroup-public:focus-within .navsubmenu{display:none}
  .navgroup-public.is-open .navsubmenu{display:block}
  .navsubmenu{margin:0 0 8px 4px;padding:0 0 4px 12px;border-left:1px solid var(--line2)}
  .navsubmenu a{min-height:44px;padding:11px 8px!important;border-bottom:0!important;font-size:.8rem!important}
}

/* 1.6.6: public menu controls are isolated from theme-specific generic button styles. */
html[data-theme] .top .navgroup-public>button{
  background:transparent;
  color:var(--muted);
  border:0;
  box-shadow:none;
}
html[data-theme] .top .navgroup-public>button:hover,
html[data-theme] .top .navgroup-public>button:focus-visible,
html[data-theme] .top .navgroup-public.is-open>button{
  background:transparent;
  color:var(--text);
}
html[data-theme] .top .navsubmenu{
  background:var(--bg);
  color:var(--text);
  border-color:var(--line);
}
html[data-theme] .top .navsubmenu a{
  background:transparent;
  color:var(--muted)!important;
}
html[data-theme] .top .navsubmenu a:hover,
html[data-theme] .top .navsubmenu a:focus-visible{
  background:var(--surface);
  color:var(--text)!important;
}
html[data-theme] .top .navgroup-public>button span{color:var(--muted)}


/* 1.6.6: menu group triggers are navigation, never themed call-to-action buttons. */
html[data-theme] .top .navmenubutton{
  appearance:none;
  background:transparent!important;
  color:var(--muted)!important;
  border:0!important;
  box-shadow:none!important;
}
html[data-theme] .top .navmenubutton:hover,
html[data-theme] .top .navmenubutton:focus-visible,
html[data-theme] .top .navgroup-public.is-open>.navmenubutton{
  background:transparent!important;
  color:var(--text)!important;
}

/* 1.6.7: mobile UX. Desktop >= 901px deliberately remains unchanged. */
@media (max-width:900px){
  html.mobile-nav-open,html.mobile-nav-open body{overflow:hidden;overscroll-behavior:none}
  .top{grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important}
  .top .brand{min-width:0}
  .toptools{display:flex;align-items:center;gap:6px!important}
  .top .themebutton,.top .navtoggle{min-width:44px!important;min-height:44px!important;height:44px;padding:0 12px!important;display:inline-flex;align-items:center;justify-content:center}
  .top .themebutton{width:44px;padding:0!important}
  .top nav{display:none!important;position:absolute!important;left:0!important;right:0!important;top:100%!important;max-height:calc(100dvh - 64px)!important;overflow:auto!important;overscroll-behavior:contain;background:color-mix(in srgb,var(--bg) 98%,transparent)!important;border:0!important;border-top:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important;box-shadow:0 24px 44px rgba(0,0,0,.22)!important;padding:4px 18px 10px!important}
  .top nav.open{display:flex!important;flex-direction:column!important;gap:0!important}
  .top nav>a,.top .navgroup-public{width:100%;border:0!important;border-bottom:1px solid var(--line)!important}
  .top nav>a{min-height:52px!important;padding:0 8px!important;display:flex!important;align-items:center;font-size:.9rem!important}
  .top .navgroup-public>button{min-height:52px!important;padding:0 8px!important;font-size:.9rem!important;display:flex!important;align-items:center!important;width:100%!important}
  .top .navgroup-public>button span{margin-left:auto!important;font-size:.72rem;transition:transform .16s ease}
  .top .navgroup-public.is-open>button span{transform:rotate(180deg)}
  .top .navsubmenu{position:static!important;display:none!important;margin:0 0 7px 8px!important;padding:2px 0 6px 14px!important;border:0!important;border-left:1px solid var(--line2)!important;box-shadow:none!important;background:transparent!important}
  .top .navgroup-public.is-open>.navsubmenu{display:block!important}
  .top .navsubmenu a{min-height:44px!important;padding:0 10px!important;display:flex!important;align-items:center!important;font-size:.82rem!important;border:0!important;color:var(--muted)!important}
  .top .navsubmenu a:hover,.top .navsubmenu a:focus-visible{background:var(--surface)!important;color:var(--text)!important}
  .creativehome,.nerdtease{grid-template-columns:1fr!important;gap:20px!important}
  .creativehome>div:last-child,.nerdtease>div:last-child{max-width:680px!important;align-self:start!important}
}
@media (max-width:620px){
  .top{min-height:62px!important;padding:9px 14px!important}
  .top .brand{font-size:.82rem!important}
  .top nav{max-height:calc(100dvh - 62px)!important;padding-left:14px!important;padding-right:14px!important}
  .top .navtoggle{font-size:.78rem!important;min-width:58px!important}
  main{padding-top:34px}
  section{margin-bottom:64px}
  .homelatest{margin-bottom:52px!important}
  .homelatestgrid{gap:34px!important}
  .latestphotogrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
  .latestphotogrid>a:only-child{grid-column:1/-1!important;aspect-ratio:16/10!important}
  .creativehome,.nerdtease{padding-top:44px!important;padding-bottom:48px!important;margin-bottom:52px!important}
  .creativehome h2,.nerdtease h2{font-size:clamp(2rem,10vw,2.75rem)!important;max-width:11ch}
  .creativehome>div:last-child>p,.nerdtease>div:last-child p{font-size:1rem!important;line-height:1.65!important}
  .creative-links{gap:6px 18px!important;margin-top:18px!important}
  .projectcards{grid-template-columns:1fr!important}
  .projectcards .projectcard{min-height:0!important;padding:24px 0!important}
  .photoarchive{padding-top:2.6rem!important}
  .photogrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
  .photodetailcopy h1,.blogdetail h1,.genericpage h1{overflow-wrap:anywhere}
  footer{padding-left:18px!important;padding-right:18px!important}
}
@media (max-width:380px){
  .top{padding-left:12px!important;padding-right:12px!important}
  .top .brand{font-size:.76rem!important}
  .top .themebutton{width:42px!important;min-width:42px!important}
  .top .navtoggle{min-width:54px!important;padding:0 9px!important}
  .top nav{padding-left:12px!important;padding-right:12px!important}
}

/* Admin remains usable for quick edits on a phone. */
@media (max-width:700px){
  .adminbody .adminmain{padding-left:14px!important;padding-right:14px!important}
  .adminbody .adminpagehead{gap:14px!important}
  .adminbody .adminpagehead h1{font-size:clamp(2.35rem,13vw,3.2rem)!important;overflow-wrap:anywhere}
  .adminbody .editorgrid,.adminbody .formrow{grid-template-columns:1fr!important}
  .adminbody .adminpanel form{padding:18px 14px!important}
  .adminbody .panelhead{padding:16px 14px!important}
  .adminbody .naveditmain,.adminbody .navchild{grid-template-columns:1fr!important}
  .adminbody .naveditmain>*,.adminbody .navchild>*{grid-column:1!important}
  .adminbody .navchildren,.adminbody .navaddchild{margin-left:12px!important}
  .adminbody .adminphotogrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}


/* 1.6.8: mobile hierarchy and responsive polish. Scoped below 900px. */
@media (max-width:900px){
  /* Groups must read as groups, not ordinary links. Keep the disclosure next to its label. */
  .top .navgroup-public>button{
    justify-content:flex-start!important;
    gap:.42rem!important;
  }
  .top .navgroup-public>button span{
    margin-left:0!important;
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    width:1rem;
    height:1rem;
    font-size:.66rem!important;
    opacity:.72;
    transform-origin:center;
  }
  .top .navgroup-public.is-open>button{
    color:var(--text)!important;
  }
  .top .navsubmenu{
    margin:0 0 5px 8px!important;
    padding:0 0 4px 14px!important;
  }
  .top .navsubmenu a{
    min-height:42px!important;
    padding:0 8px!important;
    line-height:1.25!important;
  }

  /* Defensive responsive rules: mobile content may shrink, never force horizontal scrolling. */
  main,section,.wrap,.content,.genericpage,.blogdetail,.photodetail,.projectdetail{min-width:0;max-width:100%}
  img,video,iframe{max-width:100%;height:auto}
  pre,code{max-width:100%}
  pre{overflow:auto;-webkit-overflow-scrolling:touch}
  .creative-links{flex-wrap:wrap}
}
@media (max-width:620px){
  /* Preserve the large editorial type, but avoid accidental overflow from long words/titles. */
  h1,h2,h3,.lead,.projectcard,.blogfeeditem{min-width:0}
  h1,h2,h3{overflow-wrap:break-word}
  .top nav>a,.top .navgroup-public>button{font-size:.88rem!important}
  .top .navsubmenu a{font-size:.8rem!important}
}
@media (max-width:360px){
  /* Very narrow phones: keep identity and controls on one row without changing tablet/desktop. */
  .top .brand{font-size:.72rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .toptools{gap:4px!important}
}


/* 1.7.1: Sidospår is secondary navigation, not prose. Keep each destination distinct. */
.sidetracks{display:block!important;max-width:760px!important;margin:54px 0 0!important;padding:22px 0 0!important;border-top:1px solid var(--line)!important}
.sidetracks h2{display:block!important;margin:0 0 10px!important;padding:0!important;border:0!important;font-size:.68rem!important;line-height:1.4!important;letter-spacing:.16em!important;text-transform:uppercase!important;color:var(--muted)!important;font-weight:700!important}
.sidetracks a{display:grid!important;grid-template-columns:18px minmax(0,1fr)!important;gap:8px!important;align-items:baseline!important;width:100%!important;margin:0!important;padding:11px 0!important;border:0!important;border-bottom:1px solid var(--line)!important;text-decoration:none!important;font-size:.9rem!important;line-height:1.45!important;white-space:normal!important}
.sidetracks a::first-letter{color:var(--muted)}
.sidetracks a:hover{padding-left:4px!important}
@media(max-width:620px){.sidetracks{margin-top:42px!important}.sidetracks a{padding:12px 0!important;font-size:.88rem!important}.sidetracks a:hover{padding-left:0!important}}

/* 1.7.2: keep Sidospår links as normal full-width text rows.
   1.7.1 used CSS Grid directly on an <a> containing only a text node.
   That created anonymous grid items and collapsed the text to min-content width. */
.sidetracks a{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  padding:11px 0!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}
@media(max-width:620px){
  .sidetracks a{display:block!important;width:100%!important;padding:12px 0!important}
}
\n\n/* 1.9.2 fail-safe component ownership. Loaded last on purpose. */
.top .presencebar{position:relative!important;display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important;max-width:min(620px,46vw)!important;margin-top:7px!important;padding-top:6px!important;overflow:hidden!important;white-space:nowrap!important;font-family:ui-monospace,SFMono-Regular,Consolas,monospace!important;font-size:.61rem!important;line-height:1.25!important;letter-spacing:.018em!important;color:var(--muted)!important}
.top .presencebar:before{content:""!important;position:absolute!important;left:0!important;top:0!important;width:min(100%,245px)!important;border-top:1px solid var(--line2)!important;opacity:.72!important}
.top .presencebar a,.top .presencebar a:visited{display:flex!important;align-items:center!important;gap:5px!important;min-width:0!important;color:inherit!important;text-decoration:none!important;border:0!important;padding:0!important;background:transparent!important}
.top .presence-status{flex:0 0 auto!important}.top .presence-status strong{font-size:.6rem!important;letter-spacing:.065em!important;color:var(--text)!important}.top .presence-status [data-presence-detail]{color:var(--muted)!important}
.top .presence-music{flex:1 1 260px!important;overflow:hidden!important}.top .presence-music-window{display:block!important;min-width:0!important;overflow:hidden!important;white-space:nowrap!important}.top .presence-music-loop{display:inline-flex!important;width:max-content!important;white-space:nowrap!important}.top .presence-music-track{display:inline-block!important;white-space:nowrap!important}.top .presence-music-copy{display:none!important;margin-left:36px!important}.top .presence-music-window.is-scrolling .presence-music-copy{display:inline-block!important}.top .presence-music-window.is-scrolling .presence-music-loop{animation:presence-music-loop var(--presence-loop-duration,16s) linear infinite!important}
.top .presence-icon{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:11px!important;flex:0 0 auto!important;color:var(--muted)!important}.top .presence-signal{color:var(--accent)!important}.top .presence-sep{display:inline!important;flex:0 0 auto!important;color:var(--muted2)!important;opacity:.6!important}.top .presence-help{display:grid!important;place-items:center!important;width:17px!important;height:17px!important;flex:0 0 auto!important;border:1px solid var(--line)!important;border-radius:50%!important;font-size:.58rem!important;line-height:1!important}.top .presence-machine[hidden],.top .presence-machine-sep[hidden]{display:none!important}
.adminbody .healthlist{display:grid!important}.adminbody .healthlist a{display:grid!important;grid-template-columns:48px minmax(0,1fr) auto!important;align-items:center!important;gap:16px!important;padding:17px 26px!important;border-top:1px solid #292929!important;text-decoration:none!important;line-height:1.35!important}.adminbody .healthlist a:first-child{border-top:0!important}.adminbody .healthlist strong{display:block!important;font-size:1.25rem!important}.adminbody .healthlist span{display:block!important;color:#aaa!important}.adminbody .healthlist b{font-weight:400!important;color:#777!important}
.adminbody .pageimageadmin{max-width:1160px!important;margin:28px 0 0!important;border:1px solid #292929!important;background:#0e0e0e!important;overflow:hidden!important}.adminbody .pageimageadmin .atmospherepreview{display:block!important;width:min(760px,calc(100% - 52px))!important;height:280px!important;max-width:calc(100% - 52px)!important;object-fit:cover!important;margin:26px!important;border:1px solid #292929!important;filter:grayscale(1)!important}.adminbody .pageimageadmin form{padding:0 26px 26px!important}
.adminbody .adminsystemgrid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:24px!important;max-width:1160px!important;align-items:start!important}.adminbody .adminsystemgrid>.adminpanel{min-width:0!important;width:100%!important;max-width:none!important;margin:0!important}.adminbody .adminsystemgrid>.security-panel{grid-column:1/-1!important}.adminbody .adminsystemgrid .securitylist{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 24px!important;padding:8px 26px 12px!important}.adminbody .adminsystemgrid .securitylist>div{display:grid!important;grid-template-columns:minmax(125px,.42fr) minmax(0,1fr)!important;gap:16px!important;align-items:start!important;padding:17px 0!important;border-bottom:1px solid #292929!important;min-width:0!important}
@media(max-width:1100px){.top .presence-machine,.top .presence-machine-sep{display:none!important}.top .presence-status [data-presence-detail]{display:none!important}.adminbody .adminsystemgrid{grid-template-columns:1fr!important}.adminbody .adminsystemgrid>.security-panel{grid-column:auto!important}}
@media(max-width:720px){.top .presencebar{max-width:100%!important;gap:5px!important;font-size:.57rem!important}.adminbody .adminsystemgrid .securitylist{grid-template-columns:1fr!important}.adminbody .adminsystemgrid .securitylist>div{grid-template-columns:1fr!important;gap:5px!important}.adminbody .pageimageadmin .atmospherepreview{width:calc(100% - 36px)!important;max-width:calc(100% - 36px)!important;height:220px!important;margin:18px!important}.adminbody .healthlist a{padding:15px 18px!important}}


/* 1.9.3 presence width ownership.
   Status, uptime and help are fixed-priority signals. Only Now Playing may consume
   the remaining width and clip/scroll inside its own viewport. */
.top .presencebar{
  width:min(680px,50vw)!important;
  max-width:min(680px,50vw)!important;
  overflow:visible!important;
}
.top .presence-status{
  flex:0 0 auto!important;
  max-width:190px!important;
  overflow:hidden!important;
}
.top .presence-status strong,
.top .presence-status [data-presence-detail]{
  flex:0 1 auto!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.top .presence-music{
  flex:1 1 0!important;
  min-width:90px!important;
  overflow:hidden!important;
}
.top .presence-music-window{
  width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
}
.top .presence-machine{
  flex:0 0 auto!important;
  min-width:max-content!important;
  overflow:visible!important;
  white-space:nowrap!important;
}
.top .presence-machine [data-presence-machine-text]{
  display:block!important;
  overflow:visible!important;
  white-space:nowrap!important;
}
.top .presence-help-sep,.top .presence-help{
  flex:0 0 auto!important;
}
/* Keep uptime visible longer. Music is the expendable item when horizontal room runs out. */
@media(max-width:1100px){
  .top .presencebar{width:min(610px,58vw)!important;max-width:min(610px,58vw)!important}
  .top .presence-machine,.top .presence-machine-sep{display:flex!important}
  .top .presence-machine-sep{display:inline!important}
  .top .presence-status [data-presence-detail]{display:none!important}
}
@media(max-width:820px){
  .top .presencebar{width:100%!important;max-width:100%!important}
  .top .presence-music{min-width:54px!important}
}
@media(max-width:620px){
  .top .presence-status{max-width:82px!important}
  .top .presence-machine{font-size:.55rem!important}
}
@media(max-width:500px){
  .top .presence-music,.top .presencebar>.presence-sep:first-of-type{display:none!important}
}
@media(max-width:390px){
  .top .presence-machine .presence-icon{display:none!important}
}