/* ============================================================
   DIGITAL ARTS ApS — digitalarts.dk

   LIGHT on purpose, and the reasoning is worth keeping.

   Lumio and AcuiCam are dark because the content needs a dimmed
   backdrop to be seen properly. This page demonstrates nothing.
   It explains who is behind the products and sends you to one,
   which is reading rather than looking, so it is light.

   It also means the background changes when a visitor clicks
   through to a product. That says "you have left the company and
   entered a product" without a word being spent on it.

   Same type and spacing as the product sites so the family is
   visible. Separate file on purpose: separate document roots,
   and this page must not inherit a change made for a product.

   Every text colour below clears 4.5:1 against the background.
   --color-text-secondary from the dark sites, #86868b, measures
   3.51:1 here and is NOT used.
   ============================================================ */

:root{
  --color-bg:        #fbfbfd;
  --color-bg-raised: #ffffff;

  --color-hairline:  rgba(0,0,0,.10);
  --color-border:    rgba(0,0,0,.18);

  --color-text-primary:   #1d1d1f;   /* 16.28:1 */
  --color-text-secondary: #515154;   /*  7.65:1 */
  --color-text-tertiary:  #6e6e73;   /*  4.91:1 */

  --color-action: #0066cc;           /*  5.39:1 */

  --font-display: "SF Pro Display", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-text:    "SF Pro Text",    -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body{
  background:var(--color-bg); color:var(--color-text-primary);
  font-family:var(--font-text); font-size:17px; line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--color-action); outline-offset:3px; border-radius:4px; }

/* ── Bar ─────────────────────────────────────────────────
   Same height and inner width as the Lumio nav, so the two sites
   line up when you move between them. Where Lumio puts a Download
   button on the right, this puts the one line about the company:
   there is nothing to buy here, and the slot is the natural place
   for the thing a visitor needs to know first. */
.bar{
  position:fixed; inset:0 0 auto; height:52px; z-index:100;
  background:rgba(251,251,253,.85);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--color-hairline);
}
.bar__inner{
  height:100%; display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  width:88%; max-width:760px; margin-inline:auto;
}
.bar__name{
  font-family:var(--font-display);
  font-size:21px; font-weight:600; letter-spacing:-.012em;
  color:var(--color-text-primary);
  white-space:nowrap;
}
.bar__line{
  font-size:13px; color:var(--color-text-tertiary);
  letter-spacing:-.01em; text-align:right;
  /* Without this it wraps long before it runs out of room: two flex
     items shrink proportionally, so the one that CAN break does, even
     while there is space to spare. The Lumio nav never shows this
     because its right hand side is a button. */
  white-space:nowrap;
}

/* ── Dark bar variant ────────────────────────────────────
   Add class="bar bar--dark" on the header to try it.

   My advice is to leave it off. Light means "the company" and dark
   means "a product" on this family of sites, which is what makes the
   change of background say something when you click through. A dark
   bar here blurs that. It is also the heaviest thing on a page whose
   content is three quiet links, so the chrome ends up louder than
   what it frames. Apple's own global nav follows the page rather
   than contrasting with it.

   Colours are chosen, not guessed. At .88 over #fbfbfd the bar
   composites to about #38383a. White text measures 10.75:1 there and
   the tagline at #a1a1a6 measures 4.55:1, just over the floor.
   --color-text-tertiary would be 3.23:1 and fails, so it is not used. */
.bar--dark{
  background:rgba(29,29,31,.88);
  border-bottom-color:transparent;
}
.bar--dark .bar__name{ color:#f5f5f7; }
.bar--dark .bar__line{ color:#a1a1a6; }

/* Short enough to centre on a large screen, scrolls normally on a small one. */
.page{
  min-height:100svh;
  display:flex; align-items:center;
  padding:calc(52px + 60px) 0 80px;
}
.wrap{ width:88%; max-width:760px; margin-inline:auto; }

/* ── Products ────────────────────────────────────────────
   Each is a single link, so the whole block is the target rather
   than a small "read more" at the end of it. On light, a card
   that lifts to white reads better than a rule that darkens. */
.products{ display:flex; flex-direction:column; gap:2px; }
.product{
  display:block;
  padding:28px 26px;
  border-radius:14px;
  border:1px solid transparent;
  transition:background .2s, border-color .2s;
}
.product:hover{
  background:var(--color-bg-raised);
  border-color:var(--color-hairline);
}

.product__platform{
  display:block;
  font-size:11px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--color-text-tertiary);
  margin-bottom:8px;
}
.product__name{
  font-family:var(--font-display);
  font-size:24px; font-weight:600; letter-spacing:-.015em;
  color:var(--color-text-primary);
}
.product__line{
  margin-top:8px; max-width:56ch;
  font-size:16px; color:var(--color-text-secondary);
  letter-spacing:-.01em; line-height:1.6;
}
.product__link{
  display:inline-block; margin-top:14px;
  font-size:13px; color:var(--color-text-tertiary);
  letter-spacing:-.01em;
  transition:color .2s;
}
.product:hover .product__link{ color:var(--color-action); }

/* ── Foot ────────────────────────────────────────────────── */
.foot{
  margin-top:56px; padding-top:28px;
  border-top:1px solid var(--color-hairline);
}
.foot p{ font-size:14px; color:var(--color-text-secondary); }
.foot__legal{ margin-top:10px; font-size:13px; color:var(--color-text-tertiary); }

/* Looks like the text around it, declares itself on hover. Sets no
   font-size: it inherits from whatever paragraph it sits in. */
.link-quiet{ color:inherit; transition:color .15s; }
.link-quiet:hover{ color:var(--color-action); }

/* The name steps down where the Lumio nav steps down, 833px, and by the
   same amount. Same wordmark on two sites, so it should not behave
   differently depending on which one you are looking at. */
@media (max-width:833px){
  .bar__name{ font-size:19px; }
  /* The product names step down with it. If only the bar shrinks, the
     wordmark ends up smaller than the headings underneath it and the
     page tips out of balance. */
  .product__name{ font-size:22px; }
}

@media (max-width:600px){
  .page{ align-items:flex-start; padding:calc(52px + 40px) 0 56px; }
  .product{ padding:24px 18px; }
  .bar__line{ font-size:12px; }
}

/* The narrowest phones. Both tighten a little and the gap closes, which
   is enough to keep the two on one line. Nothing is hidden and nothing
   wraps: without the line the page says nowhere what the company does,
   and a wrapped bar looks broken rather than tight.

   Measured at 320px: the inner column is 282px, the name about 112px,
   the line about 154px, and 12px of gap. It fits, with little to
   spare. If the wording ever grows, this is what gives first. */
@media (max-width:380px){
  .bar__inner{ gap:12px; }
  .bar__name{ font-size:18px; }
  .bar__line{ font-size:11px; }
}