/* 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}
}
