/* ═══════════════════════════════════════════════════════════════════════
   WAREWISP — THE FAITHFUL CARD  (owner direction, 2026-09-28)

   "The current cards do not deliver the finished illustrated style I
   approved." This is the finish: sculpted gold, deep teal enamel, warm
   parchment, elegant lettering.

   ── WHAT THIS IS NOT ───────────────────────────────────────────────────
   It is not a new card. The app's card already has the right ANATOMY — a
   curved name banner, a picture window, an information plate, a footer with
   a seal — built by js/guild.cards.js render(), carrying editing, the media
   carousel, the lifecycle accordion, threads and actions. All of that keeps
   working. What was missing was MATERIALS, so this replaces the materials
   and touches neither the markup nor the behaviour.

   Every part stays its own layer with live text, per the owner's explicit
   requirement: frame, banner, picture, parchment and buttons are separate,
   and a flattened generated card is never used as the interface.

   ── HOW THE FRAME IS PAINTED ───────────────────────────────────────────
   border-image, from one 9-slice sheet composed out of the kit's eight
   separate slices (assets/cards/reference/frame/). This is the only way a
   sculpted corner survives a resizable card: border-image paints corners at
   their natural size and repeats only the rails. Stretching a corner was
   explicitly forbidden, and a tiled background would show the fractional
   hairlines the owner flagged.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --cardk: 'assets/cards';
  /* The corner is 227x430 in the sheet; drawn here at a size that keeps its
     proportion. Scales with the card through a clamp rather than a media
     query, so a phone and a television get the same object. */
  --gc-corner-w: clamp(46px, 13.5cqw, 74px);
  --gc-corner-h: calc(var(--gc-corner-w) * 1.894);   /* 430 / 227 */
}

/* ── THE FRAME ─────────────────────────────────────────────────────────── */
.guild-card {
  container-type: inline-size;
  position: relative;
  border-style: solid;
  border-width: var(--gc-corner-h) var(--gc-corner-w);
  border-image-source: url('../assets/cards/reference/frame-9slice.webp');
  border-image-slice: 430 227;          /* no `fill`: the card's own face shows */
  border-image-width: var(--gc-corner-h) var(--gc-corner-w);
  border-image-repeat: repeat;
  border-radius: 0;
  background-clip: padding-box;
}
/* The drawn corners the old frame used are now painted by the border-image;
   leaving both would double every corner. */
.guild-card > .gc-corner { display: none; }

/* The frame's rails are tall, and the content must not sit inside that
   inset or a phone card would have no room left. It is pulled back out
   over the rails, which is what the reference does too. */
.guild-card > .gc-name-band,
.guild-card > .gc-faces {
  margin-left: calc(var(--gc-corner-w) * -0.62);
  margin-right: calc(var(--gc-corner-w) * -0.62);
}
.guild-card > .gc-name-band { margin-top: calc(var(--gc-corner-h) * -0.72); }
.guild-card > .gc-faces { margin-bottom: calc(var(--gc-corner-h) * -0.72); }

/* ── THE BANNER ────────────────────────────────────────────────────────── */
/* The curved name path and its live text are the app's own and stay exactly
   as they are; this puts the kit's sculpted cloth behind them. */
/* THE BANNER USES THE APP'S OWN SEAM.
   main.css already drives the ribbon from two custom properties —
   `--band-img` and `--band-ar` — and paints it `100% auto` so the cloth keeps
   its proportion and its curve. Fighting that with a background of my own
   just lost to specificity and would have squashed the folds anyway. Setting
   the two variables is the whole change; the family rules below do it. */
.gc-name-band { --band-ar: 780 / 244; }
.gc-name-band > svg { position: relative; z-index: 1; }
.gc-name { position: relative; z-index: 2; }

/* ── THE PICTURE WINDOW ────────────────────────────────────────────────── */
/* Framed, never cropped out of proportion: object-fit keeps a maker's own
   photograph and a fantasy illustration alike in their true shape. */
.gc-media {
  background-image: var(--gc-art, none);
  background-size: cover; background-position: center 30%;
  border: 3px solid #c2a267;
  box-shadow: 0 0 0 2px #3c3020, 0 0 0 4px #8e713d, inset 0 0 18px rgba(0,0,0,.45);
  background: #102521;
  overflow: hidden;
}
.gc-media-shot { width: 100%; height: 100%; object-fit: cover; }

/* A record with no picture of its own gets its family's illustration rather
   than an empty grey box — but a maker's own image always wins, because this
   only ever paints the EMPTY state. */
.gc-media.gc-media--empty {
  background: var(--gc-art, url('../assets/cards/art/portrait-artisan.webp'))
              center 30% / cover no-repeat;
  position: relative;
  min-height: clamp(140px, 42cqw, 230px);
}
.gc-media.gc-media--empty::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,16,18,0) 45%, rgba(4,16,18,.72) 100%);
}
.gc-media.gc-media--empty .gc-media-invite { position: relative; z-index: 1; }

/* ── THE PARCHMENT PANELS ──────────────────────────────────────────────── */
/* border-image with `fill` paints each panel in ONE pass. The owner flagged
   hairlines between parchment slices; a tiled background is exactly what
   produces them at fractional sizes, and this cannot. */
.gc-plate {
  border-style: solid;
  border-width: 19px;
  border-image-source: url('../assets/cards/reference/panel.webp');
  border-image-slice: 65 65 fill;
  border-image-width: 19px;
  background: none;
  color: #2b1d0c;
}
.gc-plate .gc-facts,
.gc-plate .gc-flavor { color: #3a2a14; }
.gc-plate .gc-needs { color: #2b1d0c; }

/* The type/stage line reads as small pinned tags. */
.gc-type-line .gc-type-chip,
.gc-type-line .gc-stage-chip {
  border-style: solid; border-width: 14px 18px;
  border-image-source: url('../assets/cards/reference/tag.webp');
  border-image-slice: 65 85 fill;
  border-image-width: 14px 18px;
  background: none;
  color: #2b1d0c;
  padding: 0 2px;
}

/* ── THE FOOTER SEAL ───────────────────────────────────────────────────── */
.gc-seal {
  background: url('../assets/cards/reference/medallion.webp') center / contain no-repeat;
  filter: drop-shadow(1px 2px 2px rgba(0,0,0,.5));
}
.gc-seal .gc-guildmark { opacity: 0; }   /* the medallion carries the mark now */

/* ── THE FAMILY ORNAMENT ───────────────────────────────────────────────── */
/* Small, tailored, and decorative only — aria-hidden by construction,
   pointer-transparent, and never over the text it sits beside. */
.gc-unit[data-gc-fam]::after {
  content: '';
  position: absolute; right: 2%; bottom: 9%;
  width: clamp(34px, 11cqw, 58px); aspect-ratio: 1 / 1.35;
  background: var(--gc-ornament, none) center / contain no-repeat;
  pointer-events: none; opacity: .92; z-index: 5;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.55));
}
/* On a narrow phone the ornament competes with the content it decorates. */
@container (max-width: 300px) { .gc-unit[data-gc-fam]::after { display: none; } }

/* ── THE FAMILIES ──────────────────────────────────────────────────────── */
/* The app's own family names on the left, the art kit's on the right. The
   kit was drawn against a thirteen-family list; these are the families this
   application actually has, which is the list that wins. A family with no
   art of its own inherits the defaults above rather than being invented. */
.gc-unit[data-gc-fam="customer"] {
  --gc-banner: url('../assets/cards/reference/banners/contact.webp');
  --gc-art: url('../assets/cards/art/portrait-artisan.webp');
  --gc-ornament: url('../assets/cards/ornaments/contact/1.webp'); }
.gc-unit[data-gc-fam="piece-product"] {
  --gc-banner: url('../assets/cards/reference/banners/piece.webp');
  --gc-art: url('../assets/cards/art/ranger-mug.webp');
  --gc-ornament: url('../assets/cards/ornaments/piece/1.webp'); }
.gc-unit[data-gc-fam="piece-product"] .guild-card.gc--product {
  --gc-banner: url('../assets/cards/reference/banners/product.webp');
  --gc-art: url('../assets/cards/art/wrapped-product.webp'); }
.gc-unit[data-gc-fam="batch"] {
  --gc-banner: url('../assets/cards/reference/banners/batch.webp');
  --gc-art: url('../assets/cards/art/batch-pottery.webp');
  --gc-ornament: url('../assets/cards/ornaments/batch/1.webp'); }
.gc-unit[data-gc-fam="show"] {
  --gc-banner: url('../assets/cards/reference/banners/show.webp');
  --gc-art: url('../assets/cards/art/show.webp');
  --gc-ornament: url('../assets/cards/ornaments/show/1.webp'); }
.gc-unit[data-gc-fam="campaign"] {
  --gc-banner: url('../assets/cards/reference/banners/campaign.webp');
  --gc-art: url('../assets/cards/art/campaign-megaphone.webp');
  --gc-ornament: url('../assets/cards/ornaments/campaign/1.webp'); }
.gc-unit[data-gc-fam="shipment"] {
  --gc-banner: url('../assets/cards/reference/banners/shipping.webp');
  --gc-art: url('../assets/cards/art/shipping-trunk.webp');
  --gc-ornament: url('../assets/cards/ornaments/shipping/1.webp'); }
.gc-unit[data-gc-fam="storeroom"] {
  --gc-banner: url('../assets/cards/reference/banners/storeroom.webp');
  --gc-art: url('../assets/cards/art/storeroom.webp');
  --gc-ornament: url('../assets/cards/ornaments/storeroom/1.webp'); }
.gc-unit[data-gc-fam="store"] {
  --gc-banner: url('../assets/cards/reference/banners/portal.webp');
  --gc-art: url('../assets/cards/art/portal.webp');
  --gc-ornament: url('../assets/cards/ornaments/portal/1.webp'); }
.gc-unit[data-gc-fam="journey"] {
  --gc-banner: url('../assets/cards/reference/banners/journey.webp');
  --gc-art: url('../assets/cards/art/journey.webp');
  --gc-ornament: url('../assets/cards/ornaments/journey/1.webp'); }
.gc-unit[data-gc-fam="loot"] {
  --gc-banner: url('../assets/cards/reference/banners/treasury.webp');
  --gc-art: url('../assets/cards/art/treasury.webp');
  --gc-ornament: url('../assets/cards/ornaments/treasury/1.webp'); }
.gc-unit[data-gc-fam="booking-service"] {
  --gc-banner: url('../assets/cards/reference/banners/order.webp');
  --gc-art: url('../assets/cards/art/deck-order.webp');
  --gc-ornament: url('../assets/cards/ornaments/order/1.webp'); }
.gc-unit[data-gc-fam="venture"] {
  --gc-banner: url('../assets/cards/reference/banners/supplier.webp');
  --gc-art: url('../assets/cards/art/supplier.webp');
  --gc-ornament: url('../assets/cards/ornaments/supplier/1.webp'); }

/* ── REDUCED MOTION ────────────────────────────────────────────────────── */
/* Nothing here animates, so there is nothing to switch off — recorded so a
   later hand does not add motion to a card and assume it is covered. */
@media (prefers-reduced-motion: reduce) { .guild-card { transition: none; } }

/* The app reads --band-img; these are the finished ribbons for it. */
[data-gc-fam="customer"] .gc-name-band { --band-img: url('../assets/cards/reference/banners/contact.webp');  --band-ar: 780 / 244; }
[data-gc-fam="piece-product"] .gc-name-band { --band-img: url('../assets/cards/reference/banners/piece.webp');  --band-ar: 780 / 244; }
[data-gc-fam="batch"] .gc-name-band { --band-img: url('../assets/cards/reference/banners/batch.webp');  --band-ar: 780 / 244; }
[data-gc-fam="show"] .gc-name-band { --band-img: url('../assets/cards/reference/banners/show.webp');  --band-ar: 780 / 244; }
[data-gc-fam="campaign"] .gc-name-band { --band-img: url('../assets/cards/reference/banners/campaign.webp');  --band-ar: 780 / 244; }
[data-gc-fam="shipment"] .gc-name-band { --band-img: url('../assets/cards/reference/banners/shipping.webp');  --band-ar: 780 / 244; }
[data-gc-fam="storeroom"] .gc-name-band { --band-img: url('../assets/cards/reference/banners/storeroom.webp');  --band-ar: 780 / 244; }
[data-gc-fam="store"] .gc-name-band { --band-img: url('../assets/cards/reference/banners/portal.webp');  --band-ar: 780 / 244; }
[data-gc-fam="journey"] .gc-name-band { --band-img: url('../assets/cards/reference/banners/journey.webp');  --band-ar: 780 / 244; }
[data-gc-fam="loot"] .gc-name-band { --band-img: url('../assets/cards/reference/banners/treasury.webp');  --band-ar: 780 / 244; }
[data-gc-fam="booking-service"] .gc-name-band { --band-img: url('../assets/cards/reference/banners/order.webp');  --band-ar: 780 / 244; }
[data-gc-fam="venture"] .gc-name-band { --band-img: url('../assets/cards/reference/banners/supplier.webp');  --band-ar: 780 / 244; }
.gc--product .gc-name-band { --band-img: url('../assets/cards/reference/banners/product.webp'); --band-ar: 780 / 244; }

/* ── THE NAME ON THE CLOTH ─────────────────────────────────────────────── */
/* Every ribbon in this kit is deep teal enamel, so the name is cream on all
   of them. main.css set a WHITE drop-shadow for batch/library/raw-piece —
   correct when those families wore a pale cloth, and unreadable now that
   they do not. Dark shadow, so the lettering sits on the enamel. */
[data-gc-fam] .gc-name-band { --band-ink: #F6E7C4; }
[data-gc-fam] .gc-name-band .gc-name-curve text,
[data-gc-fam="batch"] .gc-name-band .gc-name-curve text,
[data-gc-fam="library"] .gc-name-band .gc-name-curve text,
[data-gc-fam="piece-product"] .gc-band--raw .gc-name-band .gc-name-curve text {
  fill: #F6E7C4;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.75));
}
/* The flat ledger heading keeps the same treatment for the families that
   show it instead of the curve. */
[data-gc-fam] .gc-name-band .gc-name { color: #F6E7C4; text-shadow: 0 1px 2px rgba(0,0,0,.7); }