/* ============================================================================
   SHEPHERD — "vue du ciel"
   A drone feed. The footage is the page; type is telemetry.
   House method: dark ground, cream text, two signature colours, two roles.
     COPPER = action and marks (links, plan tags, brackets) : the colour the
              game itself uses to draw an order on the grass.
     MEADOW = narrative accent, quieter (the stressed words, the rules).
   ============================================================================ */

@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");
}

@font-face{
  font-family: "Spline Sans Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../../apiarium/assets/fonts/R70BjzAei_CDNLfgZxrW6wrZOF2WX5KZmA.woff2") format("woff2");
}

:root{
  color-scheme: dark;

  --night:  #080c09;
  --deck:   #0d130f;
  --line:   #1f2a22;
  --line-2: #2f3d32;

  --copper:    #e0a25c;
  --copper-lo: #f0c08a;

  --meadow: #9cc06e;

  --cream:  #efe9d8;
  --cream2: #b9b29f;
  --cream3: #8f8a7a;

  --sans: "Archivo", "Segoe UI", system-ui, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --gutter: clamp(1.1rem, 4vw, 4rem);
  --bar: 2.75rem;
}

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

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

body{
  margin: 0;
  background-color: var(--night);
  /* The game's metric grid, barely there. */
  background-image:
    linear-gradient(rgba(239,233,216,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239,233,216,.028) 1px, transparent 1px);
  background-size: 5rem 5rem;
  color: var(--cream);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.08rem);
  line-height: 1.6;
  overflow-x: hidden;
}

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

a{ color: var(--copper); }
a:hover{ color: var(--copper-lo); }
a:focus-visible{ outline: 2px solid var(--copper); outline-offset: 3px; border-radius: 2px; }

/* ---------------------------------------------------------
   Top bar
   --------------------------------------------------------- */

.topbar{
  display: flex;
  align-items: center;
  gap: .9rem;
  min-height: var(--bar);
  padding: .5rem var(--gutter);
  background: var(--night);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.topbar__back{ color: var(--cream2); text-decoration: none; }
.topbar__back:hover{ color: var(--copper); }

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

.topbar__view{ margin-left: auto; color: var(--cream3); }
.topbar__view::before{
  content: "";
  display: inline-block;
  width: .5rem; height: .5rem;
  margin-right: .6rem;
  border: 1.5px solid var(--copper);
  border-radius: 50%;
}

@media (max-width: 30rem){ .topbar__view{ display: none; } }

/* ---------------------------------------------------------
   Feed : one piece of footage, framed like a viewfinder
   --------------------------------------------------------- */

.feed{ position: relative; margin: 0; background: #6a7e48; }

.feed img{
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - var(--bar));
  max-height: calc(100svh - var(--bar));
  object-fit: cover;
}

/* Four corner brackets, drawn with gradients so the figure stays one element. */
.feed::after{
  --b: 1.5px;
  --l: clamp(.8rem, 2.2vw, 1.6rem);
  --c: rgba(239,233,216,.82);
  content: "";
  position: absolute;
  inset: clamp(.6rem, 1.8vw, 1.4rem);
  pointer-events: none;
  background:
    linear-gradient(var(--c),var(--c)) left top / var(--l) var(--b) no-repeat,
    linear-gradient(var(--c),var(--c)) left top / var(--b) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right top / var(--l) var(--b) no-repeat,
    linear-gradient(var(--c),var(--c)) right top / var(--b) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom / var(--l) var(--b) no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom / var(--b) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom / var(--l) var(--b) no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom / var(--b) var(--l) no-repeat;
}

.feed__tag{
  position: absolute;
  top: clamp(1.1rem, 2.8vw, 2.2rem);
  left: clamp(1.1rem, 2.8vw, 2.2rem);
  padding: .2rem .55rem;
  background: rgba(8,12,9,.78);
  color: var(--copper);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* The funnel is a vertical subject : crop the footage square around it. */
.feed--square img{ aspect-ratio: 1 / 1; max-height: none; }

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */

.hero{ position: relative; }

.hero__text{ padding: 1.75rem var(--gutter) 1.5rem; }

.kicker{
  margin: 0 0 .9rem;
  color: var(--copper);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.hero__title{
  margin: 0;
  /* A title card : thin, wide, unhurried. */
  font-weight: 400;
  font-size: clamp(1.9rem, 1rem + 2.7vw, 3.8rem);
  line-height: 1;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.hero__line{
  max-width: 24rem;
  margin: 1.1rem 0 0;
  color: var(--cream);
  font-size: clamp(1.05rem, 1rem + .45vw, 1.3rem);
  line-height: 1.45;
}

/* Phone : the footage is cropped tall around the gate, the title sits below. */
@media (max-width: 47.99rem){
  .feed--hero img{ aspect-ratio: 4 / 5; }
}

/* Wide : the title rides on the footage, in the empty grass left of the herd
   (the herd starts at 39 % of the frame, so the text column stops before it). */
@media (min-width: 64rem){
  .hero__title{ font-size: clamp(1.9rem, .6rem + 2.7vw, 3.8rem); }
  .hero__line{ max-width: min(24rem, 29vw); }

  .feed--hero::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(8,12,9,.9) 0%, rgba(8,12,9,.7) 28%, rgba(8,12,9,0) 56%);
  }

  .hero__text{ text-shadow: 0 1px .9rem rgba(8,12,9,.7); }

  .hero__text{
    position: absolute;
    left: 0;
    bottom: 0;
    width: min(46%, 40rem);
    padding: 0 0 clamp(2.5rem, 6vw, 5rem) clamp(2.2rem, 5vw, 5rem);
  }
}

/* ---------------------------------------------------------
   Telemetry strip
   --------------------------------------------------------- */

.telemetry{
  display: flex;
  flex-wrap: wrap;
  gap: .35rem clamp(1.25rem, 3.5vw, 3.25rem);
  margin: 0;
  padding: .8rem var(--gutter);
  background: var(--deck);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .06em;
}

.telemetry div{ display: flex; align-items: baseline; gap: .6rem; }

.telemetry dt{
  color: var(--cream3);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.telemetry dd{ margin: 0; color: var(--cream); }

.telemetry div:first-child dd{ color: var(--copper); }

/* ---------------------------------------------------------
   The sentences between the plans
   --------------------------------------------------------- */

.say{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .9rem;
  max-width: 78rem;
  margin: 0 auto;
  padding: clamp(2.75rem, 7vw, 6.5rem) var(--gutter);
}

.say__lead{
  margin: 0;
  color: var(--cream3);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.say__lead::before{
  content: "";
  display: inline-block;
  width: 1.75rem; height: 1px;
  margin-right: .8rem;
  vertical-align: middle;
  background: var(--meadow);
}

.say__line{
  max-width: 22ch;
  margin: 0;
  font-weight: 500;
  font-size: clamp(1.7rem, 1rem + 3.1vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -.022em;
  text-wrap: balance;
}

.say__line em{ color: var(--meadow); font-style: normal; }

.say__note{
  max-width: 34rem;
  margin: .4rem 0 0;
  color: var(--cream2);
}

@media (min-width: 60rem){
  .say{
    grid-template-columns: 12rem minmax(0, 1fr);
    column-gap: 2rem;
  }
  .say__lead{ padding-top: 1.1em; }
  /* In its own column the rule sits above the label, so the label never wraps around it. */
  .say__lead::before{ display: block; margin: 0 0 .8rem; }
  .say__line, .say__note{ grid-column: 2; }
  .say__line{ max-width: 24ch; }
}

/* ---------------------------------------------------------
   Plans
   --------------------------------------------------------- */

.shot{ border-top: 1px solid var(--line); }

.shot--split{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 60rem){
  .shot--split{
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
  }
  .shot--split .shot__media{ border-right: 1px solid var(--line); }
  .shot--split .feed--square img{ max-height: calc(100vh - 6rem); }

  .say--side{
    grid-template-columns: minmax(0, 1fr);
    padding-left: clamp(2rem, 4vw, 4rem);
  }
  .say--side .say__lead{ padding-top: 0; }
  .say--side .say__lead::before{ display: inline-block; margin: 0 .8rem 0 0; }
  .say--side .say__line,
  .say--side .say__note{ grid-column: 1; }
  .say--side .say__line{ font-size: clamp(1.7rem, .8rem + 2.3vw, 3.1rem); max-width: 16ch; }
}

/* ---------------------------------------------------------
   The sheet
   --------------------------------------------------------- */

.sheet{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  max-width: 78rem;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 7rem) var(--gutter);
  border-top: 1px solid var(--line);
}

.sheet__title{
  margin: .9rem 0 1.2rem;
  font-weight: 500;
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -.02em;
}

.sheet__text p:not(.say__lead){ max-width: 34rem; margin: 0 0 1rem; color: var(--cream2); }

.sheet__list{
  margin: 0;
  align-self: start;
  border-top: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: .8rem;
  line-height: 1.55;
}

.sheet__list div{
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}

.sheet__list dt{
  color: var(--copper);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding-top: .15em;
}

.sheet__list dd{ margin: 0; color: var(--cream); }

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

@media (max-width: 26rem){
  .sheet__list div{ grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}

/* ---------------------------------------------------------
   Colophon
   --------------------------------------------------------- */

.colophon{
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 2rem;
  padding: 1.5rem var(--gutter) 2.5rem;
  border-top: 1px solid var(--line);
  background: var(--night);
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .08em;
}

.colophon a{ color: var(--cream2); text-decoration: none; }
.colophon a:hover{ color: var(--copper); }

/* ---------------------------------------------------------
   Motion : one page-load moment, only for those who asked for none of
   the opposite. Under reduced motion nothing is declared, so nothing moves
   and nothing is left half-way.
   --------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference){
  @keyframes lock-on{
    from{ opacity: 0; transform: scale(1.035); }
    to{ opacity: 1; transform: none; }
  }
  @keyframes rise{
    from{ opacity: 0; transform: translateY(.8rem); }
    to{ opacity: 1; transform: none; }
  }

  .feed--hero::after{ animation: lock-on .9s cubic-bezier(.2,.7,.2,1) .15s both; }
  .hero__text > *{ animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
  .hero__text > :nth-child(1){ animation-delay: .35s; }
  .hero__text > :nth-child(2){ animation-delay: .5s; }
  .hero__text > :nth-child(3){ animation-delay: .65s; }

  .topbar__back, .colophon a, a{ transition: color .2s ease; }
}