/* vetroal.se/järnjungfru - egen layout ovanpå hardcopy.css. Stål/järn-variant. */

:root {
  --stal-1: #d7dbdf;
  --stal-2: #aab2ba;
  --stal-3: #eceef0;
  --fonster: #cfd4d9;
  --fonster-inre: #f7f8fa;
  --titel-1: #2b3238;
  --titel-2: #5a6a76;
  --text: #1b2228;
  --text-dov: #566069;
}

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--stal-1) 0%, var(--stal-2) 60%, var(--stal-3) 100%);
  background-attachment: fixed;
  color: var(--text);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 12px;
  box-sizing: border-box;
}

.wrap { width: 100%; max-width: 900px; position: relative; z-index: 1; }

/* fönstren tonas stålgrå ovanpå hardcopy.css */
.window { background: var(--fonster); }
.window-body { background: var(--fonster-inre); color: var(--text); }

h1 { font-size: 22px; text-align: left; margin: 0 0 2px; color: var(--titel-1); }
h1 .ar { color: var(--text-dov); font-weight: normal; font-size: 16px; }
.material { margin: 0 0 2px; color: var(--text-dov); font-style: italic; }
.matt { margin: 0 0 14px; color: var(--text-dov); font-size: 12px; }

.sub-window { margin-bottom: 18px; box-sizing: border-box; }
.beskrivning { margin: 0 0 12px; line-height: 1.5; color: var(--text); }
.beskrivning:last-child { margin-bottom: 0; }

/* platshållar-not, syns tydligt som utkast */
.todo {
  margin: 0 0 12px;
  padding: 8px 10px;
  background: #fff6c8;
  border: 2px inset #e4d78a;
  font-size: 11px;
  line-height: 1.45;
  color: #5a4b12;
}

.foto-rad { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 18px; align-items: flex-start; justify-content: center; }
.foto-rad figure { margin: 0; flex: 0 1 auto; max-width: 420px; text-align: center; }
.foto-rad img {
  max-width: 100%;                     /* aldrig fast bredd OCH höjd ihop */
  max-height: 72vh;
  width: auto;
  height: auto;                        /* behåll alltid proportioner, aldrig trycka ihop */
  display: block;
  margin: 0 auto;
  border: 2px inset #b6bcc2;
  background: #dfe3e7;
}
.foto-rad figcaption { font-size: 11px; color: var(--text-dov); margin-top: 6px; line-height: 1.4; }

/* diskreta gnistor mot metallytan */
#stars { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.star { position: absolute; width: 2px; height: 2px; background: #ffffff; border-radius: 50%; opacity: 0.3; animation: tw var(--dur, 4s) ease-in-out var(--delay, 0s) infinite; }
@keyframes tw { 0%,100% { opacity: 0.08; } 50% { opacity: 0.45; } }

@media (max-width: 760px) {
  .wrap { max-width: 100%; }
}