/* tokens.css */
/* ============================================================
   TOKENS: one palette for the whole site, word for word.
   No page invents a palette of its own: it is the same house.
   ============================================================ */
/* ============================================================
   THE DISPLAY TYPEFACE
   ============================================================
   Gunship, by Daniel Zadorozny (Iconian Fonts). Squared, all caps in
   the way we use it: titles and headings, NEVER running text. Five
   thousand words of the safeguarding document set this way would not
   be readable.

   IT IS OURS AND IT LIVES IN HERE: no typeface comes from outside,
   just as no script and no map does. 37 KB that travel as 14, and they
   download only if something really uses them.

   THE LICENCE IS FOR NON COMMERCIAL USE and the club is a non profit
   ASD (confirmed by the club, 18 August 2026). The licence text
   travels next to the file, in assets/font/, because that is what the
   licence itself asks.

   swap: text shows AT ONCE in the system typeface and changes when the
   file arrives. The alternative is half a second of invisible titles
   on a slow connection in a gym. */
@font-face{
  font-family:"Gunship";
  /* The CONDENSED cut and not the round one: round, in caps and
     letterspaced, pulls words wide until they look stretched. This
     says the same thing in less room. */
  src:url("/font/gunship-cond.147f7ded.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  /* The display typeface is named HERE and used by name: the day it
     changes, it changes in one place. The fallback is not "some sans
     or other" but the system stack the site already uses, so until the
     file arrives the page stays the same. */
  --titoli:"Gunship",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  /* THE HEADER HEIGHT AND THE CREST HEIGHT, in one place only.
     The drawer MUST be as tall as the strip it covers, or opening the
     menu makes the mark jump. One number instead of several kept in
     agreement by hand, each one an occasion to get it wrong.
     The crest sits seven pixels below the top edge and seven above the
     bottom one, and that air is what makes it read as a mark rather
     than a plug forced between two edges. Seven and not fourteen: at
     fourteen the strip becomes a tall header, and a tall header takes
     a band of page away from every screen of every page.
     ONE MEASURE FOR BOTH SCREENS, with no phone exception: an
     exception that distinguishes nothing is just one more place to
     remember to look.
     The width comes from the height: 1.356 is the proportion of the
     file as the pipeline produces it, white rule included. */
  --testa:70px;
  --stemma:56px;
  /* --pad IS THE PAGE MARGIN, --gap THE STEP BETWEEN PANELS, and they
     are the same number. Equal, the page reads as filled instead of
     framed, and the width goes back to the content, which is what the
     dense pages need: home, calendar, results.
     TWO TOKENS AND NOT ONE because they say two different things: the
     day the page margin has to be wider than the step, this one
     changes and the other does not. */
  --pad:13px;
  --gap:13px;
  --ground:#D3E4EF;
  --head:#FFFFFF;
  --head-fg:#0B1A22;
  --head-dim:#54697A;
  --head-line:#C2D8E5;
  --menu-line:#E2ECF2;
  --chrome-btn:rgba(4,26,40,.06);
  --chrome-btn-h:rgba(4,26,40,.13);
  --brand-dim:#02629B;
  /* THE CHROME AMBER: the menu item that stands apart (safeguarding).
     Not a highlight. A bright colour at the end of the row would read
     as the main button, the opposite of what this is. It is picked as
     LIGHT as the other items (--head-dim) and differs only in tint: it
     shows as belonging to another group, not as shouting. */
  --head-nota:#7A5F1E;
  /* The veil of that same item when its page is open. It is the amber
     itself, barely laid on the ground: "you are here" said with the
     colour that item already has, instead of borrowing the blue of all
     the others, which would fold it back into the group it stays out
     of the rest of the time.
     In rgba and not in hex because there are two grounds, the white
     header and the black one, and one veil follows both. */
  --head-nota-fill:rgba(122,95,30,.15);
  --chrome-sel:#DCEDF7;
  --chrome-sel-fg:#0377BD;
  --panel:#FFFFFF;
  --bar:#E8F2F8;
  --bar-fg:#0B1A22;
  --bar-dim:#54697A;
  --bar-line:#CFE0EB;
  --zebra:#EBF2F7;
  --sunken:#DCE7EF;
  --line:#B7CBD9;
  /* THE COUNTDOWN BOXES, one tone for both screens. The phone sheet
     redefines --line and --zebra to something much softer: right for
     its own furniture, wrong here, since these four boxes are the same
     object on both and would come out outlined in fog on the phone and
     drawn on the desk. Declared here and NOT overridden in
     tel/tokens.css, which is what makes them match. */
  --cd-fill:#EBF2F7;
  --cd-line:#B7CBD9;
  --tratteggio:#B7CBD9;
  --line-2:#95B0C3;
  --edge:#8FADC0;
  --ink:#020909;
  --ink-2:#2B3C45;
  --muted:#475965;
  --faint:#647987;
  --brand:#0377BD;
  --brand-2:#02547F;
  --accent:#52B2D0;
  --on-brand:#FFFFFF;
  /* Won / lost: the only two "semantic" colours of the house. They do
     not flip between the two themes. Green and red hold on both
     grounds, and changing them would look like two different clubs. */
  --up:#12885A;
  --down:#C6412F;
  /* THE LIGHT GREEN AND RED. They are --up and --down thinned into the
     ground, and they serve where the outcome is a PATCH and not a thin
     word: the block of a calendar cell and the win/loss label in the
     match card. The saturated full shouts there. In a grid of forty
     cells it turns into a green and red chessboard, and next to two
     lines of text it pulls the eye off the names. Full --up or --down
     goes on top and stays the semantic colour of the house: the tone
     changes, the meaning does not.
     WRITTEN IN HEX AND NOT IN rgba(): a transparent veil leans on
     whatever is under it, and here there are three different grounds
     (panel, weekday cell, weekend cell). With a solid colour the
     contrast is a single number and can be measured, and tests/theme.js
     does measure it, in both themes: 3,4:1 green and 3,7:1 red in the
     light, 3,4:1 and 3,3:1 in the dark.
     A DRAW has no token of its own: it is neutral, and the neutral is
     already there (--line-2). A third colour for "neither one nor the
     other" would say something happened, and nothing did. */
  --up-fill:#C9E7D8;
  --down-fill:#F6D6D0;
  /* THE AMBER: neither won nor lost, but "look here". It serves in one
     place only: the list of warning signs in the safeguarding
     document, which neither forbids nor obliges but asks to notice.
     Like green and red it does not flip between the two themes. It is
     a semantic colour, and changing it in the dark would mean two
     meanings for the same sign. */
  --warn:#A8730A;
  /* The veil that marks Silea: in the table, in the match list row, in
     the chosen item of the selector. Always this one, never a solid
     brand fill: in the dark, white text over light cyan sits at 2,3:1
     and does not read. */
  --me-fill:rgba(164,210,230,.46);
  /* The neutral twin of --me-fill: where --me-fill says "this is
     ours", this one says "this is not". It grounds the left half of a
     calendar cell, which for an away match cannot be brand. Not a new
     colour but --muted veiled, so it follows the theme without chasing
     it, and it stays transparent: a solid ground would disappear over
     the weekend cell, which already has a ground of its own. */
  --via-fill:rgba(71,89,101,.14);
  --scrim:rgba(2,9,9,.55);
  /* Height of the result panel body: FIXED, the same for a played
     match, a countdown and a bye. One number, and one only: without
     it the panel changes size at every change of matchday and the
     whole column flickers. */
  --hero-h:270px;
  --shadow:0 16px 40px -18px rgba(6,30,46,.28);
  --bird-op:.40;
  /* THE SPARROW HAS TWO VERSIONS, one for light grounds and one for
     dark, and the choice happens HERE because it appears in three
     different sheets (the three shapes of the result card) and
     choosing in three places means forgetting in one.
     On light goes the DARK version and the other way round: the file
     name says what colour the drawing is, not what ground it goes on.
     Two files and not a filter computed on screen: the sparrow is made
     of thin strokes, the open wing is all feathers, and any tint
     inversion smears them. These two were drawn by whoever made the
     mark. */
  --passero:url("/icona-dark.1a2459a0.png");
  /* THE 5x1000 SHAPES, watermarked inside the panel.
     The file is white on nothing (three solid shapes, not a line
     drawing) and white as a watermark works only on the dark: on the
     light board the panel lets the pale blue of the page through, and
     on the phone it has the paper ground, where white on white is
     nothing. So the file is used not as an image but as a MASK: it
     gives the shape, this line gives the colour, and one single file
     tints the watermark as needed on any ground.
     The alpha sits inside the colour instead of in a separate opacity:
     one thing to tune, not two.
     Lower than the sparrow (--bird-op, .40) because these are solid
     surfaces and not feathers: at the same opacity they would not be a
     watermark, they would be an illustration behind the text. */
  --sagome:rgba(3,119,189,.11);
  /* THE VEIL. A ground that lightens what sits under it instead of
     covering it: for where a panel rests over a watermark and must not
     erase it. White and not a solid tone, because it has to work over
     whatever ends up behind it. */
  --velo:rgba(255,255,255,.34);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#010506; --panel:#04090C; --bar:#0E1D26; --bar-fg:#E6F1F7;
    --bar-dim:#8CA3B0; --zebra:#0A141A; --sunken:#0F1E27; --line:#182831;
    --line-2:#2A404E; --tratteggio:#425768; --cd-fill:#0A141A; --cd-line:#22343E; --edge:#395666; --ink:#F4FAFC; --ink-2:#BFCFD8;
    --muted:#90A5B1; --faint:#6E8490; --brand:#52B2D0; --brand-2:#8AD0E4;
    --on-brand:#03151C;
    /* --up and --down never flip, but the ground they are thinned into
       does: in the dark "light" means a very dark green and red, or a
       light theme patch inside a black page turns into a lightbulb.
       Declared in all three states, or at night they would sit at the
       light value by accident and not by choice. */
    --up-fill:#0E2A20;
    --down-fill:#33170F;
    --me-fill:rgba(82,178,208,.16);
    --via-fill:rgba(144,165,177,.14);
    /* in the dark the scrim and the shadow go strong: on a dark ground
       the soft ones of the light theme would not show */
    --scrim:rgba(0,0,0,.66);
    --shadow:0 24px 60px -18px rgba(0,0,0,.6);
    --head:#020909; --head-fg:#FFFFFF; --head-dim:#9FB1BC; --head-line:#122029;
    --menu-line:#16232A;
    --chrome-btn:rgba(255,255,255,.10); --chrome-btn-h:rgba(255,255,255,.22);
    --chrome-sel:rgba(255,255,255,.14); --chrome-sel-fg:#FFFFFF;
    --brand-dim:#75C1D9;
    /* In the dark the amber lightens like everything else: dim gold,
       at the same lightness as --head-dim. */
    --head-nota:#BFA671;
    --head-nota-fill:rgba(191,166,113,.17);
    --bar-line:#16262F;
    --bird-op:.10;
    --passero:url("/icona.e2a83984.png");
    --sagome:rgba(255,255,255,.06);
    --velo:rgba(255,255,255,.04);
  }
}
:root[data-theme="dark"]{
  --ground:#010506; --panel:#04090C; --bar:#0E1D26; --bar-fg:#E6F1F7;
  --bar-dim:#8CA3B0; --zebra:#0A141A; --sunken:#0F1E27; --line:#182831;
  --line-2:#2A404E; --tratteggio:#425768; --cd-fill:#0A141A; --cd-line:#22343E; --edge:#395666; --ink:#F4FAFC; --ink-2:#BFCFD8;
  --muted:#90A5B1; --faint:#6E8490; --brand:#52B2D0; --brand-2:#8AD0E4;
  --on-brand:#03151C;
  --up-fill:#0E2A20;
  --down-fill:#33170F;
  --me-fill:rgba(82,178,208,.16);
  --via-fill:rgba(144,165,177,.14);
  --scrim:rgba(0,0,0,.66);
  --shadow:0 24px 60px -18px rgba(0,0,0,.6);
  --head:#020909; --head-fg:#FFFFFF; --head-dim:#9FB1BC; --head-line:#122029;
  --menu-line:#16232A;
  --chrome-btn:rgba(255,255,255,.10); --chrome-btn-h:rgba(255,255,255,.22);
  --chrome-sel:rgba(255,255,255,.14); --chrome-sel-fg:#FFFFFF;
  --brand-dim:#75C1D9;
    /* In the dark the amber lightens like everything else: dim gold,
       at the same lightness as --head-dim. */
    --head-nota:#BFA671;
    --head-nota-fill:rgba(191,166,113,.17);
  --bar-line:#16262F;
  --bird-op:.10;
  --passero:url("/icona.e2a83984.png");
  --sagome:rgba(255,255,255,.06);
  --velo:rgba(255,255,255,.04);
}

/* scorrimento.css */
/* ============================================================
   SCROLLBARS, ONCE AND FOR EVERYTHING
   ============================================================
   No selector list here: the bare pseudo-element covers everything
   that scrolls, the page included. A new panel has nothing to
   remember, which is the only way this stays consistent.

   The trap that rules a list out: with a LIST of selectors the
   pseudo-element attaches only to the last one.

   The phone wants it thinner (tel/base.css): 8 pixels instead of 10,
   because there the screen is 390 wide and a 10 pixel bar takes a
   hundredth of the usable width.
   ============================================================ */
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--line-2);border-radius:6px;
  border:3px solid transparent;background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

/* base.css */
*{box-sizing:border-box;margin:0;padding:0}
/* The page scrolls here: not the fixed board of the results page, but
   a list that ends where the sponsors end. */
body{
  min-height:100%;background:var(--ground);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.5;font-weight:400;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

/* header.css */
/* ============================================================
   HEADER: stitched to the top, full width, as on the other pages.
   The --gap/--pad rhythm starts here and runs downward.
   ============================================================ */
/* THE HEADER HEIGHT IS --testa, RULE INCLUDED, and it is written here
   because this is where the header is defined. A correction living in
   the sheet of an accessory component only covers the pages that have
   that component.
   box-sizing is already border-box from the reset: the height contains
   the rule instead of adding to it. */
.top{background:var(--head);border-bottom:1px solid var(--head-line);
  height:var(--testa);
  position:sticky;top:0;z-index:20}
.top-in{max-width:1840px;margin:0 auto;height:100%;padding:0 var(--pad);
  display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:11px;flex:none;color:inherit;text-decoration:none}
/* THE WHOLE CREST, AND THE SAME ONE ON EVERY SCREEN.
   The crest settles the balance between bird and lettering inside
   itself, which is what makes a crest a crest. So there is ONE of it,
   identical everywhere, and only its size changes between board and
   phone. 48px tall inside a 64px header: the lettering inside the
   crest stays readable and there is air above and below, so it reads
   as a mark and not as a plug.
   Background and not <img>: see chrome.js. */
.brand .mark{display:block;flex:none;
  height:var(--stemma);width:calc(var(--stemma) * 1.356);
  background:url("/logo-volley-silea.ff7b3ca6.png") center/contain no-repeat}
/* The written name stays in the markup and off the screen: the crest
   already carries it, and the link aria-label says it to anyone who
   cannot see. */
.brand .wm{display:none}
/* Between 900 and ~1050px the eight items do not fit next to the mark:
   instead of breaking the page they scroll inside their own strip.
   min-width:0 because a flex container, left alone, will not be
   squeezed below its own content. */
.nav{display:flex;gap:3px;margin-left:auto;min-width:0;
  overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:9px 15px;border-radius:8px;font-size:15px;font-weight:400;
  color:var(--head-dim);white-space:nowrap;transition:color .15s,background .15s}
.nav a:hover{color:var(--head-fg);background:var(--chrome-btn)}
.nav a.on{color:var(--chrome-sel-fg);font-weight:600;background:var(--chrome-sel)}
/* AN ITEM APART, NOT AN ITEM SINGLED OUT: safeguarding.
   A document the law requires to be published. It sits at the end and
   reads as "another thing", not as the most important one: whoever
   comes for the results does not need the eye pulled over there.

   NO FRAME. In a row of links a frame is an invitation to press, and
   it would make this look like the header main button.
   A RULE IN THE GAP instead: the mark a navigation bar has always used
   to say "from here on it is another group", and it asks nothing of
   anyone. It sits in the margin and not on the link, so the hover veil
   stays one whole shape.
   DIM AMBER, as light as the other items. The tint alone says another
   family; raising the brightness too would be shouting. In the dark it
   lightens along with everything else (--head-nota).

   THE RULE IS THE SAME AMBER and stays one pixel. The frame grey
   (--head-line) is made to detach from a white header and vanishes on
   a black one, while amber shows on both and says the same thing as
   the word it divides. One pixel because it is a mark of separation:
   thicker, it becomes a bar that calls. */
.nav a.bordata{position:relative;margin-left:20px;color:var(--head-nota)}
.nav a.bordata::before{content:"";position:absolute;left:-11px;top:50%;
  transform:translateY(-50%);width:1px;height:18px;
  background:var(--head-nota)}
.nav a.bordata:hover{color:var(--head-nota);background:var(--chrome-btn)}

/* ON ITS OWN PAGE IT STAYS AMBER. "You are here" is the same pill as
   every other item, tinted with the colour this item already has:
   borrowing the blue would fold it back into the group it stays out of
   the rest of the time, exactly while it is open.
   AND THE RULE STAYS. It divides two groups, and the two groups are
   there even from inside the second one. */
.nav a.bordata.on{background:var(--head-nota-fill);color:var(--head-nota);font-weight:600}
.tema{flex:none;width:38px;height:38px;border-radius:9px;border:0;cursor:pointer;
  display:grid;place-items:center;color:var(--head-dim);background:transparent;
  transition:color .15s,background .15s}
.tema:hover{color:var(--head-fg);background:var(--chrome-btn)}
.tema svg{grid-area:1/1;width:19px;height:19px;transition:opacity .2s,transform .2s}
.tema .ico-sole{opacity:0;transform:rotate(-60deg) scale(.7)}
.tema.scuro .ico-sole{opacity:1;transform:none}
.tema.scuro .ico-luna{opacity:0;transform:rotate(60deg) scale(.7)}

/* The hamburger exists only on the narrow layout */
.ham{display:none;width:44px;height:44px;place-items:center;border:0;cursor:pointer;
  background:transparent;color:var(--head-dim);transition:color .15s}
.ham:active{color:var(--head-fg)}
.ham svg{width:20px;height:20px;display:block}

/* Below 900px the header becomes the app one: hamburger on the left,
   mark in the middle, theme on the right. It is the same point where
   the phone shell drops its frame, so moving from page to page the top
   does NOT change under the fingers. */
@media (max-width:899px){
  .top-in{padding:0 4px;gap:0;
    display:grid;grid-template-columns:44px 1fr 44px;align-items:center}
  .ham{display:grid}
  .nav{display:none}
  /* On the phone the WHOLE crest and no lettering: the name is inside
     it, and in a 56px header between hamburger and theme button the
     bird alone with the lettering beside it does not fit without
     shrinking both below the size where they read.
     The crest is THE SAME as the board one, same size: here it just
     sits between two 44px buttons instead of left of a menu. --stemma
     states that size once for both.
     The last pixels at the top and bottom of the crest are the white
     rule the file carries with it (pipeline/tools/trasparenza.js). It
     is part of how the mark is made, and on the near black header it
     is also the only thing detaching its shape from the ground. */
  .brand{justify-content:center}
  .tema{width:44px;height:44px;border-radius:0}
}

/* drawer.css */
/* --- drawer menu, the same one on every page -----------------
   Same measures, weights and wording throughout. Two different menus
   would make moving from one page to another feel like changing
   site. */
.menu{position:fixed;inset:0;z-index:80;
  background:var(--head);color:var(--head-fg);
  display:flex;flex-direction:column;
  opacity:0;pointer-events:none;transition:opacity .2s;
  padding-bottom:env(safe-area-inset-bottom,0px)}
.menu.on{opacity:1;pointer-events:auto}
.menu-top{height:var(--testa);flex:none;display:flex;align-items:center;
  justify-content:space-between;padding:0 4px 0 16px}
/* The whole crest, as in the header this drawer covers: the menu
   opens and the mark stays where it was, at the same size. */
.menu-top .marchio{display:block;flex:none;
  height:var(--stemma);width:calc(var(--stemma) * 1.356);
  background:url("/logo-volley-silea.ff7b3ca6.png") center/contain no-repeat}
.menu .icon{width:44px;height:44px;display:grid;place-items:center;border:0;
  cursor:pointer;background:transparent;color:var(--head-dim)}
.menu .icon svg{width:20px;height:20px;display:block}
/* THE ITEMS ARE THE SCROLLING PART, and flex:1 with min-height:0 is
   what makes that true. Without them a child with overflow does not
   shrink inside a flex column: it grows and spills past its container,
   and on a short screen the footer rule cuts the last item in half. */
/* THE ITEMS SIT IN TWO COLUMNS. Eleven items fit in six rows and all
   land on screen together: the drawer opens and the whole site is
   there, with nothing to drag to reach Contatti.

   EVERY ITEM IS A CELL, all the same size. The grid makes them equally
   wide by construction, and align-items:stretch (the default, so it is
   not written) makes them as tall as the tallest of their row. The
   minimum is sixty-four pixels, above the forty-four a finger needs.

   THE TYPE IS 17. At half the screen width "Calendario" does not fit
   at 24 bold, and a word wrapping inside a cell undoes the grid the
   cell is there to build. */
.menu nav{flex:1;min-height:0;
  padding:18px;overflow-y:auto;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
.menu nav a{color:var(--head-fg);
  font-size:17px;font-weight:700;letter-spacing:-.02em;
  min-height:64px;padding:12px 14px;
  border:1px solid var(--menu-line);border-radius:12px;
  display:flex;align-items:center;gap:10px}
/* THE ITEM OF THE OPEN PAGE is tinted in three places: text, border
   and a veil of background. Among eleven identical cells one blue word
   between ten white ones is a detail that gets lost, while a tinted
   cell is found without looking for it. */
.menu nav a.on{color:var(--brand);border-color:var(--brand);
  background:color-mix(in srgb, var(--brand) 13%, transparent)}
.menu nav a small{font-size:9px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--head-dim);
  border:1px solid var(--menu-line);border-radius:4px;padding:2px 5px}
/* THE DRAWER FOOTER: who this club is.
   On the board it sits in a strip at the bottom of the screen. Here it
   cannot: below 900px the bottom belongs to the sponsor bar and the
   page does not scroll. So it sits where people look for what the
   screen does not show.

   TRULY AT THE BOTTOM: margin-top:auto pushes it to the last row of
   the column even when few items would leave it hanging halfway. The
   rule separates it from the items, which are large and made to be
   touched; this text is small and made to be read, and with no line
   between them it would read as the last menu item.
   The bottom safe margin already belongs to .menu. */
.menu-piede{
  margin-top:auto;flex:none;
  padding:10px 22px 12px;
  border-top:1px solid var(--menu-line);
  font-size:10.5px;line-height:1.45;color:var(--head-dim);
}
.menu-piede p{margin:0}
.menu-piede p + p{margin-top:3px}
.menu-piede .sep{margin:0 .5em;opacity:.5}

/* SHORT SCREENS. On a 360x640, still around, six rows plus header plus
   footer overflow by twenty pixels and the drawer starts scrolling.
   Everything tightens: shorter cells, less air between them, one pixel
   less type. Fifty-six pixels of cell remain, above the forty-four a
   finger needs. */
@media (max-height:700px){
  .menu nav{padding:14px;gap:8px}
  .menu nav a{min-height:56px;padding:10px 12px;font-size:16px}
}
/* One step further down for the shortest of all: a 360x560, or an
   ordinary phone turned sideways. Fifty pixels are still above the
   forty-four of a finger. It goes no lower: if more room is ever
   needed it scrolls, which by then is the right answer. */
@media (max-height:600px){
  .menu nav{padding:12px;gap:7px}
  .menu nav a{min-height:50px;padding:8px 12px;font-size:15.5px}
}

@media (min-width:900px){ .menu{display:none} }

.toast{position:fixed;left:50%;bottom:30px;z-index:90;
  transform:translate(-50%,10px);
  background:var(--ink);color:var(--panel);
  font-size:13px;font-weight:500;padding:10px 16px;border-radius:10px;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* Safeguarding stands apart down here too, in the dim amber of the
   header. It takes the whole grid width, and its weight stays that of
   the other items: a different item, not a more important one.

   AMBER, not the grey of the chrome: that grey is made to detach from
   a light ground and disappears on the black drawer.
   ON ITS OWN PAGE IT STAYS AMBER: the other selected items turn brand,
   this one already has its colour. */
.menu nav a.bordata{grid-column:1 / -1;
  color:var(--head-nota);border-color:var(--head-nota)}
.menu nav a.bordata.on{color:var(--head-nota);border-color:var(--head-nota);
  background:color-mix(in srgb, var(--head-nota) 13%, transparent)}

/* piede.css */
/* ============================================================
   THE FOOTER: ONE LINE, AT THE BOTTOM OF THE SCREEN
   ============================================================
   Who this club is, by law and by manners: full name, registered
   office, tax code, VAT number and federation code. On one line, in
   small type, in a grey that does not call. This is not text to read,
   it is text to find when looked for: catching the eye would steal
   attention from what the page exists for.

   IT IS FIXED, and that is not an aesthetic choice. On the board most
   pages are window-tall screens that do not scroll (app/base.css:
   html,body{overflow:hidden}), so "the bottom of the page" is not a
   place there. The only page that really scrolls is sponsor, and a
   fixed bar is what that one needs anyway: the footer is not a reward
   for reaching the end of fifteen brands.

   THE BODY GIVES UP THE SPACE, not the footer. A fixed element leaves
   the flow and would pass OVER the content, so the body shortens by
   the same amount and both cases hold: the fixed screen tightens, the
   scrolling page ends higher up. The height lives in a token because
   the footer declares it and the body uses it. Written twice, a change
   to the type size would show up as a covered line or a finger of
   emptiness.

   ON THE PHONE IT IS NOT THERE. Down here the bottom of the screen
   already belongs to the sponsor bar, and a second strip under the
   first would eat screen from a view that has little. The phone footer
   is still to be decided: see the note at the end.
   ============================================================ */

:root{ --piede-h:30px; }

.piede{
  position:fixed;left:0;right:0;bottom:0;z-index:6;
  height:var(--piede-h);
  display:flex;align-items:center;justify-content:center;
  padding:0 16px;
  background:var(--bar);
  border-top:1px solid var(--bar-line);
  /* Not text to read: text to find. Small, in a grey that stays back,
     and never wrapping. One line that on a narrow window shortens with
     an ellipsis instead of becoming two and breaking the strip. */
  /* LINE HEIGHT CANNOT BE 1. At line height one the line is as tall as
     the type, and the descenders (the p of "Sportiva", the g, the q)
     fall OUTSIDE the line: with overflow:hidden above, they get cut in
     half. A comfortable line height keeps them in, and centring the
     line in the strip is the job of align-items, not of the text
     height. */
  font-size:11.5px;line-height:1.45;letter-spacing:.01em;
  color:var(--bar-dim);
  white-space:nowrap;overflow:hidden;
}
.piede p{
  max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* The separator dots: lighter than the text, because all they do is
   separate. The space around them comes from margins, not from two
   spaces written in the markup, which at the end of a line would add
   themselves to the ellipsis. */
.piede .sep{margin:0 .55em;opacity:.5}

/* The body shortens by the height of the footer.
   On fixed screens this tightens the column and nothing ends up under
   the strip; on the scrolling page it is the last piece of document
   that stops higher up. */
body{padding-bottom:var(--piede-h)}

/* ------------------------------------------------------------------
   ON THE PHONE, FOR NOW, NOTHING.
   The bottom of the screen belongs to the sponsor bar, and below 900px
   the page does not scroll (tel/base.css says so in words: "niente
   scorre a livello di pagina"), so there is no "bottom" to put a
   footer in flow. It would go at the end of the scrolling strip,
   inside .scroll, and that strip is mounted by the phone layouts one
   by one: a job to do calmly and in one pass.
   Meanwhile the footer does not show and steals no room: absent beats
   wrong. The natural exception is the sponsor page, a document that
   below 900 really scrolls, where a trailing footer would work on its
   own. Keeping it on one page and not the others would be the worst of
   the three.
   ------------------------------------------------------------------ */
@media (max-width:899px){
  .piede{display:none}
  body{padding-bottom:0}
}

/* THE ONLY ITEM THAT LEADS ANYWHERE. It sits among text nobody
   touches, so it must not shout but must still be recognisable: same
   colour as the rest, underlined on hover. */
.piede a{color:inherit;text-decoration:none}
.piede a:hover,.piede a:focus-visible{text-decoration:underline}

/* sparrow.css */
/* sparrow: same figure and same animation as the other pages */
.birdwrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  container-type:inline-size}
.bird{position:absolute;top:50%;left:0;height:210%;width:auto;aspect-ratio:3/2;
  background:url("/light_sparrow.04c82cab.svg") center/contain no-repeat;
  animation:fly 15s linear infinite}
@keyframes fly{
  0%      {transform:translate3d(calc(20cqw - 50%),-48%,0) rotate(-3deg);opacity:0}
  13.33%  {opacity:var(--bird-op)}
  86.67%  {opacity:var(--bird-op)}
  100%    {transform:translate3d(calc(80cqw - 50%),-52%,0) rotate(3deg);opacity:0}
}

/* pages/sponsor.css */
/* ============================================================
   LAYOUT
   ============================================================ */
/* Two thirds / one third on top, the grid full width below. One single
   grid and not two nested containers, because on the narrow layout the
   invitation has to step over the cards and land at the foot of the
   page: between siblings the order is enough. */
.wrap{max-width:1840px;margin:0 auto;padding:var(--gap) var(--pad) var(--pad);
  display:grid;grid-template-columns:2fr 1fr;gap:var(--gap)}
.intro{grid-column:1}
.invito{grid-column:2}
.grid{grid-column:1/-1}

/* --- opening strip: two panels side by side ------------------
   Two thirds the thank you, one third the request. They are two
   different things and stay two different cards: the invitation one is
   dashed and without a ground, so it reads as a place still free and
   not as a sixteenth company.
   In the first the sparrow crosses the card as in the results panel:
   the mark that ties this page to the rest of the site. */

/* Text and count in a ROW, resting on the same baseline: the count
   sits in the bottom right corner without adding a single pixel of
   height to the card. */
.intro{position:relative;overflow:hidden;background:var(--panel);
  border:1px solid var(--edge);border-radius:14px;
  /* The padding of the card, not the page margin: written out and not
     taken from --pad, which at thirteen would halve it against the 26
     above. */
  padding:26px 24px 28px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
/* position:relative in here too: positioned elements paint OVER the
   ones in flow, and without this the sparrow would pass in front of
   the text instead of behind it. */
.intro-txt{position:relative;max-width:64ch}
.eyebrow{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand);margin-bottom:7px}
.intro h1{font-size:31px;font-weight:600;letter-spacing:-.02em;line-height:1.15;
  text-wrap:balance}
.intro p{margin-top:9px;font-size:16px;color:var(--muted)}
/* The count: a figure, not an ornament. Bottom right, in tabular
   numerals so it does not dance when it changes. */
.conta{position:relative;flex:none;text-align:right;line-height:1.1}
.conta b{display:block;font-size:38px;font-weight:600;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--ink)}
/* display:block on the label as well as on the number. Inline, the
   label sits in a line box that carries the minimum line height of the
   container (18,7px against the 12,1px of the label alone), and since
   the count rests on the bottom that extra height pushes the number
   up. Two stacked blocks are also what the design wants. */
.conta span{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}

/* --- l'invito ------------------------------------------------ */
.invito{border:1px dashed var(--line-2);border-radius:14px;background:transparent;
  padding:26px 24px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px}
.invito h2{font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.2;
  text-wrap:balance}
.invito p{margin:0;font-size:14.5px;color:var(--muted)}
.invito .cta{margin-top:11px;padding:0 22px}

/* Narrow: one column only, and the invitation steps over the grid. On
   the phone it comes AFTER seeing who is already there, which is the
   right moment to ask to join; at the top, above the logos, it would
   be a request made before the thank you. */
@media (max-width:900px){
  .wrap{grid-template-columns:minmax(0,1fr)}
  .intro,.invito,.grid{grid-column:1/-1}
  .intro{order:1} .grid{order:2} .invito{order:3}
}
@media (max-width:640px){
  .intro,.invito{padding:22px 18px 24px}
  .intro{flex-direction:column;align-items:flex-start;gap:14px}
  .conta{align-self:flex-end}
  .intro h1{font-size:25px}
  .conta b{font-size:30px}
}

/* --- grid ---------------------------------------------------
   All cards identical: same width, same plate, same place for the
   button. None is bigger than another, and the only thing that tells
   them apart is the ORDER. */
.grid{display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fill,minmax(288px,1fr))}

.card{background:var(--panel);border:1px solid var(--edge);border-radius:14px;
  padding:13px;display:flex;flex-direction:column;gap:14px;
  transition:border-color .16s,box-shadow .16s,transform .16s}
/* HOVER ONLY WHERE THERE IS A POINTER. On a touch screen :hover fires
   on tap and then sticks until something else is tapped, leaving a
   card lifted and shadowed after the finger has gone: a state meaning
   "you are pointing at this" on a device where nobody points. The lift
   is also 2px of layout shift on a list scrolled with a thumb. */
@media (hover:hover){
  .card:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-2px)}
}

/* The plate stays WHITE at night too: the sponsor files have a white
   ground baked in and none of them has an alpha channel. On dark paper
   fifteen rectangles would show. */
/* HOW BIG THE MARK SITS INSIDE THE PLATE: 86%, the proportion of the
   sponsor bar at the top (plate 56, mark 48, in app/rail.css) and of
   the teams page. The three plates of the site say the same thing the
   same way, so the same company looks the same wherever it turns
   up. */
.plate{--h:108px;
  height:124px;border-radius:10px;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden;padding:0 18px;
  transition:border-color .16s,box-shadow .16s}
@media (hover:hover){
  .card:hover .plate{border-color:var(--brand);box-shadow:0 1px 8px rgba(3,119,189,.16)}
}
/* --k evens out the AREA between marks of very different proportions:
   without it a 4:1 wordmark as tall as a square mark would weigh three
   times as much. */
.plate img{display:block;width:100%;height:calc(var(--h) * var(--k,1));
  object-fit:contain;object-position:center}
.plate img.scuro{border-radius:3px}

.body{display:flex;flex-direction:column;gap:7px;flex:1;padding:0 5px 3px}
.nome{font-size:17.5px;font-weight:600;letter-spacing:-.012em;line-height:1.25;
  text-wrap:balance}
.meta{display:flex;align-items:center;flex-wrap:wrap;gap:7px;
  font-size:12.5px;color:var(--muted)}
.cat{background:var(--sunken);border-radius:999px;padding:3px 9px;
  font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-2)}
.desc{font-size:14.5px;line-height:1.45;color:var(--muted)}

/* --- card footer --------------------------------------------
   Pushed to the bottom, so the buttons of every card sit on the same
   line even when the descriptions differ in length. */
.foot{margin-top:auto;padding-top:12px;display:flex;flex-direction:column;gap:11px}

/* Main sponsor: a fact, not a medal. No solid ground and no rosette:
   a rule on top, a small label and the teams. */
.main{border-top:1px solid var(--line);padding-top:10px;
  display:flex;flex-direction:column;gap:3px}
.main .lab{font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand)}
.main .riga{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;font-size:13px}
.main .riga b{font-weight:600;color:var(--ink-2)}
.main .riga span{flex:none;color:var(--faint);font-size:12px;
  font-variant-numeric:tabular-nums}

.cta{display:flex;align-items:center;justify-content:center;gap:8px;
  height:42px;border-radius:9px;border:1px solid var(--line-2);
  background:transparent;color:var(--brand);
  font-size:14px;font-weight:600;letter-spacing:.01em;
  transition:background .15s,border-color .15s,color .15s}
@media (hover:hover){
  .cta:hover{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
}
.cta svg{width:16px;height:16px;flex:none}
.cta.muto{color:var(--faint);border-style:dashed;pointer-events:none}

@media (max-width:640px){ :root{--pad:16px} }

/* motion.css */
/* REDUCED MOTION.
   ================
   Always the last sheet of every page: it has to win over everything
   and media queries add no specificity, so position is its only
   weapon.

   Transitions go off, animations jump to their end. A .01ms duration
   lands the animation on its final state, which is where the content
   is meant to be read.                                               */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition:none !important;
    animation-duration:.01ms !important;
  }
  .card:hover{transform:none}
  /* The phone strip jumps to the point instead of gliding there.
     Changing matchday scrolls back to the top, and that glide is
     exactly the unexpected motion to remove. */
  .scroll{scroll-behavior:auto}
  /* On the sparrow the generic rule makes things worse: an infinite
     animation cut to .01ms repeats the flight thousands of times a
     second and the bird flickers. Here it simply stops, still at
     mid flight. */
  .bird{animation:none !important;opacity:var(--bird-op);
        transform:translate3d(calc(50cqw - 50%),-50%,0)}
}