/* ============================================================================
   MEADOWLING: the living meadow wallpaper. Theme over the shared game-page layout.
     POLLEN    = identity and action (tray icon, links, the underline): the golden star flower
     OPEN SKY  = narrative accent (the second line of each heading): the meadow's blue sky
   Titles use the desktop's own DIN (Bahnschrift), light and condensed, in capitals, like the
   sibling Bonsaika page; elsewhere the site's Archivo, loaded from the Apiarium folder.
   ============================================================================ */

@font-face{
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../../apiarium/assets/fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxI.woff2") format("woff2");
}

:root{
  --bg:      #0e1511;
  --panel:   #131d17;
  --line:    #263429;
  --text:    #ecebdf;
  --muted:   #b5bdb3;
  --accent:  #f2c84b;
  --on-accent: #0e1511;
  --soft:    #9cc4ea;
  --din: Bahnschrift, "DIN Alternate", "Archivo", "Segoe UI", system-ui, sans-serif;
  --sans: "Archivo", "Segoe UI", system-ui, sans-serif;
  --mono: var(--din);
  --clip-ratio: 16 / 9;
}

/* Titles: light, condensed, wide-set capitals. */
h1, h2, .brand, .clips--four strong{
  font-family: var(--din);
  font-weight: 300;
  font-stretch: 75%;
  text-transform: uppercase;
  letter-spacing: .035em;
}
h1{ line-height: 1; }
h2{ line-height: 1.02; }
.brand{ font-weight: 400; letter-spacing: .14em; }
.clips--four strong{ display: block; font-size: 20px; letter-spacing: .04em; }
.clips--four span{ display: block; margin-top: 2px; }

/* The flowers stand on the crest of the hill, in the upper half of every frame. */
.frame img{ object-position: 50% 35%; }
.frame--tall img{ aspect-ratio: 3 / 4; }

/* The meadows clip spans the whole column, under its heading. */
.meadows{ margin: 60px 0 0; }
@media (max-width: 700px){ .meadows{ margin-top: 36px; } }

/* A mute desktop over the wallpaper: a few icons, a taskbar where only the meadow's icon is lit. */
.desk{
  position: absolute;
  top: 14px; left: 14px;
  display: grid;
  gap: 12px;
}
.desk i{
  display: block;
  width: 22px; height: 22px;
  border-radius: 5px;
  border: 1px solid rgba(236,235,223,.4);
  background: rgba(236,235,223,.12);
}
.taskbar{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  background: rgba(14,21,17,.66);
  border-top: 1px solid rgba(236,235,223,.09);
}
.taskbar svg{
  width: 14px; height: 14px;
  color: var(--accent);
  filter: drop-shadow(0 0 .45rem rgba(242,200,75,.7));
}

/* ---------- The sky behind the page (js/sky-core.js, js/sky.js) ----------
   A fixed layer under everything. Without script it stays the game's night. */
.sky{
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background-image: linear-gradient(to bottom, #0e1835 0%, #18223e 12%, #212c48 26%, #293552 40%, #28334e 50%, #081b0f 64%);
}
.sky-stars{ position: absolute; inset: 0; opacity: 0; -webkit-mask-image: linear-gradient(#000 20%, transparent 50%); mask-image: linear-gradient(#000 20%, transparent 50%); }
.sky-field{ position: absolute; top: 0; left: 0; width: 1px; height: 1px; border-radius: 50%; }
.sky-twinkle{
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #ecebdf;
  box-shadow: 0 0 4px 1px rgba(236,235,223,.35);
  animation: sky-twinkle 6s ease-in-out infinite paused;
}
.sky-stars.is-out .sky-twinkle{ animation-play-state: running; }
@keyframes sky-twinkle{ 0%, 100%{ opacity: .9; } 50%{ opacity: .25; } }

/* The sun sinks behind the horizon glow rather than ending on a hard line. */
.sky-bodies{ position: absolute; inset: 0; -webkit-mask-image: linear-gradient(#000 46%, transparent 52%); mask-image: linear-gradient(#000 46%, transparent 52%); }
.sky-sun{
  position: absolute; top: 0; left: 0; border-radius: 50%; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(circle, #f6e7c4 0 38%, color-mix(in srgb, var(--glow, #e09a5c) 70%, transparent) 42%, transparent 70%);
  box-shadow: 0 0 12vmin 6vmin color-mix(in srgb, var(--glow, #e09a5c) 22%, transparent);
}

@media (prefers-reduced-motion: reduce){
  .sky-twinkle{ animation: none; }
}

/* On the narrowest phones the shared 40 px title is wider than the screen: "en fond d'écran."
   does not break (it carries its underline), so the title shrinks just enough to fit. */
@media (max-width: 359px){
  h1{ font-size: 36px; }
}