/* david-klotz.com — ported from the Claude Design project
   "Portfolio David Klotz.dc.html". Head styles are verbatim; the
   style-hover attributes from the design live here as :hover rules
   (!important, because the base values sit in inline styles). */

/* ---- self-hosted variable fonts (latin subset, no Google CDN) ---- */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/spacegrotesk.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url('../fonts/jetbrainsmono.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---- theme variables ---- */
@property --dk-bg{syntax:'<color>';inherits:true;initial-value:#12100c}
@property --dk-fg{syntax:'<color>';inherits:true;initial-value:#ece6dc}
@property --dk-muted{syntax:'<color>';inherits:true;initial-value:#8b8278}
@property --dk-card{syntax:'<color>';inherits:true;initial-value:#1b1712}
@property --dk-accent{syntax:'<color>';inherits:true;initial-value:#dda65f}
html[data-dk-tt]{transition:--dk-bg .6s ease,--dk-fg .6s ease,--dk-muted .6s ease,--dk-card .6s ease,--dk-accent .6s ease}
:root{--dk-ink:236,230,220;--dk-bg:#12100c;--dk-bg-rgb:18,16,12;--dk-fg:#ece6dc;--dk-muted:#8b8278;--dk-card:#1b1712;--dk-accent:#dda65f}

/* ---- base ---- */
html{scroll-behavior:smooth;background:var(--dk-bg)}
body{margin:0;background:var(--dk-bg);color:var(--dk-fg);font-family:'Space Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--dk-fg);text-decoration:none}
a:hover{color:var(--dk-accent,#34d399)}
::selection{background:var(--dk-accent,#34d399);color:var(--dk-bg)}

/* ---- keyframes ---- */
@keyframes dkMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes dkBlink{0%,55%{opacity:1}56%,100%{opacity:0}}
@keyframes dkScroll{0%{transform:translateY(-110%)}100%{transform:translateY(110%)}}
@keyframes dkSpin{to{transform:rotate(360deg)}}
@keyframes dkBreath{0%{transform:scale(.28);opacity:.95}65%{opacity:.35}100%{transform:scale(1.15);opacity:0}}
@keyframes dkStatus{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--dk-accent,#34d399) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

@media (pointer:fine){body,body a,body button{cursor:none}}
[data-theme="light"] [data-dk-moon]{box-shadow:inset 12px -12px 0 0 transparent;background:var(--dk-fg);transform:rotate(115deg)}

/* ---- hover states (from the design's style-hover attributes) ---- */
[data-dk-themebtn]:hover{border-color:var(--dk-accent,#34d399)!important}
[data-dk-langbtn]:hover{border-color:var(--dk-accent,#34d399)!important;color:var(--dk-accent,#34d399)!important}
[data-dk-row]:hover{background:rgba(var(--dk-ink),.035)!important;padding-left:28px!important}
a.dk-cta:hover{background:var(--dk-accent,#34d399)!important;color:var(--dk-bg)!important}
a.dk-outline:hover{border-color:var(--dk-accent,#34d399)!important}
a[data-dk-copy]:hover{border-color:var(--dk-accent,#34d399)!important}

/* ---- typographic project cards ---- */
.dk-art{container-type:inline-size;position:relative;display:block;aspect-ratio:16/10;background:var(--dk-card);border:1px solid rgba(var(--dk-ink),.12);overflow:hidden}
.dk-art::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(var(--dk-ink),.16) 1px,transparent 1.6px);background-size:6cqw 6cqw;background-position:center}
.dk-art-idx{position:absolute;top:8cqw;right:9cqw;z-index:2;font-family:'JetBrains Mono',monospace;font-size:2.8cqw;letter-spacing:.14em;color:var(--dk-accent,#34d399)}
.dk-art-frame{position:absolute;inset:5cqw;border:1px solid rgba(var(--dk-ink),.14);padding:4.5cqw 5.5cqw;display:flex;flex-direction:column}
.dk-art-motif{flex:1;display:flex;align-items:center;justify-content:center}
.dk-art-glyph{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:15cqw;line-height:1;letter-spacing:.04em;color:var(--dk-accent,#34d399)}
.dk-art-glyph .dk-art-fg{color:var(--dk-fg)}
.dk-art-name{font-size:8.5cqw;font-weight:600;text-transform:uppercase;letter-spacing:-.02em;line-height:1;color:var(--dk-fg)}
.dk-art-sub{margin-top:1.8cqw;font-family:'JetBrains Mono',monospace;font-size:2.8cqw;letter-spacing:.22em;color:var(--dk-muted)}
.dk-art-stack{display:flex;flex-direction:column;gap:2.4cqw;width:32cqw}
.dk-art-stack span{display:block;height:4.6cqw;border:1px solid rgba(var(--dk-ink),.4)}
.dk-art-stack span:nth-child(2){background:var(--dk-accent,#34d399);border-color:var(--dk-accent,#34d399)}
.dk-art-net{width:42cqw;height:auto}
.dk-art-net line{stroke:rgba(var(--dk-ink),.4);stroke-width:1;vector-effect:non-scaling-stroke}
.dk-art-net circle{fill:var(--dk-muted)}
.dk-art-net circle.hub{fill:var(--dk-accent,#34d399)}

/* ---- responsive ---- */
@media (max-width:760px){
  [data-nav]{padding:14px 18px !important;flex-wrap:wrap;row-gap:10px}
  [data-navitems]{gap:14px !important;font-size:10px !important;flex-wrap:wrap}
  [data-navnum]{display:none !important}
  [data-hero-meta]{font-size:10px !important;flex-wrap:wrap;gap:8px !important}
  [data-hero-foot]{flex-direction:column !important;align-items:flex-start !important;gap:22px !important}
  [data-scrollind]{display:none !important}
  [data-dk-row]{grid-template-columns:24px minmax(0,1fr) !important;gap:14px !important}
  [data-row-tags]{display:none !important}
  [data-row-meta]{grid-column:2 !important;justify-self:start !important;text-align:left !important;font-size:11px !important}
  [data-about-grid]{grid-template-columns:1fr !important;gap:28px !important}
  [data-portrait]{max-width:300px}
  [data-cv-row]{grid-template-columns:1fr !important;gap:6px !important}
  [data-proj-detail]{grid-template-columns:1fr !important;gap:20px !important}
  [data-dk-sectnav]{display:none !important}
  [data-worktop]{flex-wrap:wrap;gap:6px}
  [data-cvtop]{flex-wrap:wrap;gap:14px}
}
@media (max-width:420px){
  [data-navitems]{font-size:9px !important;gap:11px !important}
}