/* The folklore card.
 *
 * Hand-written, like _ours.css and _listing.css: no design file draws it. Its
 * mock is the deck at /design-2026/folklore-cards-3/, and the rules below are
 * lifted from that deck's own stylesheet rather than re-typed, so the card on
 * the shelf is the card Jack looked at.
 *
 * What was settled, from docs/FEEDBACK.md:
 *   - it follows the approved history card (S12) closely: the same frame, the
 *     same band over a colour picture
 *   - it carries the title and nothing else. No creature word, no category
 *     word, no first letter, no region, no reading time
 *   - it is always a film, and the film plays all the time
 *
 * `hc-` is the deck's prefix and nothing else on /stories uses it - checked
 * against every sheet the page loads before a line of this was written.
 *
 * The title treatment is T1, Solid. The deck offered ten (T1 solid, T2 cream
 * lines, T3 dots, T4 outline, T5 capitals, T6 larger, T7 gold lines, T8
 * sea-green lines, T9 light, T10 italic) and none was ever chosen, so this
 * takes the plainest of them and says so in docs/decisions.md. Changing it is
 * one class on the card.
 */

/* The deck drew the card at 3/4, in a row of its own. On the shelf it stands in
   the same grid as every other card on the site, which is --tall (1080/1337),
   and a row mixing the two is ragged by about forty pixels. So it takes the
   shelf's proportion. Nothing else about the card changes, and the difference
   between the two is under eight per cent. */
.hc-card {
    position: relative;
    display: block;
    aspect-ratio: var(--tall, 1080/1337);
    overflow: hidden;
    background: #2b301d;
    text-decoration: none;
    color: #efe9dd;
    /* ITS WORDS ARE SIZED BY THE CARD, NOT THE WINDOW (Jack, 11 October 2026: "make sure the text fonts are
       consisteant - i think folklore should be larger font - and the title larger too - the lost cows of pabbay is
       correct, all should match this exactly"). Every size below is a share of the card's own width (cqi), so a
       card is lettered the same on the shelf, in a Library room and in a feed row. */
    container-type: inline-size;
}

.hc-pic {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.6s var(--ease);
}

.hc-card:hover .hc-pic { transform: scale(1.035); }

/* in a Library room the card stands in the room's own grid, whose cards are 4:5 (11 October 2026) */
.lr-grid .hc-card { aspect-ratio: 4 / 5; }
/* in a feed post's row it is one of the row's cards, at the row's picture shape */
.hc-card.fd-card { aspect-ratio: var(--fd-shape, 4 / 5); }

/* The picture keeps its colour. The history card greys its archive photographs;
   the folk tales are film of weather and water and go in as they were shot. */
.hc-pic-colour { filter: none; }

/* The band. It is a gradient rather than a painted panel so it has no edges -
   the same rule the tale pages follow, where nothing on the page has a hard
   border. Its numbers are the deck's. */
.hc-veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(8, 8, 7, 0) 10%,
        rgba(8, 8, 7, .80) 33%,
        rgba(8, 8, 7, .80) 67%,
        rgba(8, 8, 7, 0) 90%);
}

.hc-words {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 44px 34px;
}

/* The double frame, inset from the edge and drawn twice. */
.hc2::before {
    content: "";
    position: absolute;
    inset: 12px;
    z-index: 3;
    pointer-events: none;
}

.hc-f-double::before {
    border: 1px solid rgba(239, 233, 221, .78);
    outline: 1px solid rgba(239, 233, 221, .78);
    outline-offset: -6px;
}

/* The word, above the title.
 *
 * Jack, 26 September: "maybe we can have the words FOLKLORE in gold lines and then
 * the title, similar to the history s12 card". S12 puts the year large, filled with
 * diagonal red lines and outlined; this is the same idea in gold, small, sitting
 * over a title that keeps the room - F2 from /design-2026/folklore-cards-4/ at the
 * size S15 from /design-2026/folklore-cards-5/.
 *
 * The stripe is painted through the letters and an outline holds their shape. That
 * outline is not decoration: without it the light and dark bands of the stripe land
 * on each other and the word reads as grey, which is what was wrong at 10.5px.
 *
 * 15px flat, not scaled to the card. The sheet's cards are 358px and the shelf's are
 * 300px, so scaling it would put the word back at 12.6px - the size that was hard to
 * read. Legibility is absolute, not a proportion of what it sits on.
 *
 * `fc-` is this element's own prefix, from the sheet it was chosen on. Checked
 * against every stylesheet /stories loads before it was used. */
/* SOLID, IN THE SITE'S OWN LABEL AND THE BRAND GOLD (Jack, 11 October 2026: "can we change the text of folklore to
   our own font style - and use our new branding colours"). The diagonal lines and the outline were the card deck's
   own lettering, used nowhere else on the site; the word is now set as every small label is (Jost, capitals,
   tracked), solid, in gold #C08C3D, at 14px so it reads at a glance on the dark band. */
.fc-kind {
    display: block;
    /* 18px on a 440px card, 15px on the shelf's 300, never under 14 */
    font: 600 clamp(14px, 4.1cqi, 19px)/1 var(--sans);
    text-transform: uppercase;
    letter-spacing: .24em;
    /* letter-spacing hangs off the last letter, which shifts a centred line left by
       half of it; the indent puts it back. */
    text-indent: .24em;
    color: #C08C3D;
    -webkit-text-stroke: 0;
    background: none;
    margin-bottom: 14px;
}

/* The title, and the word above it.
 *
 * The deck's cards were captioned "Apparition of Arran" and sized for it. The
 * real shelf carries "The Legend of Rosslyn Chapel's Apprentice Pillar", so the
 * size steps down as the title gets longer - see the length classes below,
 * which the card sets from its own word count. Without them a long title either
 * overflows the frame or has to be cut, and a folklore card that cuts its title
 * carries nothing at all. */
.ft-t {
    display: block;
    /* ONE SIZE FOR EVERY TITLE, long or short: "The Lost Cows Of Pabbay" is 46px on a 440px card, and a longer
       title takes more lines at that size rather than smaller type */
    font: 300 min(clamp(20px, 10.5cqi, 48px), 28px + (clamp(20px, 10.5cqi, 48px) - 28px) * 0.6)/1.06 var(--face);
    letter-spacing: -.01em;
    /* the brand's shell, the pale the site sets words in over a dark ground */
    color: #F9F5EE;
    text-wrap: balance;
    /* The same shadow the tale page gives its heading over film. It does nothing
       on a dark card and holds the title together on a bright one. */
    text-shadow: 0 2px 26px rgba(0, 0, 0, .55);
}

/* the length steps are gone: they made every card a different size (11 October 2026) */

@media (max-width: 1000px) {
    .hc-words { padding: 30px 22px; }
}

@media (max-width: 600px) {
    .hc2::before { inset: 9px; outline-offset: -5px; }
    .hc-words { padding: 22px 16px; }
    /* Two cards to a row here, so they are about 180px wide. */
}

@media (prefers-reduced-motion: reduce) {
    .hc-pic { transition: none; }
    .hc-card:hover .hc-pic { transform: none; }
}

/* The history card: the year where folklore has the word.
 *
 * Jack asked whether the cards were done for history. They were not - history has
 * been on the plain square since the shelf was made. The card designed for it is
 * S12, and what S12 does is put the YEAR where this card puts FOLKLORE. Now that
 * every history piece carries a date, it can be drawn.
 *
 * Oxblood lines instead of gold, which is how a reader tells a tale from a piece
 * of history without reading anything at all. Digits do not need the tracking a
 * nine-letter word does, and four of them can be larger without shouting.
 */
.fc-year {
    display: block;
    /* the year by the card too: 115px on a 440px card */
    width: clamp(78px, 26cqi, 120px);
    height: auto;
    margin: 0 auto 14px;
    overflow: visible;
    /* SOLID SKY, NOT OXBLOOD LINES (11 October 2026, with the folklore word): maroon lines on the dark band could
       hardly be read ("1840", "1399" were near invisible). The brand's sky #A0BAD4 reads clearly and is still a
       different colour from folklore's gold, so the two are told apart without reading. */
    color: #A0BAD4;
}

/* the hatched pattern the component paints through the digits is overruled: a CSS fill beats the attribute */
.fc-year text {
    font-family: var(--face);
    font-weight: 400;
    font-size: min(118px, 28px + (118px - 28px) * 0.6);
    letter-spacing: .01em;
    fill: currentColor;
    stroke: none;
}

/* A history piece with no date falls back to the word, in the same sky, so the top line of the card is never
   simply missing. */
.fc-hist .fc-kind {
    color: #A0BAD4;
}

@media (max-width: 1000px) {
    .fc-year { margin-bottom: 11px; }
}

@media (max-width: 600px) {
    .fc-year { margin-bottom: 9px; }
}