/* ============================================================================
   BONSAIKA — plate C: the living wallpaper
   The page behaves like the game: a full-screen sky behind a silent desktop,
   then wide bands where the text sits on the left, in the room the pictures
   leave for icons.
   Two signature colours, two roles (same method as the other game pages):
     EMBER     = identity and action (tray icon, links, focus) — the lit maple
     BLUE HOUR = narrative accent (numbers, notes) — the night sky
   Type is the desktop's own DIN (Bahnschrift), light and condensed for titles;
   elsewhere the site's Archivo takes over, 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{
  color-scheme: dark;

  /* Night */
  --night:    #0d1218;
  --surface:  #121920;
  --line:     #25303c;

  /* Ember: identity and action */
  --ember:    #f07a3c;
  --ember-hi: #ffa56e;

  /* Blue hour: narrative accent */
  --blue: #8fb0d0;

  /* Text */
  --cream:  #ebe7dc;
  --cream2: #b6bcc2;
  --cream3: #8b939c;

  --din: Bahnschrift,"DIN Alternate","Archivo","Segoe UI",system-ui,sans-serif;

  --gutter: clamp(1.15rem, 4.5vw, 4.5rem);
  --bar: 2.9rem;
}

*,*::before,*::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--night);
  color: var(--cream);
  font-family: var(--din);
  font-size: clamp(1rem, .97rem + .2vw, 1.1rem);
  line-height: 1.6;
  overflow-x: hidden;
}

img{ display: block; max-width: 100%; height: auto; }

a{ color: var(--ember); }
a:hover{ color: var(--ember-hi); }
a:focus-visible{ outline: 2px solid var(--ember); outline-offset: 3px; }

/* No centred column: like a wallpaper, everything hangs from the screen's edge. */
.wrap{ width: 100%; padding: 0 var(--gutter); }

/* Titles: light, condensed, wide-set capitals. */
.hero__title,
.band__title,
.verbs dt,
.quad strong{
  font-weight: 300;
  font-stretch: 75%;
  text-transform: uppercase;
}

/* ---------------------------------------------------------
   Back bar, laid over the wallpaper
   --------------------------------------------------------- */

.topbar{
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 6;
  background: linear-gradient(to bottom, rgba(13,18,24,.78), rgba(13,18,24,0));
}

.topbar .wrap{
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-top: .95rem;
  padding-bottom: 1.6rem;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.topbar__back{ color: var(--cream); text-decoration: none; transition: color .2s ease; }
.topbar__back:hover{ color: var(--ember-hi); }

.topbar__here{ color: var(--cream2); }
.topbar__here::before{ content: "/"; margin-right: .9rem; color: var(--cream3); }

/* ---------------------------------------------------------
   Hero: the wallpaper itself, under a mute desktop
   --------------------------------------------------------- */

.hero{
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(100vh, 68rem);
  min-height: min(100svh, 68rem);
  overflow: hidden;
  /* Still frame while the clip loads. */
  background: var(--night) url("../clips/day.jpg") 66% 50% / cover no-repeat;
}

.hero__wall{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The tree stands right of centre: on a tall screen this keeps it in view. */
  object-position: 66% 50%;
}

/* Darker on the icon side and at the foot, so the words hold without a box. */
.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(13,18,24,.8) 0, rgba(13,18,24,.25) 20%, rgba(13,18,24,0) 38%),
    linear-gradient(to right, rgba(13,18,24,.74) 0, rgba(13,18,24,.34) 32%, rgba(13,18,24,0) 56%);
}

.desk{
  position: absolute;
  z-index: 2;
  top: 4.75rem;
  left: var(--gutter);
  display: grid;
  gap: 1.35rem;
}

.desk__icon{ display: grid; justify-items: center; gap: .45rem; width: 3.4rem; }

.desk__icon i{
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .5rem;
  border: 1px solid rgba(235,231,220,.3);
  background: rgba(235,231,220,.07);
}

.desk__icon b{
  width: 2.9rem;
  height: .28rem;
  border-radius: .14rem;
  background: rgba(235,231,220,.26);
}

.desk__icon:nth-child(even) b{ width: 2.1rem; }

.hero__text{
  position: relative;
  z-index: 2;
  padding-top: 7rem;
  padding-bottom: calc(var(--bar) + clamp(1.75rem, 5vw, 3.5rem));
}

.kicker{
  margin: 0 0 .8rem;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ember);
}

.hero__title{
  margin: 0 0 0 -.04em;
  font-size: clamp(3.4rem, 1.6rem + 8.4vw, 8.75rem);
  line-height: .86;
  letter-spacing: .05em;
  color: var(--cream);
  text-shadow: 0 .2rem 2.5rem rgba(0,0,0,.5);
}

.hero__tagline{
  margin: 1.4rem 0 0;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.75rem);
  line-height: 1.3;
  color: var(--cream);
}

.hero__sub{
  max-width: 31rem;
  margin: .6rem 0 0;
  color: var(--cream2);
}

.hero__note{
  margin: 1.5rem 0 0;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
}

.hero__note::before{
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 1px;
  margin-right: .7rem;
  vertical-align: .3em;
  background: var(--blue);
}

/* The taskbar: only the tree's icon, next to the clock, is lit. */
.taskbar{
  position: absolute;
  z-index: 3;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--bar);
  padding: 0 var(--gutter);
  background: rgba(13,18,24,.66);
  border-top: 1px solid rgba(235,231,220,.09);
}

.taskbar__apps{ display: flex; gap: .7rem; }

.taskbar__apps i{
  width: 1.3rem;
  height: 1.3rem;
  border-radius: .3rem;
  background: rgba(235,231,220,.16);
}

.taskbar__tray{
  position: absolute;
  right: var(--gutter);
  display: flex;
  align-items: center;
  gap: .9rem;
}

.taskbar__tree{
  width: 1.15rem;
  height: 1.15rem;
  color: var(--ember);
  filter: drop-shadow(0 0 .45rem rgba(240,122,60,.7));
}

.taskbar__clock{ display: grid; justify-items: end; gap: .26rem; }
.taskbar__clock b{ width: 2.1rem; height: .24rem; border-radius: .12rem; background: rgba(235,231,220,.34); }
.taskbar__clock b + b{ width: 2.9rem; }

@media (max-width: 40rem){
  .desk__icon:nth-child(n+4){ display: none; }
  .taskbar__apps i:nth-child(n+4){ display: none; }
}

/* Short screens: fewer icons, so they never reach the title. */
@media (max-height: 60rem){
  .desk__icon:nth-child(n+4){ display: none; }
}

@media (max-height: 34rem){
  .desk{ display: none; }
}

/* Upright screens: a full-bleed crop would cut the crown, so the wallpaper
   takes the upper part and melts into the night where the words sit. */
@media (max-aspect-ratio: 1/1){
  .hero{ background-size: auto 50%; background-position: 66% 0; }
  .hero__wall{ height: 50%; }

  .hero::after{
    background:
      linear-gradient(to bottom, rgba(13,18,24,0) 36%, var(--night) 50%),
      linear-gradient(to right, rgba(13,18,24,.5) 0, rgba(13,18,24,0) 40%);
  }
}

/* ---------------------------------------------------------
   Bands
   --------------------------------------------------------- */

.band{ position: relative; border-top: 1px solid var(--line); }

.band__num{
  margin: 0 0 .5rem;
  font-size: .78rem;
  letter-spacing: .22em;
  color: var(--blue);
}

.band__title{
  margin: 0 0 1.2rem;
  font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.4rem);
  line-height: .98;
  letter-spacing: .035em;
  color: var(--cream);
}

.band__text p{ margin: 0 0 .9rem; color: var(--cream2); }
.band__text p:last-child{ margin-bottom: 0; }
.band__text p.band__num{ margin-bottom: .5rem; color: var(--blue); }

/* A picture across the whole width; the words take the icon side. */
.band--wall .band__wall{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 81% 50%;
}

.band--wall .band__text{ padding: clamp(2.25rem, 7vw, 3.5rem) 0 clamp(3rem, 9vw, 4.5rem); }

@media (min-width: 56rem){
  .band--wall{
    display: flex;
    align-items: center;
    min-height: min(62.5vw, 100vh, 64rem);
    overflow: hidden;
  }

  .band--wall .band__wall{
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    object-position: 50% 70%;
  }

  .band--wall::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(13,18,24,.9) 0, rgba(13,18,24,.62) 30%, rgba(13,18,24,0) 54%);
  }

  .band--wall .wrap{ position: relative; z-index: 1; }
  .band--wall .band__text{ max-width: min(26rem, 36vw); }
}

/* Words on one side, a clip at its real size on the other. */
.band--split{
  padding: clamp(3.5rem, 9vw, 7rem) 0;
  background: var(--surface);
}

.band__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.25rem, 5vw, 5rem);
  align-items: center;
}

@media (min-width: 56rem){
  .band__grid{ grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

.verbs{ margin: 0; }

/* Verb and gloss share a line when there is room, and stack when there is not. */
.verbs div{
  display: flex;
  flex-wrap: wrap;
  gap: .1rem 1.5rem;
  align-items: baseline;
  padding: .8rem 0;
  border-top: 1px solid var(--line);
}

.verbs div:last-child{ border-bottom: 1px solid var(--line); }

.verbs dt{
  flex: 0 0 5.2em;
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: .04em;
  color: var(--cream);
}

.verbs dd{ flex: 1 1 13rem; margin: 0; color: var(--cream2); }

.clip{ margin: 0; }

.clip img{
  width: 100%;
  max-width: 50rem;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.clip figcaption{
  margin-top: .7rem;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream3);
}

/* Title on the left, a short paragraph on the right, then pictures edge to edge. */
.band--strip,
.band--quad{ padding-top: clamp(3.5rem, 9vw, 7rem); }

.band__text--row{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .25rem clamp(2rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4.5vw, 3.25rem);
}

.band__text--row .band__title{ margin-bottom: 0; }
.band__text--row > p{ max-width: 34rem; margin-top: .9rem; }

@media (min-width: 56rem){
  .band__text--row{ grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .band__text--row > p{ margin-top: 0; }
}

.strip,
.quad{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 56rem){
  .strip,
  .quad{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.strip figure,
.quad figure{ position: relative; margin: 0; overflow: hidden; }

.strip img{ width: 100%; }

.quad img{
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  /* The tree stands right of centre in every frame: keep it in the crop. */
  object-position: 72% 50%;
  transition: filter .4s ease;
}

.quad li:hover img{ filter: brightness(1.14); }

/* Clip captions sit on the picture, on a foot of night. */
.strip figure::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(13,18,24,.88), rgba(13,18,24,0));
  pointer-events: none;
}

.strip figcaption{
  position: absolute;
  z-index: 1;
  left: 0; right: 0; bottom: 0;
  padding: 0 clamp(.7rem, 1.6vw, 1.4rem) clamp(.7rem, 1.5vw, 1.25rem);
}

/* The species keep their pots in view: names go under the pictures. */
.quad figcaption{ padding: 1rem clamp(.7rem, 1.6vw, 1.4rem) 1.5rem; }

.strip figcaption{
  font-size: clamp(.68rem, .62rem + .22vw, .8rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream);
}

.quad strong{
  display: block;
  font-size: clamp(1.15rem, .8rem + 1.5vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: .04em;
  color: var(--cream);
}

.quad i{
  display: block;
  margin-top: .3rem;
  font-size: clamp(.8rem, .74rem + .25vw, .95rem);
  color: var(--cream2);
}

/* ---------------------------------------------------------
   Foot
   --------------------------------------------------------- */

.colophon{
  padding: clamp(2.75rem, 7vw, 4.5rem) 0 clamp(3rem, 8vw, 5.5rem);
  border-top: 1px solid var(--line);
}

.colophon p{ max-width: 36rem; margin: 0; color: var(--cream2); }

.colophon__links{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.9rem;
  margin-top: 1.5rem;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.colophon__links a{ color: var(--cream2); text-decoration: none; transition: color .2s ease; }
.colophon__links a:hover{ color: var(--ember-hi); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ transition-duration: .01ms !important; }
}