/* ==========================================================================
   Fondazione ing. Lino Gentilini - ETS
   Main stylesheet

   Rebuilt from the original theme. Values carried over:
     institutional blue  #006593      hover  #005177
     text                #333         menu   #777
     typeface            Lato 300/400/700
     column              max 1024px, text at 70% aligned right
     blue rule           3px to the right of the column
   ========================================================================== */

/* --------------------------------------------------------------------------
   LATO - self-hosted
   The .woff2 files go in assets/fonts/ under these exact names.
   If they are missing the site falls back to Helvetica/Arial and keeps
   working. SIL Open Font License 1.1 expressly permits serving the files
   from your own server.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Lato';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('../fonts/lato-300.woff2') format('woff2');
}
@font-face{
  font-family:'Lato';
  font-style:italic;
  font-weight:300;
  font-display:swap;
  src:url('../fonts/lato-300italic.woff2') format('woff2');
}
@font-face{
  font-family:'Lato';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/lato-400.woff2') format('woff2');
}
@font-face{
  font-family:'Lato';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/lato-700.woff2') format('woff2');
}

:root{
  --blue:       #006593;
  --blue-dark:  #005177;
  --text:       #333;
  --text-soft:  #5a5f63;
  --menu-link:  #777;
  --rule:       #d8d9da;
  --rule-light: #e8e9ea;
  --tint:       #f2f2f2;
  --column:     1024px;   /* width of the centre column */

  /* Panel background. The last number is the opacity: 1 = solid white,
     0.88 = slightly translucent. Below 0.85 the grey menu text starts to
     lose legibility over the darker banner photographs. */
  --panel-bg:   rgba(255,255,255,.88);

  /* Panel measurements, taken from the original menu_bg.png. The PNG is
     300x691, but the white runs from x=30 to x=269 (240px): the 30px
     each side were transparent margin for the shadow. The tail starts at
     y=564 and ends at y=661, so it is 97px deep. */
  --panel-w:    240px;
  --panel-x:    30px;   /* inset from the column edge */
  --tail-depth: 97px;   /* junction to point */
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:#fff;
  color:var(--text);
  font-family:Lato, Helvetica, Arial, sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.5;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }

:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

h1,h2,h3{ font-weight:400; margin:0; line-height:1.2; }
h1,h2{ font-size:1.35rem; text-transform:uppercase; margin-bottom:25px; letter-spacing:.01em; }
h3{ font-size:1.30rem; margin-bottom:15px; }
p{ margin:0 0 .65em; line-height:1.5; }
p:last-child{ margin-bottom:0; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--blue); color:#fff; padding:10px 16px; font-size:14px;
}
.skip:focus{ left:0; }

/* --------------------------------------------------------------------------
   LEFT PANEL
   The original panel was a 691px-tall background image sized for five
   items. Here it is rebuilt in CSS: same shape, same shadow, but it
   grows with its contents.
   -------------------------------------------------------------------------- */
.panel{
  position:fixed;
  top:0;

  /* Aligned to the left edge of the centre column, as in the original
     site: on wide screens the panel does not stay glued to the window
     edge. On narrow screens it goes flush again. */
  left:max(0px, calc(50% - (var(--column) / 2) + var(--panel-x)));
  width:var(--panel-w);
  max-height:100vh;
  overflow-y:auto;
  z-index:100;

  /* The scrollbar stays active but invisible: on very short windows the
     panel still scrolls with the wheel, without showing a grey bar down
     the edge of the white. */
  scrollbar-width:none;
  -ms-overflow-style:none;

  /* In the original the shadow was painted into the PNG and extended 8px
     each side with no offset. Here it is rebuilt in two passes: a tight
     one to separate the edge, a wide one for depth. */
  filter:drop-shadow(0 0 3px rgba(0,0,0,.24))
         drop-shadow(0 2px 18px rgba(0,0,0,.26));
}

.panel::-webkit-scrollbar{ width:0; height:0; }

.panel__inner{
  background:var(--panel-bg);

  /* flow-root keeps the logo's top margin inside the container. Without
     this line the margin "escapes", and what moves down is not the logo
     but the whole white panel, which started 30px below the top of the
     page. The space above the logo stays: it moves inside the white. */
  display:flow-root;
  padding:0;
}

/* The tail is a drawn shape, not a clip: it is an <svg> in the markup.
   That lets the point and both shoulders be rounded (clip-path:polygon
   only makes sharp vertices) and lets the shape follow --panel-w and
   --tail-depth instead of depending on fixed pixel coordinates. */
.tail{
  display:block;
  width:var(--panel-w);

  /* 28px more than the depth: that is the straight run the svg must
     contain above the junction in order to round the shoulders. It must
     not overlap the white above - the first stretch of the svg is full
     width, so the side continues without a step. With a negative margin
     the rectangle, which has square corners, would cover the very
     shoulders that were just rounded. */
  height:calc(var(--tail-depth) + 28px);
}
.tail path{ fill:var(--panel-bg); }

.brand{
  display:block;
  width:178px;
  margin:30px auto 22px;
}
.brand img{ width:178px; height:147px; }

.tagline{
  text-align:center;
  font-size:19px;
  font-style:italic;
  color:var(--text);
  margin:0 0 24px;
  line-height:1.35;
}

.menu{ list-style:none; margin:0; padding:0; }

.menu li + li{
  background-image:linear-gradient(to right,
    rgba(216,217,218,0) 0%, var(--rule) 22%,
    var(--rule) 78%, rgba(216,217,218,0) 100%);
  background-repeat:no-repeat;
  background-position:center top;
  background-size:100% 1px;
}

.menu a{
  position:relative;
  display:block;
  text-align:center;
  padding:13px 10px;
  color:var(--menu-link);
  text-transform:uppercase;
  font-size:16.5px;
  line-height:1.25;
  letter-spacing:.03em;
  transition:color .2s linear;
}

.menu a:hover{
  color:var(--blue-dark);
  text-decoration:none;
}

/* The section you are on: full colour, plus a blue rule beneath.
   The rule is absolutely positioned so it does not shift the other
   items. */
.menu a[aria-current="page"]{
  color:var(--blue);
  text-decoration:none;
}
.menu a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:6px;
  width:30px;
  height:2px;
  margin-left:-15px;
  background:var(--blue);
}

.menu a span{
  display:block;
  font-size:13px;
  text-transform:none;
  color:var(--blue);
  margin-top:2px;
}
.menu a:hover span,
.menu a[aria-current="page"] span{ color:#555; }

/* Access to the reserved area.
   No longer in the panel: it is a button for use inside the Archive
   page. The style stays here, ready to use. */
.reserved{
  display:inline-block;
  margin:0;
  padding:11px 22px;
  text-align:center;
  background:var(--blue);
  color:#fff;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.reserved:hover{ background:var(--blue-dark); color:#fff; text-decoration:none; }

/* --------------------------------------------------------------------------
   LANGUAGE SWITCH
   -------------------------------------------------------------------------- */
.langs{
  position:fixed;
  top:0; right:0;
  z-index:110;
  background:#fff;
  opacity:.9;
  box-shadow:0 0 3px 1px #888;
  padding:5px 12px;
  font-size:12px;
}
.langs ul{ list-style:none; margin:0; padding:0; display:flex; gap:6px; }
.langs a{ color:var(--menu-link); }
.langs a[aria-current="true"]{ color:var(--blue); font-weight:400; }
.langs .sep{ color:var(--rule); }

/* --------------------------------------------------------------------------
   BANNER
   -------------------------------------------------------------------------- */
.banner{ position:relative; background:var(--tint); overflow:hidden; }

/* Fixed ratio taken from the images (1600x692). The height no longer
   depends on how the first frame rounds off: that was what left the dark
   line under every image. */
.banner__view{
  position:relative;
  aspect-ratio:1600 / 692;
  overflow:hidden;
}

.slide{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity .9s ease;
}
.slide.is-on{ opacity:1; }

/* Very slow drift: half a percent per second. Images that are not active
   already sit at the final value, so when one leaves the stage there is
   no jump back. */
.slide img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.035);
}
.slide.is-on img{ animation:drift 6.6s linear forwards; }

@keyframes drift{
  from{ transform:scale(1); }
  to  { transform:scale(1.035); }
}

.caption{
  position:absolute;
  right:100px; bottom:100px;
  max-width:680px;
  background:#fff;
  opacity:.85;
  box-shadow:0 0 3px 1px #888;
  padding:15px;
  font-size:23px;
  line-height:1.25;
  color:var(--text);

  /* Half the duration of the image: it leaves, the text changes, it
     returns. Before, the text snapped halfway through the dissolve. */
  transition:opacity .45s ease;
}

.controls{
  position:absolute;
  left:100px; bottom:100px;
  display:flex; align-items:center; gap:16px;
}

.dots{ display:flex; gap:8px; }

.dots button{
  appearance:none;
  width:11px; height:11px;
  padding:0;
  border:1px solid #fff;
  background:rgba(255,255,255,.35);
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.dots button:hover{ background:rgba(255,255,255,.7); }
.dots button[aria-selected="true"]{ background:#fff; transform:scale(1.15); }

.pause{
  appearance:none;
  width:22px; height:22px;
  padding:0;
  border:1px solid #fff;
  background:rgba(255,255,255,.35);
  cursor:pointer;
  display:grid; place-items:center;
  transition:background .2s ease;
}
.pause:hover{ background:rgba(255,255,255,.6); }
.pause svg{ width:11px; height:11px; fill:#fff; display:block; }
.pause .icon-play{ display:none; }
.pause.is-paused .icon-pause{ display:none; }
.pause.is-paused .icon-play{ display:inline; }

/* --------------------------------------------------------------------------
   CONTENT
   -------------------------------------------------------------------------- */
.band{ padding:100px 0; }
.band--tint{ background:var(--tint); }
.band--white{ background:#fff; }

.column{
  max-width:var(--column);
  margin:0 auto;
  padding:0 10px;
  display:flow-root;
}
.column--rule{ border-right:3px solid var(--blue); }

.text{
  float:right;
  width:70%;
  padding-right:15px;
}
/* Not floated, so a grid can sit in it - but held to the same right-hand
   70% as .text, otherwise it runs under the fixed panel, which covers the
   left 270px of the column. */
.text--full{
  float:none;
  width:70%;
  margin-left:30%;
  padding-right:15px;
}

/* List of sections on the home page */
.sections{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:1px;
  background:var(--rule-light);
  border:1px solid var(--rule-light);
}
.sections li{ background:#fff; }
.sections a{
  display:block;
  height:100%;
  padding:20px 18px 22px;
  color:var(--text);
}
.sections a:hover{ background:var(--tint); text-decoration:none; }
.sections .num{
  display:block;
  font-size:12px;
  color:var(--blue);
  letter-spacing:.12em;
  margin-bottom:6px;
}
.sections .name{ display:block; font-size:17px; color:var(--blue); margin-bottom:4px; }
.sections .desc{ display:block; font-size:14px; color:var(--text-soft); line-height:1.4; }

/* --------------------------------------------------------------------------
   WORKS
   One entry per work: heading, dates, and a grid of photographs that open
   in the lightbox below.
   -------------------------------------------------------------------------- */
.work{
  padding-top:38px;
  margin-top:38px;
  border-top:1px solid var(--rule-light);
}
.work:first-child{ padding-top:0; margin-top:0; border-top:0; }

/* The name of a work. Regular weight, from the h1,h2,h3 rule at the top of
   this file, in the same blue as the accordion summaries on the award,
   foundation, archive and activities pages - so a section title looks the
   same wherever it appears.

   No arrow, no pointer, no hover: those say "this opens", and this does
   not. There is nothing to collapse here, because the photographs are the
   point of the page. Quaderni does the same, see .issue h3 below. */
.work h3{
  margin-bottom:4px;
  color:var(--blue);
}

.work__meta{
  font-size:14px;
  color:var(--text-soft);
  margin-bottom:16px;
}

.gallery{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:8px;
}
.gallery a{
  display:block;
  position:relative;
  aspect-ratio:3 / 2;
  overflow:hidden;
  background:var(--tint);
}
.gallery img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease, opacity .2s linear;
}
.gallery a:hover img,
.gallery a:focus-visible img{ transform:scale(1.04); opacity:.92; }

/* --------------------------------------------------------------------------
   LIGHTBOX
   Built here rather than pulled from a library: no dependency to keep up
   to date, and nothing loaded from anyone else's server.
   -------------------------------------------------------------------------- */
.lightbox{
  position:fixed; inset:0;
  z-index:300;
  display:none;
  background:rgba(20,23,26,.94);
  padding:24px;
}
.lightbox[open],
.lightbox.is-open{ display:grid; grid-template-rows:1fr auto; gap:14px; }

.lightbox__frame{
  display:grid;
  place-items:center;
  min-height:0;
}
.lightbox__frame img{
  max-width:100%;
  max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
}

.lightbox__bar{
  display:flex;
  align-items:flex-start;
  gap:18px;
  color:#fff;
  max-width:900px;
  margin:0 auto;
  width:100%;
}
.lightbox__text{ flex:1 1 auto; font-size:15px; line-height:1.45; }
.lightbox__text b{ display:block; font-weight:400; font-size:17px; margin-bottom:2px; }
.lightbox__text span{ color:#c8ccd0; }
.lightbox__count{
  flex:0 0 auto;
  font-size:13px;
  color:#c8ccd0;
  padding-top:4px;
}

.lightbox button{
  appearance:none;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.5);
  color:#fff;
  width:40px; height:40px;
  padding:0;
  cursor:pointer;
  display:grid; place-items:center;
  transition:background .2s ease;
}
.lightbox button:hover{ background:rgba(255,255,255,.28); }
.lightbox svg{ width:14px; height:14px; fill:#fff; }

.lightbox__close{ position:absolute; top:18px; right:18px; }
.lightbox__prev,
.lightbox__next{
  position:absolute;
  top:50%; margin-top:-20px;
}
.lightbox__prev{ left:18px; }
.lightbox__next{ right:18px; }

@media (max-width:640px){
  .lightbox{ padding:14px; }
  .lightbox__prev{ left:6px; }
  .lightbox__next{ right:6px; }
  .lightbox__bar{ flex-direction:column; gap:6px; }
}

@media (prefers-reduced-motion: reduce){
  .gallery img{ transition:none; }
  .lightbox button{ transition:none; }
}

/* --------------------------------------------------------------------------
   QUADERNI
   One entry per issue: the cover strip, the contents, and the download.
   -------------------------------------------------------------------------- */
.issue{
  padding-top:38px;
  margin-top:38px;
  border-top:1px solid var(--rule-light);
}
.issue:first-child{ padding-top:0; margin-top:0; border-top:0; }

.issue__cover{ margin-bottom:20px; }
.issue__cover img{ width:100%; height:auto; }

/* In the site blue, to match .work h3 and the accordion summaries
   elsewhere. See the note at .work h3 for why. */
.issue h3{
  margin-bottom:14px;
  color:var(--blue);
}

.issue__label{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-soft);
  margin-bottom:8px;
}

.contents{
  list-style:none;
  margin:0 0 22px;
  padding:0;
}
.contents li{
  padding:12px 0;
  border-top:1px solid var(--rule-light);
}
.contents li:last-child{ border-bottom:1px solid var(--rule-light); }
.contents .title{ display:block; }
.contents .author{
  display:block;
  font-size:14px;
  font-style:italic;
  color:var(--text-soft);
  margin-top:2px;
}

.download{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:11px 20px;
  background:var(--blue);
  color:#fff;
  font-size:14px;
}
.download:hover{ background:var(--blue-dark); color:#fff; text-decoration:none; }
.download svg{ width:14px; height:14px; fill:#fff; display:block; }
.download .size{ color:#cfe0ea; font-size:13px; }

/* --------------------------------------------------------------------------
   PREMIO - the editions
   Each edition is a native <details>: it opens and closes with no
   JavaScript, is reachable from the keyboard, and its contents are found
   by the browser's own search even while collapsed.
   -------------------------------------------------------------------------- */
.edition{ border-bottom:1px solid var(--rule-light); }
.edition:first-of-type{ border-top:1px solid var(--rule-light); }

.edition > summary{
  list-style:none;            /* Firefox */
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 2px;
  font-size:1.30rem;
  /* Regular weight, in the site blue. The blue is what marks a section
     title throughout the site - on the works and Quaderni pages too, which
     have no accordion - so the six sections read alike. The bold was
     dropped: the colour already does the work, and at 1.30rem bold made
     the award page shout.

     The arrow beside it inherits currentColor, and the hover darkens to
     --blue-dark, so the row still announces that it opens. */
  font-weight:400;
  color:var(--blue);
  transition:color .2s linear;
}
.edition > summary::-webkit-details-marker{ display:none; }
.edition > summary:hover{ color:var(--blue-dark); }

/* The arrow, drawn in CSS: points down when closed, up when open. */
.edition > summary::after{
  content:"";
  flex:0 0 auto;
  width:10px; height:10px;
  margin-right:6px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .25s ease;
}
.edition[open] > summary::after{
  transform:rotate(-135deg) translate(-2px,-2px);
}

.edition__body{ padding:4px 0 34px; }

/* Ceremony date, video and call PDF */
/* The call, on its own line straight under the heading */
.edition__call{ margin:2px 0 14px; }

/* Ceremony date followed by the link to the video */
.edition__facts{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  padding-bottom:24px;
  margin-bottom:8px;
  border-bottom:1px solid var(--rule-light);
  font-size:14px;
  color:var(--text-soft);
}
.edition__call a,
.edition__facts a{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.edition__call svg,
.edition__facts svg{ width:14px; height:14px; fill:currentColor; flex:0 0 auto; }

/* One award: heading, thesis, assessment, then the people */
.award{ padding-top:26px; }
.award + .award{ border-top:1px solid var(--rule-light); }

.award__kind{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-soft);
  margin-bottom:8px;
}
.award__names{ font-size:1.20rem; margin-bottom:6px; }
.award__thesis{ font-style:italic; margin-bottom:14px; }

.award__evaluation{
  border-left:3px solid var(--blue);
  padding-left:16px;
  margin-bottom:22px;
}
.award__evaluation .label{
  display:block;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-soft);
  margin-bottom:6px;
}

/* A person: biography left, portrait right */
.person{
  display:flex;
  gap:20px;
  align-items:flex-start;
  padding:14px 0;
}
.person + .person{ border-top:1px solid var(--rule-light); }
.person__text{ flex:1 1 auto; min-width:0; }
.person__text b{ font-weight:400; }
.person__link{ display:inline-block; font-size:14px; margin-top:6px; }
/* All eighteen portraits are supplied at 280x350 (4:5), so the column has a
   fixed height and the biographies line up down the page. */
.person__photo{
  flex:0 0 auto;
  order:2;
  width:140px;
}
.person__photo img{
  width:140px;
  height:175px;
  object-fit:cover;
  background:var(--tint);
}

@media (max-width:640px){
  .person{ flex-direction:column; gap:14px; }
  .person__photo{ order:0; width:120px; }
  .person__photo img{ width:120px; height:150px; }
  .edition > summary{ font-size:1.10rem; }
}

@media (prefers-reduced-motion: reduce){
  .edition > summary::after{ transition:none; }
}

/* The call, inside the 2026 edition */
/* The numbered headings of a document: the articles of the award call, and
   the Titoli of the statute on the foundation page. One declaration for
   both, so they cannot drift apart again - regular weight, 1rem, upper
   case, in the site blue. The statute adds a rule above each Titolo; that
   is the only difference, and it is set out at .statute h4 below. */
.call h4,
.statute h4{
  font-weight:400;
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--blue);
  margin:26px 0 10px;
}
.call p{ margin-bottom:12px; }

.call__contacts{
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid var(--rule-light);
}
/* A blank line between the heading and each of the two addresses. */
.call__contacts p{ margin-bottom:1.1em; line-height:1.7; }
.call__contacts p:last-child{ margin-bottom:0; }

.call__logos{
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--rule-light);
}
.call__logos img{ width:100%; height:auto; }

/* --------------------------------------------------------------------------
   THE FOUNDATION
   The statute and the governing bodies, in the same accordion as the award
   editions. Long legal prose needs tighter, more readable typography than
   the rest of the site.
   -------------------------------------------------------------------------- */
/* Type is shared with .call h4 above. The one addition: the statute runs to
   thirty articles across six Titoli, far enough apart that a reader
   scrolling needs to see where one part ends and the next begins. The
   award call is short and its articles follow one another closely, so it
   needs no such rule. */
.statute h4{
  margin-top:40px;
  padding-top:26px;
  border-top:1px solid var(--rule-light);
}
.statute h4:first-child{ margin-top:0; padding-top:0; border-top:0; }

/* The individual articles. In the same blue as every other title on the
   site - the Titolo above them, the accordion summaries, the section names
   on the works and Quaderni pages. Regular weight, so a Titolo still reads
   as the heavier of the two. */
.statute h5{
  font-weight:400;
  font-size:1rem;
  color:var(--blue);
  margin:22px 0 8px;
}
.statute p{ margin-bottom:10px; }
.statute ol{ margin:0 0 12px; padding-left:26px; }
.statute li{ margin-bottom:6px; }

/* The Italian text is the legally binding one. */
.statute__note{
  margin-bottom:26px;
  padding:12px 16px;
  background:var(--tint);
  border-left:3px solid var(--blue);
  font-size:14px;
  color:var(--text-soft);
}

/* Governing bodies */
.organ{ padding-top:24px; }
.organ + .organ{ margin-top:24px; border-top:1px solid var(--rule-light); }
.organ:first-child{ padding-top:0; }

.organ h4{
  font-weight:700;
  font-size:1.05rem;
  color:var(--blue);
  margin-bottom:12px;
}
.organ ul{ list-style:none; margin:0; padding:0; }
.organ li{ padding:7px 0; }
.organ li + li{ border-top:1px solid var(--rule-light); }
.organ .role{ color:var(--text-soft); }
.organ .role::before{ content:" \2014  "; }

/* --------------------------------------------------------------------------
   ARCHIVE
   -------------------------------------------------------------------------- */
.archive h4{
  font-weight:700;
  font-size:1.05rem;
  color:var(--blue);
  margin:26px 0 8px;
}
.archive h4:first-child{ margin-top:0; }
.archive ol{ margin:0 0 16px; padding-left:26px; }
.archive ul{ margin:0 0 16px; padding-left:22px; }
.archive li{ margin-bottom:5px; }

.caritro__lead{
  font-size:1.15rem;
  line-height:1.35;
  color:var(--blue);
  margin-bottom:16px;
}

/* The way in to the databases, at the foot of the page. */
.reserved-block{
  margin-top:38px;
  padding-top:30px;
  border-top:1px solid var(--rule-light);
}
.reserved-block p{ margin-bottom:16px; max-width:62ch; }

/* --------------------------------------------------------------------------
   ACTIVITIES
   -------------------------------------------------------------------------- */
.activity ul{ margin:0 0 14px; padding-left:22px; }
.activity ol{ margin:0 0 14px; padding-left:26px; }
.activity li{ margin-bottom:6px; }
.activity__more{ margin-top:20px; }

.links{ list-style:none; margin:0; padding:0; }
.links li{
  padding:10px 0;
  border-top:1px solid var(--rule-light);
}
.links li:last-child{ border-bottom:1px solid var(--rule-light); }
.links .where{
  display:block;
  font-size:13px;
  color:var(--text-soft);
  margin-top:1px;
}

/* --------------------------------------------------------------------------
   CARITRO PAGE
   Long descriptive text with two levels of heading.
   -------------------------------------------------------------------------- */
.crumb{ font-size:14px; margin-bottom:14px; }

.caritro__credits{
  font-size:14px;
  color:var(--text-soft);
  line-height:1.6;
  margin-bottom:30px;
  padding-bottom:24px;
  border-bottom:1px solid var(--rule-light);
}

.caritro h3{
  font-weight:700;
  font-size:1.25rem;
  color:var(--blue);
  margin:42px 0 12px;
  padding-top:30px;
  border-top:1px solid var(--rule-light);
}
.caritro h3:first-of-type{ margin-top:0; padding-top:0; border-top:0; }

.caritro h4{
  font-weight:400;
  font-size:1.02rem;
  color:var(--text);
  margin:26px 0 6px;
  padding-left:14px;
  border-left:3px solid var(--blue);
}
.caritro p{ margin-bottom:12px; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.site-footer{
  background:#fff;
  border-top:1px solid var(--rule-light);
  padding:70px 0 60px;
  font-size:15px;
}
.site-footer h2{ margin-bottom:20px; }
.site-footer .address{ margin-bottom:18px; }
.site-footer .office{
  display:inline-block;
  border-right:1px solid var(--rule);
  padding-right:25px;
  margin-right:15px;
  color:var(--text-soft);
}
.site-footer hr{
  border:0;
  border-top:1px solid var(--rule-light);
  margin:26px 0 20px;
}
.site-footer .channels{
  list-style:none;
  margin:0 0 22px;
  padding:0;
  display:flex;
  align-items:center;
  gap:20px;
}
/* Monochrome glyphs: the icons inherit the link colour through
   fill:currentColor, so the whole set changes with one value. */
.site-footer .channels a{
  display:block;
  line-height:0;
  color:var(--blue);
  transition:color .2s linear;
}
.site-footer .channels a:hover{ color:var(--blue-dark); }
.site-footer .channels svg{
  width:32px; height:32px;
  fill:currentColor;
  display:block;
}
.site-footer .note{ font-size:13px; color:var(--text-soft); }
.site-footer .note a{ margin-right:14px; }

/* --------------------------------------------------------------------------
   RESPONSIVE
   Below 1100px the panel moves to the top and the menu becomes
   horizontal.
   -------------------------------------------------------------------------- */
@media (max-width:1100px){
  .panel{
    position:static;
    left:auto;
    width:100%;
    filter:none;
    max-height:none;
    border-bottom:1px solid var(--rule-light);
  }

  /* The panel is now a horizontal bar: the tail no longer makes sense and
     must be hidden, or a triangle hangs under the menu. */
  .tail{ display:none; }

  .panel__inner{
    padding:0 14px 14px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:0 24px;
  }
  .brand{ width:120px; margin:14px 0; }
  .brand img{ width:120px; height:99px; }
  .tagline{ display:none; }
  .menu{ display:flex; flex-wrap:wrap; flex:1 1 auto; }
  .menu li + li{ background-image:none; }
  .menu a{ padding:10px 12px; font-size:13.5px; }
  .menu a span{ display:none; }
  .langs{ position:absolute; }
  .caption{ right:20px; bottom:20px; font-size:18px; padding:10px 12px; }
  .controls{ left:20px; bottom:24px; }
  .band{ padding:50px 0; }
  /* The panel is now a bar at the top: the column is free again. */
  .text{ float:none; width:100%; padding-right:0; }
  .text--full{ width:100%; margin-left:0; padding-right:0; }
  .column--rule{ border-right:0; }
}

@media (max-width:640px){
  /* Below the picture rather than over it: at this width a white box on
     top covers most of the image. Static, so the banner simply grows to
     whatever the caption needs - one line or three - with no measurement
     to keep in step. */
  .caption{
    position:static;
    max-width:none;
    opacity:1;
    box-shadow:none;
    background:var(--tint);
    font-size:16px;
    padding:12px 14px;
    border-bottom:1px solid var(--rule-light);
  }

  .controls{ left:14px; bottom:14px; }
  h2{ font-size:1.15rem; }
}

@media (prefers-reduced-motion: reduce){
  .slide{ transition:none; }
  .slide img{ transform:none; }
  .slide.is-on img{ animation:none; }
  .caption{ transition:none; }
  .dots button{ transition:none; }
}


/* ==========================================================================
   MEMBERS' AREA
   Append this block to the end of assets/css/site.css.

   Nothing above is changed. The forms borrow the colours and the Lato
   already in :root, so the area looks like the rest of the site rather
   than like an administration panel bolted to the side of it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   THE PANEL, WITH THE MEMBERS' MENU

   Seven items instead of six, and much longer names: "Sezione
   tecnico-amministrativa" at the panel's usual 16.5px runs past 240px
   and breaks in the wrong place. Smaller type and tighter padding, only
   for this menu.
   -------------------------------------------------------------------------- */
.menu--reserved a{
  font-size:13.5px;
  padding:10px 8px;
  letter-spacing:.02em;
}

/* Above 1100px the panel is a column and the seven items are a list; below
   it the panel is a bar and they are a row, which at 13.5px is already
   right. */
@media (max-width:1100px){
  .menu--reserved a{ font-size:12.5px; padding:9px 10px; }
}

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */
.form{ margin:0 0 10px; }
.form--narrow{ max-width:26em; }

.field{ margin:0 0 22px; }

.field label{
  display:block;
  margin-bottom:6px;
  font-size:14px;
  color:var(--text-soft);
  letter-spacing:.02em;
}

.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field input[type=password],
.field select{
  width:100%;
  padding:11px 12px;
  font:inherit;
  font-size:16px;             /* under 16px, iOS zooms the page on focus */
  color:var(--text);
  background:#fff;
  border:1px solid var(--rule);
  border-radius:0;            /* the site has no rounded corners anywhere */
  -webkit-appearance:none;
  appearance:none;
}

.field select{
  /* The arrow, drawn rather than fetched, so it matches on every browser. */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23777' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:10px 6px;
  padding-right:34px;
}

.field input:focus,
.field select:focus{
  outline:2px solid var(--blue);
  outline-offset:1px;
  border-color:var(--blue);
}

.field input[readonly]{
  background:var(--tint);
  color:var(--text-soft);
}

/* The sentence under a field: what the rule is, why the box is greyed out.
   Not a label, so it is tied to the input with aria-describedby instead. */
.hint{
  display:block;
  margin-top:7px;
  font-size:13.5px;
  line-height:1.45;
  color:var(--text-soft);
}

/* A checkbox sits beside its label rather than above it. */
.field--check{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.field--check input{
  width:18px; height:18px;
  margin:2px 0 0;
  flex:0 0 auto;
  accent-color:var(--blue);
}
.field--check label{ margin:0; font-size:15px; color:var(--text); }

/* --------------------------------------------------------------------------
   BUTTONS

   .reserved already exists, as the blue button on the Archive page. It was
   written for an <a>; these three lines let it be a <button> too, so the
   thing that submits a form is a real button and behaves like one from
   the keyboard.
   -------------------------------------------------------------------------- */
button.reserved{
  border:0;
  font-family:inherit;
  cursor:pointer;
}

/* Deleting an account. Not red for its own sake: red here is the only
   place on the site where a control undoes something that cannot be
   undone, so it should not look like the button that saves a telephone
   number. */
.reserved--danger{ background:#8a2b21; }
.reserved--danger:hover{ background:#701f17; }

.actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px 22px;
  margin:26px 0 0;
}

/* The quiet way out beside a button: forgotten password, cancel. */
a.quiet{ color:var(--text-soft); font-size:14px; }
a.quiet:hover{ color:var(--blue); }
.quiet{ color:var(--text-soft); font-size:14px; line-height:1.5; }

/* --------------------------------------------------------------------------
   MESSAGES

   A coloured bar down the left rather than a filled box: it reads at a
   glance, and it survives being printed or seen by someone who cannot
   distinguish the colours, because the words say the same thing.
   -------------------------------------------------------------------------- */
.notice{
  margin:0 0 26px;
  padding:14px 16px;
  border-left:3px solid var(--blue);
  background:var(--tint);
  font-size:15px;
  line-height:1.55;
}
.notice--ok  { border-left-color:#2e7d4f; }
.notice--bad { border-left-color:#8a2b21; }
.notice--warn{ border-left-color:#a2701c; }

.notice code.link-out{
  display:block;
  margin-top:8px;
  padding:10px 12px;
  background:#fff;
  border:1px solid var(--rule);
  font-size:13px;
  word-break:break-all;
}

/* A block set apart from what precedes it: "not accredited yet?", "change
   the password". */
.aside{
  margin-top:46px;
  padding-top:34px;
  border-top:1px solid var(--rule-light);
}
.aside h2{ margin-bottom:14px; }

/* --------------------------------------------------------------------------
   THE LIST OF PROFILES
   -------------------------------------------------------------------------- */
.table-scroll{ overflow-x:auto; }

.members{
  width:100%;
  border-collapse:collapse;
  font-size:14.5px;
}
.members th,
.members td{
  text-align:left;
  padding:12px 14px 12px 0;
  border-bottom:1px solid var(--rule-light);
  vertical-align:top;
}
.members th{
  font-weight:400;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-soft);
  border-bottom-color:var(--rule);
}

.state{ font-size:13px; }
.state--active   { color:#2e7d4f; }
.state--invited  { color:#a2701c; }
.state--suspended{ color:#8a2b21; }

.tag{
  display:inline-block;
  margin-left:6px;
  padding:1px 6px;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
  background:var(--blue);
}

.row-actions form{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
}

/* A button that has to look like a link, because it changes something and
   therefore cannot be one: only a form can carry the token that proves the
   request came from this site. */
.linky{
  border:0;
  padding:0;
  background:none;
  font:inherit;
  font-size:13.5px;
  color:var(--blue);
  cursor:pointer;
  text-align:left;
}
.linky:hover{ color:var(--blue-dark); text-decoration:underline; }
.linky--danger{ color:#8a2b21; }
.linky--danger:hover{ color:#701f17; }

/* For a heading that only a screen reader needs. */
.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}


/* ==========================================================================
   PRIVACY AND COOKIE POLICIES

   Long documents of running prose with numbered headings. The rest of the
   site is short blocks of text, so a few things need loosening: headings
   need to be told apart from one another at a glance when someone is
   looking for section 6, and the measure needs to stay narrow enough to
   read.
   ========================================================================== */

.text--legal h2{
  margin:44px 0 14px;
  padding-top:18px;
  border-top:1px solid var(--rule-light);
  font-size:19px;
}
.text--legal h2:first-child{ margin-top:0; padding-top:0; border-top:0; }

.text--legal h3{
  margin:30px 0 10px;
  font-size:16.5px;
  color:var(--text-soft);
}

.text--legal p,
.text--legal li{ line-height:1.7; }

.text--legal ul{ margin:14px 0 20px; padding-left:1.3em; }
.text--legal li{ margin-bottom:9px; }

/* The date at the foot of the document. */
.updated{
  margin-top:46px;
  padding-top:18px;
  border-top:1px solid var(--rule);
  font-size:14px;
  color:var(--text-soft);
}

/* The one cookie. A table because it is a table: four facts about one
   thing, which a reader should be able to check without reading a
   paragraph. On a narrow screen the rows become blocks with their heading
   in front of each cell, so nothing has to be scrolled sideways. */
.cookies{
  width:100%;
  border-collapse:collapse;
  margin:20px 0 26px;
  font-size:14.5px;
}
.cookies th,
.cookies td{
  text-align:left;
  vertical-align:top;
  padding:12px 16px 12px 0;
  border-bottom:1px solid var(--rule-light);
}
.cookies thead th{
  font-weight:400;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-soft);
  border-bottom-color:var(--rule);
}
.cookies code{
  font-size:13.5px;
  background:var(--tint);
  padding:2px 5px;
}

@media (max-width:700px){
  .cookies thead{
    position:absolute;
    width:1px; height:1px;
    margin:-1px; overflow:hidden;
    clip:rect(0 0 0 0);
  }
  .cookies tr{
    display:block;
    padding:14px 0;
    border-bottom:1px solid var(--rule);
  }
  .cookies td{
    display:block;
    padding:0 0 10px;
    border:0;
  }
  .cookies td::before{
    content:attr(data-label);
    display:block;
    margin-bottom:3px;
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--text-soft);
  }
}


/* ==========================================================================
   FIGURES

   A single photograph standing in the text: the representative image of an
   activity, the archive boxes, the portrait of the two brothers. Distinct
   from .gallery, which is a grid of thumbnails that open in the lightbox;
   these are not clickable and have nothing behind them.
   ========================================================================== */

.figure{
  margin:0 0 26px;
  /* No width or height is declared on the images, because the photographs
     have not been supplied yet and their proportions are unknown. The
     browser therefore reserves no space and the text shifts once each one
     loads. When the files exist, measure them and add width and height to
     the <img> tags - it is two attributes and it removes the jump. */
}

.figure img{
  display:block;
  width:100%;
  height:auto;
  background:var(--tint);   /* the space the photograph will occupy */
}

.figure figcaption{
  margin-top:9px;
  font-size:14px;
  line-height:1.5;
  color:var(--text-soft);
}

/* Closing the tinted band at the top of a page: the photograph is the last
   thing in the section, so it needs no margin beneath it - the band's own
   100px of padding provides the gap. A little air above it instead, to set
   it apart from the paragraph it follows. */
.figure--tail{
  margin-top:34px;
  margin-bottom:0;
}

/* Inside an activity panel the photograph comes first, so it needs no
   space above it and a clear gap before the text. */
.activity .figure{ margin-top:0; margin-bottom:22px; }

/* --------------------------------------------------------------------------
   OUTWARD LINKS

   A link that leaves the site, beside .reserved which does not. Deliberately
   not a second blue button: two buttons of equal weight would make the
   reader choose between them, when one continues on this site and the other
   hands them to somebody else's. The arrow marks the departure.
   -------------------------------------------------------------------------- */
.outward{
  display:inline-block;
  font-size:14.5px;
  line-height:1.4;
  color:var(--blue);
}
.outward::after{
  content:"\2197";          /* north-east arrow */
  margin-left:.4em;
  font-size:.95em;
  color:var(--text-soft);
}
.outward:hover{ color:var(--blue-dark); }
.outward:hover::after{ color:var(--blue-dark); }

/* .activity__more may now hold a button, a link, or both. */
.activity__more{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 24px;
}


/* ==========================================================================
   THE INVENTORY SEARCH
   ========================================================================== */

.search{ margin:0 0 34px; }

/* Two fields side by side above 620px, stacked below it. The text box and
   the button stay full width in both. */
.search__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 24px;
}
@media (max-width:620px){
  .search__row{ grid-template-columns:1fr; }
}

/* The series list carries "Serie — Fondo" on one line and can be long. */
.search select{ max-width:100%; }

/* --------------------------------------------------------------------------
   RESULTS

   Records, not table rows. Twelve columns of archival description will not
   fit across a screen, and a table that scrolls sideways is unusable on a
   phone - which is where a researcher standing in front of a shelf will
   be reading it.
   -------------------------------------------------------------------------- */
.records{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:none;
}

.record{
  padding-top:30px;
  margin-top:30px;
  border-top:1px solid var(--rule-light);
}
.record:first-child{ padding-top:0; margin-top:0; border-top:0; }

.record__title{
  font-size:1.15rem;
  font-weight:400;
  color:var(--blue);
  margin:0 0 4px;
}

.record__id{
  font-size:13px;
  color:var(--text-soft);
  margin:0 0 12px;
  letter-spacing:.02em;
}

.record__desc{ margin:0 0 14px; }

/* Label above value, so a long physical description is not squeezed into
   half the width. */
.record__fields{
  margin:0;
  font-size:14.5px;
}
.record__fields dt{
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-soft);
  margin-top:12px;
}
.record__fields dd{
  margin:2px 0 0;
  color:var(--text);
}

/* Above 700px the labels sit in a narrow left column instead. */
@media (min-width:700px){
  .record__fields{
    display:grid;
    grid-template-columns:170px 1fr;
    gap:8px 20px;
  }
  .record__fields dt{ margin-top:0; padding-top:2px; }
  .record__fields dd{ margin:0; }
}

/* The series and fonds descriptions, folded away: they repeat for every
   record in a result set, so they would otherwise bury the records. */
.record__context{ margin-top:16px; }
.record__context > summary{
  cursor:pointer;
  font-size:13.5px;
  color:var(--blue);
  padding:6px 0;
}
.record__context > summary:hover{ color:var(--blue-dark); }
.record__context h3{
  font-size:14px;
  color:var(--text-soft);
  margin:14px 0 4px;
}
.record__context p{
  font-size:14.5px;
  margin:0 0 10px;
}

/* The years the inventory covers, under the two date boxes. */
.hint--range{
  margin:-6px 0 0;
  font-size:13.5px;
  color:var(--text-soft);
}


/* ==========================================================================
   RESULTS THAT ARE NOT TO BE COPIED

   The Foundation's terms: the inventory may be consulted here, and a PDF
   of a result set is asked for by email. See the note in the script at the
   foot of tecnico-amministrativa.php for what this does and does not
   achieve - in short, it states the terms and stops copying by reflex; it
   is not a technical barrier, and nothing should be built on the
   assumption that it is.
   ========================================================================== */

.protected{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;

  /* No long-press callout or "copy" balloon on iOS and Android. */
  -webkit-touch-callout:none;

  /* The blue drag-highlight would otherwise still appear for the instant
     before the script clears it. */
  -webkit-tap-highlight-color:transparent;
}

.protected ::selection      { background:transparent; }
.protected ::-moz-selection { background:transparent; }

/* The record text stays perfectly readable - nothing here dims or blurs
   it. Making an archive harder to read in order to make it harder to copy
   would punish the honest reader and barely inconvenience anyone else. */

/* --------------------------------------------------------------------------
   ASKING FOR A PDF
   -------------------------------------------------------------------------- */
.request{
  margin-top:44px;
  padding:26px 28px;
  background:var(--tint);
  border-left:3px solid var(--blue);
}
.request h2{
  margin:0 0 10px;
  font-size:1.05rem;
  color:var(--blue);
}
.request p{ margin:0 0 14px; }

/* The five criteria, written out so they can be transcribed or read over
   the telephone by a member who cannot copy them off the page. */
.request__criteria{
  margin:18px 0;
  font-size:14.5px;
}
.request__criteria dt{
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-soft);
  margin-top:10px;
}
.request__criteria dd{ margin:2px 0 0; }

@media (min-width:700px){
  .request__criteria{
    display:grid;
    grid-template-columns:190px 1fr;
    gap:7px 20px;
  }
  .request__criteria dt{ margin-top:0; padding-top:2px; }
  .request__criteria dd{ margin:0; }
}

.request .actions{ margin-top:20px; }

/* --------------------------------------------------------------------------
   PRINTING

   The records themselves do not print; the request block does, so a sheet
   that comes out of the printer still says where to ask for the PDF and
   carries the criteria that were used.
   -------------------------------------------------------------------------- */
@media print{
  .protected{ display:none !important; }
  .protected::after{
    content:"";
  }
  .search, .panel, .site-footer{ display:none !important; }
  .request{ border-left:2px solid #000; }
}


/* ==========================================================================
   THE INDEX OF ABBREVIATIONS
   Folded away at the foot of the technical-administrative section.
   ========================================================================== */

.sigle__list{
  margin:18px 0 0;
  font-size:14.5px;
  line-height:1.5;
}

/* Below 620px the sigla sits above its meaning: a two-column grid narrow
   enough for a phone would break "Associazione Italiana Societa
   Concessionarie Autostrade e Trafori" one word per line. */
.sigle__list dt{
  font-weight:400;
  color:var(--blue);
  margin-top:14px;
}
.sigle__list dd{
  margin:1px 0 0;
  color:var(--text);
}

@media (min-width:620px){
  .sigle__list{
    display:grid;
    grid-template-columns:130px 1fr;
    gap:9px 22px;
    align-items:baseline;
  }
  .sigle__list dt{ margin-top:0; }
  .sigle__list dd{ margin:0; }
}

/* Fifty-seven rows: on a wide screen they read better in two columns than
   as one long ladder the eye has to travel twice. The browser balances
   them, and a pair is never split across the break. */
@media (min-width:1000px){
  .sigle .edition__body{
    column-count:2;
    column-gap:44px;
  }
  .sigle__list{ display:block; }        /* grid and columns do not mix */
  .sigle__list dt{
    margin-top:12px;
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
  }
  .sigle__list dd{
    margin:1px 0 0;
    padding-left:0;
    break-before:avoid;                 /* keep a meaning with its sigla */
    -webkit-column-break-before:avoid;
  }
  .sigle__list dt:first-child{ margin-top:0; }
}


/* ==========================================================================
   THE LEGEND
   Folded away at the foot of the photographic section.
   ========================================================================== */

.legenda__table{
  width:100%;
  border-collapse:collapse;
  margin:18px 0 14px;
  font-size:14px;
  line-height:1.5;
}

.legenda__table th,
.legenda__table td{
  text-align:left;
  vertical-align:top;
  padding:12px 16px 12px 0;
  border-bottom:1px solid var(--rule-light);
}

.legenda__table thead th{
  font-weight:400;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-soft);
  border-bottom-color:var(--rule);
}

/* The field name: the row's own heading, so a screen reader announces it
   before each cell rather than leaving the reader to guess which field a
   description belongs to. */
.legenda__table tbody th{
  font-weight:400;
  color:var(--blue);
  width:22%;
  padding-right:22px;
}

.legenda__table td p{ margin:0 0 8px; }
.legenda__table td p:last-child{ margin-bottom:0; }

/* A field that does not apply to that kind of unit. Quiet, because it is
   the absence of a rule rather than a missing value. */
.legenda__table .na{ color:var(--rule); }

/* Below 820px three columns of prose cannot be read side by side, so each
   row becomes a block and every cell carries its column heading in front
   of it - which is what data-label is for. Nothing scrolls sideways. */
@media (max-width:820px){
  .legenda__table thead{
    position:absolute;
    width:1px; height:1px;
    margin:-1px; overflow:hidden;
    clip:rect(0 0 0 0);
  }
  .legenda__table tr{
    display:block;
    padding:16px 0;
    border-bottom:1px solid var(--rule);
  }
  .legenda__table th,
  .legenda__table td{
    display:block;
    width:auto;
    padding:0 0 12px;
    border:0;
  }
  .legenda__table tbody th{
    font-size:15px;
    padding-bottom:8px;
  }
  .legenda__table td::before{
    content:attr(data-label);
    display:block;
    margin-bottom:3px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--text-soft);
  }
  /* A row whose cell is only a dash says nothing worth a heading. */
  .legenda__table td:has(> .na:only-child){ display:none; }
}

/* The button that opens an image, inside a result. */
.record__image{ margin:16px 0 0; }
.reserved--small{
  font-size:13.5px;
  padding:9px 18px;
}

/* The image viewer. Sized to the window rather than to the file, so a
   1400px scan of a drawing does not force the page sideways. */
.viewer{
  background:var(--tint);
  padding:14px;
  text-align:center;
}
.viewer img{
  max-width:100%;
  height:auto;
  display:block;
  margin:0 auto;
  -webkit-user-drag:none;
  user-select:none;
}


/* ==========================================================================
   THE DRAWING, FOLDED BELOW ITS RECORD

   A panel like every other on this site, opening in place. Inside it a
   frame that scrolls; Ctrl and the wheel zoom. No buttons: the gesture is
   the one people already use on maps.
   ========================================================================== */

.figura{ margin-top:18px; }

/* A fixed height, because these scans run to a hundred times wider than
   they are tall: left to itself one would be a hair-thin line across the
   page, or would push the next record several screens down.

   Dark, because a scan of tracing paper is pale and on white it would have
   no edge - the reader could not see where the sheet ends. */
.figura__frame{
  background:#111;
  border:1px solid var(--rule);
  height:340px;
  overflow:auto;
  cursor:grab;
  -webkit-overflow-scrolling:touch;
  /* The scrollbars are the only instructions this needs, so they are made
     visible rather than left to fade away. */
  scrollbar-color:#555 #1b1b1b;
}
.figura__frame.is-panning{ cursor:grabbing; }

.figura__frame::-webkit-scrollbar{ width:12px; height:12px; }
.figura__frame::-webkit-scrollbar-track{ background:#1b1b1b; }
.figura__frame::-webkit-scrollbar-thumb{
  background:#555;
  border:3px solid #1b1b1b;
  border-radius:6px;
}
.figura__frame::-webkit-scrollbar-thumb:hover{ background:#6b6b6b; }

.figura__frame img{
  display:block;
  /* The size is set by the script once the drawing has been measured.
     Until then it is held inside the frame, so nothing jumps. */
  max-width:100%;
  max-height:338px;
  user-select:none; -webkit-user-select:none;
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
}

/* On a short screen the frame takes too much of it; on a tall one it can
   afford more. */
@media (max-height:700px){
  .figura__frame{ height:240px; }
  .figura__frame img{ max-height:238px; }
}
@media (min-width:1100px){
  .figura__frame{ height:420px; }
  .figura__frame img{ max-height:418px; }
}

@media print{ .figura{ display:none; } }

/* --------------------------------------------------------------------------
   WHILE THE DRAWING IS ON ITS WAY

   These scans are large and come from the Foundation's own server, so a
   few seconds of nothing is normal. A turning circle says "coming", which
   an empty dark rectangle does not.

   The frame becomes a centring box while it waits, and goes back to a
   plain scrolling box once the drawing is there - otherwise centring would
   fight with the scrolling.
   -------------------------------------------------------------------------- */
.figura__frame.is-loading,
.figura__frame.is-broken{
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* The image must not push the circle off-centre while it is arriving, so
   it is taken out of the flow until it is ready. Positioned against the
   frame, not against .figura: against .figura it would be laid out over
   the summary as well, and on a slow connection the turning circle would
   appear to sit on top of the panel's own heading. */
.figura__frame{ position:relative; }
.figura__frame.is-loading img{
  position:absolute;
  left:0; top:0;
  opacity:0;
}

.figura__spinner{
  display:none;
  width:34px; height:34px;
  border:3px solid #333;
  border-top-color:#8fb4d4;
  border-radius:50%;
  animation:figura-spin .9s linear infinite;
}
.figura__frame.is-loading .figura__spinner{ display:block; }

@keyframes figura-spin{ to{ transform:rotate(360deg); } }

/* Someone who has asked for less movement gets a pulse instead of a spin:
   a rotating element is a common trigger for motion sickness, and the
   message - "something is happening" - survives the change. */
@media (prefers-reduced-motion:reduce){
  .figura__spinner{
    animation:figura-pulse 1.4s ease-in-out infinite;
    border-top-color:#333;
    background:#8fb4d4;
    border-radius:50%;
  }
  @keyframes figura-pulse{ 0%,100%{ opacity:.25 } 50%{ opacity:1 } }
}

/* When it never arrives. */
.figura__broken{
  display:none;
  color:#9b9b9b;
  font-size:14px;
  text-align:center;
  padding:0 1em;
}
.figura__frame.is-broken .figura__broken{ display:block; }
.figura__frame.is-broken img{ display:none; }

/* --------------------------------------------------------------------------
   HOW TO USE THE FRAME

   Said once beneath each drawing. Without it the two gestures are
   undiscoverable: nothing on screen suggests that Ctrl changes what the
   wheel does.
   -------------------------------------------------------------------------- */
.figura__help{
  margin:9px 0 0;
  font-size:13px;
  line-height:1.45;
  color:var(--text-soft);
}

/* A touch screen has neither a Ctrl key nor a mouse button, and pinching
   already works. Telling a phone reader to hold the left button would be
   telling them to do something impossible. */
@media (hover:none){
  .figura__help{ display:none; }
}


/* ==========================================================================
   THE MENU ON A NARROW SCREEN

   Above 640px nothing changes: the panel lists every section, as it always
   has. Below it the sections fold behind three lines.

   The menu is OPEN by default and closed only once the script has run and
   added .is-collapsible. A page whose JavaScript never arrives therefore
   shows a long menu rather than no menu at all - which is the right way
   round for a site whose whole purpose is to be read.
   ========================================================================== */

.burger{ display:none; }

@media (max-width:640px){

  .burger{
    display:flex;
    align-items:center;
    justify-content:center;
    /* 44px: the smallest target a finger reliably hits. */
    width:44px; height:44px;
    margin-left:auto;
    padding:0;
    background:none;
    border:1px solid var(--rule-light);
    cursor:pointer;

    /* The IT / EN switch is fixed to the top right corner, which is where
       this button would otherwise sit. Nudged down and left so the two do
       not overlap - and the switch stays reachable, which matters more
       than either being perfectly aligned. */
    margin-top:26px;
    margin-right:2px;
  }
  .burger:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

  .burger__box{
    display:block;
    width:22px; height:16px;
    position:relative;
  }
  .burger__line{
    position:absolute;
    left:0; right:0;
    height:2px;
    background:var(--menu-link);
    transition:transform .2s ease, opacity .15s ease;
  }
  .burger__line:nth-child(1){ top:0; }
  .burger__line:nth-child(2){ top:7px; }
  .burger__line:nth-child(3){ top:14px; }

  /* Open: the outer lines meet in the middle and cross, the middle one
     goes. The three lines become the cross that closes them. */
  .is-open .burger__line:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .is-open .burger__line:nth-child(2){ opacity:0; }
  .is-open .burger__line:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* The bar holds the logo and the button on one line, with the menu
     wrapping underneath. */
  .panel__inner{ flex-wrap:wrap; padding-bottom:0; }
  .brand{ margin:12px 0; }

  .menu{
    flex:0 0 100%;
    display:block;
    border-top:1px solid var(--rule-light);
    margin-top:4px;
  }

  /* Hidden only once the script is there to bring it back. */
  .panel.is-collapsible .menu{ display:none; }
  .panel.is-collapsible.is-open .menu{ display:block; }

  /* One section per line, left-aligned and full width: at this size a
     centred row of seven items is unreadable, and a target that spans the
     screen is one nobody misses. */
  .menu li + li{ border-top:1px solid var(--rule-light); }
  .menu a{
    text-align:left;
    padding:13px 4px;
    font-size:15px;
  }
  /* The blue second line is worth having again here - there is room for it
     in a vertical list, unlike in the horizontal bar above 640px. */
  .menu a span{ display:block; font-size:12.5px; margin-top:2px; }

  /* The underline marking the current page was centred for a centred menu;
     left-aligned it belongs at the left. */
  .menu a[aria-current="page"]::after{ left:4px; margin-left:0; }

  /* The members' menu is longer still. */
  .menu--reserved a{ font-size:14px; padding:12px 4px; }
}

@media (prefers-reduced-motion:reduce){
  .burger__line{ transition:none; }
}


/* ==========================================================================
   THE BANNER ON EVERY PAGE, BUT ONLY ON A PHONE

   Above 640px the banner belongs to the home page alone, as it always
   has: the other pages open on their own heading, which is what a reader
   who followed a link came for.

   Below 640px the panel has folded into three lines and the top of every
   page is otherwise a logo and a button, so the banner gives each page an
   image to open on.

   The images cost nothing on a wide screen: inside a display:none box a
   lazy image is not downloaded, and header.php makes every slide lazy
   whenever the banner is in this mode. Only .banner--mobile is hidden -
   the home page's own banner has no such class and is always shown.
   ========================================================================== */
@media (min-width:641px){
  .banner--mobile{ display:none; }
}

/* Printing a page should not spend a sheet on a photograph. */
@media print{
  .banner{ display:none; }
}