/* A restrained security journal built around Duskline's olive, cream and system drawing. */
:root{--paper:#303b2c;--ink:#e3d7bd;--rule:#65705a;--night:#293529;--mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace}.site-header{border-bottom:1px solid rgba(232,225,206,.22)}.v2-studio-link{opacity:.8}.v2-studio-link:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.nocturne{background:var(--night)}.home-reviews{padding-top:75px}.home-review-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}.home-review-grid>a{padding:30px 0 38px}.report-band{padding-block:100px;background:#b9aa8e}.notebook-section{padding-block:100px 70px}.home-notes{gap:55px}.invitation{border-top:1px solid var(--rule);padding-top:65px}
@media(max-width:700px){.home-reviews{padding-top:55px}.home-review-grid{grid-template-columns:1fr;gap:0}.home-review-grid>a{padding:24px 0 30px}.report-band{padding-block:65px}.notebook-section{padding-block:60px 45px}}

/* The studio language preference is shared across projects. Hard corners, like the rest of the page. */
.site-header .brand{margin-right:auto}.site-header .nav{order:2}.site-header .menu-toggle{order:1}.dusk-language{order:3;flex:none;min-width:44px;min-height:44px;padding:9px 12px;border:1px solid currentColor;border-radius:0;background:transparent;color:inherit;font:600 13px/1 var(--sans);letter-spacing:.08em;cursor:pointer;transition:background-color .15s,color .15s}.dusk-language:focus-visible{outline:3px solid currentColor;outline-offset:3px}
@media(hover:hover) and (pointer:fine){.dusk-language:hover{background:var(--ink);color:var(--paper)}}
@media(max-width:760px){.site-header{gap:12px}.site-header .nav{order:0}.dusk-language{order:2}.site-header .menu-toggle{order:1}}

html[lang="de"] h1,html[lang="de"] h2,html[lang="de"] h3{overflow-wrap:anywhere;hyphens:auto}

/* Display type: Newsreader carries the journal voice, Instrument Sans carries the technical detail. */
.landing-copy h1,.page-hero h1,.report-layout h2,.invitation h2,.home-notes h3{font-family:var(--display);font-weight:400}
.page-hero h1{letter-spacing:-.035em;line-height:1.02}
html[lang="de"] .landing-copy h1,html[lang="de"] .report-layout h2{hyphens:manual}

/* Hero: the copy and an open, larger system plate. */
.nocturne{overflow:clip}
.landing-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center;padding-block:64px 72px;min-height:min(780px,calc(100svh - 101px))}
.landing-copy h1{font-size:clamp(56px,6.7vw,100px);line-height:.98;letter-spacing:-.04em;max-width:none;text-wrap:wrap}
.hero-eyebrow{margin-bottom:34px}.landing-copy>p:not(.hero-eyebrow){max-width:30ch;margin-top:34px}.landing-copy .text-link{margin-top:30px}
.depth-study{position:relative;margin-right:-40px;padding:0;border:0;border-radius:0;background:none}
.depth-study::before{content:"";position:absolute;inset:4% 2% 22%;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(227,215,189,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(227,215,189,.07) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:radial-gradient(closest-side,#000 45%,transparent);mask-image:radial-gradient(closest-side,#000 45%,transparent)}
.nocturne .landing-grid{position:relative;isolation:isolate}
.depth-controls{margin:10px 6% 0 5.4%;padding-top:4px;border-top:1px solid var(--rule)}
.depth-controls [role=tablist]{gap:30px}
.plane-label{font:500 14px var(--sans);letter-spacing:.14em;text-transform:uppercase;fill:var(--drawing);transition:fill .3s}
.plane-leader{fill:none;stroke:var(--drawing);stroke-width:1}
.depth-study[data-layer=surface] .plane-surface .plane-label,.depth-study[data-layer=access] .plane-access .plane-label,.depth-study[data-layer=source] .plane-source .plane-label{fill:var(--ink)}
.depth-study[data-layer=surface] .plane-surface .plane-leader,.depth-study[data-layer=access] .plane-access .plane-leader,.depth-study[data-layer=source] .plane-source .plane-leader{stroke:var(--ink)}
.plane-scan{display:none}

/* Calm scan: one beam passes down through the stack; each layer answers as it is crossed. */
.scan-beam{opacity:0;animation:beam-sweep 11s linear 1.6s infinite}
.plane-nodes circle{transform-box:fill-box;transform-origin:center;animation:node-ping 11s ease-out infinite}
.plane-surface .plane-nodes circle{animation-delay:3.8s}.plane-access .plane-nodes circle{animation-delay:5.1s}.plane-source .plane-nodes circle{animation-delay:6.4s}
.scan-beam path{fill:none;stroke:var(--ink);stroke-width:1}
@keyframes beam-sweep{0%{transform:translateY(50px);opacity:0}9%{opacity:.9}58%{opacity:.9}66%,100%{transform:translateY(480px);opacity:0}}
@keyframes node-ping{0%,100%{fill:var(--paper);transform:scale(1)}2%{fill:var(--ink);transform:scale(1.8)}12%{fill:var(--paper);transform:scale(1)}}
.is-paused .scan-beam,.is-paused .plane-nodes circle{animation-play-state:paused}

/* One orchestrated arrival: the copy rises, the three layers unfold out of one plane. */
.landing-copy>*{animation:dusk-rise .9s var(--ease) backwards}
.landing-copy>:nth-child(2){animation-delay:.08s}.landing-copy>:nth-child(3){animation-delay:.22s}.landing-copy>:nth-child(4){animation-delay:.3s}
.plane-surface{animation:unfold-up 1.5s var(--ease) .25s backwards,plane-drift 10s ease-in-out 1.75s infinite}
.plane-access{animation:unfold-in 1s ease-out .2s backwards,plane-drift 10s ease-in-out -3.33s infinite}
.plane-source{animation:unfold-down 1.5s var(--ease) .25s backwards,plane-drift 10s ease-in-out -6.66s infinite}
.depth-registration,.depth-guides,.depth-controls{animation:dusk-fade .9s ease-out 1.05s backwards}
@keyframes dusk-rise{from{opacity:0;transform:translateY(18px)}}
@keyframes dusk-fade{from{opacity:0}}
@keyframes unfold-in{from{opacity:0}}
@keyframes unfold-up{from{opacity:0;translate:0 78px}}
@keyframes unfold-down{from{opacity:0;translate:0 -78px}}

/* Review areas read as an index: one ruled row per area. */
.home-reviews .section-top{margin-bottom:34px}
@media(min-width:901px){
.home-review-grid{display:block}
.home-review-grid>a{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) minmax(0,2.4fr);gap:48px;align-items:baseline;padding:34px 0 36px;border-top:1px solid var(--rule)}
.home-review-grid>a:last-child{border-bottom:1px solid var(--rule)}
.home-review-grid h3{font-size:clamp(26px,2.4vw,33px);line-height:1.18;transition:transform .35s var(--ease)}
.home-review-grid p{margin:0;max-width:44ch}
.home-review-grid .link-label{margin:0;justify-self:end;font-size:15px;text-align:right}
}
@media(hover:hover) and (pointer:fine){.home-review-grid>a:hover h3{transform:translateX(10px)}.home-notes>a:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px}}

/* The surprise: the report band states its three steps at full scale, on ruled lines. */
.report-band{padding-block:96px 104px}
.report-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;row-gap:0}
.report-layout>div{display:contents}
.report-layout>.section-label{grid-column:1/-1;margin-bottom:22px}
.report-layout h2{grid-column:1/-1;max-width:none;font-size:clamp(52px,12.4vw,172px);line-height:1.04;letter-spacing:-.045em;word-spacing:100vw;text-wrap:wrap;background-image:repeating-linear-gradient(to bottom,transparent 0 calc(1lh - 1px),rgba(41,51,36,.42) calc(1lh - 1px) 1lh);border-top:1px solid rgba(41,51,36,.42)}
.report-layout .report-lead{grid-column:2;margin-top:40px;font-size:21px}
.report-layout .text-link{grid-column:2;justify-self:start}

/* Notes: two journal entries. */
.notebook-section .section-top{margin-bottom:34px}
.v2-note-type{display:block;font:13px/1.6 var(--mono);letter-spacing:.035em;color:var(--muted)}
.home-notes>a{display:flex;flex-direction:column;gap:14px;padding:30px 0 34px}
.home-notes h3{font-size:clamp(30px,2.9vw,40px);line-height:1.12;letter-spacing:-.025em;max-width:16em}
.home-notes p{font-size:18px;color:var(--muted);max-width:38ch}

/* Closing invitation. */
.invitation{padding-block:84px 104px}
.invitation h2{font-size:clamp(50px,6.4vw,92px);line-height:1;letter-spacing:-.04em}
.button{border-radius:0;transition:transform .14s var(--ease),background-color .15s,color .15s}
@media(hover:hover) and (pointer:fine){.button:hover{background:transparent;color:var(--ink)}}

/* Footer: the wordmark at full width. */
.site-footer{background:var(--night);padding:40px 0 32px;border-top:1px solid var(--rule)}.is-home .site-footer{padding-bottom:0}
.site-footer .footer-top{align-items:center}
.site-footer .footer-brand p{margin-top:12px;font:13px/1.6 var(--mono);letter-spacing:.035em;color:var(--muted)}
.is-home .site-footer .footer-brand p{margin:0}.footer-word{position:relative;container-type:inline-size;margin-top:clamp(36px,6vw,84px);padding-bottom:clamp(22px,3vw,40px)}
.footer-word a{display:block;text-decoration:none;color:var(--ink)}
.footer-word span{display:block;font:600 20.5cqi/.74 var(--sans);letter-spacing:-.02em;white-space:nowrap;padding-top:.04em}
.site-footer{overflow:clip}
/* Only the D carries the cut, as in the mark. */
.footer-word .fw-d{position:relative;display:inline-block;font-weight:inherit}
.footer-word .fw-d::after{content:"";position:absolute;left:-.05em;right:-.05em;top:52%;height:.075em;transform:translateY(-50%);background:var(--night);pointer-events:none}
.footer-word a:focus-visible{outline:2px solid currentColor;outline-offset:8px}

@media(max-width:1050px){.landing-grid{gap:32px}.depth-study{margin-right:-24px}}
@media(max-width:900px){.landing-grid{min-height:0;padding-block:56px 64px}.depth-controls [role=tablist]{gap:22px}.report-layout{display:block}.report-layout .report-lead{margin-top:34px}}
@media(max-width:760px){
.landing-grid{grid-template-columns:1fr;gap:26px;padding-block:44px 52px}
.landing-copy h1{font-size:clamp(46px,14.6vw,84px);line-height:1}
.hero-eyebrow{margin-bottom:22px}.landing-copy>p:not(.hero-eyebrow){margin-top:24px;font-size:19px}.landing-copy .text-link{margin-top:20px}
.depth-study{margin:0 -22px}.depth-study::before{inset:0 0 24%}
.depth-controls{margin:4px 22px 0}
.plane-label,.plane-leader{display:none}
.report-layout h2{font-size:clamp(44px,14.6vw,112px);line-height:1.1}
.home-notes{gap:0}
.home-notes>a{padding:26px 0 30px}
.invitation{padding-block:56px 72px}
.site-footer{padding-top:30px}.site-footer .footer-links{margin-top:18px}
}
@media(max-width:370px){.depth-study{margin:0 -18px}.depth-controls{margin:4px 18px 0}}
@media(prefers-reduced-motion:reduce){.scan-beam{display:none}.landing-copy>*,.plane,.depth-registration,.depth-guides,.plane-label,.plane-leader,.depth-controls,.plane-nodes circle{animation:none!important}}