/* =========================================================================
   THE CAROLINA KIDLIT REVIEW — « paper and slate » design system, prefix skb-
   Vocabulary of the card room and the championship: ledge (content width),
   studio (header), porch (nav), frontis (championship-poster hero), easel
   (numbered suite = section), roster (asymmetric card grid), sketch (card),
   face (image frame), label (card caption), tickmark (dated feed), tab
   (article head), spread (lead image), stack (reading stack), ribbon
   (roster wrapper), dummy (dark callout), motif (SVG ornament), stamp
   (fleuron separator), onward (read onward), mount (footer), trail (breadcrumb).
   Palette: warm paper, slate blue band, brick and ochre. Baskerville for
   display, a humanist sans for text. No remote
   font, no CDN, no gadget animation. Dark mode is automatic. Print keeps
   the stack and drops the chrome.
   ========================================================================= */

:root {
  color-scheme: light dark;

  /* ---- 1. COLOURS · the card parlor ------------------------------------ */
  --stock:       #f3efe7;  /* playing card cream: page ground            */
  --stock-recess: #e5dfd2;  /* reserves, alternated sections              */
  --stock-bright:   #fbf9f5;  /* lightest cream: tips, even roster rows      */
  --graphite:        #1d2328;  /* ink: text                                  */
  --graphite-soft:  #5c6871;  /* captions, meta, chapôs                     */
  --cloth:        #2b3a44;  /* deep workshop felt: header, hero, mount   */
  --cloth-dusk:   #1f2b33;  /* darkest felt: footer, dummy boxes          */
  --ochre:        #9c3b2a;  /* brass gold: links, numbers, ornaments      */
  --ochre-light:  #d9925f;  /* brass on dark grounds                      */
  --ochre-pale:   #7c2b1d;  /* brass pressed / hover                      */
  --madder:       #a8752a;  /* deep card red: the one warm accent         */
  --rule:        #d3cec3;  /* hairline on cream                          */
  --rule-cloth:  #435866;  /* hairline on felt                           */

  /* Dark mode: the parlor after the lamps come on. */
  --dusk-paper:      #14191d;
  --dusk-paper-recess:#1b2227;
  --dusk-paper-bright:  #232c33;
  --dusk-text:       #e8e6e1;
  --dusk-soft:        #9aa4ac;

  /* ---- 2. TYPE · system stacks, nothing fetched ------------------------- */
  --face-display: Baskerville, "Libre Baskerville", "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
  --face-body: "Lucida Grande", "Lucida Sans Unicode", "Fira Sans", "Segoe UI", system-ui, sans-serif;

  --display-weight: 600;
  --caps-track: 0.22em;

  --body-size: clamp(1.02rem, 0.97rem + 0.22vw, 1.13rem);
  --body-leading: 1.66;
  --scale-h1: clamp(2rem, 1.1rem + 2.3vw, 3.1rem);
  --scale-h2: clamp(1.5rem, 1.1rem + 1.5vw, 2.3rem);
  --scale-h3: clamp(1.14rem, 1.03rem + 0.5vw, 1.42rem);

  /* ---- 3. RHYTHM --------------------------------------------------------- */
  --measure:       63ch;
  --measure-broad: 1380px;
  --page-margin:   clamp(1.1rem, 4vw, 4rem);
  --alley:    clamp(0.9rem, 2.2vw, 2rem);
  --ease:      clamp(2.6rem, 6vw, 5.4rem);
  --stop:       clamp(1.2rem, 3vw, 3rem);

  /* ---- 4. DETAILS -------------------------------------------------------- */
  --tilt:     2px;
  --rule-hair: 1px solid var(--rule);
  --speed:   150ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --stock:       var(--dusk-paper);
    --stock-recess: var(--dusk-paper-recess);
    --stock-bright:   var(--dusk-paper-bright);
    --graphite:        var(--dusk-text);
    --graphite-soft:  var(--dusk-soft);
    --cloth:        #0b1f15;
    --cloth-dusk:   #07160f;
    --ochre:        var(--ochre-light);
    --ochre-pale:   #e0bc5e;
    --madder:       #d4675f;
    --rule:        #33402f;
    --rule-cloth:  #1e3a2a;
  }
}

/* =========================================================================
   MOUNT
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--stock);
  color: var(--graphite);
  font-family: var(--face-body);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }
svg.skb-motif { display: inline-block; vertical-align: -0.12em; }

h1, h2, h3 {
  font-family: var(--face-display);
  font-weight: var(--display-weight);
  letter-spacing: 0.002em;
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--scale-h1); }
h2 { font-size: var(--scale-h2); }
h3 { font-size: var(--scale-h3); }

p, ul, ol { margin: 0 0 1.12em; }
a {
  color: var(--ochre);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--speed);
}
a:hover { color: var(--ochre-pale); }
:focus-visible {
  outline: 2px solid var(--madder);
  outline-offset: 3px;
  border-radius: 1px;
}
hr { border: 0; border-top: var(--rule-hair); margin: var(--ease) 0; }

::selection { background: var(--ochre); color: #f8f4e6; }

/* Scores, brackets and dates read in tabular numerals. */
.skb-ribbon, .skb-day, .skb-tab__meta, .skb-easel__no, .skb-frontis__line,
.skb-sketch__tag, .skb-dummy {
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   SCAFFOLD
   ========================================================================= */

.skb-jump {
  position: absolute; left: -9999px; top: 0;
  background: var(--cloth-dusk); color: var(--stock-bright);
  padding: 0.7rem 1.15rem; z-index: 60;
}
.skb-jump:focus { left: 0.6rem; top: 0.6rem; }

/* The ledge: content width of the whole studio. */
.skb-ledge {
  max-width: var(--measure-broad);
  margin: 0 auto;
  padding-left: var(--page-margin);
  padding-right: var(--page-margin);
}

/* =========================================================================
   STUDIO · header and porch (nav)
   ========================================================================= */

.skb-studio {
  background: var(--cloth);
  color: var(--stock-bright);
  border-bottom: 1px solid var(--rule-cloth);
}
.skb-studio__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 2rem;
  padding-top: 1.05rem;
  padding-bottom: 1.05rem;
}
a.skb-signet {
  font-family: var(--face-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--stock-bright);
  text-decoration: none;
  letter-spacing: 0.01em;
}
a.skb-signet:hover { color: var(--ochre-light); }
.skb-signet span {
  display: block;
  font-family: var(--face-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: #b9cbb9;
  margin-top: 0.28rem;
}
.skb-porch__drawer { display: contents; }
.skb-porch__handle { display: none; }
.skb-porch ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.skb-porch a {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #dfe3e7;
}
.skb-porch a:hover { color: var(--ochre-light); }
.skb-porch a[aria-current="page"] {
  color: var(--ochre-light);
  border-bottom: 2px solid var(--ochre-light);
  padding-bottom: 2px;
}

/* Mobile: a collapsed menu. A row that scrolls sideways hides its last sections
   off the screen edge, and the reader never learns they exist. */
@media (max-width: 860px) {
  .skb-porch { width: 100%; margin-top: 0.7rem; }
  .skb-porch__drawer { display: block; }
  .skb-porch__handle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.06);
    color: #eef1f4;
    font: 600 0.78rem/1.2 var(--face-body);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
  }
  .skb-porch__handle::-webkit-details-marker { display: none; }
  .skb-porch__handle::after {
    content: "";
    margin-left: auto;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
  }
  .skb-porch__drawer[open] .skb-porch__handle::after { transform: rotate(-135deg) translate(-2px, -2px); }
  .skb-porch ul {
    flex-direction: column;
    gap: 0;
    margin-top: 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
  }
  .skb-porch li + li { border-top: 1px solid rgba(255, 255, 255, 0.18); }
  .skb-porch a { display: block; padding: 0.6rem 0.75rem; letter-spacing: 0.1em; }
  .skb-porch a[aria-current="page"] { border-bottom: none; background: rgba(255, 255, 255, 0.1); }
}

/* =========================================================================
   FRONTIS · championship poster hero (home)
   ========================================================================= */

.skb-frontis {
  position: relative;
  background: var(--cloth-dusk);
  overflow: hidden;
}
.skb-frontis__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The veil is a HARD colour, never a var(): the band must stay slate in both themes. */
.skb-frontis__voile { position: absolute; inset: 0; background: linear-gradient(96deg, rgba(28, 39, 47, 0.93) 0%, rgba(35, 49, 58, 0.84) 55%, rgba(43, 58, 68, 0.62) 100%); }
@media (prefers-color-scheme: dark) {
  .skb-frontis__voile { background: linear-gradient(96deg, rgba(16, 22, 27, 0.94) 0%, rgba(22, 30, 36, 0.88) 55%, rgba(28, 38, 45, 0.7) 100%); }
}
.skb-frontis__inner {
  position: relative;
  color: #f4f1ea;
  text-align: center;
  /* Le bandeau du donneur prenait tout le premier écran. Ici il est calé pour que la
     première rangée de rubriques commence avant 700 px sur un 1456x800. */
  padding-top: clamp(1.5rem, 2.6vw, 2.1rem);
  padding-bottom: clamp(1.5rem, 2.4vw, 1.9rem);
  max-width: 60rem;
  margin: 0 auto;
}
.skb-frontis__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--ochre-light);
  margin: 0 0 0.9rem;
}
.skb-frontis__rule {
  width: min(15rem, 60%);
  margin: 0 auto 1.1rem;
  border-top: 1px solid var(--ochre-light);
  border-bottom: 3px double var(--ochre-light);
  height: 5px;
}
.skb-frontis h1 {
  color: #f6f3ec;
  /* Bandeau calé pour que la première rangée de rubriques passe avant 700 px. */
  font-size: clamp(1.9rem, 1.05rem + 2.1vw, 2.9rem);
  line-height: 1.14;
  margin: 0 0 0.9rem;
}
.skb-frontis__deck {
  max-width: 56ch;
  margin: 0 auto 1.2rem;
  color: #d7dde2;
  line-height: 1.6;
}
.skb-frontis__line {
  display: inline-block;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e3d3bd;
  border-top: 1px solid #4a5c68;
  padding-top: 0.7rem;
}
.skb-frontis__line .skb-motif { color: var(--ochre-light); }

/* =========================================================================
   EASEL · numbered suite sections
   ========================================================================= */

.skb-easel { padding-top: var(--ease); padding-bottom: var(--stop); }
.skb-easel--recess { background: var(--stock-recess); }
.skb-easel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
  border-top: 3px double var(--graphite);
  padding-top: 1.1rem;
  margin-bottom: 1.6rem;
}
.skb-easel__title {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
}
.skb-easel__no {
  font-family: var(--face-display);
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  color: var(--ochre);
}
.skb-easel__note { margin: 0; color: var(--graphite-soft); font-size: 0.95rem; }

/* =========================================================================
   ROSTER · asymmetric card mosaic (the sketch of cards)
   ========================================================================= */

.skb-roster {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--alley);
  list-style: none;
  margin: 0 0 1.4em;
  padding: 0;
}
.skb-sketch { display: flex; flex-direction: column; }
.skb-sketch--full  { grid-column: span 6; }
.skb-sketch--broad   { grid-column: span 3; }
.skb-sketch--mid  { grid-column: span 3; }
.skb-sketch--tight  { grid-column: span 2; }
.skb-sketch--compact  { grid-column: span 2; }
.skb-sketch--offset  { margin-top: var(--stop); }
.skb-sketch--offset2 { margin-top: calc(var(--stop) * 2); }
@media (max-width: 980px) {
  .skb-sketch--full, .skb-sketch--broad { grid-column: span 6; }
  .skb-sketch--mid { grid-column: span 3; }
  .skb-sketch--tight, .skb-sketch--compact { grid-column: span 3; }
  .skb-sketch--offset, .skb-sketch--offset2 { margin-top: 0; }
}
@media (max-width: 640px) {
  .skb-roster { grid-template-columns: 1fr; }
  .skb-sketch--full, .skb-sketch--broad, .skb-sketch--mid, .skb-sketch--tight, .skb-sketch--compact { grid-column: span 1; }
}

/* The face: image frame with fixed ratios, always on the frame. */
.skb-sketch__face { overflow: hidden; border: 1px solid var(--rule); background: var(--stock-recess); }
.skb-sketch__face--broad   { aspect-ratio: 21 / 9; }
.skb-sketch__face--wash   { aspect-ratio: 4 / 3; }
.skb-sketch__face--quad { aspect-ratio: 1 / 1; }
.skb-sketch__face--lofty   { aspect-ratio: 3 / 4; }
.skb-sketch__face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--speed);
}
.skb-sketch:hover .skb-sketch__face img { opacity: 0.88; }

.skb-sketch__label { padding: 0.75rem 0.2rem 0; }
.skb-sketch__tag {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ochre);
}
.skb-sketch__title { font-size: 1.16rem; margin: 0 0 0.35rem; }
a.skb-sketch__link { color: var(--graphite); text-decoration: none; }
a.skb-sketch__link:hover { color: var(--ochre-pale); text-decoration: underline; text-decoration-thickness: 1px; }
.skb-sketch__note { margin: 0; color: var(--graphite-soft); font-size: 0.92rem; line-height: 1.5; }

/* =========================================================================
   TICKMARK · the dated feed of every guide
   ========================================================================= */

.skb-tickmark { list-style: none; margin: 0 0 1.4em; padding: 0; }
.skb-tickmark__entry {
  display: grid;
  /* 06/09/2026 : la vignette datee tenait 240 px sur une ligne de 1264 px, soit 19 %,
     sous le plancher de 25 % exige pour une vignette de liste. Portee a 21rem (336 px, 27 %). */
  grid-template-columns: 21rem 1fr;
  gap: 1.4rem;
  padding: 1.1rem 0;
  border-top: var(--rule-hair);
}
.skb-tickmark__entry:last-child { border-bottom: var(--rule-hair); }
.skb-tickmark__img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--rule); background: var(--stock-recess); }
.skb-tickmark h3 { font-size: 1.2rem; margin: 0 0 0.35rem; }
.skb-tickmark p { margin: 0; color: var(--graphite-soft); }
@media (max-width: 700px) {
  .skb-tickmark__entry { grid-template-columns: 1fr; gap: 0.7rem; }
}
.skb-day {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite-soft);
}

/* =========================================================================
   VIGNETTE · article and page body
   ========================================================================= */

.skb-vignette { padding-top: var(--stop); padding-bottom: var(--ease); }

/* Trail */
.skb-trail { margin: var(--stop) 0 var(--stop); }
.skb-trail ol { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 0; padding: 0; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite-soft); }
.skb-trail li + li::before { content: "›"; margin-right: 0.35rem; color: var(--ochre); }
.skb-trail a { color: var(--graphite-soft); text-decoration: none; }
.skb-trail a:hover { color: var(--ochre-pale); }
.skb-trail [aria-current="page"] { color: var(--graphite); }

/* The tab: article head */
.skb-tab { max-width: 56rem; }
.skb-tab__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-size: 0.78rem;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--ochre);
}
.skb-tab h1 { margin: 0 0 1rem; }
.skb-tab__chapo {
  font-family: var(--face-display);
  font-size: clamp(1.12rem, 1rem + 0.6vw, 1.38rem);
  line-height: 1.5;
  color: var(--graphite-soft);
  max-width: 58ch;
  margin: 0 0 1.3rem;
}
.skb-tab__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0.85rem 0 0;
  border-top: var(--rule-hair);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite-soft);
}
.skb-tab__meta a { color: var(--graphite-soft); text-decoration: none; }
.skb-tab__meta a:hover { color: var(--ochre-pale); }

/* The spread: lead image, direct child of the vignette */
.skb-spread { margin: var(--stop) 0; }
.skb-spread img { width: 100%; height: auto; border: 1px solid var(--rule); background: var(--stock-recess); }

/* The stack: reading measure with a drop cap */
.skb-stack { max-width: var(--measure); margin-top: var(--stop); }
.skb-stack > p:first-of-type::first-letter {
  font-family: var(--face-display);
  font-weight: 600;
  font-size: 3.4em;
  line-height: 0.82;
  float: left;
  padding: 0.06em 0.12em 0 0;
  color: var(--madder);
}
@media (max-width: 760px) {
  .skb-stack > p:first-of-type::first-letter { float: none; font-size: inherit; color: inherit; padding: 0; }
}
.skb-stack h2 {
  margin: 2.1em 0 0.6em;
  padding-top: 0.55em;
  border-top: var(--rule-hair);
}
.skb-stack ul, .skb-stack ol { padding-left: 1.35rem; }
.skb-stack li { margin-bottom: 0.45em; }

/* The ribbon: tables live here, scores in tabular numerals */
.skb-ribbon {
  overflow-x: auto;
  margin: 1.4em 0 1.7em;
  border: 1px solid var(--rule);
}
.skb-ribbon roster { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 0.94rem; }
.skb-ribbon caption {
  caption-side: top;
  text-align: left;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ochre);
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--rule);
  background: var(--stock-recess);
}
.skb-ribbon th, .skb-ribbon td { text-align: left; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.skb-ribbon tr:last-child td { border-bottom: 0; }
.skb-ribbon th { font-family: var(--face-display); font-weight: 600; background: var(--stock-bright); }
.skb-ribbon tr:nth-child(even) td { background: var(--stock-bright); }

/* The dummy: dark callout, a score pad on the felt */
.skb-dummy {
  margin: 1.6em 0;
  padding: 1.1rem 1.3rem;
  background: var(--cloth-dusk);
  color: #e4e0cb;
  border-left: 4px solid var(--ochre-light);
}
.skb-dummy h4 { margin: 0 0 0.45rem; font-family: var(--face-display); font-size: 1.05rem; color: var(--ochre-light); }
.skb-dummy p { margin: 0; font-size: 0.95rem; line-height: 1.6; }

/* Read onward */
.skb-onward {
  margin-top: var(--ease);
  border-top: 3px double var(--graphite);
  padding-top: 1.1rem;
}
.skb-onward h2 { font-size: 1.2rem; margin: 0 0 0.6em; }
.skb-onward ul { list-style: none; margin: 0; padding: 0; }
.skb-onward li { padding: 0.45rem 0; border-bottom: var(--rule-hair); margin: 0; }
.skb-onward li:last-child { border-bottom: 0; }

/* The stamp: fleuron separator between home sections */
.skb-stamp {
  display: flex;
  justify-content: center;
  color: var(--ochre);
  padding: 0.4rem 0;
}

/* =========================================================================
   MOUNT · footer
   ========================================================================= */

.skb-mount {
  background: var(--cloth);
  color: #cfdccf;
  border-top: 1px solid var(--rule-cloth);
  margin-top: var(--ease);
}
.skb-mount__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--alley);
  padding-top: 2.4rem;
  padding-bottom: 1.6rem;
}
@media (max-width: 760px) { .skb-mount__row { grid-template-columns: 1fr; } }
.skb-mount h2 {
  font-family: var(--face-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  color: var(--ochre-light);
  margin: 0 0 0.7em;
}
.skb-mount ul { list-style: none; margin: 0; padding: 0; font-size: 0.94rem; }
.skb-mount li { margin-bottom: 0.4em; }
.skb-mount a { color: #dce6da; text-decoration: none; }
.skb-mount a:hover { color: var(--ochre-light); }
.skb-mount__foot {
  border-top: 1px solid var(--rule-cloth);
  padding-top: 1rem;
  padding-bottom: 1.4rem;
  font-size: 0.85rem;
  color: #9fb4a0;
}

/* =========================================================================
   PRINT
   ========================================================================= */

@media print {
  :root { --stock: #ffffff; --stock-recess: #ffffff; --stock-bright: #ffffff; }
  .skb-studio, .skb-mount, .skb-frontis__photo, .skb-frontis__voile, .skb-jump, .skb-onward { display: none !important; }
  .skb-frontis { background: #fff; }
  .skb-frontis h1, .skb-frontis__deck, .skb-frontis__kicker, .skb-frontis__line { color: #000; }
  body { font-size: 11pt; }
  .skb-stack { max-width: none; }
  .skb-ribbon { overflow: visible; border-color: #000; }
  a { color: #000; }
}