:root{
  --ground:#0d1714;
  --text:rgba(233,240,234,.86);
  --bright:rgba(233,240,234,.96);
  --muted:rgba(233,240,234,.52);
  --faint:rgba(233,240,234,.34);
  --rule:rgba(233,240,234,.11);
  --green:#8cb49f;
  --coral:#c8897a;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",
         Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--text);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  font-weight:400;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:42rem;margin:0 auto;padding:2.5rem 1.5rem 6rem}

a{color:var(--green);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .15s}
a:hover{border-bottom-color:var(--green)}
a:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px}

header.site{display:flex;flex-wrap:wrap;gap:.5rem 2rem;align-items:baseline;
  margin-bottom:4rem}
header.site .name{font-size:1.05rem;font-weight:500;letter-spacing:.02em}
header.site .name a{color:var(--bright);border:0}
header.site nav{margin-left:auto;font-size:.9rem}
header.site nav a{margin-left:1.5rem;color:var(--muted)}
header.site nav a:hover{color:var(--green)}

h1{font-size:1.55rem;line-height:1.3;font-weight:400;letter-spacing:-.01em;
  color:var(--bright);margin:0 0 1.1rem;max-width:26ch}
h2{font-size:1rem;font-weight:500;letter-spacing:.05em;color:var(--muted);
  margin:3.5rem 0 1rem}
p{margin:0 0 1.1rem;max-width:36rem}
.lead{font-size:1.1rem;line-height:1.6;color:var(--text);max-width:34rem}
.en{color:var(--faint);max-width:36rem}
.small{font-size:.9rem;color:var(--muted)}

/* Fondeo: el nombre aparece, el ancla desciende de la ultima letra,
   atraviesa la superficie, oscila y se detiene. Sucede una sola vez. */
.hero{position:relative;margin:0 0 2.4rem;padding-bottom:8rem}
.mark{position:relative;display:inline-block;
  font-size:clamp(2.7rem,10vw,3.9rem);font-weight:400;letter-spacing:-.035em;
  line-height:1;color:var(--bright)}
.rig{position:absolute;right:.1em;top:100%;width:1px;height:5.4rem;transform-origin:top}
.chain{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(140,180,159,0),rgba(140,180,159,.4))}
.anchor{position:absolute;top:100%;left:50%;transform:translate(-50%,-2px);
  color:var(--green);opacity:.42;display:block}
.sea{position:absolute;left:0;right:0;bottom:4.1rem;height:18px;
  color:var(--green);opacity:.22;overflow:hidden}
.sea svg{display:block;width:200%;height:100%}
.sea path{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}

@media(prefers-reduced-motion:no-preference){
  .mark{animation:emerge .85s ease-out both}
  .rig{animation:fondeo 2.5s cubic-bezier(.4,.05,.3,1) .85s both}
  .sea{animation:superficie 1.4s ease-out .5s both}
  .sea svg{animation:marea 11s linear infinite}
  @keyframes emerge{
    from{opacity:0;transform:translateY(.35em)}
    to{opacity:1;transform:none}
  }
  @keyframes fondeo{
    0%{height:0}
    44%{height:6.15rem}
    60%{height:4.4rem}
    74%{height:5.5rem}
    85%{height:4.85rem}
    93%{height:5.2rem}
    100%{height:5.4rem}
  }
  @keyframes superficie{from{opacity:0}to{opacity:.22}}
  @keyframes marea{from{transform:translateX(0)}to{transform:translateX(-50%)}}
}

.figures{display:flex;flex-wrap:wrap;gap:2.5rem 3.5rem;margin:2.5rem 0 1rem}
.figures .n{font-size:1.9rem;font-weight:400;letter-spacing:-.01em;color:var(--bright);
  line-height:1}
.figures .n.off{color:var(--coral)}
.figures .lab{font-size:.85rem;color:var(--muted);margin-top:.5rem;max-width:11rem;
  line-height:1.4}

table{border-collapse:collapse;width:100%;font-size:.94rem;margin:0 0 1rem}
th,td{text-align:left;padding:.55rem 1rem .55rem 0;border-bottom:1px solid var(--rule);
  vertical-align:top;font-weight:400}
th{color:var(--faint);font-size:.8rem;letter-spacing:.04em}
td:last-child,th:last-child{padding-right:0}
td.num,th.num{text-align:right;font-family:var(--mono);font-size:.88rem}
.scroll{overflow-x:auto}

dl.record{margin:0}
dl.record div{display:grid;grid-template-columns:14rem 1fr;gap:1.5rem;
  padding:.85rem 0;border-bottom:1px solid var(--rule)}
dl.record dt{color:var(--muted);font-size:.92rem}
dl.record dt span{display:block;color:var(--faint);font-size:.78rem}
dl.record dd{margin:0;overflow-wrap:anywhere;color:var(--text)}
@media(max-width:34rem){dl.record div{grid-template-columns:1fr;gap:.25rem}}

.mono{font-family:var(--mono);font-size:.88rem}
.repaired{color:var(--coral)}
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.5rem 0 .75rem}
.filters input,.filters select{font:inherit;font-size:.92rem;padding:.5rem .6rem;
  border:1px solid var(--rule);background:transparent;color:var(--text);border-radius:3px}
.filters input{flex:1 1 12rem;min-width:0}
.filters select{color:var(--muted)}
#tally{font-size:.85rem;color:var(--faint);margin:0 0 1.5rem}

footer{margin-top:5rem;padding-top:1.5rem;border-top:1px solid var(--rule);
  font-size:.85rem;color:var(--faint)}
footer p{max-width:36rem;margin-bottom:.5rem}
footer .credit{font-size:.85em;opacity:.75}