:root{--bg: #f5f5f7; --bg-2: #ededf0; --ink: #111114; --ink-soft: #2a2a2f; --muted: #5d5d66; --muted-2: #6b6b73; --line: rgba(17, 17, 20, .14); --line-soft: rgba(17, 17, 20, .09); --accent: #a83c12; --shell: #f5f5f7; --identity-bg: #f5f5f7; --experience-bg: #f5f5f7; --contact-bg: #ededf0; --theme-ink: #111114; --theme-muted: #5d5d66; --cursor-fill: #111114; --cursor-text: #f5f5f7; --disp: "Schibsted Grotesk", "Schibsted Fallback", Arial, sans-serif; --sans: "Schibsted Grotesk", "Schibsted Fallback", Arial, sans-serif; --serif: "Schibsted Grotesk", "Schibsted Fallback", Arial, sans-serif; --label: "Schibsted Grotesk", "Schibsted Fallback", Arial, sans-serif; --pad-x: 3vw; --ease-out: cubic-bezier(0.23, 1, 0.32, 1);}
:root[data-theme="dark"]{--bg: #111113; --bg-2: #0b0b0d; --ink: #f2f2f4; --ink-soft: #cfcfd4; --muted: #a1a1aa; --muted-2: #8e8e96; --line: rgba(242, 242, 244, .12); --line-soft: rgba(242, 242, 244, .06); --accent: #f28b63; --shell: #141416; --identity-bg: #111113; --experience-bg: #141416; --contact-bg: #0b0b0d; --theme-ink: #f2f2f4; --theme-muted: #a1a1aa; --cursor-fill: #f2f2f4; --cursor-text: #111113;}
*{margin: 0px; padding: 0px; box-sizing: border-box;}
html{scroll-behavior: smooth;}
html.js{scroll-behavior: auto;}
body{background: var(--bg); color: var(--ink); font-family: var(--sans); font-weight: 300; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; overflow-x: hidden; overflow-x: clip;}
::selection{background: color-mix(in oklab, var(--accent), transparent 70%); color: var(--ink);}
a{color: inherit; text-decoration: none;}
img{max-width: 100%; display: block;}
em{font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0.01em;}
@media (prefers-reduced-motion: reduce){}
.site-head{transition: opacity 0.34s, filter 0.34s; position: fixed; inset: 0px 0px auto; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 1.05rem var(--pad-x);}
.site-head::before{content: ""; position: absolute; inset: 0px; pointer-events: none; background: linear-gradient(rgba(10, 10, 11, 0.85), rgba(10, 10, 11, 0)); transition: background 0.4s var(--ease-out), backdrop-filter 0.4s var(--ease-out);}
.site-head > *{position: relative;}
.brand{font-family: var(--label); font-size: 0.84rem; font-weight: 500; letter-spacing: 0.04em; display: inline-grid; align-items: center; inline-size: clamp(9.5ch, 5.3ch + 7.2vw, 11.5ch); white-space: nowrap;}
.site-nav{display: flex; gap: clamp(1.3rem, 2.6vw, 2.8rem);}
.site-nav a{position: relative; font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding-bottom: 0.3em; background-image: linear-gradient(var(--ink), var(--ink)); background-repeat: no-repeat; background-position: left bottom; background-size: 0% 1px; transition: color 0.35s, background-size 0.45s var(--ease-out);}
.site-nav a sup{position: absolute; left: -1.3em; top: -0.1em; font-size: 0.56rem; color: var(--accent); opacity: 0; transform: translate(7px, 4px); transition: opacity 0.3s, transform 0.4s var(--ease-out);}
.site-nav a:hover{color: var(--ink); background-size: 100% 1px;}
.site-nav a:hover sup{opacity: 1; transform: translate(0px, 0px);}
.vh{position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap;}
.scene{padding: clamp(6rem, 15vh, 10rem) var(--pad-x); position: relative;}
.statement{position: relative; z-index: 1; display: flex; align-items: flex-start; flex-wrap: wrap; gap: clamp(1.6rem, 4.2vw, 4rem); font-family: var(--disp); font-weight: 900; font-stretch: 118%; font-size: clamp(2.6rem, 6.5vw, 6.4rem); line-height: 0.95; letter-spacing: -0.028em; color: var(--ink);}
@media (max-width: 760px) {.statement{flex-direction: column; gap: 2.2rem; font-size: clamp(2.9rem, 13vw, 3.7rem);}}
.sec-head{margin-bottom: clamp(3rem, 8vh, 5.5rem); position: relative;}
.work-row{border-top: 1px solid var(--line);}
.work-row:last-child{border-bottom: 1px solid var(--line);}
.phones{display: flex; align-items: center; justify-content: center; gap: 4%; padding: 9% 7%; width: 100%; height: 100%; background: radial-gradient(90% 110% at 50% 0%, rgb(20, 26, 20) 0%, rgb(14, 17, 14) 70%);}
.phones img{width: 29%; height: auto; border-radius: 14px; border: 1px solid rgba(242, 239, 233, 0.14); box-shadow: rgba(0, 0, 0, 0.55) 0px 18px 38px;}
.phones img:nth-child(2){transform: translateY(-4%) scale(1.07); position: relative; z-index: 2;}
.phones img:nth-child(3){transform: translateY(4%);}
@keyframes availPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.site-foot{border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1rem 3rem; justify-content: space-between; padding: 2.2rem var(--pad-x) calc(2.2rem + env(safe-area-inset-bottom)); font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase;}
.site-foot a{color: var(--muted); transition: color 0.35s;}
.site-foot a:hover{color: var(--ink);}
.cursor{display: none;}
@media (max-width: 900px) {:root{--pad-x: 5vw;}}
@media (max-width: 640px) {.site-nav{gap: 0.95rem;}
.site-nav a sup{display: none;}
.site-head{padding: 1.1rem var(--pad-x);}
.statement{max-width: 100%;}
.site-foot{flex-direction: column; gap: 0.7rem;}}
.nav-toggle{display: none; position: relative; align-items: center; gap: 0.72rem; min-height: 44px; padding: 0.4rem 0px; margin: -0.4rem 0px; background: none; border: 0px; cursor: pointer; color: var(--ink); -webkit-tap-highlight-color: transparent; font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;}
.mobile-nav{position: fixed; inset: 0px; z-index: 400; display: flex; align-items: stretch; padding: max(5.4rem, 13svh) var(--pad-x) calc(2.6rem + env(safe-area-inset-bottom)); background: rgba(9, 9, 10, 0.976); backdrop-filter: blur(10px) saturate(1.1); opacity: 0; visibility: hidden; overflow-y: auto; overscroll-behavior: contain; transition: opacity 0.5s var(--ease-out), visibility 0.5s, background-color .7s cubic-bezier(.16, 1, .3, 1), color .5s ease;}
.mobile-nav::before{content: ""; position: absolute; inset: 0px; pointer-events: none; background: linear-gradient(90deg, transparent calc(25% - 1px), var(--line-soft) 25%, transparent calc(25% + 1px)),
    linear-gradient(90deg, transparent calc(75% - 1px), var(--line-soft) 75%, transparent calc(75% + 1px));}
.menu-open .mobile-nav{opacity: 1; visibility: visible;}
html.menu-open{overflow: hidden;}
.menu-open .site-head{z-index: 450;}
.menu-open .site-head::before{opacity: 0;}
@media (max-width: 760px) {.js .site-nav{display: none;}
.js .head-actions{display: none;}
.js .nav-toggle{display: inline-flex;}}
@media (max-width: 1024px) {html{overflow-x: clip;}}
@media (prefers-reduced-motion: reduce) {*, ::before, ::after{animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;}}
:root{--shell: #0a0b0b; --identity-bg: #0c0d0d; --experience-bg: #111511; --contact-bg: #0e100f; --theme-ink: #f0eee8; --theme-muted: #92918b; --cursor-fill: #f0eee8; --cursor-text: #090a0a;}
:root[data-theme="light"]{--bg: #f5f5f7; --bg-2: #ededf0; --ink: #111114; --ink-soft: #2a2a2f; --muted: #5d5d66; --muted-2: #6b6b73; --line: rgba(17, 17, 20, .14); --line-soft: rgba(17, 17, 20, .09); --accent: #a83c12; --shell: #f5f5f7; --identity-bg: #f5f5f7; --experience-bg: #f5f5f7; --contact-bg: #ededf0; --theme-ink: #111114; --theme-muted: #5d5d66; --cursor-fill: #111114; --cursor-text: #f5f5f7;}
.site-head, .site-foot{transition: background-color 0.7s cubic-bezier(0.16, 1, 0.3, 1), color 0.5s, border-color 0.5s, opacity 0.28s;}
::view-transition-old(root), ::view-transition-new(root){animation-duration: 0.55s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);}
html[data-theme="light"] body{background: var(--bg); color: var(--ink);}
html[data-theme="light"] .site-head::before{background: linear-gradient(rgba(238, 232, 219, 0.92), rgba(238, 232, 219, 0));}
html[data-theme="light"] .mobile-nav{background: rgb(238, 232, 219); color: var(--ink);}
.site-loader{position: fixed; inset: 0px; z-index: 1000; display: grid; place-content: center; gap: 15px; background: var(--bg); color: var(--ink); transition: opacity 0.45s, visibility 0.45s;}
.site-loader[aria-hidden="true"]{opacity: 0; visibility: hidden; pointer-events: none;}
.loader-mark{width: 72px; display: flex; justify-content: space-between; align-items: center;}
.loader-mark i{width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: 0.62s ease-in-out 0s infinite alternate none running loaderDot;}
.loader-mark i:nth-child(2){animation-delay: 0.08s;}
.loader-mark i:nth-child(3){animation-delay: 0.16s;}
.loader-mark i:nth-child(4){animation-delay: 0.24s;}
.loader-name{font: 500 11px var(--label); letter-spacing: 0.04em; text-align: center;}
@keyframes loaderDot {
  100% { translate: 0px -7px; opacity: 0.32; }
}
.head-actions{display: flex; align-items: center; gap: 11px;}
.mnav-theme-choices{display: flex; gap: 6px;}
@keyframes availPing {
  50% { opacity: 0.35; }
}
.mobile-nav{padding-top: clamp(4.4rem, 13svh, 8.5rem);}
@media (max-width: 900px) and (max-height: 760px) {.mobile-nav{padding-top: max(4.2rem, 8svh); padding-bottom: calc(1.6rem + env(safe-area-inset-bottom));}}
.skills-head{position: relative; z-index: 2; padding: 0px clamp(24px, 5vw, 76px) 42px; display: grid; grid-template-columns: 1fr minmax(270px, 40ch); gap: 32px; align-items: end;}
.skills-head h2{margin: 0px; font-stretch: 124%; letter-spacing: -0.065em; text-transform: uppercase;}
.skills-head h2 em{color: var(--section-accent); text-transform: none; letter-spacing: -0.02em;}
.skills-head > p{margin: 0px; color: rgb(148, 147, 142); font-size: 12px; line-height: 1.6;}
.skill-lanes{position: relative; z-index: 3; border-top: 1px solid rgba(239, 237, 231, 0.16);}
.skill-scroller{position: relative; z-index: 1; min-width: 0px; overflow: hidden; white-space: nowrap; scroll-behavior: auto; mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 5%, rgb(0, 0, 0) 95%, transparent); scrollbar-width: none; pointer-events: none;}
.skill-scroller::-webkit-scrollbar{display: none;}
.tool-set{display: flex; align-items: center; gap: 23px; padding-right: 23px;}
.tool-set span{font-stretch: 118%; letter-spacing: -0.04em; text-transform: uppercase;}
.tool-set i{width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--tone); opacity: 0.82;}
.edge{position: absolute; z-index: 30; top: 0px; bottom: 0px; width: clamp(74px, 8vw, 122px); border: 0px; color: var(--tone); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.22s; background: transparent;}
.edge.prev{left: clamp(125px, 17vw, 250px); background: linear-gradient(90deg, rgb(14, 18, 16) 7%, rgba(14, 18, 16, 0.86) 38%, transparent 100%);}
.edge.next{right: 0px; background: linear-gradient(270deg, rgb(14, 18, 16) 7%, rgba(14, 18, 16, 0.86) 38%, transparent 100%);}
.edge::before{content: ""; position: absolute; top: 50%; width: 23px; height: 1.5px; background: var(--tone); transform: translateY(-50%); transition: width 0.25s, transform 0.25s;}
.edge::after{content: ""; position: absolute; top: 50%; width: 10px; height: 10px; border-top: 1.5px solid var(--tone); border-right: 1.5px solid var(--tone); transition: transform 0.25s;}
.edge.prev::before, .edge.prev::after{left: 24px;}
.edge.prev::after{transform: translateY(-50%) rotate(-135deg);}
.edge.next::before, .edge.next::after{right: 24px;}
.edge.next::after{transform: translateY(-50%) rotate(45deg);}
.edge:hover::before{width: 32px;}
.edge.prev:hover::after{transform: translate(-4px, -50%) rotate(-135deg);}
.edge.next:hover::after{transform: translate(4px, -50%) rotate(45deg);}
.filters button, .available, .location{font: 500 11px/1.5 var(--label); letter-spacing: 0.04em; text-transform: uppercase;}
.dates{font-family: var(--sans); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.04em; text-transform: none; line-height: 1.4;}
.chapter-tab{position: relative; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgba(239, 237, 231, 0.18); border-image: none; background: transparent; color: rgb(111, 112, 108); text-align: left; padding: 24px 3px; cursor: pointer; transition: color 0.25s, padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);}
.chapter-tab:hover{color: rgb(239, 237, 231); padding-left: 16px;}
.chapter-tab::before{content: ""; position: absolute; left: 0px; top: 0px; bottom: 0px; width: 3px; background: var(--section-accent); transform: scaleY(0); transform-origin: center top; transition: transform 0.35s;}
.chapter-tab b{display: block; font: 800 clamp(28px,3.5vw,52px)/1 var(--disp); letter-spacing: -0.045em;}
.chapter-tab span{display: block; margin-top: 8px; font: 500 11px var(--label); letter-spacing: 0.04em; text-transform: uppercase;}
.chapter{position: relative; min-height: 505px;}
.chapter h2{margin: 15px 0px 0px; max-width: 15ch; font-stretch: 120%; letter-spacing: -0.058em;}
.courses{display: flex; flex-wrap: wrap; gap: 8px;}
.courses span{border-bottom: 1px solid rgba(239, 237, 231, 0.25); padding: 4px 0px; color: rgb(200, 198, 192); font-size: 11px; margin-right: 9px;}
.chapter.change{animation: 0.48s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running chapterChange;}
.cal-edge{display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 7; width: 44px; height: 44px; place-items: center; border: 1px solid var(--line); background: var(--experience-bg, #101210); color: inherit; font: 500 15px var(--label); cursor: pointer;}
.cal-edge.prev{left: 8px;}
.cal-edge.next{right: 8px;}
.cal-edge:active{border-color: var(--accent); color: var(--accent);}
.calendar{position: relative; z-index: 5; height: 270px; margin-top: 58px; display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);}
.month{position: relative; border-right: 1px solid var(--line);}
.month:last-child{border-right: 0px;}
.post{position: absolute; left: 24%; top: 37%; width: 8px; height: 8px; border: 1px solid; border-radius: 50%; box-shadow: color-mix(in srgb, currentcolor 11%, transparent 89%) 0px 0px 0px 3px; transition: opacity 0.25s, transform 0.35s, background 0.25s;}
.post.recruitment{color: rgb(127, 193, 141);}
.post.award{color: rgb(217, 179, 94);}
.post:nth-of-type(2){left: 26%; top: 43%;}
.post:nth-of-type(3){left: 62%; top: 67%;}
.calendar[data-active-filter] .post{opacity: 0.16;}
.calendar[data-active-filter="recruitment"] .post.recruitment, .calendar[data-active-filter="award"] .post.award{opacity: 1; transform: scale(1.45); background: currentcolor;}
.calendar::after{content: "CONTENT CALENDAR · JAN 2026—NOW"; position: absolute; right: 11px; bottom: 10px; color: var(--muted); font: 500 11px var(--label); letter-spacing: 0.04em;}
.filters{display: flex; flex-wrap: wrap; gap: 7px;}
.filter{border: 1px solid var(--line); background: transparent; color: var(--muted); padding: 8px 10px; cursor: pointer;}
.filter:hover{border-color: var(--accent); color: var(--accent);}
.contact-poster{position: relative; z-index: 4;}
.available, .location{margin: 0px;}
.contact-poster{display: grid; grid-template-columns: minmax(0px, 1.45fr) minmax(230px, 0.55fr); gap: clamp(40px, 8vw, 130px); align-items: end; margin-top: 62px;}
html[data-theme="light"] .skill-lanes{border-color: rgba(16, 23, 17, 0.16);}
html[data-theme="light"] .skills-head > p{color: rgb(93, 102, 95);}
html[data-theme="light"] .edge.prev{background: linear-gradient(90deg, rgb(231, 225, 213) 7%, rgba(231, 225, 213, 0.88) 38%, transparent);}
html[data-theme="light"] .edge.next{background: linear-gradient(270deg, rgb(231, 225, 213) 7%, rgba(231, 225, 213, 0.88) 38%, transparent);}
html[data-theme="light"] .chapter-tab{border-color: rgba(16, 23, 17, 0.18);}
html[data-theme="light"] .chapter-tab:hover{color: rgb(16, 23, 17);}
html[data-theme="light"] .courses span{color: rgb(53, 64, 56); border-color: rgba(16, 23, 17, 0.25);}
@keyframes blink {
  50% { opacity: 0.25; }
}
@keyframes flash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes drop {
  0% { transform: translateY(-15px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.f-stage{background: rgb(18, 9, 9); color: rgb(244, 232, 215);}
.f-stage::before{content: ""; position: absolute; inset: 0px; z-index: -3; background: radial-gradient(circle at 64% 48%, rgba(149, 69, 39, 0.25), transparent 45%), rgb(18, 9, 9);}
.level{display: flex; align-items: center; gap: 8px;}
.enemy{position: absolute; width: 48px; height: 42px; border: 0px; background: none; padding: 0px; z-index: 10; transform: translate(-50%, -50%); filter: drop-shadow(rgba(0, 0, 0, 0.38) 0px 6px 2px); transition: filter 0.15s;}
.enemy:hover{filter: drop-shadow(rgb(255, 206, 130) 0px 0px 7px) drop-shadow(rgba(0, 0, 0, 0.38) 0px 6px 2px);}
.enemy svg{display: block; width: 100%; height: 100%; shape-rendering: crispedges;}
.js:not(.reduced) .enemy svg{animation: 2.7s ease-in-out 0s infinite normal none running enemyBob;}
.js:not(.reduced) .enemy.bat svg{animation-duration: 1.6s;}
@keyframes enemyBob {
  50% { transform: translateY(-3px); }
}
.enemy.dying{pointer-events: none; animation: 0.52s cubic-bezier(0.3, 0, 0.7, 1) 0s 1 normal forwards running enemyDie;}
@keyframes enemyDie {
  0% { transform: translate(-50%, -50%) scale(1); }
  28% { transform: translate(-50%, -50%) scale(1.25) rotate(-8deg); filter: brightness(2); }
  100% { transform: translate(-50%, 5px) scale(0.08) rotate(20deg); opacity: 0; }
}
.death-pixel{position: absolute; z-index: 14; width: 6px; height: 6px; background: rgb(224, 161, 90); left: var(--px); top: var(--py); animation: 0.6s ease-out 0s 1 normal forwards running pixelBurst; pointer-events: none;}
@keyframes pixelBurst {
  100% { transform: translate(var(--dx),var(--dy)) rotate(160deg); opacity: 0; }
}
.xp-pop{position: absolute; z-index: 22; color: rgb(255, 213, 158); font: 500 7px var(--sans); text-shadow: rgb(38, 16, 18) 2px 2px; pointer-events: none; animation: 0.72s ease-out 0s 1 normal forwards running xpPop;}
@keyframes xpPop {
  100% { transform: translateY(-35px); opacity: 0; }
}
@keyframes levelUp {
  0% { opacity: 0; transform: scale(0.8); }
  18%, 68% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.12); }
}
@keyframes swordTap {
  45% { transform: translate(-88%, -12%) rotate(9deg) scale(0.92); }
  100% { transform: translate(-88%, -12%) rotate(0deg) scale(1); }
}
.kills{position: absolute; right: 10%; bottom: 93px; color: rgb(184, 137, 104); font: 500 7px var(--sans); z-index: 9;}
@media (pointer: fine) {.f-stage, .f-stage .enemy{cursor: none;}}
.cursor[hidden]{display: none !important;}
.cur .cursor{display: block; position: fixed; inset: 0px auto auto 0px; width: 0px; height: 0px; z-index: 10000; pointer-events: none; opacity: 0; transition: opacity 160ms var(--ease-out); will-change: transform;}
.cur .cursor.is-visible{opacity: 1;}
.cursor.on-light{--cursor-fill: #111114; --cursor-text: #f5f5f7;}
.cursor.on-dark{--cursor-fill: #f2f2f4; --cursor-text: #111113;}
.cursor-dot{position: absolute; left: 0px; top: 0px; width: 6px; height: 6px; margin: 0px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--cursor-fill); box-shadow: 0 0 0 1px color-mix(in oklab, var(--cursor-text), transparent 55%); transition: scale 120ms var(--ease-out), background-color 240ms var(--ease-out);}
.cursor-ring{position: absolute; left: 0px; top: 0px; width: 36px; height: 36px; margin: 0px; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid var(--cursor-fill); opacity: 0.32; transition: scale 240ms var(--ease-out), opacity 240ms var(--ease-out), border-color 240ms var(--ease-out);}
.cursor-label{position: absolute; left: 14px; top: 14px; z-index: 2; display: inline-block; padding: 5px 9px; border-radius: 999px; font: 400 11px/1.2 var(--label); letter-spacing: 0.01em; text-transform: none; white-space: nowrap; color: var(--cursor-text); background: var(--cursor-fill); opacity: 0; transform: translateY(4px) scale(0.96); transform-origin: 0px 0px; transition: opacity 160ms var(--ease-out), transform 240ms var(--ease-out), background-color 240ms var(--ease-out), color 240ms var(--ease-out);}
.cursor-label:empty{display: none;}
.cursor-sigil{display: none;}
.cur-view .cursor-ring{scale: 1.3; opacity: 0.14;}
.cur-view .cursor-label{opacity: 1; transform: none;}
.cursor-press .cursor-ring{scale: 0.85;}
.cursor-press .cursor-dot{scale: 0.8;}
.sword-mode .cursor{opacity: 0 !important;}
@media (pointer: fine) and (hover: hover) {html.cur, html.cur body, html.cur body *{cursor: none !important;}}
@media (max-width: 900px) {.head-actions{display: flex;}
.site-loader{padding: 20px;}
.skills-head{grid-template-columns: 1fr; padding-bottom: 28px;}
.skills-head > p{margin-top: 22px; max-width: 44ch;}
.skills-head h2{font-size: clamp(54px, 15vw, 88px);}
.tool-set span{font-size: 28px;}
.edge{width: 66px; opacity: 0.72; pointer-events: auto;}
.edge.prev{left: 108px;}
.edge.prev::before, .edge.prev::after{left: 17px;}
.edge.next::before, .edge.next::after{right: 17px;}
.chapter-tab{padding: 16px;}
.chapter{min-height: 455px;}
.chapter h2{font-size: clamp(45px, 12vw, 72px);}
.calendar{overflow-x: auto; grid-template-columns: repeat(7, minmax(105px, 1fr)); height: 250px; scrollbar-width: none;}
.calendar::-webkit-scrollbar{display: none;}
.cal-edge{display: grid;}
.calendar::after{font-size: 8px;}
.contact-poster{grid-template-columns: 1fr; margin-top: 46px;}}
@media (max-width: 760px) {.f-stage{min-height: 820px;}
.kills{right: 20px; bottom: 82px;}
.f-stage, .f-stage .enemy{cursor: auto;}
.kills{font-size: 8px;}}
@media (max-width: 430px) {.edge.prev{left: 94px;}}
@media (hover: none), (pointer: coarse) {.cursor{display: none !important;}
.cur body, .cur a, .cur button{cursor: auto;}
.filter{padding: 12px 14px; min-height: 44px;}}
.work-row{position: relative;}
.scene, #top, main > section{scroll-margin-top: clamp(4.6rem, 9vh, 6.2rem);}
@supports (padding: max(0px)) {.site-head{padding-left: max(var(--pad-x), env(safe-area-inset-left)); padding-right: max(var(--pad-x), env(safe-area-inset-right));}
.site-foot{padding-bottom: max(1.4rem, env(safe-area-inset-bottom));}}
@media (min-width: 1700px) {:root{--pad-x: clamp(3vw, 3vw, 96px);}}
.site-nav a, .brand, .site-foot a{position: relative;}
.site-nav a::after, .brand::after, .site-foot a::after{content: ""; position: absolute; inset: -11px -6px;}
@media (hover: none), (pointer: coarse) {.site-nav a::after, .brand::after, .site-foot a::after{inset: -17px -8px;}}
@supports not (height: 100svh) {.mobile-nav{padding-top: clamp(4.4rem, 13vh, 8.5rem);}}
@media (forced-colors: active) {.cursor{display: none;}
:focus-visible{outline: highlight solid 2px;}}
html.no-js .site-loader{display: none !important;}
@keyframes loaderGiveUp {
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}
.site-loader{animation: 0s linear 5s 1 normal forwards running loaderGiveUp;}
html.reduced .site-loader{opacity: 0; visibility: hidden; pointer-events: none;}
:root{--muted-2: #7a7770;}
:root[data-theme="light"]{--muted-2: #6b665a;}
 .f-stage{--focus: #9bcfa5; --focus-halo: rgba(6, 10, 8, 0.85);}
@media (hover: none), (pointer: coarse) {.skill-scroller{grid-area: 1 / 2;}
.skill-scroller{mask-image: linear-gradient(90deg, transparent 0px, rgb(0, 0, 0) 14px, rgb(0, 0, 0) calc(100% - 152px), transparent calc(100% - 104px));}}
@media (prefers-reduced-motion: reduce) {*, ::before, ::after{animation-delay: -0.01ms !important; transition-delay: 0s !important;}}
.tw{transition: color .42s var(--ease-out), opacity .42s var(--ease-out), text-shadow .42s var(--ease-out);}
.tw[data-rule="wasl"]{color: rgb(148, 163, 184);}
.tw[data-rule="madd"]{color: rgb(56, 189, 248);}
.tw[data-rule="tafkhim"]{color: rgb(224, 161, 60);}
.tw[data-rule="silent"]{color: rgb(142, 160, 189);}
.t-rule{display: grid; grid-template-columns: auto 1fr; grid-template-areas: "dot name" "dot desc"; gap: 1px 9px; align-items: center; padding: 9px 11px; text-align: left; cursor: pointer; border: 1px solid rgba(232, 238, 252, 0.13); background: rgba(232, 238, 252, 0.027); color: inherit; transition: border-color .34s var(--ease-out), background-color .34s var(--ease-out), transform .4s var(--ease-out);}
.t-rule i{grid-area: dot; width: 9px; height: 9px; border-radius: 50%; background: var(--rule); box-shadow: 0 0 10px color-mix(in srgb, var(--rule) 60%, transparent);}
.t-rule b{grid-area: name; font: 600 11.5px/1.2 var(--sans); letter-spacing: 0.005em;}
.t-rule small{grid-area: desc; font: 400 9px/1.4 var(--sans); color: rgb(125, 140, 173);}
.t-rule:hover{border-color: color-mix(in srgb, var(--rule) 55%, transparent); background: color-mix(in srgb, var(--rule) 9%, transparent); transform: translateY(-2px);}
.t-rule[aria-selected="true"]{border-color: var(--rule); background: color-mix(in srgb, var(--rule) 15%, transparent); transform: translateY(-2px);}
.t-rule[aria-selected="true"] small{color: rgb(195, 207, 230);}
.t-rule.is-absent{opacity: 0.5;}
.t-rule.is-absent[aria-selected="true"]{opacity: 0.85;}
.t-rule:focus-visible{outline: 2px solid var(--rule); outline-offset: 3px;}
@media (max-width: 1180px) and (min-width: 761px) {.t-rule{padding: 7px 9px;}
.t-rule small{display: none;}
.t-rule b{font-size: 10px;}}
@media (max-width: 760px) {.t-rule{min-height: 52px;}
.t-rule small{display: none;}}
.head-actions{align-items: stretch;}
#top, #work, #skills, #education, #contact, #identity{scroll-margin-top: clamp(72px, 9vh, 96px);}
.caps{position: relative; z-index: 2; padding: 0px clamp(24px, 5vw, 76px) clamp(2.2rem, 5vh, 3.6rem);}
.timeline{position: relative; z-index: 2; margin-top: clamp(2.6rem, 6vh, 4.2rem);}
@keyframes nowPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (max-width: 760px) {.caps{padding-inline: 20px;}}
.egg-toast{position: fixed; left: 50%; bottom: clamp(24px, 6vh, 56px); z-index: 950; translate: -50%; display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1.3rem; border: 1px solid var(--eg-gold, #d4a017); background: rgba(0, 0, 0, 0.92); color: rgb(255, 255, 255); font: 500 0.72rem var(--label); letter-spacing: 0.04em; text-transform: uppercase; opacity: 0; pointer-events: none;}
.egg-toast i{width: 10px; height: 10px; flex: 0 0 auto; background: linear-gradient(rgb(206, 17, 38) 0px, rgb(206, 17, 38) 33.34%, rgb(255, 255, 255) 33.34%, rgb(255, 255, 255) 66.67%, rgb(0, 0, 0) 66.67%, rgb(0, 0, 0) 100%);}
.egg-toast.is-on{opacity: 1; transition: opacity 0.3s var(--ease-out), translate 0.5s var(--ease-out);}
.js:not(.reduced) .egg-toast{translate: -50% 14px;}
.js:not(.reduced) .egg-toast.is-on{translate: -50%;}
.site-loader.egg-veil{z-index: 1200; background: rgb(0, 0, 0); color: rgb(255, 255, 255); opacity: 0; visibility: visible; pointer-events: auto; transition: opacity 0.35s var(--ease-out);}
.site-loader.egg-veil.is-on{opacity: 1;}
.egg-veil .loader-mark i{background: var(--eg-gold, #d4a017);}
.egg-veil::before{content: ""; position: absolute; inset: 0px 0px auto; height: 3px; background: linear-gradient(rgb(206, 17, 38) 0px, rgb(206, 17, 38) 33.34%, rgb(255, 255, 255) 33.34%, rgb(255, 255, 255) 66.67%, rgb(0, 0, 0) 66.67%, rgb(0, 0, 0) 100%);}
@media (prefers-reduced-motion: reduce) {.site-loader.egg-veil{transition: none;}}
@media (prefers-reduced-motion: reduce) {.tool-set span{font-size: clamp(15px, 1.5vw, 20px); letter-spacing: -0.01em;}
.tool-set{gap: 12px; padding-right: 0px;}
.tool-set i{width: 6px; height: 6px;}
.skill-scroller{overflow: visible; white-space: normal; mask-image: none;}}
.egg-code-toast{position: fixed; left: 50%; bottom: 30px; z-index: 9100; display: flex; align-items: center; gap: 0.72rem; margin: 0px; padding: 0.8rem 1.2rem; border: 1px solid color-mix(in srgb, var(--code-colour, #9bcfa5) 55%, transparent); background: rgba(8, 9, 12, 0.95); color: rgb(242, 239, 233); font: 500 0.72rem var(--label, sans-serif); letter-spacing: 0.04em; text-transform: uppercase; box-shadow: 0 0 34px -8px color-mix(in srgb, var(--code-colour, #9bcfa5) 55%, transparent); opacity: 0; transform: translate(-50%, 14px); transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1), transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);}
.egg-code-toast.on{opacity: 1; transform: translate(-50%, 0px);}
.egg-code-toast i{width: 7px; height: 7px; border-radius: 50%; background: var(--code-colour, #9bcfa5); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--code-colour, #9bcfa5) 60%, transparent); animation: 1.5s ease-in-out 0s infinite normal none running codePulse;}
@keyframes codePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {.egg-code-toast{transition: none;}
.egg-code-toast i{animation: auto ease 0s 1 normal none running none;}}
.site-nav a{font-size: 0.84rem; font-weight: 500; letter-spacing: 0.015em; text-transform: none; padding-block: 0.65rem;}
.site-nav{gap: clamp(1rem, 2.2vw, 2.2rem);}
.brand{font-weight: 500; letter-spacing: 0.025em;}
@media (pointer: coarse) {.site-nav a{min-height: 44px; display: inline-flex; align-items: center;}}
.chapter-tab span, .filters button{font-size: 0.72rem; letter-spacing: 0.025em;}
.chapter-tab span, .filters button{text-transform: none;}
.site-nav a{min-height: 44px; display: inline-flex; align-items: center; border-radius: 24px; padding: 9px 13px; background-image: none;}
.site-nav{gap: clamp(2px, 0.55vw, 12px); padding: 3px; border: 1px solid color-mix(in srgb,var(--line) 75%,transparent); border-radius: 32px; background: color-mix(in srgb,var(--bg) 75%,transparent);}
.site-nav a:hover, .site-nav a[aria-current]{background: color-mix(in srgb,var(--ink) 7%,transparent); color: var(--ink);}
.work-row{--preview-accent: var(--accent);}
.work-row[data-project="adelante"]{--preview-accent: #d99b72;}
.work-row[data-project="photoshoot"]{--preview-accent: #b4a4df;}
.work-row[data-project="tajweed"]{--preview-accent: #c9b678;}
.work-row[data-project="asteri"]{--preview-accent: #a3b9db;}
@media (min-width: 1800px) {.site-nav a{font-size: clamp(14px, 0.83vw, 21px);}
.site-nav a{padding-inline: clamp(13px, 1vw, 26px);}
.brand{font-size: clamp(15px, 1vw, 24px);}
.head-actions{gap: clamp(8px, 0.7vw, 22px);}
.chapter-tab span{font-size: clamp(14px, 0.85vw, 20px);}}
@media (max-width: 900px) {.site-nav{display: none;}}
@media (prefers-reduced-motion: reduce) {.site-nav a{transition: none;}}
.skills-head{grid-template-columns: 1fr; padding-bottom: clamp(1.8rem, 4vw, 3rem);}
.skills-head h2{max-width: 9ch;}
.skills-head{padding-bottom: clamp(1.4rem, 3vw, 2.25rem);}
:root{--control-height: 44px;}
.contact-poster{margin-top: clamp(32px, 4vw, 48px);}
@media (max-width: 760px) {.contact-poster{margin-top: 16px;}}
[data-close-project] [data-label]::before{content: attr(data-label);}
.mobile-nav::before{opacity: 0.4;}
@media (max-width: 400px) {.mnav-theme-choices{display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 0.4rem;}
.mnav-theme-choices button{display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-width: 0px;}}
.touch-static [data-reveal], .touch-static [data-entrance]{opacity: 1 !important; transform: none !important;}
.touch-static [data-entrance]{clip-path: none !important;}
@media (prefers-reduced-motion: no-preference) {@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root){animation-duration: 260ms; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);}}