/* ============================================================================
   QUILL & COMPASS — CUT-PAPER ORNAMENT SYSTEM
   Drop-in ornaments. Palette comes from tokens.css (the shared firewall) —
   this file declares NO colour of its own, only ornament-level aliases.
   All classes prefixed qc-. CSS + inline SVG only. No external assets.
   Decorative SVG must carry aria-hidden="true" (see usage).

   Grammar: a 16th-c. woodcut on parchment. Ornaments are PRINTED — flat
   iron-gall line-work with the rubricator's red for the small jewel marks.
   Depth comes from flat shapes, hard edges and press texture; there are no
   glows, no specular highlights and no engraved grooves anywhere below.
   ============================================================================ */

/* ---- shared ornament tints (aliases onto the shared tokens) ---------------
   These four names are consumed ONLY inside this file; the .qc-fil /
   .qc-fil--soft / .qc-flame / .qc-corner__bead classes in the page markup
   reach them through the rules below. */
:root{
  --qc-fil-line: var(--ink-500);      /* the printed hairline — iron-gall line art */
  /* second-pass lighter ink for inner detail. The first declaration is the
     fallback for engines without color-mix(); the second wins where supported. */
  --qc-fil-soft: var(--paper-500);
  --qc-fil-soft: color-mix(in srgb, var(--ink-500) 45%, transparent);
  --qc-fil-accent: var(--rubric);     /* rubricator's red — beads and motif hearts */
  --qc-paper-face: var(--paper-100);  /* the cut sheet, laid on the page ground */
  /* the soft warm cast a real paper cut-out throws. NOT a glow: no spread,
     tight offset, warm ink at low alpha. */
  --qc-paper-cast: var(--paper-deep);
  --qc-paper-cast: color-mix(in srgb, var(--ink-900) 16%, transparent);
}

/* ===========================================================================
   1) CORNER FLOURISH  —  one SVG, mirrored to all four corners
   The SVG (.qc-corner) is authored for the TOP-LEFT corner. The three
   sibling rotations below flip/rotate the same artwork into place.
   Place four .qc-corner elements as children of a position:relative panel.
   =========================================================================== */
.qc-corner{
  position:absolute; width:clamp(34px,6vw,58px); height:clamp(34px,6vw,58px);
  color:var(--qc-fil-line);          /* stroke inherits via currentColor */
  pointer-events:none; z-index:2; overflow:visible;
}
.qc-corner svg{display:block;width:100%;height:100%}
.qc-corner--tl{top:-1px;  left:-1px;  transform:rotate(0deg)}
.qc-corner--tr{top:-1px;  right:-1px; transform:scaleX(-1)}
.qc-corner--bl{bottom:-1px;left:-1px;  transform:scaleY(-1)}
.qc-corner--br{bottom:-1px;right:-1px; transform:scale(-1,-1)}
/* the bead at the inner curl — a single rubric dot, the way an illuminator
   marks a terminal. Flat fill, no halo. */
.qc-corner .qc-corner__bead{fill:var(--qc-fil-accent)}

/* ===========================================================================
   2) SECTION DIVIDER  —  printed rule + central motif
   <div class="qc-divider" role="separator" aria-hidden="true"> with the
   motif supplied INLINE per instance as an SVG inside .qc-divider__motif —
   flame, compass-rose, lozenge, whatever the page needs. There is no variant
   class: the earlier .qc-divider--rose / --diamond modifiers were documented
   here but never written, so they painted nothing. Anywhere they still appear
   in markup they are inert; the motif has always come from the inline SVG.
   Rules are pure CSS gradients.
   =========================================================================== */
.qc-divider{
  display:flex; align-items:center; gap:clamp(.7rem,2vw,1.4rem);
  width:min(46rem,90%); margin:clamp(2.4rem,6vh,4rem) auto;
  color:var(--qc-fil-line);
}
.qc-divider::before,.qc-divider::after{
  content:""; flex:1 1 0; height:1px;
  /* a printed rule: one flat line of ink, fading out at the outer ends the
     way a plate's inking thins. No groove, no highlight — paper is not metal. */
  background:
    linear-gradient(90deg,transparent,var(--qc-fil-line) 18%,var(--qc-fil-line) 82%,transparent);
}
.qc-divider::before{mask:linear-gradient(90deg,transparent,#000 30%)}
.qc-divider::after{ mask:linear-gradient(270deg,transparent,#000 30%)}
.qc-divider__motif{
  flex:0 0 auto; width:clamp(26px,4.5vw,40px); height:clamp(26px,4.5vw,40px);
  display:grid; place-items:center;
}
.qc-divider__motif svg{display:block;width:100%;height:100%}
/* the motif heart (flame in the default symbol, a small bead in the rose and
   lozenge) is the one rubric note in the rule — printed, static, silent. */
.qc-divider__motif .qc-flame{fill:var(--qc-fil-accent)}
.qc-divider__motif .qc-fil{fill:none;stroke:var(--qc-fil-line);stroke-width:1.1}
.qc-divider__motif .qc-fil--soft{stroke:var(--qc-fil-soft)}

/* ===========================================================================
   3) PANEL / CARD FRAME  —  a piece of cut paper laid on the page.
   This is the dominant surface of the site: every pitch card, every FAQ item
   and the founding card is a .qc-frame. It is NOT a rounded-rect-with-shadow
   and it is NOT glass. It is a lighter sheet than the page ground, with a
   hard ink edge, a second lighter rule inside it, and press grain across the
   face. Add four .qc-corner children for the filigree.
   =========================================================================== */
.qc-frame{
  position:relative; isolation:isolate;
  /* press grain multiplied into the paper face — the texture of a sheet run
     through a press, not an overlay effect. */
  background-color:var(--qc-paper-face);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.09'/%3E%3C/svg%3E");
  background-blend-mode:multiply;
  border:1px solid var(--qc-fil-line);       /* the cut edge, drawn in ink */
  /* the "double rule" of a manuscript border: a hair of blank paper, then a
     second lighter rule. Painted outside-in — the paper ring masks the top
     4px of the soft ring, leaving a 1px inner rule. */
  box-shadow:
    inset 0 0 0 4px var(--qc-paper-face),
    inset 0 0 0 5px var(--qc-fil-soft),
    /* the cast a cut-out throws. Tight, warm, low — visible on plain frames;
       .qc-frame--cut clips its own outer shadow away by design (see below),
       and gets its depth from the lighter face against the page ground. */
    /* Deepened from 2px to 3px to carry the lift the removed layer was doing. The
       removed layer was `0 10px 16px -12px` — a 16px blur radius, which the
       zero-blur-offset grammar outlaws. The comment above describes only this cast. */
    0 3px 0 -1px var(--qc-paper-cast);
  border-radius:2px;                          /* near-square, manuscript-ish */
  padding:clamp(1.4rem,3vw,2.4rem);
}
/* clipped/notched corners — a cut corner IS cut paper, so this survives the
   re-skin unchanged. Note: clip-path also clips the outer shadow above; that
   is correct here, a trimmed sheet sits flat. */
.qc-frame--cut{
  clip-path:polygon(
    14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),
    calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
}
/* the header hairline of an illuminated page */
.qc-frame__rule{height:1px;margin:0 0 1.1rem;
  background:linear-gradient(90deg,transparent,var(--qc-fil-line),transparent)}

/* ===========================================================================
   4) ILLUMINATED DROP-CAP  —  section opener, matching map.css's .dropcap.
   Wrap the first letter: <span class="qc-dropcap">T</span>he rest…
   Solid rubric red in the rubricator's face. Not gilt, not gradient-filled —
   a scribe laid this down in one colour with one pen.
   =========================================================================== */
.qc-dropcap{
  float:left; font-family:var(--font-rubric); font-weight:400;
  font-size:3.4em; line-height:.72;
  padding:.06em .14em 0 0;
  /* this cap is LIVE SENTENCE CONTENT — the "M" of "Most Game Masters…", not
     ornament — and it sits on the paper-300 ground where --rubric is 2.82:1,
     under even the 3:1 large-text bar. Same rubricated initial, darker plate: 5.18:1. */
  color:var(--rubric-deep);
}
/* optional hairline box around the cap, illuminated-manuscript style.
   Currently unused in markup; kept as the documented variant. */
.qc-dropcap--boxed{
  padding:.06em .16em .04em .1em; margin-right:.5rem;
  border:1px solid var(--qc-fil-line);
  background:var(--qc-paper-face);
  border-radius:2px;
}

/* ===========================================================================
   5) BUTTON CORNER ACCENTS  —  bracket the existing .btn-gold without
   restyling it. Wrap the button OR add the class to a relative wrapper.
   Uses ::before/::after as two L-brackets; corners drawn with borders.
   Printed registration marks, the way a plate is cornered on the sheet.
   =========================================================================== */
.qc-btn-accent{position:relative;display:inline-flex}
.qc-btn-accent::before,.qc-btn-accent::after{
  content:"";position:absolute;width:10px;height:10px;pointer-events:none;
  border:1px solid var(--qc-fil-line);
  transition:border-color .2s var(--calm);
}
.qc-btn-accent::before{top:-4px;left:-4px;border-right:0;border-bottom:0}
.qc-btn-accent::after{ bottom:-4px;right:-4px;border-left:0;border-top:0}
/* hover + keyboard focus both redden the marks — same affordance, no halo.
   Focus additionally thickens them so the cue does not rest on colour alone. */
.qc-btn-accent:hover::before,.qc-btn-accent:hover::after{
  border-color:var(--qc-fil-accent);
}
.qc-btn-accent:focus-within::before,.qc-btn-accent:focus-within::after{
  border-color:var(--rubric-deep);border-width:2px;
}

/* ===========================================================================
   MOTION  —  none. The ornament layer used to breathe (a 4.5s ember flicker
   on the divider motif); a flickering flame on a printed page is incoherent,
   so the motif is now a static printed mark and the keyframes + their
   prefers-reduced-motion override went with it. The only transition left is
   the 0.2s bracket colour above, which is safe under reduced motion.
   =========================================================================== */