/* VIRDEV portfolio, version 2. Colors and fonts are set once in the :root blocks below. */

@font-face{font-family:"Barlow";src:url("../fonts/barlow-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Courier Prime";src:url("../fonts/courier-prime-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* Light theme (default) */
:root{
  --bg:#F5F6F7; --fg:#0F1012; --mut:#63676E; --line:#D5D8DC; --link:#2B44E0;
  --sans:"Barlow","Bahnschrift","DIN Alternate","Arial Narrow",system-ui,sans-serif;
  --mono:"Courier Prime","Courier New",Courier,monospace;
  --pad:clamp(16px,4vw,48px);
  --hh:56px;
}
/* Dark theme: visitor's system prefers it and they have not chosen light */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--bg:#0A0B0D;--fg:#ECEDEF;--mut:#8B9098;--line:#23262B;--link:#93A6FF;}
}
/* Dark theme: chosen with the toggle */
:root[data-theme="dark"]{--bg:#0A0B0D;--fg:#ECEDEF;--mut:#8B9098;--line:#23262B;--link:#93A6FF;}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 18px/1.55 var(--sans)}
body:has(dialog[open]){overflow:hidden}
img,video,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none;transition:color .25s ease}
a:hover{color:var(--mut)}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px}
.skip:focus{left:var(--pad);z-index:40;background:var(--fg);color:var(--bg);padding:8px 12px;text-decoration:none}
.wrap{max-width:1360px;margin:0 auto;padding-inline:var(--pad)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2vw,28px)}
.meta{margin:0;font:400 14px/1.5 var(--mono);color:var(--mut)}

/* Header */
.site-header{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:var(--hh);max-width:1360px;margin:0 auto;padding-inline:var(--pad)}
.who{font-weight:500;font-size:17px;color:inherit;text-decoration:none}
.nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);font-size:16px}
.nav a{color:inherit;text-decoration:none;padding-block:6px;border-bottom:1px solid transparent}
.nav a[aria-current="page"]{border-bottom-color:currentColor}
.nav a:hover,.explore a:hover,.local a:hover{color:var(--mut)}
.mode,.menu-btn{font:inherit;font-size:14px;color:inherit;background:none;border:1px solid var(--line);border-radius:999px;padding:4px 14px;cursor:pointer}
.mode:hover,.menu-btn:hover{border-color:var(--fg)}
.menu-btn{display:none}

/* Placeholder frames: stand-ins until you add your own images or videos */
.ph{background:
  radial-gradient(45% 55% at 30% 45%,rgba(120,150,255,.7),transparent 65%),
  radial-gradient(30% 35% at 68% 58%,rgba(255,165,90,.55),transparent 65%),#07080c}
.ph[data-tone="2"]{background:radial-gradient(35% 45% at 55% 50%,rgba(200,210,255,.55),transparent 70%),radial-gradient(20% 20% at 40% 40%,rgba(255,120,80,.5),transparent 70%),#06070a}
.ph[data-tone="3"]{background:radial-gradient(50% 40% at 50% 60%,rgba(140,255,190,.4),transparent 70%),radial-gradient(30% 30% at 25% 30%,rgba(120,150,255,.5),transparent 70%),#06090a}
.ph[data-tone="4"]{background:radial-gradient(40% 40% at 70% 40%,rgba(255,170,90,.6),transparent 70%),radial-gradient(45% 45% at 30% 60%,rgba(90,120,255,.45),transparent 70%),#08070a}
.ph[data-tone="5"]{background:radial-gradient(45% 45% at 50% 50%,rgba(220,225,255,.45),transparent 70%),#07080c}
.media-fill img,.media-fill video{width:100%;height:100%;object-fit:cover}

/* Home: hero */
.hero-media{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:21/9;min-height:260px;max-height:72vh}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-over{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:clamp(14px,2.4vw,32px);color:#fff;mix-blend-mode:difference;pointer-events:none}
.wordmark{margin:0;font-weight:600;font-size:clamp(40px,7vw,104px);line-height:.85;letter-spacing:-.02em}
.hero-note{margin:0;font:400 14px/1.4 var(--mono);text-align:right}
.intro{padding-top:clamp(28px,4vw,56px)}
.statement{margin:0;font-size:clamp(22px,2.4vw,32px);line-height:1.3;max-width:34em}
.intro .meta{margin-top:16px}
.home-h{margin:clamp(56px,8vw,104px) 0 20px;font-weight:500;font-size:20px}
.featured{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,48px)}
.feature-media{display:block;aspect-ratio:16/10;overflow:hidden;transition:opacity .3s ease}
.feature h3{transition:color .25s ease}
.feature:hover .feature-media{opacity:.86}
.feature:hover h3{color:var(--mut)}
.feature h3{margin:16px 0 4px;font-weight:500;font-size:clamp(22px,2vw,26px);line-height:1.15}
.feature .meta{margin-bottom:10px}
.feature p{margin:0 0 10px;max-width:34em}
.explore{display:grid;grid-template-columns:repeat(4,1fr);gap:0 clamp(12px,2vw,28px);margin-top:clamp(56px,8vw,104px)}
.explore a{display:block;border-top:1px solid var(--fg);padding:16px 0 12px;color:inherit;text-decoration:none}
.explore strong{display:block;font-weight:500;font-size:clamp(20px,1.9vw,26px);line-height:1.2;transition:color .25s ease}
.explore span{display:block;margin-top:6px;font:400 14px/1.5 var(--mono);color:var(--mut)}
.explore a:hover strong{color:var(--mut)}

/* Inner pages */
.page-head{padding-top:clamp(36px,6vw,80px)}
h1.title{margin:0;font-weight:500;font-size:clamp(34px,4.6vw,64px);line-height:1.05;letter-spacing:-.02em}
.page-intro{margin:14px 0 0;max-width:36em;color:var(--mut);font-size:20px}
.block{border-top:1px solid var(--line);margin-top:clamp(36px,5vw,72px);padding-top:24px}
.block-head{grid-column:1/4}
.block-body{grid-column:4/13}
h2{margin:0;font-weight:500;font-size:clamp(24px,2.4vw,32px);line-height:1.15;letter-spacing:-.01em}
.block-head .meta{margin-top:6px}
.copy{margin:0;max-width:40em}
.copy + .copy{margin-top:1em}
.list{margin:0;padding-left:1.1em;max-width:40em}
.list li{margin-bottom:4px}
.sub{margin:clamp(32px,4vw,48px) 0 8px;font-weight:500;font-size:20px}

/* Tables (rows) */
.rows{list-style:none;margin:0;padding:0}
.row{display:grid;grid-template-columns:minmax(150px,1fr) 3fr;gap:6px 24px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.rows .row:first-child{border-top:1px solid var(--line)}
.row.tri{grid-template-columns:minmax(150px,1fr) 2.4fr 1.6fr}
.row .when{font:400 14px/1.5 var(--mono);color:var(--mut)}
.row h3{margin:0;font-weight:500;font-size:19px}
.row p{margin:0}
.row .mut{color:var(--mut)}
.facts{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:8px 24px;margin:0}
.facts dt{font:400 14px/1.7 var(--mono);color:var(--mut)}
.facts dd{margin:0}

/* Work */
.filters{display:flex;flex-wrap:wrap;gap:6px 22px;margin:clamp(28px,4vw,48px) 0 clamp(20px,3vw,32px)}
.filters button{font:400 15px/1.4 var(--mono);color:var(--mut);background:none;border:0;border-bottom:1px solid transparent;padding:2px 0;cursor:pointer}
.filters button:hover{color:var(--fg)}
.filters button[aria-pressed="true"]{color:var(--fg);border-bottom-color:currentColor}
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:clamp(28px,3.4vw,52px) clamp(16px,2vw,32px)}
.tile[hidden]{display:none}
.tile-btn{display:block;width:100%;padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.tile-media{display:block;aspect-ratio:4/3;overflow:hidden;transition:opacity .3s ease}
.tile-media img{width:100%;height:100%;object-fit:cover}
.tile-title{display:block;margin-top:12px;font-weight:500;font-size:20px;line-height:1.2;transition:color .25s ease}
.tile-meta{display:block;margin-top:2px;font:400 14px/1.5 var(--mono);color:var(--mut)}
.tile-btn:hover .tile-title{color:var(--mut)}
.tile-btn:hover .tile-media{opacity:.86}

dialog{width:min(1100px,94vw);max-height:92vh;padding:0;border:1px solid var(--line);background:var(--bg);color:var(--fg);overflow:auto}
dialog::backdrop{background:rgba(0,0,0,.65)}
.dlg{position:relative}
.dlg-close{position:absolute;top:12px;right:12px;z-index:2;font:400 14px/1 var(--mono);color:#fff;background:rgba(0,0,0,.55);border:0;padding:8px 12px;cursor:pointer}
.dlg-media{aspect-ratio:16/9;background-color:#000}
.dlg-media img,.dlg-media video,.dlg-media iframe{width:100%;height:100%;object-fit:cover;border:0}
.dlg-body{display:grid;grid-template-columns:3fr 2fr;gap:24px clamp(20px,4vw,56px);padding:clamp(20px,3vw,36px)}
.dlg-body h3{margin:0 0 10px;font-weight:500;font-size:clamp(24px,2.4vw,32px);line-height:1.15}
.dlg-body p{margin:0 0 1em;max-width:36em}

/* Tools */
.local{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:clamp(28px,4vw,48px);padding:0;list-style:none;font:400 15px/1.4 var(--mono)}
.local a{color:var(--fg)}

/* About / Contact */
.about{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2vw,28px);align-items:start;margin-top:clamp(28px,4vw,48px)}
.about-text{grid-column:1/8}
.about-text .statement{max-width:none}
.about-text .statement + .copy{margin-top:1.4em}
.portrait{grid-column:9/13;aspect-ratio:4/5;overflow:hidden;background:var(--line)}
.portrait img{width:100%;height:100%;object-fit:cover}
.mail{display:inline-block;font-weight:500;font-size:clamp(26px,4.4vw,64px);line-height:1.2;letter-spacing:-.015em;color:var(--fg)}
.mail:hover{color:var(--mut)}

.site-footer{margin-top:clamp(64px,9vw,120px);border-top:1px solid var(--line);padding-block:24px}
.site-footer p{margin:0;font:400 14px/1.5 var(--mono);color:var(--mut)}

@media (max-width:860px){
  .explore{grid-template-columns:repeat(2,1fr);row-gap:8px}
  .about-text{grid-column:1/-1}
  .portrait{grid-column:1/-1;grid-row:1;margin-bottom:24px;max-width:420px}
}
@media (max-width:760px){
  .menu-btn{display:inline-block}
  .nav{display:none;position:absolute;top:var(--hh);left:0;right:0;flex-direction:column;align-items:flex-start;gap:14px;background:var(--bg);border-bottom:1px solid var(--line);padding:16px var(--pad) 24px;font-size:20px}
  .nav[data-open="true"]{display:flex}
  .block-head,.block-body{grid-column:1/-1}
  .block-body{padding-top:14px}
  .featured{grid-template-columns:1fr}
  .row,.row.tri{grid-template-columns:1fr}
  .dlg-body{grid-template-columns:1fr}
  .hero-media{aspect-ratio:4/3}
  .hero-note{display:none}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}