/* Portfolio of Konstantinos Stathoulas. Dark ground, one face (Red Hat Display, SIL OFL, served locally), one accent. */
@font-face {
  font-family: "Red Hat Display";
  src: url("../fonts/RedHatDisplayVF.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}
:root {
  --bg: #131414;
  --surface: #1b1b1b;
  --surface-2: #2b2b2b;
  --stage: #2b2b2b;
  --ink: #fafafa;
  --muted: #c4c4c4;
  --soft: #e6e6e6; /* secondary text that sits straight on the lines, not in a panel */
  --accent: #ff4000;
  --accent-ink: #111111;
  --dot: rgba(145, 145, 154, .22);
  --panel: rgba(0, 0, 0, .5);
  --line: rgba(255, 255, 255, .12);
  --max: 1200px;
  --margin: clamp(16px, 3vw, 40px);
  --gap: 24px;
  --step-small: 0.875rem;
  --step-body: 1rem;
  --step-lead: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem);
  --step-h3: clamp(1.125rem, 1.05rem + .25vw, 1.25rem);
  --step-h2: clamp(1.5rem, 1.3rem + .8vw, 2rem);
  --step-h1: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
/* Dot grid at the top of each page, drawn in CSS (no image file), fading out downwards */
html:not(.js) body::before { content: ""; position: absolute; inset: 0 0 auto; height: min(900px, 100svh); z-index: -1; pointer-events: none; background-image: radial-gradient(circle at center, var(--dot) 1.1px, transparent 1.4px); background-size: 32px 32px; background-position: 16px 16px; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%); }
/* Moving contour lines (drawn by site.js) under the dots, with the same fade */
/* With script: dots and moving contour lines share one layer from the top of the page to the footer, fading out before it */
.bgwrap { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bgfx { position: absolute; top: 0; left: 0; right: 0; height: 100%; background-image: radial-gradient(circle at center, var(--dot) 1.1px, transparent 1.4px); background-size: 32px 32px; background-position: 16px 16px; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 900px), transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 900px), transparent 100%); }
.topo { position: sticky; top: 0; display: block; }
body { margin: 0; position: relative; background: var(--bg); color: var(--ink); font: 400 var(--step-body)/1.6 "Red Hat Display", "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: rgba(250, 250, 250, .35); text-underline-offset: .2em; transition: text-decoration-color .2s, color .2s; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
p { margin: 0; }
/* The content column: every section centres its content in one width */
.in { width: min(100% - 2 * var(--margin), var(--max)); margin-inline: auto; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--margin); top: 12px; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; z-index: 40; }
.muted { color: var(--muted); }
/* Text sits straight on the background, with no box and no shadow. Section headings are orange labels, like the dhk tile in the header.
   Cards and fact panels keep a see-through box, since they hold pictures and lists. */
.opening .box, .work-head, .part-head, .p-hero .p-main { display: grid; gap: 12px; justify-items: start; align-content: start; }
.work-head h2, .part-head h2, .about h2 { background: var(--accent); color: var(--accent-ink); padding: 4px 14px 6px; justify-self: start; width: fit-content; }
.work-head h2::selection, .part-head h2::selection, .about h2::selection { background: var(--ink); color: var(--accent-ink); }
.card-text, .about .facts, .about .text, .about .skills, .p-hero .side { background: var(--panel); }
/* Every word carries a sharp black shadow, offset down and right, following its letters (no haze behind).
   Large type gets a bigger offset. Dark text on orange (buttons, labels, the dhk tile) has none. */
body { text-shadow: 1.5px 1.5px 0 #000, 2px 2px 4px rgba(0, 0, 0, .55); }
.who, .p-hero h1, .card h3, .pager span { text-shadow: 2px 2px 0 #000, 3px 3px 6px rgba(0, 0, 0, .55); }
.btn, .bar .mono, .work-head h2, .part-head h2, .about h2, .tag.after, .skip { text-shadow: none; }
.card-text { display: grid; gap: 10px; align-content: start; padding: 16px 20px 18px; }
.about .facts, .about .text, .about .skills, .p-hero .side { padding: 22px 26px; }

/* Buttons: one shape everywhere, square corners */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; background: var(--accent); color: var(--accent-ink); font-family: inherit; font-weight: 600; font-size: var(--step-small); line-height: 1; text-decoration: none; border: 0; cursor: pointer; transition: transform .15s var(--ease), background .2s; }
.btn:hover { background: #ff5c26; }
.btn:active { transform: scale(.97); }

/* Header: the same on every page, stays at the top */
.bar { position: sticky; top: 0; z-index: 20; background: rgba(19, 20, 20, .72); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid rgba(255, 255, 255, .07); }
/* The name block may wrap, and the nav drops to a second row only when even the name's longest word cannot fit beside it
   (very narrow phones or large text), so nothing runs past the screen edge */
.bar { overflow-wrap: normal; }
.bar .in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 64px; padding-block: 8px; }
.bar .id { flex: 1 1 0; }
.bar nav { flex: none; }
.bar .mark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; line-height: 1.2; }
.bar .mono { flex: none; }
.bar .mono { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: .875rem; letter-spacing: 0; padding-bottom: 2px; }
.bar .nm { font-weight: 700; letter-spacing: -0.01em; }
.bar .role { color: var(--muted); font-size: var(--step-small); padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .14); }
.bar nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); font-size: var(--step-small); }
.bar nav a:not(.btn) { text-decoration: none; color: var(--muted); }
.bar nav a:not(.btn) { position: relative; padding: 6px 0; }
.bar nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.bar nav a:not(.btn):hover::after, .bar nav a[aria-current]::after { transform: scaleX(1); }
.bar nav a:not(.btn):hover, .bar nav a[aria-current] { color: var(--ink); }
/* In the header the address is plain red text (it replaced an "Email me" button); it is not a link, so a click opens nothing */
.bar nav .mail { color: var(--accent); font-weight: 600; white-space: nowrap; }

/* ---------- Home ---------- */
.opening { padding: clamp(40px, 6vw, 80px) 0 clamp(20px, 2.5vw, 32px); }
.opening .in { display: grid; gap: 16px; }
.who { font-size: var(--step-h1); line-height: 1.05; }
.opening p { font-size: var(--step-lead); line-height: 1.4; color: var(--soft); max-width: 44ch; }

.work { padding-top: clamp(16px, 2vw, 24px); }
.work + .work { padding-top: clamp(72px, 8vw, 112px); }
.work-head { display: grid; gap: 12px; margin-bottom: 24px; }
.work-head h2 { font-size: var(--step-h2); line-height: 1.15; }
.work-head p { color: var(--soft); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px var(--gap); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { text-decoration: none; display: grid; grid-template-rows: 1fr auto; gap: 0; }
.card .card-text { order: -1; }
/* Covers keep their own shape (no frame, no cropping) and sit right under the text box */
.cover { overflow: hidden; }
.cover img { width: 100%; height: auto; transition: transform .5s var(--ease); }
/* A transparent logo cover sits on the grey stage, as on its project page */
.cover.on-stage { background: var(--stage); padding: 16px 24px; }
.card:hover .cover img { transform: scale(1.02); }
.card h3 { font-size: var(--step-h3); line-height: 1.25; }
.card:hover h3 { text-decoration: underline; text-decoration-color: rgba(250, 250, 250, .4); text-underline-offset: .2em; }
.card .meta { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--muted); font-size: var(--step-small); }
.card .meta b { color: var(--ink); font-weight: 600; }
.card p { color: var(--muted); line-height: 1.5; }

.about { padding-top: clamp(96px, 10vw, 144px); }
.about .in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gap); }
.about h2 { grid-column: 1 / -1; font-size: var(--step-h2); margin-bottom: 24px; }
.about .facts { grid-column: 1 / span 4; display: grid; gap: 18px; align-content: start; font-size: var(--step-small); color: var(--muted); }
.about .facts b { display: block; color: var(--ink); font-weight: 600; }
.about .text { grid-column: 5 / span 8; display: grid; gap: 20px; }
.about .text .lead { font-size: var(--step-lead); line-height: 1.45; max-width: 52ch; }
.about .text p:not(.lead) { max-width: 66ch; color: var(--muted); }
.about .skills { grid-column: 5 / span 8; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px var(--gap); margin-top: 0; }
.about .skills h3 { font-size: var(--step-body); font-weight: 600; letter-spacing: 0; margin-bottom: 4px; }
.about .skills p { color: var(--muted); }

/* ---------- Footer ---------- */
.foot { margin-top: clamp(96px, 10vw, 144px); background: var(--surface); padding: 56px 0 32px; }
.foot .in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px var(--gap); }
.foot-say { grid-column: 1 / span 5; display: grid; gap: 20px; justify-items: start; align-content: start; }
.foot-say p { font-size: var(--step-lead); line-height: 1.35; max-width: 26ch; }
.foot-cols { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; font-size: var(--step-small); }
.foot-cols div { display: grid; gap: 2px; align-content: start; justify-items: start; }
.foot-cols b { font-weight: 600; margin-bottom: 4px; }
.foot-cols a, .foot-cols span { color: var(--muted); text-decoration: none; }
/* Stacked text links get at least 30px of height each, so a finger or a shaky pointer hits the right one */
.foot-cols a, .about .facts a, .p-links a { padding-block: 4px; }
.about .facts a { display: block; width: fit-content; }
.foot-cols a:hover { color: var(--ink); }
.foot small { grid-column: 1 / -1; font-size: .8125rem; }

/* ---------- Project page ---------- */
.p-hero { padding-top: clamp(32px, 4vw, 56px); }
.p-hero .in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gap); }
.back { grid-column: 1 / -1; justify-self: start; color: var(--soft); text-decoration: none; font-size: var(--step-small); padding: 6px 0; }
.back:hover { color: var(--ink); }
.p-hero h1 { font-size: var(--step-h1); line-height: 1.08; max-width: 22ch; }
.p-hero .p-main { grid-column: 1 / span 7; display: grid; gap: 12px; align-content: start; }
.p-hero .intro { max-width: 64ch; font-size: var(--step-lead); line-height: 1.5; }
.p-hero .side { grid-column: 9 / span 4; display: grid; gap: 16px; align-content: start; font-size: var(--step-small); }
.p-hero dl { margin: 0; display: grid; gap: 12px; }
.p-hero dt { color: var(--muted); }
.p-hero dd { margin: 0; }
.p-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.p-note { color: var(--muted); }
.cover-big { margin-top: clamp(40px, 5vw, 64px); }
.cover-big .in { display: grid; place-items: center; }
.cover-big img { width: auto; max-height: 76svh; }
/* A logo banner: the transparent logo centred on the grey stage, across the full content width */
.cover-big .banner-stage { width: 100%; display: grid; place-items: center; background: var(--stage); padding: clamp(24px, 5vw, 64px) clamp(16px, 4vw, 48px); }
.cover-big .banner-stage img { max-height: min(48svh, 440px); }
.part { padding-top: clamp(72px, 8vw, 112px); }
.part .in { display: grid; gap: 24px; }
.part-head { display: grid; gap: 12px; }
.part-head h2 { font-size: var(--step-h2); line-height: 1.15; }
.part-head p { color: var(--soft); max-width: 70ch; }
figure { margin: 0; display: grid; gap: 0; align-content: start; justify-items: start; min-width: 0; }
/* Captions are a bar joined to the bottom of the picture, as wide as the picture, in light text,
   so they read as part of it. Under phone frames they are plain centred text. */
figcaption { justify-self: stretch; background: var(--surface-2); color: var(--ink); font-size: var(--step-small); font-weight: 500; line-height: 1.4; padding: 10px 14px 11px; }
.g-art figure:not(:has(.stage)) { width: fit-content; max-width: 100%; }
.g-phone figcaption { background: none; text-align: center; padding: 10px 4px 0; }
/* Pictures are never drawn larger than their real size */
.g-art img, .g-web img { width: auto; background: var(--surface); }
.g-web { display: grid; grid-template-columns: 1fr 1fr; gap: 40px var(--gap); }
.g-web figure:first-child { grid-column: 1 / -1; }
.g-phone { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px var(--gap); }
.g-phone .dev { background: var(--surface-2); padding: 10px; border-radius: 30px; }
.g-phone img { border-radius: 21px; width: 100%; }
.g-store { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 16px; }
.g-art { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--gap); }
.g-art figure.span { grid-column: 1 / -1; }
.g-art .stage { position: relative; background: var(--stage); aspect-ratio: 4 / 3; overflow: hidden; width: 100%; }
.g-art .stage img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; max-width: 76%; max-height: 76%; background: none; }
.g-art .tall img { max-height: 80svh; }
.zoom { cursor: zoom-in; }

/* Previous · all work · next */
.pager { margin-top: clamp(96px, 10vw, 144px); }
.pager .in { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; }
.pager a { display: grid; gap: 4px; align-content: start; text-decoration: none; padding: 20px 22px; background: var(--surface); transition: background .2s; }
.pager a:hover { background: var(--surface-2); }
.pager small { color: var(--muted); font-size: var(--step-small); }
.pager span { font-size: var(--step-h3); font-weight: 600; line-height: 1.25; transition: color .2s; }
.pager a:hover span { text-decoration: underline; text-decoration-color: rgba(250, 250, 250, .4); text-underline-offset: .2em; }
.pager .all { text-align: center; }
.pager .all span { font-weight: 400; color: var(--muted); font-size: var(--step-small); }
.pager .nx { text-align: right; }

/* Lightbox */
.lb { position: fixed; inset: 0; background: rgba(10, 10, 9, .95); display: grid; place-items: center; padding: 56px 16px 24px; z-index: 30; }
.lb[hidden] { display: none; }
.lb img { max-width: min(94vw, 1800px); max-height: 82svh; width: auto; }
.lb p { color: var(--muted); font-size: var(--step-small); margin-top: 12px; text-align: center; }
.lb .close { position: absolute; top: 12px; right: 16px; }
.lb .prev, .lb .nxt { position: absolute; top: 50%; transform: translateY(-50%); }
.lb .prev { left: 12px; } .lb .nxt { right: 12px; }
.lb button { font-family: inherit; font-weight: 500; font-size: var(--step-small); line-height: 1; min-height: 44px; padding: 0 16px; background: var(--surface-2); color: var(--ink); border: 0; cursor: pointer; }
.lb button:hover { background: #363636; }

/* Entrances: content stays visible without script; script adds .pre before revealing */
.js .rise.pre { opacity: 0; transform: translateY(16px); }
.js .rise { transition: opacity .6s var(--ease), transform .6s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

@media (max-width: 1140px) { .bar .role { display: none; } }

/* ---------- Tablet and phone ---------- */
@media (max-width: 1000px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about .facts { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about .text, .about .skills { grid-column: 1 / -1; }
  .p-hero .p-main { grid-column: 1 / span 12; }
  .p-hero .side { grid-column: 1 / span 12; grid-template-columns: 1fr; }
  .p-hero dl { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .foot-say, .foot-cols { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .bar nav a.hide-s { display: none; }
  .bar .role { display: none; }
  .grid, .grid.two { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .about .facts { grid-template-columns: 1fr; }
  .about .skills { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .g-art, .g-art.pairs, .g-web { grid-template-columns: minmax(0, 1fr); }
  .g-phone { grid-template-columns: 1fr 1fr; }
  .g-store { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pager .in { grid-template-columns: 1fr 1fr; }
  .pager .all { display: none; }
}

@media (max-width: 440px) {
  .bar nav a { display: none; }
}

/* before/after pairs */
.g-pairs { display: grid; gap: 56px; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--gap); align-items: start; }
.pair h3 { grid-column: 1 / -1; margin: 0; font-size: var(--step-lead); }
.pair img { width: auto; background: var(--surface); }
.tag { justify-self: start; font-size: var(--step-small); font-weight: 600; padding: 4px 10px; background: var(--surface); color: var(--muted); }
.tag.after { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 640px) {
  .pair { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pair figure + figure { margin-top: 12px; }
}
.nw { white-space: nowrap; }