/* =========================================================================
   Roni Luokkamäki — site stylesheet
   Hand-written, single file, no preprocessor. Palette sampled from a
   Carhartt Canvas Script Cap (see palette.jpg in the project root):
   --surface is the cap fabric, --accent is the embroidery thread.
   ========================================================================= */

:root {
  color-scheme: dark;

  --bg:        #1b141a; /* deepest cap shadow */
  --surface:   #2e252c; /* cap fabric average */
  --border:    #473f45; /* lit upper crown */
  --fg:        #c9c2c6; /* studio grey, warmed */
  --muted:     #8b8389; /* dimmed grey */
  --accent:    #a1afa7; /* embroidery thread (mint) */
  --accent-hi: #cfe6d6; /* thread, lifted — hover/active/focus */
  --rose:      #afa1a6; /* mint, hue turned — sold / unavailable */

  --mono-font: ui-monospace, "Cascadia Mono", "Consolas", "Courier New", monospace;

  --content-width: 920px;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  /* worn-CRT scanlines, painted into the page background so they sit strictly
     behind all content and can never fall across the artwork */
  background-color: var(--bg);
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.22) 0px,
    rgba(0, 0, 0, 0.22) 1px,
    transparent 1px,
    transparent 3px
  );
  color: var(--fg);
  font-family: var(--mono-font);
  font-size: 16px;
  line-height: 1.55;
  padding-inline: 20px;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; }
a:hover, a:focus-visible { color: var(--accent-hi); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

h1, h2, h3 {
  font-family: var(--mono-font);
  font-weight: 400;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.25;
  margin: 0.6em 0 0.3em;
}
h1 { font-size: 1.9rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; margin-top: 0; }

.muted { color: var(--muted); }

/* ---------------------------------------------------------------- layout */

.site-header, main, .site-footer {
  max-width: var(--content-width);
  margin-inline: auto;
}

/* Scanline texture.
   This used to be a fixed overlay element sitting ON TOP of the page with
   mix-blend-mode: multiply. That darkened every painting and laid faint grey
   lines across the artwork, while the lightbox (higher in the stacking order)
   stayed clean — which is why viewing mode looked right and the gallery did
   not. Painting the texture into the page background instead puts it strictly
   behind all content, so it can never touch the artwork on any browser,
   rather than relying on stacking order to keep it away. */

.divider {
  max-width: var(--content-width);
  margin: 1.6rem auto;
  overflow: hidden;
  white-space: nowrap;
  color: var(--border);
  font-family: var(--mono-font);
  font-size: 0.85rem;
  user-select: none;
}

/* ---------------------------------------------------------------- header */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.2rem;
  padding-top: calc(1.4rem + env(safe-area-inset-top, 0px));
}

.brand {
  font-family: var(--mono-font);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--fg);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.brand:hover, .brand:focus-visible { color: var(--accent-hi); }

.main-nav {
  font-size: 1rem;
  letter-spacing: 0.04em;
}
.main-nav a {
  text-decoration: none;
  padding: 0.15em 0.1em;
}
.main-nav a[aria-current="page"] {
  color: var(--accent-hi);
  border-bottom: 1px solid var(--accent-hi);
}
.main-nav .sep { color: var(--border); margin: 0 0.35em; }

.lang-switch {
  border: 1px solid var(--border);
  padding: 0.1em 0.45em;
  letter-spacing: 0.08em;
}
.lang-switch:hover, .lang-switch:focus-visible { border-color: var(--accent-hi); }

/* ----------------------------------------------------------------- intro */

.intro {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.profile-pic {
  width: 180px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.intro-text { flex: 1 1 320px; min-width: 0; }

/* small, centered, slightly askew — a postage-stamp feel */
.about-stamp {
  display: block;
  width: 160px;
  margin: 2.2rem auto 2.4rem;
  border: 6px solid var(--surface);
  outline: 1px solid var(--border);
  outline-offset: -1px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}
.intro-text h1 { margin-top: 0; }

/* ------------------------------------------------------------ thumb grid */

/* Three works to a row, with room to breathe between them */
.thumb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 24px;
  margin: 1.4rem 0;
}

.thumb {
  display: block;
  position: relative;
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  color: var(--fg);
}
/* Each work keeps its own proportions rather than being cropped to a square.
   align-items: start on the grid lets every box end at the bottom of its own
   image, instead of stretching to the tallest work in the row. */
.thumb img { width: 100%; height: auto; }

/* ------------------------------------------------------------- full list */

.painting {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 1rem;
}
.painting:first-child { padding-top: 0; }
.painting-img-link { flex: 0 1 420px; position: relative; border: 1px solid var(--border); background: var(--surface); }
.painting-info { flex: 1 1 260px; min-width: 0; }
.painting-meta { color: var(--muted); margin: 0.2em 0 0.6em; }
.painting-desc { margin: 0 0 0.8em; }
.painting-status { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }

.price { font-weight: bold; color: var(--accent); font-size: 1.05rem; }
.tag {
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 0.15em 0.5em;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}
.tag-sold { color: var(--rose); border-color: var(--rose); }

/* SOLD marker stamped on the corner of the artwork, in the grid and the list */
.sold-flag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  font-family: var(--mono-font);
  font-size: 0.68rem;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose);
  background: var(--bg);
  border: 1px solid var(--rose);
  border-top: 0;
  border-left: 0;
  padding: 0.35em 0.55em 0.3em;
}
.sold-flag--large {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  padding: 0.45em 0.7em 0.4em;
}

.btn {
  display: inline-block;
  border: 1px solid var(--border);
  color: var(--fg);
  text-decoration: none;
  padding: 0.3em 0.7em;
  font-size: 0.9rem;
}
.btn:hover, .btn:focus-visible { border-color: var(--accent-hi); color: var(--accent-hi); }

/* ---------------------------------------------------------------- footer */

.site-footer {
  padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
  font-size: 0.85rem;
  color: var(--muted);
}
.player-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.player-label { font-size: 0.8rem; color: var(--muted); }
audio { height: 32px; max-width: 100%; }
.contact-line { margin: 0 0 0.4em; display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: center; }
.contact-line a { color: var(--fg); }
.meta-line { margin: 0 0 0.2em; }
.meta-line a { color: var(--muted); }
.meta-line a:hover, .meta-line a:focus-visible { color: var(--accent-hi); }

.social {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  text-decoration: none;
  color: var(--accent);
}
.social:hover, .social:focus-visible { color: var(--accent-hi); }
.social svg { display: block; }

/* ---------------------------------------------------------------- 404 */

body:has(main > h1:only-child) main { text-align: left; }

/* ------------------------------------------------------------- lightbox
   Populated by js/lightbox.js. Hidden by [hidden] until opened; this is
   the one place transitions are used, guarded by prefers-reduced-motion. */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 8, 10, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem 1rem;
}
.lightbox[hidden] { display: none; }

.lightbox-stage {
  max-width: min(94vw, 1400px);
  max-height: 78vh;
  /* Scrollbars are only wanted while zoomed in. Left on permanently, the
     fitted image overflowed its box by the width of the border and put a
     useless slider down the side of every work. */
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-stage img {
  /* account for the 1px border on each side, so the fitted image never
     overflows and never triggers a scrollbar */
  max-width: calc(min(94vw, 1400px) - 2px);
  max-height: calc(78vh - 2px);
  width: auto;
  height: auto;
  display: block;
}
.lightbox-stage.is-zoomed { display: block; overflow: auto; cursor: grab; }
.lightbox-stage.is-zoomed img { max-width: none; max-height: none; }

.lightbox-caption {
  color: var(--fg);
  text-align: center;
  margin-top: 0.9rem;
  font-size: 0.9rem;
}
.lightbox-caption .lightbox-title { font-family: var(--mono-font); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.1rem; display: block; }

.lightbox-controls {
  position: absolute;
  top: calc(1rem + env(safe-area-inset-top, 0px));
  right: 1rem;
  left: 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  pointer-events: none;
}
.lightbox-controls button {
  pointer-events: auto;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  font-family: var(--mono-font);
  font-size: 0.95rem;
  padding: 0.4em 0.7em;
  cursor: pointer;
}
.lightbox-controls button:hover, .lightbox-controls button:focus-visible { border-color: var(--accent-hi); color: var(--accent-hi); }

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  font-family: var(--mono-font);
  font-size: 1.4rem;
  width: 2.4rem;
  height: 2.4rem;
  cursor: pointer;
}
.lightbox-nav:hover, .lightbox-nav:focus-visible { border-color: var(--accent-hi); color: var(--accent-hi); }
.lightbox-prev { left: 0.6rem; }
.lightbox-next { right: 0.6rem; }

@media (prefers-reduced-motion: no-preference) {
  .lightbox-stage img { transition: opacity 0.12s ease; }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 680px) {
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.25rem; }
  .painting { flex-direction: column; }
  .painting-img-link { flex-basis: auto; }
  .lightbox-nav { width: 2rem; height: 2rem; font-size: 1.1rem; }
}

@media (max-width: 560px) {
  /* still three across on a phone, just closer together */
  .thumb-grid { gap: 12px; }
}