/* ============================================================ this site's ==
   THE ONLY STYLESHEET THAT BELONGS TO THE SITE RATHER THAN THE FRAMEWORK.

   site.css is ours. A release replaces it wholesale, and only when the site has
   not touched it — so the moment a site edits one rule in there, that file is a
   hand-merge on every release from then on, for ever. Crafting Realm's ended up
   466 lines adrift and the planner would not go near it. Three rules should not
   cost that.

   This file is on the release system's SITE_OWNED list, beside server/site.ts
   and script/seed-site.ts. Nothing upstream will ever replace it, and it is
   loaded AFTER site.css, so anything here wins without needing !important.

   WHAT BELONGS HERE: an override that is true of this client and no other —
   their traders' logos must not be cropped, their gallery wants smaller tiles,
   they call the people on a page something else.

   WHAT DOES NOT: anything any other site would also want. That is a framework
   change, and it goes upstream so every site gets it. The test is simple — if
   you can imagine writing the same rule again on the next site, write it in the
   framework instead.

   Empty, nothing is linked at all: a site with nothing of its own does not pay
   for the request.
   ========================================================================== */

/* A TRADER'S PICTURE IS A LOGO, AND A LOGO MUST NOT BE CROPPED. These are
   wordmarks — 1200x215, 337x33 — and `cover` in a square tile slices the name
   out of the middle of them. So the whole thing is shown inside the square with
   room around it, on a plain ground: a letterboxed logo reads correctly, a
   cropped one reads as somebody else.

   This is the one that has to stay ours. Every other site's people are
   photographs of faces, and `cover` is right for those. */
.person img{object-fit:contain; padding:14%; background:var(--surf); border:1px solid var(--line)}

/* Four tiles, not thirty. A show's gallery holds a handful of pictures and the
   framework's 200px minimum leaves them looking sparse across a wide page. */
.gallery-grid.fill{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

/* The people on a show page are TRADERS here, and the markup says so. Same rule
   as the framework's .people-here, under the name this site's views use. */
.traders-here{border-top:1px solid var(--line); margin-top:56px; padding-top:8px}

/* EVERY CARD PICTURE ON THIS SITE IS CROPPED FROM THE TOP, at every width.

   These are show posters — 500x500, with the show's name across the top third
   — and the card frame is 4:3. A centred crop therefore takes the title off
   and leaves the floor of the hall, which is the wrong half of a poster to
   keep.

   IT IS NOT SCOPED TO A PHONE ANY MORE, and the reason is worth keeping. This
   rule used to sit inside `@media (max-width:640px)` because the crop was
   only ever reported from a phone — and it could not be reproduced on a
   desktop, so it read as a mobile-only fault. It was not: `.card-media` was
   taking the picture's own shape in Chrome and the declared 4:3 in Safari,
   so the crop was real on one browser and absent on the other at the SAME
   width. The framework makes that 4:3 everywhere as of 1.41.2, which means
   the crop now happens everywhere and so must this. */
.card-media img{object-position:top}

/* A VENUE NAME IS A LABEL, NOT A HEADLINE. The framework's h1 runs to 3.9rem,
   which is right for a page whose title is the thing being said — a show, an
   article. A venue page is reference: the name is how you know you are in the
   right place, and the address, directions and parking under it are what the
   visitor came for. At full size "Leigh Sports Village" filled the width and
   pushed the address down the page.

   Kept on the framework's own scale, `* var(--dsc,1)`, so it still follows the
   display-size setting in the admin rather than pinning one size. Roughly h2. */
.venue-page h1{font-size:calc(clamp(1.8rem,1.2rem + 1.8vw,2.6rem) * var(--dsc,1))}

/* ROOM BETWEEN THE NAME AND THE PICTURES. The framework sets margin:0 on every
   heading and margin:0 on .where-shot/.where-map, which is right where a
   parent decides the rhythm — but nothing was deciding it here, so the two sat
   flush and the descender of "Leigh Sports Village" touched the photograph.
   On the framework's own spacing scale rather than a fixed gap. */
.venue-page .where-pair{margin-top:clamp(20px,2.5vw,32px)}

/* ============================================================== the two strands ==
   Two named ways in under the hero: the next Paper Craft & Stamping Show and
   the next Sincerely Yours date. Which is which is decided by venue, in
   SHOW_STRANDS in server/site.ts — both files are this site's, so the pair
   travel together and no release touches either.

   THE COLOURS ARE THE TWO BRANDS' OWN, which is exactly why they are here and
   not in the framework: gold is the museum series, pink is Sincerely Yours.
   They are written as their own custom properties rather than inline, so the
   two names are said once. */
:root{
  /* The two brand colours, now carrying the EDGE rather than the fill. */
  --strand-gold:#C8922A;
  --strand-pink:#C2247C;
  /* The fills: the same two hues taken right down, so the pair still read as
     gold and pink at a glance without shouting over the section beneath. */
  --strand-gold-bg:#FBF1DD;
  --strand-pink-bg:#FBE6F1;
  /* Ink is the page's own, not white: on a pastel, white fails contrast and
     black is heavier than it needs to be. */
  --strand-gold-ink:#4A3510;
  --strand-pink-ink:#4A0F30;
  /* THE DATE NEEDS ITS OWN GOLD, and this is measured rather than picked.
     The brand gold on the pale gold fill is 2.46:1 — under the 3:1 that even
     large text needs, so the one line somebody actually reads would have been
     the one they could not. Taken down to 4.93:1, which clears AA for normal
     text, never mind large. The pink needed nothing: it lands at 4.61:1 as it
     is. The STROKE stays the true brand colour on both — it carries no words. */
  --strand-gold-text:#8A6115;
}

.strand-row{margin-top:14px; display:flex; gap:10px; flex-wrap:wrap}

/* The name above, the date under it — two lines, because a show's name and its
   date fight for the same room on one. */
.strand-btn{
  display:inline-flex; flex-direction:column; align-items:flex-start;
  gap:2px; line-height:1.15; text-align:left;
}
.strand-name{font-weight:700}
.strand-date{font-size:.85em; opacity:.85}

.strand-gold{background:var(--strand-gold); border-color:var(--strand-gold); color:var(--strand-gold-ink)}
.strand-pink{background:var(--strand-pink); border-color:var(--strand-pink); color:var(--strand-pink-ink)}
.strand-gold:hover{filter:brightness(1.07)}
.strand-pink:hover{filter:brightness(1.07)}

/* ON A PHONE EVERY BUTTON UNDER THE HERO LINES UP DOWN THE MIDDLE. Left-aligned
   they stagger — a wide one, a narrow one, a pair that wrap — and the column
   reads as ragged rather than as a set of choices. This centres the hero's own
   row and the strand row together, and centres the two lines inside each
   strand button so the name and its date share a middle. */
@media (max-width:640px){
  .hero .btn-row,
  .strand-row{justify-content:center; text-align:center}
  .strand-btn{align-items:center; text-align:center}
}

/* Two boxes rather than two more buttons. Over the hero photograph these read
   as a fifth and sixth button in a row nobody finishes; in their own band they
   are two doors. Each says the series, when, and WHICH HALL — "is it the one
   near me" is the question that follows the name. */
.strand-band{padding:clamp(22px,3vw,34px) 0 0}
/* NARROWER, AND NOT STRETCHED. auto-fit with 1fr gave each box half of a
   1240px shell — two banners, not two doors. Capped at 320px so they stay the
   size of the thing they are: a date you can tap. */
.strand-boxes{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,348px));
  gap:clamp(14px,2vw,22px); justify-content:center;
}
.strand-box{
  display:flex; flex-direction:column; gap:4px; text-decoration:none;
  padding:clamp(16px,2vw,22px); border-radius:var(--r-lg);
  border:2px solid transparent; transition:transform .18s ease, filter .18s ease;
}
/* MARK ON THE LEFT, DATE ON THE RIGHT, and the hall underneath them both.

   The two wordmarks are different shapes — Sincerely Yours is 5.5:1, Paper
   Craft is 2:1 — so stacking date under logo left one box short and wide and
   the other tall and empty. Side by side, the squarer mark fills the height
   the date needs anyway and the pair balance.

   The mark's box is a FIXED SLOT so the dates line up across both boxes
   whatever shape the logo in it happens to be. That was worth 7px of
   misalignment the first time and would have been worse with two marks. */
/* The two columns start level, they are not centred against each other. One
   box carries "Tickets on sale" under its date and the other does not, so
   centring made the taller column sit higher and the two dates fell 11px out
   of step. The MARK still centres inside its own slot, so a short wordmark
   does not float at the top of it. */
.strand-head{display:flex; align-items:flex-start; gap:16px; min-height:71px}
.strand-mark{
  flex:0 0 158px; min-height:67px;
  display:flex; align-items:center; justify-content:flex-start;
}
.strand-logo{max-width:158px; max-height:67px; width:auto; height:auto; object-fit:contain; display:block}
.strand-right{
  margin-left:auto; display:flex; flex-direction:column;
  align-items:flex-end; text-align:right; gap:4px;
}
.strand-eyebrow{
  font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; opacity:.9;
}
.strand-when{font-family:var(--f-display); font-size:clamp(1.35rem,1rem + 1.2vw,1.9rem); line-height:1.1}
/* THE HALL IS HALF THE ANSWER, so it stops whispering. "Is it the one near me"
   is the question that follows the name of a series, and at .9 opacity it was
   set quieter than the eyebrow above it. */
.strand-where{font-size:.98rem; font-weight:600; opacity:1; margin-top:12px}

/* "Tickets on sale", in the box, only where it is true. The dot is the site's
   own live-dot so the promise looks the same wherever it is made. */
.strand-onsale{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-size:.85rem; font-weight:600; letter-spacing:.01em;
}
.strand-gold .strand-onsale{color:var(--strand-gold-text)}
.strand-pink .strand-onsale{color:var(--strand-pink)}
.strand-onsale .live-dot{position:static; flex:0 0 auto}
.strand-box:hover{transform:translateY(-2px); filter:brightness(1.05)}
.strand-gold{background:var(--strand-gold-bg); border-color:var(--strand-gold); color:var(--strand-gold-ink)}
.strand-pink{background:var(--strand-pink-bg); border-color:var(--strand-pink); color:var(--strand-pink-ink)}
/* The date is the thing being answered, so it takes the full brand colour
   while everything around it stays quiet. */
.strand-gold .strand-when{color:var(--strand-gold-text)}
.strand-pink .strand-when{color:var(--strand-pink)}
@media (prefers-reduced-motion:reduce){ .strand-box:hover{transform:none} }