/* ══════════════════════════════════════════════════════════════════
   LIQUA · HOUSE LAYER — the studio skin, dialled to 30%
   ──────────────────────────────────────────────────────────────────
   assets/l8-arcade.css is the house style: a chalkboard, paper with a
   tooth, hard ink borders, pop shadows, a hand that writes in the
   margins. Loaded at full strength it takes a page over — its palette
   is chalk and kraft, and this site is black, silver, blue and yellow.

   So this is the house style at THIRTY PERCENT: its character, none of
   its palette. The v3 look still decides every colour. What comes
   across is texture, the chalk rule under a section head, a very slight
   hand-drawn wobble on small furniture, and the margin note in Caveat.

   ONE KNOB. --house is the blend, 0 to 1. Everything below multiplies
   through it, so 0 is the clean Apple look with the file still linked
   and 1 is the full studio skin. It is 0.30 because that is what was
   asked for; change the one number to change the whole blend.

   Loaded AFTER liqua-v3.css so it can layer on top, and it deliberately
   sets no colours of its own beyond alpha over what is already there.
   Delete the one <link> to revert any page completely.
   ══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap');

:root{
  --house: .30;                       /* the blend · 0 = clean, 1 = full studio */
  --house-hand: 'Caveat', ui-rounded, cursive;
  /* alphas below are the full-strength values; each is multiplied by --house */
  --house-tooth: calc(var(--house) * .055);   /* paper grain over light ground */
  --house-dust:  calc(var(--house) * .075);   /* chalk dust over dark ground   */
  --house-rule:  calc(var(--house) * .55);    /* the chalk underline           */
  --house-pop:   calc(var(--house) * 4px);    /* the hard pop shadow           */
  --house-tilt:  calc(var(--house) * -0.55deg);
}

/* ── 1 · tooth and dust ────────────────────────────────────────────
   Paper has a tooth and a chalkboard holds dust. Both are the same
   trick — a fine noise laid over the ground — and at this strength you
   read it as material rather than as a pattern. Sits behind content and
   never intercepts a pointer. */
section, header.hero, .band, .live{ position: relative; }
section::after, header.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(rgba(255,255,255,.9) .6px, transparent .7px),
    radial-gradient(rgba(255,255,255,.6) .5px, transparent .6px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 2px 3px;
  opacity: var(--house-dust);
  mix-blend-mode: soft-light;
}
/* on the silver sections the same grain reads as paper, not chalk */
section:nth-of-type(even)::after{
  background-image:
    radial-gradient(rgba(0,0,0,.85) .6px, transparent .7px),
    radial-gradient(rgba(0,0,0,.55) .5px, transparent .6px);
  opacity: var(--house-tooth);
  mix-blend-mode: multiply;
}
section > *, header.hero > *{ position: relative; z-index: 1; }

/* ── 2 · the chalk rule under a section head ───────────────────────
   In the house style every section head sits under a stroke of chalk.
   Here it is one short rule, drawn in the section's own accent, with the
   uneven ends a chalk stick actually leaves. */
h2.sec::after, .doc h2::after{
  content:''; display:block; height:2px; width:clamp(46px, 7vw, 92px);
  margin-top:10px; border-radius:2px;
  background: linear-gradient(90deg,
    transparent 0%,
    currentColor 12%,
    currentColor 78%,
    transparent 100%);
  opacity: var(--house-rule);
}

/* ── 3 · the hand in the margins ───────────────────────────────────
   The house hand is Caveat, and it is allowed to write exactly one kind
   of thing: the aside. Never a heading, never a number, never a claim —
   a claim in handwriting reads as less true, which is the opposite of
   what this site is for. */
.hand, .chalknote, .aside-hand{
  font-family: var(--house-hand) !important;
  font-size: 1.18em; letter-spacing: .01em; line-height: 1.4;
  opacity: calc(.55 + var(--house) * .45);
}

/* ── 4 · furniture that knows it was made by hand ──────────────────
   A pop shadow and a fractional tilt on the small stuff only: chips,
   pills, tags. Cards keep the clean v3 geometry, because a page of
   tilted cards stops being readable. */
.chip, .tagchip, .pill, .lq-chip{
  box-shadow: var(--house-pop) var(--house-pop) 0 rgba(0,0,0,calc(var(--house) * .5));
}
.tagchip{ transform: rotate(var(--house-tilt)); }
.chip:nth-of-type(2n){ transform: rotate(calc(var(--house-tilt) * -1)); }

/* ── 5 · the seam ──────────────────────────────────────────────────
   Where the house style meets a section edge it leaves a torn deckle
   rather than a ruler line. One pixel of irregularity is enough at 30%. */
hr.lq-seam, .band + section::before{
  content:''; display:block; height:1px; border:0;
  background: repeating-linear-gradient(90deg,
    currentColor 0 6px, transparent 6px 9px,
    currentColor 9px 13px, transparent 13px 17px);
  opacity: calc(var(--house) * .32);
}

/* Inside an L8 OS window the page is already framed by the OS, so the
   house texture is one layer too many. */
.l8-embedded section::after,
.l8-embedded header.hero::after{ display:none; }

@media (prefers-reduced-motion: reduce){
  .tagchip, .chip:nth-of-type(2n){ transform:none; }
}
/* Printing a textured ground wastes ink and helps nobody. */
@media print{
  section::after, header.hero::after{ display:none; }
}