/* robnikzad.com
   Layout: a fixed header and footer keep the top and bottom clear. A canvas behind the page draws the artwork.
   Home frames the artwork. Work and About bring it back as a slim band above the content.
   Palette (Pool, B2): white ground, navy ink for type, light blue and sky for the artwork, neon pink accent. Previous palette "Aegean" is tagged palette-aegean-live. */

:root {
  --bg: #F7F7F4;
  --bg-rgb: 247, 247, 244;
  --ink: #123C6B;     /* Aegean was #0B2545 */
  --blue: #3FA0F0;    /* Aegean was #1F4FA3 */
  --sky: #A5DAF8;     /* Aegean was #7EA0D8 */
  --accent: #FF2DAF;  /* Aegean was #FF2E93 */
  --lemon: #FFE14D;   /* held back for highlights; not used in the artwork */
  --mute: #4A5B78;
  --tile: #E6EAF2;
  --body: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;   /* titles and body; Jost is kept for the nav, footer and small labels */
  --f: 'Jost', 'Futura', 'Century Gothic', 'Trebuchet MS', sans-serif;

  --fx: 50px;   /* footer inset from the sides */
  --fy: 50px;   /* footer inset from the bottom */
  --sT: env(safe-area-inset-top, 0px);
  --sB: env(safe-area-inset-bottom, 0px);
  --gL: max(clamp(16px, 4vw, 64px), env(safe-area-inset-left, 0px));
  --gR: max(clamp(16px, 4vw, 64px), env(safe-area-inset-right, 0px));
  color-scheme: light;
}
@media (max-width: 480px) { :root { --fx: 6px; --fy: 24px; } }

/* night: loads automatically after 7pm and before 6am; the small "nightmode / daymode" switch on Home overrides it for the visit */
:root[data-theme="dark"] {
  --bg: #0B1426; --bg-rgb: 11, 20, 38; --ink: #EAF2FB; --mute: #9FB3CC; --tile: #14213A;
  color-scheme: dark;
}

[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font-family: var(--f); font-weight: 400; -webkit-font-smoothing: antialiased; }
body[data-page="home"] { height: 100vh; height: 100dvh; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

#art { position: fixed; inset: 0; display: block; width: 100%; height: 100%; z-index: 0; }

/* the clear area every artwork is composed in; the engine reads this box */
.slot-ref { position: fixed; left: 0; right: 0; top: calc(var(--sT) + 88px); bottom: calc(var(--sB) + 88px + var(--fy)); visibility: hidden; pointer-events: none; }

/* header */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding-top: calc(var(--sT) + 20px); padding-bottom: 22px; padding-left: var(--gL); padding-right: var(--gR);
  background: linear-gradient(var(--bg) 62%, rgba(var(--bg-rgb), 0));
  pointer-events: none;
}
.top > * { pointer-events: auto; }
nav { grid-column: 2; display: flex; gap: clamp(22px, 4vw, 44px); font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; }
nav a { text-decoration: none; padding-bottom: 5px; border-bottom: 2px solid transparent; }
nav a[aria-current="page"] { border-bottom-color: var(--accent); }
nav a:hover { color: var(--blue); }
.tools { grid-column: 3; justify-self: end; display: flex; gap: 18px; }
.shuffle { font: inherit; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; color: var(--mute); background: none; border: 0; padding: 6px 0; cursor: pointer; }
.shuffle:hover { color: var(--blue); }

/* footer */
.foot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 20px;
  padding-top: 70px; padding-bottom: calc(var(--sB) + 20px + var(--fy)); padding-left: calc(var(--gL) + var(--fx)); padding-right: calc(var(--gR) + var(--fx));
  /* anything scrolling toward the footer fades out before it reaches the text */
  background: linear-gradient(rgba(var(--bg-rgb), 0) 0, rgba(var(--bg-rgb), .45) 24px, rgba(var(--bg-rgb), .85) 48px, var(--bg) 66px);
  font-weight: 500; text-transform: uppercase; font-size: clamp(14px, 2.1vw, 28px); letter-spacing: 0.2em; pointer-events: none;
}
/* Home never scrolls, so it keeps the short fade and the artwork stays clear of it */
body[data-page="home"] .foot { padding-top: 22px; background: linear-gradient(rgba(var(--bg-rgb), 0), var(--bg) 30%); }
.foot a, .foot span { font-size: inherit; letter-spacing: inherit; font-weight: 500; }
.foot a { pointer-events: auto; text-decoration: none; }
.foot a:hover { color: var(--blue); }
@media (max-width: 480px) { .foot { letter-spacing: 0.14em; } nav { letter-spacing: 0.18em; font-size: 12px; } }

/* pages */
main { position: relative; z-index: 2; }
.page { padding-top: calc(var(--sT) + 88px); padding-bottom: calc(var(--sB) + 120px + var(--fy)); min-height: 100vh; }
.wrap { padding-left: var(--gL); padding-right: var(--gR); }

/* Work */
#slot-band { height: clamp(56px, 9vh, 84px); margin-bottom: 108px; }
@media (max-width: 640px) { #slot-band { margin-bottom: 72px; } }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 34px 22px; max-width: 1320px; margin: 0 auto; }
.grid figure { margin: 0; min-width: 0; }
.ph { position: relative; display: block; aspect-ratio: 16 / 9; max-width: 100%; background: var(--tile); overflow: hidden; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ph:has(img)::after { display: none; }
.ph::after { content: ""; position: absolute; left: 0; right: 0; top: 62%; height: 1px; background: var(--sky); }
.ph span { position: absolute; left: 10px; top: 8px; font-size: 11px; letter-spacing: 0.2em; color: var(--mute); font-weight: 400; }
.grid figcaption { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; }
.grid figcaption { flex-direction: row; align-items: baseline; gap: 0 .5em; flex-wrap: wrap; font-family: var(--body); }
.grid figcaption b { font-weight: 400; font-size: 17px; }
.grid figcaption small { font-size: 17px; font-weight: 400; color: inherit; }   /* the year looks exactly like the title */

/* About */
/* the bio sits in one left-aligned column on the page grid */
.about { max-width: 41rem; margin: 0 auto; }
.about .portrait { margin: 2.4rem auto 0; width: 230px; max-width: 100%; aspect-ratio: 1; }
.about .portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about p { margin: 0 0 1.1rem; font-family: var(--body); font-size: 17px; line-height: 1.6; }

/* the small messages on Home */
.msg {
  position: fixed; left: 0; top: 0; z-index: 4; margin: 0; width: max-content; max-width: 80vw;
  font-weight: 500; font-size: 13px; line-height: 1.2; letter-spacing: 0.08em;
  opacity: 0; filter: blur(7px); will-change: opacity, filter;
  transition: opacity 2.4s ease-in-out, filter 2.4s ease-in-out, letter-spacing 3.2s ease-out; pointer-events: none;
  text-shadow: 0 0 2px var(--bg), 0 0 6px var(--bg), 0 0 12px var(--bg);
}
.msg.on { opacity: 1; filter: blur(0); letter-spacing: 0.17em; }
.msg-refresh { color: var(--sky); display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 1.7em; }
.msg-refresh span:first-child { text-align: right; }
.msg-refresh i { font-style: normal; }
body.canrefresh, body.canhome { cursor: pointer; }
@media (hover: none) { body[data-page="home"] { cursor: pointer; -webkit-tap-highlight-color: transparent; } }

/* password gate on Work: just the field and the button, centred in the window */
.gate { position: fixed; inset: 0; z-index: 3; display: grid; place-items: center; padding: 0 var(--gL); pointer-events: none; }
.gate .row { pointer-events: auto; display: flex; gap: 22px; align-items: flex-end; width: min(27rem, 100%); }
.gate input { flex: 1 1 auto; min-width: 0; font: inherit; font-family: var(--body); font-weight: 400; font-size: 17px; color: var(--ink); background: transparent; border: 0; border-bottom: 1.5px solid var(--ink); padding: 8px 0; border-radius: 0; transition: border-color .2s; }
.gate input::placeholder { color: var(--mute); }
.gate input:focus-visible { outline: none; border-bottom-color: var(--blue); }
.gate.bad input { border-bottom-color: var(--accent); }
.gate button { flex: none; font: inherit; font-family: var(--body); font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 400; color: var(--ink); background: none; border: 0; border-bottom: 2px solid var(--accent); padding: 8px 0 5px; cursor: pointer; white-space: nowrap; }
.gate button:hover { color: var(--blue); }
/* the one link on About: hot pink, no underline */
.about a.out { color: var(--accent); text-decoration: none; }
.about a.out:hover { color: var(--blue); }