/* Real C.D. Carabanchel: piezas de torneo (cartel A3, flyer A5, publicaciones cuadrada e historia).
   Tokens copied verbatim from clubs/carabanchel/site/assets/styles.css on 2026-09-27. None of our own:
   every colour, face, size, radius and shadow below is one of these, or a multiple of one of these. */
:root{
  /* colour: from the crest and the kit, named */
  --c-primary:#111111;   /* el negro de los blanquinegros */
  --c-secondary:#f1ede4; /* papel de archivo */
  --c-ink:#141414;
  --c-paper:#fbfaf7;
  --c-accent:#a81818;    /* el rojo de la cruz de Santiago, tomado del escudo */
  --c-gold:#887840;      /* el oro de la corona, solo para filetes */
  --c-muted:#5f5b55;
  --c-line:#d8d2c6;
  --c-ok:#2f6b3a;        /* estados, derivados del tono del escudo */
  --c-warn:#8a5a10;
  --c-bad:#a81818;
  --c-paper-line:rgba(251,250,247,.18); /* filete sobre negro */
  --c-paper-line-strong:rgba(251,250,247,.4);
  --c-shade:rgba(0,0,0,.5);
  /* type: two self-hosted faces, one scale on one ratio (1.2) */
  --f-display:"Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --f-body:"Newsreader",Georgia,"Times New Roman",serif;
  --t-0:clamp(.78rem,.74rem + .2vw,.88rem);
  --t-1:clamp(1.02rem,.96rem + .3vw,1.16rem);
  --t-2:clamp(1.2rem,1.1rem + .5vw,1.38rem);
  --t-3:clamp(1.44rem,1.3rem + .8vw,1.66rem);
  --t-4:clamp(1.73rem,1.5rem + 1.3vw,2.1rem);
  --t-5:clamp(2.07rem,1.7rem + 2.2vw,2.9rem);
  --t-6:clamp(2.5rem,1.8rem + 4.2vw,4.4rem);
  --t-7:clamp(2.6rem,1rem + 8.4vw,7rem);
  --t-nav:.8rem;
  --lh-tight:1.02; --lh-head:1.12; --lh-body:1.55;
  /* space, radius, shadow, motion */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4.5rem; --s-9:7rem;
  --r-a:2px; --r-b:10px;
  --sh-a:0 1px 2px rgba(17,17,17,.14);
  --sh-b:0 18px 44px -20px rgba(17,17,17,.38);
  --ease:cubic-bezier(.2,.7,.2,1);
  --d-1:.18s; --d-2:.45s; --d-3:.95s;
  --wrap:74rem; --measure:66ch;
}

/* the site's self-hosted faces, by relative path (one copy, in the site) */
@font-face{font-family:"Archivo";src:url(../site/assets/fonts/archivo-normal.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:block}
@font-face{font-family:"Archivo";src:url(../site/assets/fonts/archivo-italic.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:block}
@font-face{font-family:"Newsreader";src:url(../site/assets/fonts/newsreader-normal.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:block}
@font-face{font-family:"Newsreader";src:url(../site/assets/fonts/newsreader-italic.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:block}

/* ---- the posts set the rem base so the same scale reads at the size of a post; the printed sheets are sized
   in millimetres and points further down ---- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--c-paper)}
html.pieza--cuadrado,html.pieza--historia{font-size:32px}
body{margin:0;background:var(--c-paper);color:var(--c-ink);font-family:var(--f-body);font-size:var(--t-1);line-height:var(--lh-body);font-optical-sizing:auto;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pieza--cuadrado body{width:1080px;height:1080px}
.pieza--historia body{width:1080px;height:1920px}
img{display:block;max-width:100%}
h1,h2,p,dl,dd,dt,figure{margin:0}
@media print{html,body{margin:0}}

/* ---- the posts' image slot: a band in the club's black at the piece's own ratio; in it, a frame built for the
   4:5 camiseta image, centred, which crops whatever lands to 4:5; the crest on black until the image lands ---- */
.slot{position:relative;overflow:hidden;width:100%;background:var(--c-primary);display:grid;grid-template-columns:100%;grid-template-rows:100%;place-items:center}
.slot::after{content:"";position:absolute;inset:auto 0 0 0;height:var(--s-1);background:var(--c-accent)}
.pieza--cuadrado .slot{aspect-ratio:3/2}
.pieza--historia .slot{aspect-ratio:4/5}
.slot__marco{position:relative;height:100%;overflow:hidden}
.slot__marco--camiseta{aspect-ratio:4/5}
.slot__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.slot__escudo{width:auto;height:66%;filter:drop-shadow(0 18px 26px var(--c-shade))}
.pieza--historia .slot__escudo{height:auto;width:60%}

/* ---- the body of a post ---- */
.cuerpo{padding:var(--s-5) var(--s-6) var(--s-4);display:grid;grid-template-rows:auto auto auto minmax(0,1fr);gap:var(--s-3);min-height:0}
.marca{display:flex;align-items:center;gap:var(--s-3);font-family:var(--f-display);font-stretch:75%;font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:var(--t-0);color:var(--c-accent);line-height:1.2}
.marca img{width:var(--s-6);height:var(--s-6);flex:none}
.marca b{color:var(--c-ink);font-weight:700}
.titulo{font-family:var(--f-display);font-weight:850;font-stretch:80%;font-size:var(--t-7);line-height:.92;letter-spacing:-.03em;text-transform:uppercase;text-wrap:balance}
.titulo span{display:block}

/* ---- the posts: a slot and a short body, nothing that needs a QR ---- */
.pieza--cuadrado .cuerpo,.pieza--historia .cuerpo{grid-template-rows:auto auto auto;align-content:start;gap:var(--s-2);padding:var(--s-3) var(--s-5)}
.pieza--cuadrado .marca img,.pieza--historia .marca img{width:var(--s-5);height:var(--s-5)}
.pieza--cuadrado .titulo,.pieza--historia .titulo{font-size:var(--t-5);font-stretch:84%}
.hechos{font-family:var(--f-display);font-stretch:80%;font-weight:600;font-size:var(--t-0);letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted);line-height:1.3;text-wrap:pretty}
.hechos b{color:var(--c-accent);font-weight:700}
.pieza--historia .cuerpo{padding-bottom:var(--s-8)} /* the phone's own controls sit over the last part of a story */

/* ---- the printed sheets. Each carries 3 mm of bleed on every side (A3 303 by 426 mm, A5 154 by 216 mm); the
   trim is 3 mm in and the safe margin 10 mm (A3) or 8 mm (A5) inside the trim, so nothing that matters sits nearer
   than 13 mm (A3) or 11 mm (A5) to the sheet's edge. Type in points on the tokens' ratio (1.2) up from each sheet's
   floor, 14pt on A3 and 9pt on A5; no rule under 0.25pt. The picture bleeds off the top and the sides; the club's
   black rises from the foot and fades into it; the name is the one big element. Colours printed exactly. ---- */
.pieza--cartel body,.pieza--flyer body{display:block;width:auto;height:auto;overflow:visible;background:var(--c-paper)}
.hoja{position:relative;overflow:hidden;background:var(--c-primary);color:var(--c-paper);display:grid;grid-template-rows:minmax(0,1fr) auto;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pieza--cartel .hoja{width:303mm;height:426mm}
.pieza--flyer .hoja{width:154mm;height:216mm}
.hoja+.hoja{break-before:page}

/* the front: the picture, then the band */
.foto{grid-row:1;position:relative;overflow:hidden;min-height:0;background:var(--c-primary);display:grid;place-items:center}
.foto__img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.foto__img--tercio{object-position:50% 30%}
.foto__img--equipo{object-position:50% 55%}
.foto__escudo{width:52%;height:auto;filter:drop-shadow(0 18px 26px var(--c-shade))}
.banda{grid-row:2;position:relative;background:var(--c-primary);display:grid;align-content:end}
.banda::before{content:"";position:absolute;left:0;right:0;bottom:100%;background:linear-gradient(to top,var(--c-primary) 0,var(--c-primary) 28%,transparent 100%);pointer-events:none}
.sello{font-family:var(--f-display);font-stretch:78%;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--c-secondary);line-height:1.2}
.hoja .titulo{color:var(--c-paper)}
.filete{border:0;background:var(--c-accent);margin:0}
.para{font-family:var(--f-body);font-style:italic;color:var(--c-secondary);line-height:1.22;text-wrap:pretty}
.pie-frente{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end}
.club{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;align-content:end}
.club__escudo{filter:drop-shadow(0 18px 26px var(--c-shade))}
.club__nombre{font-family:var(--f-display);font-stretch:84%;font-weight:600;line-height:1.2;color:var(--c-secondary)}
.club__nombre b{display:block;font-weight:800;color:var(--c-paper)}
.club__nombre span+span::before{content:" · "}
.pieza--flyer .club__nombre span{display:block}
.pieza--flyer .club__nombre span+span::before{content:none}
.hechos-frente{grid-column:1/-1;font-family:var(--f-display);font-stretch:80%;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--c-paper);line-height:1.3;text-wrap:pretty}
.ekana{grid-column:1/-1;font-family:var(--f-display);font-stretch:85%;font-weight:500;color:var(--c-secondary);opacity:.7;line-height:1.2}
.codigo{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;text-align:right}
.codigo__img{background:var(--c-paper);border-radius:var(--r-a)}
.codigo__texto{display:grid;justify-items:end}
.codigo__como{font-family:var(--f-display);font-stretch:86%;font-weight:600;color:var(--c-paper);line-height:1.25;text-wrap:balance}
.codigo__url{font-family:var(--f-display);font-stretch:78%;font-weight:700;letter-spacing:.02em;color:var(--c-secondary);line-height:1.25;white-space:nowrap}

/* A3, the poster read from three metres */
.pieza--cartel .banda{padding:0 13mm 13mm}
.pieza--cartel .banda::before{height:44mm}
.pieza--cartel .sello{font-size:14pt;margin-bottom:5mm}
.pieza--cartel .titulo{font-size:96pt}
.pieza--cartel .filete{height:2.2mm;width:42mm;margin:6mm 0}
.pieza--cartel .para{font-size:22pt;max-width:170mm}
.pieza--cartel .pie-frente{margin-top:11mm;column-gap:14mm}
.pieza--cartel .club{column-gap:6mm;row-gap:5mm}
.pieza--cartel .club__escudo{width:26mm;height:26mm}
.pieza--cartel .club__nombre{font-size:14pt}
.pieza--cartel .club__nombre b{font-size:17pt}
.pieza--cartel .hechos-frente{font-size:14pt;max-width:150mm}
.pieza--cartel .ekana{font-size:14pt}
.pieza--cartel .codigo{column-gap:6mm}
.pieza--cartel .codigo__texto{row-gap:3mm}
.pieza--cartel .codigo__img{width:50mm;height:50mm;padding:3.5mm}
.pieza--cartel .codigo__como{font-size:14pt;max-width:68mm}
.pieza--cartel .codigo__url{font-size:14pt}

/* A5, the flyer in the hand: the same front, the code larger for its size; a back with the facts in full */
.pieza--flyer .banda{padding:0 11mm 11mm}
.pieza--flyer .banda::before{height:24mm}
.pieza--flyer .sello{font-size:9pt;margin-bottom:2.5mm}
.pieza--flyer .titulo{font-size:44pt}
.pieza--flyer .filete{height:1.4mm;width:22mm;margin:4mm 0}
.pieza--flyer .para{font-size:11.5pt;max-width:92mm}
.pieza--flyer .pie-frente{margin-top:6mm;column-gap:4mm}
.pieza--flyer .club{column-gap:3mm;row-gap:2.5mm}
.pieza--flyer .club__escudo{width:12mm;height:12mm}
.pieza--flyer .club__nombre{font-size:9pt}
.pieza--flyer .club__nombre b{font-size:10pt}
.pieza--flyer .hechos-frente{font-size:9pt;max-width:58mm}
.pieza--flyer .ekana{font-size:9pt}
.pieza--flyer .codigo{column-gap:3mm}
.pieza--flyer .codigo__texto{row-gap:1.5mm}
.pieza--flyer .codigo__img{width:32mm;height:32mm;padding:2.5mm}
.pieza--flyer .codigo__como{font-size:9pt;max-width:40mm}
.pieza--flyer .codigo__url{font-size:9pt;max-width:40mm;white-space:normal;overflow-wrap:anywhere} /* the mock's long domain breaks at its hyphen */

.hoja--dorso{background:var(--c-paper);color:var(--c-ink);grid-template-rows:auto auto auto minmax(48mm,1fr) auto;align-content:start;border-top:3mm solid var(--c-accent);padding:10mm 11mm 11mm}
.dorso__cab{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:3.5mm;padding-bottom:3.5mm;border-bottom:.4mm solid var(--c-line)}
.dorso__cab img{width:15mm;height:15mm}
.dorso__cab p{font-family:var(--f-display);font-stretch:84%;font-weight:800;font-size:11pt;line-height:1.15}
.dorso__cab span{display:block;font-size:9pt;font-weight:600;font-stretch:78%;text-transform:uppercase;letter-spacing:.14em;color:var(--c-accent);margin-top:1.2mm}
.dorso__titulo{font-family:var(--f-display);font-weight:850;font-stretch:82%;font-size:26pt;line-height:.95;letter-spacing:-.02em;text-transform:uppercase;margin:5mm 0 3.5mm;text-wrap:balance}
.dorso__datos{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2.4mm 5mm;align-content:start}
.dorso__datos dt{font-family:var(--f-display);font-stretch:78%;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:9pt;color:var(--c-accent);padding-top:.35em;line-height:1.2}
.dorso__datos dd{font-size:9.5pt;line-height:1.36;text-wrap:pretty}
.dorso__datos dd b{font-family:var(--f-display);font-weight:700;font-stretch:90%}
.dorso__codigo{align-self:center;justify-self:center;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:5mm;padding:2mm 0}
.dorso__codigo img{width:44mm;height:44mm}
.dorso__texto{display:grid;row-gap:1.5mm}
.dorso__etiqueta{font-family:var(--f-display);font-stretch:78%;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:9pt;color:var(--c-accent);line-height:1.2}
.dorso__url{font-family:var(--f-display);font-stretch:80%;font-weight:700;font-size:10.5pt;line-height:1.3;letter-spacing:.02em}
.dorso__pie{margin-top:5mm;padding-top:3mm;border-top:.4mm solid var(--c-line);display:flex;justify-content:space-between;gap:4mm;font-family:var(--f-display);font-stretch:85%;font-size:9pt;color:var(--c-muted);line-height:1.25}
.dorso__pie b{color:var(--c-ink);font-weight:700}
.slot__marco--copa{aspect-ratio:4/5} /* the trophy picture on the prize post, the same 4:5 frame as the shirt (28 September, 2026) */
/* 28 September, 2026, after the verdict on the filled backs: the code's row can never collapse below the code (44mm plus 2mm of padding each side), the facts sit at 9.5pt with 2.4mm gaps, the title's and the footer's margins a millimetre tighter, so six full lines of facts and the code share the sheet. */