/* dionis schmidt */
@font-face { font-family: "Inter"; font-weight: 400; src: url(/fonts/inter-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 500; src: url(/fonts/inter-500.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 800; src: url(/fonts/inter-800.woff2) format("woff2"); font-display: swap; }
:root { --pad: clamp(.9rem, 2.2vw, 1.5rem); --fs: 12px; }
@view-transition { navigation: auto; }
* { box-sizing: border-box; }
html { background: #fff; color: #a6a6a6; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { margin: 0; font: 400 var(--fs)/1.45 "Inter", Helvetica, Arial, sans-serif; text-transform: lowercase; overflow-x: hidden; position: relative; }
p, h2, ul { margin: 0; padding: 0; font: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-transform: inherit; }
a { color: #000; text-decoration: none; pointer-events: auto; }
.t, .id, .projects, .contact { pointer-events: auto; }
.more { margin-top: 1.4em; }
.more a { text-decoration: underline; text-underline-offset: .2em; }
.els a { color: #a6a6a6; }
.els .t { color: #000; }
a:focus-visible { outline: 1px solid #000; outline-offset: 2px; }

/* desktop: hovering a word makes everything else fade away */
@media (hover: hover) {
  body:has(a:hover) .t,
  body:has(a:hover) a:not(:hover):not(.alt):not(.np-n) { opacity: 0; }
}
.t, .id a, .col a, .whisper a { transition: opacity .45s ease; }

/* name + description: top-left corner */
.id { position: absolute; z-index: 1; top: var(--pad); left: var(--pad); max-width: min(26rem, 55vw); }
.name, .els { margin-bottom: 1.4em; }
h1.name { font: inherit; margin-top: 0; }
.name { display: flex; gap: 1.6em; width: max-content; max-width: 100%; }
.alt { color: #a6a6a6; opacity: 0; visibility: hidden; transition: opacity .3s ease, color .2s ease; white-space: nowrap; }
.name:hover .alt, .name:focus-within .alt { opacity: 1; visibility: visible; }
.alt:hover, .alt:focus-visible { color: #000; }

/* everything else: one column, a little right, lower so the page scrolls */
.col { position: relative; z-index: 1; margin-left: 52vw; width: min(24rem, 44vw); padding: 62svh var(--pad) var(--pad) 0; min-height: 150svh;
  display: flex; flex-direction: column; justify-content: space-between; gap: 9rem; pointer-events: none; }
.projects { list-style: none; display: grid; gap: 1.4em; }

/* the red strip: edge to edge, under the text (desktop: halfway between "about" and "projects") */
.whisper { position: fixed; left: 0; right: 0; top: var(--wy, 34svh); transform: translateY(-50%); z-index: 0; pointer-events: none; text-transform: none;
  animation: wfade 1.6s ease .3s both; }
@keyframes wfade { from { opacity: 0; } to { opacity: 1; } }
.whisper a { display: block; width: 100%; max-height: 3.45em; overflow: hidden; color: #f00; font-size: 5px; line-height: 1.7; text-align: justify; hyphens: none; pointer-events: auto; }

/* the text blurs the strip softly where they overlap */
.projects, .contact { position: relative; }
.id.ov::before, .projects.ov::before, .contact.ov::before { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.id::before, .projects::before, .contact::before { content: ""; position: absolute; inset: -12rem; z-index: -1; pointer-events: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  --soft-x: linear-gradient(to right, rgba(0,0,0,0.000) 0.00rem, rgba(0,0,0,0.001) 0.50rem, rgba(0,0,0,0.005) 1.00rem, rgba(0,0,0,0.016) 1.50rem, rgba(0,0,0,0.035) 2.00rem, rgba(0,0,0,0.065) 2.50rem, rgba(0,0,0,0.104) 3.00rem, rgba(0,0,0,0.152) 3.50rem, rgba(0,0,0,0.210) 4.00rem, rgba(0,0,0,0.275) 4.50rem, rgba(0,0,0,0.347) 5.00rem, rgba(0,0,0,0.422) 5.50rem, rgba(0,0,0,0.500) 6.00rem, rgba(0,0,0,0.578) 6.50rem, rgba(0,0,0,0.653) 7.00rem, rgba(0,0,0,0.725) 7.50rem, rgba(0,0,0,0.790) 8.00rem, rgba(0,0,0,0.848) 8.50rem, rgba(0,0,0,0.896) 9.00rem, rgba(0,0,0,0.935) 9.50rem, rgba(0,0,0,0.965) 10.00rem, rgba(0,0,0,0.984) 10.50rem, rgba(0,0,0,0.995) 11.00rem, rgba(0,0,0,0.999) 11.50rem, rgba(0,0,0,1.000) 12.00rem, rgba(0,0,0,1.000) calc(100% - 12.00rem), rgba(0,0,0,0.999) calc(100% - 11.50rem), rgba(0,0,0,0.995) calc(100% - 11.00rem), rgba(0,0,0,0.984) calc(100% - 10.50rem), rgba(0,0,0,0.965) calc(100% - 10.00rem), rgba(0,0,0,0.935) calc(100% - 9.50rem), rgba(0,0,0,0.896) calc(100% - 9.00rem), rgba(0,0,0,0.848) calc(100% - 8.50rem), rgba(0,0,0,0.790) calc(100% - 8.00rem), rgba(0,0,0,0.725) calc(100% - 7.50rem), rgba(0,0,0,0.653) calc(100% - 7.00rem), rgba(0,0,0,0.578) calc(100% - 6.50rem), rgba(0,0,0,0.500) calc(100% - 6.00rem), rgba(0,0,0,0.422) calc(100% - 5.50rem), rgba(0,0,0,0.347) calc(100% - 5.00rem), rgba(0,0,0,0.275) calc(100% - 4.50rem), rgba(0,0,0,0.210) calc(100% - 4.00rem), rgba(0,0,0,0.152) calc(100% - 3.50rem), rgba(0,0,0,0.104) calc(100% - 3.00rem), rgba(0,0,0,0.065) calc(100% - 2.50rem), rgba(0,0,0,0.035) calc(100% - 2.00rem), rgba(0,0,0,0.016) calc(100% - 1.50rem), rgba(0,0,0,0.005) calc(100% - 1.00rem), rgba(0,0,0,0.001) calc(100% - 0.50rem), rgba(0,0,0,0.000) calc(100% - 0.00rem));
  --soft-y: linear-gradient(to bottom, rgba(0,0,0,0.000) 0.00rem, rgba(0,0,0,0.001) 0.50rem, rgba(0,0,0,0.005) 1.00rem, rgba(0,0,0,0.016) 1.50rem, rgba(0,0,0,0.035) 2.00rem, rgba(0,0,0,0.065) 2.50rem, rgba(0,0,0,0.104) 3.00rem, rgba(0,0,0,0.152) 3.50rem, rgba(0,0,0,0.210) 4.00rem, rgba(0,0,0,0.275) 4.50rem, rgba(0,0,0,0.347) 5.00rem, rgba(0,0,0,0.422) 5.50rem, rgba(0,0,0,0.500) 6.00rem, rgba(0,0,0,0.578) 6.50rem, rgba(0,0,0,0.653) 7.00rem, rgba(0,0,0,0.725) 7.50rem, rgba(0,0,0,0.790) 8.00rem, rgba(0,0,0,0.848) 8.50rem, rgba(0,0,0,0.896) 9.00rem, rgba(0,0,0,0.935) 9.50rem, rgba(0,0,0,0.965) 10.00rem, rgba(0,0,0,0.984) 10.50rem, rgba(0,0,0,0.995) 11.00rem, rgba(0,0,0,0.999) 11.50rem, rgba(0,0,0,1.000) 12.00rem, rgba(0,0,0,1.000) calc(100% - 12.00rem), rgba(0,0,0,0.999) calc(100% - 11.50rem), rgba(0,0,0,0.995) calc(100% - 11.00rem), rgba(0,0,0,0.984) calc(100% - 10.50rem), rgba(0,0,0,0.965) calc(100% - 10.00rem), rgba(0,0,0,0.935) calc(100% - 9.50rem), rgba(0,0,0,0.896) calc(100% - 9.00rem), rgba(0,0,0,0.848) calc(100% - 8.50rem), rgba(0,0,0,0.790) calc(100% - 8.00rem), rgba(0,0,0,0.725) calc(100% - 7.50rem), rgba(0,0,0,0.653) calc(100% - 7.00rem), rgba(0,0,0,0.578) calc(100% - 6.50rem), rgba(0,0,0,0.500) calc(100% - 6.00rem), rgba(0,0,0,0.422) calc(100% - 5.50rem), rgba(0,0,0,0.347) calc(100% - 5.00rem), rgba(0,0,0,0.275) calc(100% - 4.50rem), rgba(0,0,0,0.210) calc(100% - 4.00rem), rgba(0,0,0,0.152) calc(100% - 3.50rem), rgba(0,0,0,0.104) calc(100% - 3.00rem), rgba(0,0,0,0.065) calc(100% - 2.50rem), rgba(0,0,0,0.035) calc(100% - 2.00rem), rgba(0,0,0,0.016) calc(100% - 1.50rem), rgba(0,0,0,0.005) calc(100% - 1.00rem), rgba(0,0,0,0.001) calc(100% - 0.50rem), rgba(0,0,0,0.000) calc(100% - 0.00rem));
  -webkit-mask-image: var(--soft-x), var(--soft-y); -webkit-mask-composite: source-in;
  mask-image: var(--soft-x), var(--soft-y); mask-composite: intersect; }

/* the room */
.note { position: fixed; top: var(--pad); left: var(--pad); width: 17.5rem; max-height: calc(100svh - 2 * var(--pad)); overflow-y: auto; scrollbar-width: none; text-transform: none; }
.note::-webkit-scrollbar { display: none; }
.note p { margin: 0 0 1.4em; }
.back { display: inline-block; margin-bottom: 2.2em; text-transform: lowercase; }
.n1 { color: #717171; } .n2 { color: #a6a6a6; }
.sheets { display: flex; flex-direction: column; align-items: center; gap: clamp(.75rem, 2vw, 1.5rem); padding: clamp(3rem, 8vh, 5rem) var(--pad); margin-left: 20rem; }
.sheets img { width: min(100%, 52rem); height: auto; display: block; background: #fff; }
/* footer: copyright + "now playing" */
.foot { position: fixed; left: var(--pad); bottom: var(--pad); z-index: 2; color: #a6a6a6; }
.np { position: fixed; top: var(--pad); left: 50%; transform: translateX(-50%); z-index: 3; color: #a6a6a6; display: flex; gap: .1em .9em; align-items: baseline; white-space: nowrap; max-width: 40vw; }
.np-b, .np-n { color: #a6a6a6; transition: color .2s ease; }
.np-b .np-s { color: #000; }
.np-b:hover, .np-n:hover, .np-b:focus-visible, .np-n:focus-visible { color: #000; }
.np-t { color: #000; overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }
.np-t[hidden], .np-n[hidden] { display: none; }
.copy { margin: 0; }

/* the page never shows a scrollbar */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* small screens: an ordinary page, one text column */
@media (max-width: 52rem) {
  body { text-align: left; }
  .id { position: static; max-width: none; padding: calc(var(--pad) * 5) var(--pad) 0; }
  .name { display: block; width: auto; }
  .alt { display: none; }
  .col { margin-left: 0; width: auto; min-height: 0; padding: 12vh var(--pad) 9rem; gap: 10vh; display: flex; }
  .projects { gap: 2.4em; }
  .np { display: none; }
  .note { position: static; width: auto; max-height: none; padding: 48svh var(--pad) var(--pad); text-align: center; overflow: visible; }
  .note p { text-wrap: balance; }
  .sheets { margin-left: 0; padding-inline: 0; }
  /* the red strip sits where the copyright used to be; the copyright is the very last line, pinned to the bottom */
  .whisper { top: auto; bottom: calc(5.4rem + env(safe-area-inset-bottom)); transform: none; }
  .whisper a { max-height: 6.65em; }
  .foot { position: fixed; left: 0; right: 0; bottom: 0; padding: .7rem var(--pad) calc(.7rem + env(safe-area-inset-bottom)); background: #fff; z-index: 3; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }