/*
Theme Name: KnG Development
Theme URI: https://kngdev.eu/
Author: Thanos Polymeneas
Author URI: https://kngdev.eu/
Description: One-page theme for KnG Development. A warm sky and a 3D disc of 1,600 pillars whose pattern changes as you scroll. Fonts and three.js are bundled with the theme, so pages make no third-party requests.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kngdev
*/

/* Fonts (SIL Open Font License, see assets/fonts) */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url('assets/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2-variations'), url('assets/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url('assets/fonts/bricolage-grotesque-latin.woff2') format('woff2-variations'), url('assets/fonts/bricolage-grotesque-latin.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:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url('assets/fonts/figtree-latin-ext.woff2') format('woff2-variations'), url('assets/fonts/figtree-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url('assets/fonts/figtree-latin.woff2') format('woff2-variations'), url('assets/fonts/figtree-latin.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;}

/* Layout: warm sky, one pillar disc fixed right of a narrow text column; scrolling only changes the pattern on the disc. */
:root{
  --sky-top:#F2B29A;
  --sky-bottom:#FBE2C7;
  --sun:#FFF3DC;
  --sun-halo:rgba(255,210,140,.5);
  --fg:#3A1A22;
  --muted:#73464A;
  --line:#DFA68E;
  --panel:rgba(252,228,206,.76);
  --accent:#5B1E3A;
  --accent-ink:#FFE9D8;
  --amber-ink:#A24E0C;
  --ok:#2E8656;
  --scene-pillar:#FFE5D0;
  --scene-glow-color:#FFA62B;
  --scene-sky:#FFD3AE;
  --scene-under:#9A4E5C;
  --scene-fill:#FFB3A6;
  --scene-sun:#FFC08A;
  --scene-sun-i:1.7;
  --scene-shadow-color:#6E2A3E;
  --scene-shadow:.28;
  --scene-glow:1.5;
  --font-display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --font-body:"Figtree","Avenir Next","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sky-top:#191230; --sky-bottom:#4B2036; --sun:#FFA068; --sun-halo:rgba(255,118,78,.3);
    --fg:#FCE7D9; --muted:#D4AAA3; --line:#6A3A4D; --panel:rgba(38,19,40,.7);
    --accent:#FFB45A; --accent-ink:#2A1426; --amber-ink:#FFC27A; --ok:#7FE0A8;
    --scene-pillar:#7C4B5D; --scene-glow-color:#FFB03A; --scene-sky:#6B3A63; --scene-under:#1A1230; --scene-fill:#8E5AA8;
    --scene-sun:#FF8F60; --scene-sun-i:1.35;
    --scene-shadow-color:#0E0A1E; --scene-shadow:.5; --scene-glow:2.4;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --sky-top:#191230; --sky-bottom:#4B2036; --sun:#FFA068; --sun-halo:rgba(255,118,78,.3);
  --fg:#FCE7D9; --muted:#D4AAA3; --line:#6A3A4D; --panel:rgba(38,19,40,.7);
  --accent:#FFB45A; --accent-ink:#2A1426; --amber-ink:#FFC27A; --ok:#7FE0A8;
  --scene-pillar:#7C4B5D; --scene-glow-color:#FFB03A; --scene-sky:#6B3A63; --scene-under:#1A1230; --scene-fill:#8E5AA8;
  --scene-sun:#FF8F60; --scene-sun-i:1.35;
  --scene-shadow-color:#0E0A1E; --scene-shadow:.5; --scene-glow:2.4;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--sky-bottom); color:var(--fg);
  font-family:var(--font-body); font-size:1.0625rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.sky{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 72% 20%, var(--sun) 0 3.6vmin, var(--sun-halo) 4vmin, transparent 28vmin),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 72%);
}
#scene{position:fixed; inset:0; width:100%; height:100%; display:block; z-index:1; pointer-events:none}
.no-webgl #scene{display:none}
.top, main, footer{position:relative; z-index:2}

.wrap{
  width:100%; max-width:1320px; margin-inline:auto;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width:760px){
  .wrap{padding-left:max(44px, env(safe-area-inset-left, 0px)); padding-right:max(44px, env(safe-area-inset-right, 0px))}
}

a{color:inherit}
a:focus-visible, button:focus-visible{outline:2px solid var(--fg); outline-offset:3px; border-radius:999px}

/* Header */
.top{display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:22px}
.mark{display:inline-flex; align-items:baseline; gap:.45em; text-decoration:none}
.mark-k{font-family:var(--font-display); font-weight:700; font-size:1.35rem; letter-spacing:-.03em}
.mark-d{font-size:.95rem; color:var(--muted)}
.top-nav{display:flex; gap:22px; align-items:center; font-size:.95rem}
.top-nav a{text-decoration:none}
.top-nav a:hover{text-decoration:underline; text-underline-offset:5px}

/* Type */
h1, h2{font-family:var(--font-display); font-stretch:96%; margin:0; text-wrap:balance; font-variation-settings:"opsz" 72}
h1{max-width:11em; font-size:clamp(2.4rem, 4.8vw, 4.2rem); font-weight:540; line-height:1.02; letter-spacing:-.035em}
h2{font-size:clamp(1.9rem, 3.2vw, 2.7rem); font-weight:540; line-height:1.08; letter-spacing:-.03em}
p{margin:0}

/* Hero */
.hero{min-height:84vh; min-height:84svh; display:flex; align-items:center}
.hero-inner{display:grid; gap:22px; padding-block:4vh 10vh; justify-items:start}
.status{
  display:inline-flex; align-items:center; gap:10px; font-size:.9375rem;
  padding:.35em .9em .35em .75em; border-radius:999px; border:1px solid var(--line); background:var(--panel);
}
.dot{width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent)}
.lede{max-width:31rem; font-size:1.125rem; line-height:1.6; color:var(--muted)}
.actions{display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin-top:4px}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--accent); color:var(--accent-ink); text-decoration:none;
  font-weight:600; font-size:1rem;
  padding:.8em 1.4em; border-radius:999px; border:0; cursor:pointer;
  transition:filter .15s ease;
}
.btn:hover{filter:brightness(1.12)}
.link{text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--line); text-decoration-thickness:2px}
.link:hover{text-decoration-color:var(--fg)}

/* Sections */
.act{min-height:78vh; min-height:78svh; display:flex; align-items:center; padding-block:10vh}
.panel{max-width:29rem; display:grid; gap:16px; min-width:0}
.spec{font-size:.9375rem; color:var(--muted); border-top:1px solid var(--line); padding-top:14px}
.caption{font-size:.875rem; color:var(--muted)}

/* Experience and education */
.record .panel{max-width:33rem}
.creed{color:var(--muted)}
.roles{list-style:none; margin:2px 0 0; padding:0; display:grid}
.roles li{display:grid; grid-template-columns:6.3rem minmax(0,1fr); gap:16px; padding-block:12px; border-top:1px solid var(--line)}
.roles li:last-child{border-bottom:1px solid var(--line)}
.yrs{font-variant-numeric:tabular-nums; color:var(--muted); font-size:.9375rem; padding-top:1px}
.roles h3{margin:0; font-size:1.0625rem; font-weight:680; line-height:1.35}
.roles h3 span{font-weight:400; color:var(--muted)}
.roles p{margin-top:2px; color:var(--muted); font-size:.9375rem; line-height:1.5}
.roles .now .yrs{color:var(--amber-ink); font-weight:650}

/* Contact */
.mail{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px}
.mail a{font-family:var(--font-display); font-weight:480; font-size:clamp(1.45rem, 2.6vw, 2rem); letter-spacing:-.03em; text-decoration:none; overflow-wrap:anywhere}
.mail a:hover{text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px}
.copy{
  font:inherit; font-size:.875rem; color:var(--fg); background:var(--panel); cursor:pointer;
  border:1px solid var(--line); border-radius:999px; padding:.35em .95em;
}
.copy:hover{border-color:var(--fg)}

footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; padding-block:28px 34px; font-size:.875rem; color:var(--muted)}
.foot-links{display:flex; gap:18px}
.foot-links a{text-underline-offset:4px}

/* Phones and narrow windows: the disc sits behind, text sits on frosted glass. */
@media (max-width:899px){
  .act{min-height:76vh; min-height:76svh; align-items:flex-start; padding-block:8vh}
  .panel, .record .panel{
    background:var(--panel); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border:1px solid var(--line); border-radius:20px; padding:22px;
  }
  .hero{min-height:88svh; align-items:flex-start}
  .hero-inner{padding-block:5vh 0}
  .top-nav .hide-s{display:none}
  .sky{background:
    radial-gradient(circle at 88% 64%, var(--sun) 0 3.6vmin, var(--sun-halo) 4vmin, transparent 30vmin),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 72%)}
}
@media (max-width:420px){
  .roles li{grid-template-columns:1fr; gap:2px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}

/* WordPress pages other than the front page, and core classes. */
body{margin:0}
img{max-width:100%; height:auto}
[hidden]{display:none!important}
.screen-reader-text{border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute!important; width:1px; word-wrap:normal!important}
.screen-reader-text:focus{background:var(--panel); clip:auto!important; clip-path:none; color:var(--fg); display:block; height:auto; left:8px; padding:12px 18px; top:8px; width:auto; z-index:100000; border-radius:999px}
.page-body{min-height:70vh; min-height:70svh; padding-block:6vh 10vh}
.page-body .panel{
  max-width:42rem; gap:22px;
  background:var(--panel); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:20px; padding:clamp(22px, 4vw, 40px);
}
.entry-title{font-family:var(--font-display); font-stretch:96%; font-variation-settings:"opsz" 72; font-size:clamp(2rem, 3.6vw, 3rem); font-weight:540; line-height:1.06; letter-spacing:-.03em; margin:0; text-wrap:balance}
.entry-title a{text-decoration:none}
.entry-list{display:grid; gap:28px}
.entry-content{display:grid; gap:1em; min-width:0}
.entry-content > *{margin:0; min-width:0}
.entry-content h2, .entry-content h3{font-family:var(--font-display); font-weight:560; letter-spacing:-.02em; line-height:1.15; margin-top:.6em}
.entry-content h2{font-size:1.6rem}
.entry-content h3{font-size:1.25rem}
.entry-content a{text-underline-offset:4px; text-decoration-color:var(--line); text-decoration-thickness:2px}
.entry-content a:hover{text-decoration-color:var(--fg)}
.entry-content ul, .entry-content ol{padding-left:1.2em}
.entry-content pre{overflow-x:auto; padding:14px; border-radius:12px; background:var(--panel); border:1px solid var(--line)}
.entry-content label{display:block; font-weight:600; margin-bottom:4px}
.entry-content input[type=text], .entry-content input[type=email], .entry-content input[type=tel], .entry-content input[type=url], .entry-content textarea, .entry-content select{
  width:100%; font:inherit; color:var(--fg); background:var(--panel);
  border:1px solid var(--line); border-radius:12px; padding:.7em .9em;
}
.entry-content input:focus-visible, .entry-content textarea:focus-visible, .entry-content select:focus-visible{outline:2px solid var(--fg); outline-offset:2px}
.entry-content button, .entry-content input[type=submit], .entry-content .wp-block-button__link{
  display:inline-flex; align-items:center; font:inherit; font-weight:600;
  background:var(--accent); color:var(--accent-ink); border:0; border-radius:999px; padding:.8em 1.4em; cursor:pointer; text-decoration:none;
}
.entry-meta{font-size:.875rem; color:var(--muted)}
.pagination .nav-links{display:flex; flex-wrap:wrap; gap:10px 16px}