/* Calcaware glass theme. Put the photographer's image at assets/images/background.jpg. */
:root {
  color-scheme: dark;
  --accent: #78dfff;
  --accent-end: #a484ff;
  --ink: #f3f7ff;
  --muted: #bec9d9;
  --glass: rgba(10, 20, 30, .57);
  --line: rgba(203, 228, 255, .16);
  --gradient: linear-gradient(115deg, #74dcff, #a484ff);
}
html { scroll-behavior: smooth; }
body.glass-site {
  background: #080e19;
  color: var(--ink);
  isolation: isolate;
  font-family: 'Source Code Pro', monospace;
  font-weight: 400;
  line-height: 1.7;
}
.glass-site::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(110deg, rgba(5, 12, 21, .32), rgba(7, 13, 27, .28)),
    radial-gradient(ellipse at 80% 14%, rgba(81, 76, 159, .14), transparent 47%),
    radial-gradient(ellipse at 5% 55%, rgba(24, 110, 114, .12), transparent 46%),
    url('../images/background.jpg') center / cover no-repeat, #080e19;
}
.glass-site a { color: var(--accent); }
.glass-site a:hover { color: #d6c9ff; }
.glass-site :focus-visible { outline: 2px solid #96e7ff; outline-offset: 4px; }
.glass-site h1, .glass-site h2, .glass-site h3, .glass-site h4, .glass-site strong, .glass-site b { color: var(--ink); }
.glass-site h1, .glass-site h2, .glass-site h3 { font-weight: 600; letter-spacing: -.045em; }
.glass-site p { color: var(--muted); }
.glass-site #wrapper { background: transparent; max-width: 1440px; margin: auto; padding: 0 clamp(20px, 5vw, 76px); }
.glass-site #wrapper.divided > * { border: 0; box-shadow: none; }
.glass-site #wrapper > section { scroll-margin-top: 2rem; }
.skip-link { position: absolute; left: 1rem; top: -10rem; z-index: 99; padding: .5rem 1rem; background: #111c2d; }
.skip-link:focus { top: 1rem; }
.site-header {
  max-width: 1440px; margin: 0 auto; padding: 1.5rem clamp(20px, 5vw, 76px);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.glass-site .brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--ink); font-size: .85rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.brand-mark { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--line); border-radius: .75rem; background: rgba(123, 151, 208, .12); font-size: 1.25rem; }
.brand-mark span { color: var(--accent); }
.brand-subtitle { color: #8b9aaf; font-size: .7rem; font-weight: 400; }
.site-header nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(.8rem, 2vw, 2rem); }
.glass-site .site-header nav a { color: #d3dceb; text-decoration: none; font-size: .7rem; white-space: nowrap; }
.glass-site .site-header nav a:hover { color: var(--accent); }
.glass-site .site-header nav .nav-contact { border: 1px solid rgba(143, 207, 255, .4); border-radius: 100px; padding: .65rem 1rem; color: #f4f7ff; background: rgba(124, 175, 248, .08); }
.glass-site .banner.style3 { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: clamp(2rem, 7vw, 6rem); min-height: min(670px, 80vh); margin: 1rem 0 5rem; padding: clamp(2rem, 5vw, 5rem); overflow: hidden; text-align: left; border: 1px solid var(--line) !important; border-radius: 1.5rem; background: linear-gradient(135deg, rgba(19, 34, 43, .52), rgba(8, 17, 24, .6)); box-shadow: 0 25px 90px rgba(0, 0, 0, .25) !important; backdrop-filter: blur(16px); }
.glass-site .banner.style3 .content { width: min(100%, 42rem); max-width: none; }
.glass-site .banner.style3 .image { width: clamp(220px, 27vw, 370px); height: clamp(280px, 34vw, 440px); margin: 0; border-radius: 1.2rem; overflow: hidden; border: 1px solid rgba(218, 234, 255, .25); box-shadow: 18px 18px 0 rgba(131, 154, 241, .09), 0 20px 50px rgba(0, 0, 0, .25); }
.glass-site .banner.style3 .image img { border-radius: 0; object-position: center 35%; }
.glass-site .eyebrow { display: flex; align-items: center; gap: .65rem; margin: 0 0 1.5rem; color: #a9d8ea; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.status-dot { width: .5rem; height: .5rem; flex: none; border-radius: 50%; background: #80e7dc; box-shadow: 0 0 14px #80e7dc; }
.glass-site .banner h1 { font-size: clamp(2.2rem, 4.5vw, 4rem); line-height: 1.12; margin-bottom: 1.2rem; }
.glass-site .banner p.major { color: #f1f5ff; font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1.5; margin-bottom: 1.2rem; }
.glass-site .banner p.major span { color: var(--accent); }
.glass-site .hero-description { max-width: 36rem; font-size: .9rem; }
.glass-site .hero-actions { flex-wrap: wrap; margin-bottom: 2rem; }
.glass-site .button, .glass-site input[type='submit'] { border-radius: .6rem; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(195, 220, 255, .35); color: #f4f7ff !important; font-size: .67rem; font-weight: 600; letter-spacing: .035em; text-transform: none; }
.glass-site .button:hover, .glass-site input[type='submit']:hover { box-shadow: inset 0 0 0 1px #8ddfff; color: #fff !important; }
.glass-site .button.primary, .glass-site input[type='submit'] { background: var(--gradient); color: #071321 !important; box-shadow: 0 8px 30px rgba(110, 157, 255, .2); }
.hero-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.hero-tags span { padding: .3rem .65rem; border: 1px solid var(--line); border-radius: 100px; background: rgba(255, 255, 255, .04); color: #bdcde0; font-size: .65rem; }
.glass-site .spotlight.style2 { display: block; padding: 0 0 5rem; text-align: left; }
.glass-site .spotlight.style2 .content { width: 100%; max-width: none; padding: clamp(1.5rem, 4vw, 3.5rem); border: 1px solid var(--line); border-radius: 1.2rem; background: var(--glass); backdrop-filter: blur(14px); }
.glass-site .spotlight.style2.content-align-left .content { text-align: left; }
.glass-site .spotlight.style2 p { max-width: 70rem; }
.glass-site .spotlight.style2 p:last-child { margin-bottom: 0; }
.glass-site .wrapper.style1 { padding: 0 0 5rem; }
.glass-site .wrapper.style1 > .inner { width: 100%; max-width: none; padding: 0; }
.glass-site .wrapper.style1 > .inner.medium { max-width: 52rem; margin: auto; }
.glass-site .wrapper h2, .glass-site .spotlight h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: .6rem; }
.home-page #about h2::before, .home-page #services h2::before, .home-page #portfolio h2::before, .home-page #experiments h2::before, .home-page #testimonials h2::before, .home-page #contact h2::before { display: block; margin-bottom: .6rem; color: var(--accent); font-size: .65rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; }
.home-page #about h2::before { content: '01 / The person behind the code'; }
.home-page #services h2::before { content: '02 / What I work with'; }
.home-page #portfolio h2::before { content: '03 / Selected work'; }
.home-page #experiments h2::before { content: '04 / Beyond the day job'; }
.home-page #testimonials h2::before { content: '05 / Kind words'; }
.home-page #contact h2::before { content: '06 / Start a conversation'; }
.glass-site .items.style1 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin: 2.5rem 0 0; text-align: left; }
.glass-site .items.style1 > section, .glass-site .items.style1.medium > section, .glass-site .items.style1.small > section { width: auto; margin: 0; padding: 1.4rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(12, 24, 34, .58); backdrop-filter: blur(12px); }
.glass-site .items.style1 h3 { font-size: .95rem; letter-spacing: -.03em; margin-bottom: .5rem; }
.glass-site .items.style1 p { font-size: .72rem; line-height: 1.65; margin: 0; }
.glass-site .items .icon.style1.major { color: var(--accent); box-shadow: inset 0 0 0 1px rgba(138, 216, 255, .25); background: rgba(123, 177, 255, .08); font-size: 1rem; margin: 0 0 1.1rem; width: 2.8rem; height: 2.8rem; line-height: 2.8rem; }
.glass-site #experiments .items.style1 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.glass-site #experiments h3 a { color: var(--ink); }
.glass-site #experiments h3 a:hover { color: var(--accent); }
.glass-site #portfolio .gallery.style1 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 1rem; margin-top: 2.5rem; background: transparent; text-align: left; }
.glass-site #portfolio .gallery.style1 article { width: auto; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 1rem; background: rgba(12, 23, 34, .72); backdrop-filter: blur(12px); transition: transform .2s, border-color .2s; }
.glass-site #portfolio .gallery.style1 article:hover, .glass-site #portfolio .gallery.style1 article:focus-within { transform: translateY(-4px); border-color: rgba(139, 214, 255, .6); }
.glass-site #portfolio .gallery.style1 article .image { position: static; display: block; height: 11rem; background: linear-gradient(135deg, rgba(116, 220, 255, .16), rgba(164, 132, 255, .20)); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent-end) 20%, transparent)); overflow: hidden; }
.glass-site #portfolio .gallery.style1 article .image::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.glass-site #portfolio .gallery.style1 article .image img { width: 100%; height: 100%; padding: .8rem; object-fit: contain; object-position: center; }
.glass-site #portfolio .gallery.style1 article .caption { position: static; display: block; width: auto; height: auto; padding: 1.35rem; opacity: 1; background: transparent; pointer-events: none; }
.glass-site #portfolio .gallery.style1 article .caption h3 { font-size: 1rem; margin-bottom: .55rem; }
.glass-site #portfolio .gallery.style1 article .caption p { font-size: .72rem; line-height: 1.6; margin: 0; }
.glass-site #portfolio .gallery.style1 article .caption .actions { margin: 1rem 0 0; }
.glass-site #portfolio .gallery.style1 article .caption .button { display: inline; height: auto; padding: 0; line-height: inherit; box-shadow: none; background: none; color: var(--accent) !important; }
.glass-site #portfolio .gallery.style1 article .caption .button::after { content: ' ↗'; }
.glass-site #portfolio .gallery.style1 article .project-placeholder { display: grid; place-items: center; font-size: 3rem; font-weight: 600; color: #eaf4ff; }
.project-placeholder span span { color: var(--accent); }
.glass-site #testimonials .content { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.5rem; }
.glass-site blockquote { margin: 0; padding: 1.5rem; border: 1px solid var(--line); border-top: 2px solid #8ba8fa; border-radius: 1rem; background: rgba(12, 24, 34, .62); backdrop-filter: blur(12px); color: #d5deea; font-size: .76rem; font-style: normal; }
.glass-site #contact > .inner { padding: clamp(1.5rem, 4vw, 3.5rem); border: 1px solid var(--line); border-radius: 1.2rem; background: var(--glass); backdrop-filter: blur(14px); }
.glass-site label { text-align: left; color: #d7e2f2; font-size: .75rem; }
.glass-site input[type='text'], .glass-site input[type='email'], .glass-site textarea { color: #fff; background: rgba(4, 12, 23, .55); border: 1px solid rgba(192, 217, 255, .22); border-radius: .55rem; }
.glass-site input[type='text']:focus, .glass-site input[type='email']:focus, .glass-site textarea:focus { border-color: #93dfff; box-shadow: 0 0 0 1px #93dfff; }
.glass-site .icon.style2 { display: inline-flex; align-items: center; justify-content: center; width: 2.75em; height: 2.75em; border-radius: .65rem; color: #d4e8fa; box-shadow: inset 0 0 0 1px var(--line); background: rgba(255,255,255,.05); transition: color .2s, background .2s, box-shadow .2s; }
.glass-site .icon.style2:hover { color: var(--accent); background: rgba(120, 223, 255, .1); box-shadow: inset 0 0 0 1px var(--accent); }
.glass-site .icon.style2::before, .glass-site a.icon.style2:hover::before, .glass-site a.icon.style2:active::before { width: auto; height: auto; line-height: 1; border-radius: 0; box-shadow: none; background: transparent; color: inherit; }
.glass-site .icon.style2 > .label { display: block; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.glass-site footer.wrapper.style1 { padding: 0 0 2.5rem; }
.glass-site footer p { color: #8f9eb1; font-size: .7rem; }
.glass-site footer a { color: #c5d6e6; }
.legal-page .banner.style3 { min-height: 16rem; margin-bottom: 2rem; text-align: center; justify-content: center; }
.legal-page .banner.style3 .content { text-align: center; }
.legal-page .wrapper.style1:not(footer) > .inner { padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: 1rem; background: var(--glass); }
.legal-page .wrapper.style1:not(footer) h2 { font-size: 1.3rem; margin-top: 2rem; }
.legal-page .wrapper.style1:not(footer) h2:first-child { margin-top: 0; }
@media (max-width: 980px) {
  .glass-site .items.style1 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .glass-site #portfolio .gallery.style1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glass-site #experiments .items.style1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glass-site #testimonials .content { grid-template-columns: 1fr; }
  .brand-subtitle { display: none; }
}
@media (max-width: 736px) {
  .site-header { flex-wrap: wrap; padding-top: 1rem; }
  .site-header nav { width: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: .4rem; }
  .glass-site .banner.style3 { flex-direction: column-reverse; align-items: stretch; min-height: 0; gap: 2rem; margin: .5rem 0 3.5rem; padding: 1.5rem; }
  .glass-site .banner.style3 .image { width: 100%; height: 270px; }
  .glass-site .banner.style3 .image img { object-position: center 40%; }
  .glass-site .banner h1 { font-size: clamp(2rem, 9vw, 3rem); }
  .glass-site .spotlight.style2, .glass-site .wrapper.style1 { padding-bottom: 3.5rem; }
  .glass-site .items.style1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glass-site #contact > .inner { padding: 1.5rem; }
  .legal-page .banner.style3 { min-height: 0; text-align: center; }
}
@media (max-width: 480px) {
  .glass-site #portfolio .gallery.style1 { grid-template-columns: 1fr; }
  .glass-site .items.style1 > section, .glass-site .items.style1.medium > section, .glass-site .items.style1.small > section { padding: 1rem; }
  .glass-site .hero-actions { display: flex; }
  .glass-site .hero-actions li { width: 100%; }
  .glass-site .hero-actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .glass-site *, .glass-site *::before, .glass-site *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
@media (forced-colors: active) { .glass-site .button, .glass-site .site-header nav .nav-contact, .glass-site .items.style1 > section, .glass-site #portfolio .gallery.style1 article { border: 1px solid ButtonText; } }