/* antoniocanto.com — "Anuario" identity. One stylesheet, no framework. */
@font-face{font-family:"Piazzolla";src:url("../fonts/piazzolla-roman.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Piazzolla";src:url("../fonts/piazzolla-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}

:root{
  --paper:#F5F2EA; --paper-2:#ECE8DC; --ink:#1B1C1E; --ink-2:#4E4C46; --ink-3:#6A675F;
  --hair:#CDC8BA; --grid:#DDD8CB; --signal:#C8401F; --blue:#1B62A5; --ctx:#A9A496;
  --serif:"Piazzolla",Georgia,"Times New Roman",serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --page:76rem; --gut:clamp(1.1rem,3.4vw,2.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:1.125rem;line-height:1.55;font-optical-sizing:auto;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration-color:var(--signal);text-decoration-thickness:.09em;text-underline-offset:.2em}
a:hover{color:var(--signal)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:1px}
::selection{background:var(--ink);color:var(--paper)}
h1,h2,h3,h4{font-weight:560;line-height:1.08;margin:0;letter-spacing:-.012em;text-wrap:balance}
p{margin:0 0 1em}
p,li{text-wrap:pretty}
.wrap{max-width:var(--page);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:20;font-family:var(--sans)}
.skip:focus{left:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* labels: condensed grotesque, used for everything that is apparatus rather than prose */
.lab,.mast,.kick,figcaption .no,th,.src,.tbl,.facts dt,.btn,.note-h,.crumb,.foot,.tag{font-family:var(--sans);font-stretch:82%}
.kick{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
.num{font-family:var(--sans);font-stretch:88%;font-variant-numeric:tabular-nums lining-nums}

/* masthead */
.mast{border-top:6px solid var(--ink);border-bottom:1px solid var(--ink);font-size:.86rem}
.mast .wrap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.35rem 1.5rem;padding-top:.7rem;padding-bottom:.7rem}
.mast .name{font-weight:700;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;font-stretch:88%}
.mast nav ul{display:flex;flex-wrap:wrap;gap:.2rem 1.25rem;list-style:none;margin:0;padding:0}
.mast nav a{text-decoration:none;font-weight:500;letter-spacing:.03em;padding:.35rem 0;display:inline-block;border-bottom:2px solid transparent}
.mast nav a[aria-current="page"]{border-bottom-color:var(--signal)}
.mast nav a:hover{border-bottom-color:var(--ink);color:var(--ink)}
.mast .lang{color:var(--ink-2)}

/* section apparatus: a number in the margin, a heavy rule, then content */
.sec{border-top:2px solid var(--ink);margin-top:clamp(3rem,7vw,5.5rem);padding-top:.9rem}
.sec-h{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,10fr);gap:0 var(--gut);align-items:baseline;margin-bottom:clamp(1.4rem,3vw,2.4rem)}
.sec-h .no{font-family:var(--sans);font-stretch:75%;font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.sec-h h2{font-size:clamp(1.55rem,3.2vw,2.3rem);max-width:24ch}
.cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,10fr);gap:0 var(--gut)}
.cols>.main{grid-column:2;min-width:0}
.cols>.side{grid-column:1;font-family:var(--sans);font-stretch:82%;font-size:.82rem;line-height:1.4;color:var(--ink-2)}
.prose{max-width:41rem}
.prose h2,.prose h3{font-size:1.3rem;margin:2.1em 0 .55em;line-height:1.15}
.prose ul{padding-left:1.1em;margin:0 0 1em}
.prose li{margin-bottom:.35em}
.lede{font-size:clamp(1.2rem,2.1vw,1.42rem);line-height:1.42;max-width:38rem}
.small{font-size:.92rem;color:var(--ink-2)}

/* home opening */
.open{display:grid;grid-template-columns:minmax(0,7.4fr) minmax(0,4.6fr);gap:clamp(1.5rem,5vw,4.5rem);padding-top:clamp(2rem,6vw,4.6rem);align-items:end}
.open h1{font-size:clamp(2.05rem,5.4vw,4.1rem);font-weight:480;line-height:1.02;letter-spacing:-.022em}
.open h1 em{font-style:italic;font-weight:420}
.open .kick{margin-bottom:1.3rem;display:block}
.open .lede{margin-top:1.6rem}
.facts{margin:0;border-top:2px solid var(--ink)}
.facts div{display:grid;grid-template-columns:6.2rem minmax(0,1fr);gap:.8rem;border-bottom:1px solid var(--hair);padding:.55rem 0}
.facts dt{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--ink-2);padding-top:.28rem}
.facts dd{margin:0;font-size:1rem;line-height:1.35}
.facts dd small{display:block;color:var(--ink-2);font-size:.86rem}

/* figures */
figure{margin:0}
.fig{margin:clamp(2rem,4vw,3.2rem) 0}
.fig-head{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,10fr);gap:0 var(--gut);border-top:1px solid var(--ink);padding-top:.55rem;margin-bottom:.8rem}
.fig-head .no{font-family:var(--sans);font-stretch:75%;font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding-top:.3rem}
.fig-head h3,.fig-head h2{font-size:clamp(1.15rem,2.1vw,1.45rem);line-height:1.18;max-width:36ch;font-weight:560}
.fig-head p{font-family:var(--sans);font-stretch:85%;font-size:.88rem;color:var(--ink-2);margin:.35rem 0 0;max-width:60ch;line-height:1.35}
.fig-body{position:relative}
.fig-ctl{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center;font-family:var(--sans);font-stretch:85%;font-size:.86rem;margin:.2rem 0 .8rem}
.fig-ctl label{font-weight:600}
.fig-ctl select,.fig-ctl input[type=number]{font:inherit;background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-radius:0;padding:.38rem .5rem;min-height:2.5rem}
.fig-ctl input[type=range]{accent-color:var(--signal);width:min(18rem,60vw);height:2.5rem}
.fig-ctl output{font-weight:700;font-variant-numeric:tabular-nums;min-width:3ch}
.chart{width:100%;touch-action:pan-y}
.chart svg{overflow:visible;width:100%;height:auto;font-family:var(--sans);font-stretch:80%}
.chart text{fill:var(--ink-2);font-size:12px}
.chart .t-strong{fill:var(--ink);font-weight:650}
.chart .t-ann{fill:var(--ink);font-size:12.5px;font-stretch:85%}
.chart .axis-t{font-size:11.5px;fill:var(--ink-3);letter-spacing:.04em}
.src{font-size:.78rem;line-height:1.4;color:var(--ink-3);margin-top:.7rem;max-width:68rem}
.src a{color:var(--ink-2)}
.fig-foot{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--hair);padding-bottom:.6rem}
.btn{appearance:none;background:none;border:1px solid var(--ink);color:var(--ink);font-size:.78rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:.5rem .7rem;cursor:pointer;border-radius:0;text-decoration:none;display:inline-block;min-height:2.4rem}
.btn:hover,.btn[aria-expanded=true]{background:var(--ink);color:var(--paper)}
.legend{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;font-family:var(--sans);font-stretch:85%;font-size:.84rem;color:var(--ink-2);margin:0 0 .5rem;padding:0;list-style:none}
.legend i{display:inline-block;width:.85rem;height:.85rem;margin-right:.4rem;vertical-align:-.1em;border-radius:50%}
.legend i.ln{height:3px;border-radius:0;vertical-align:.22em;width:1.2rem}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--paper);font-family:var(--sans);font-stretch:85%;font-size:.82rem;line-height:1.35;padding:.5rem .65rem;max-width:15rem;z-index:5;opacity:0;transition:opacity .08s}
.tip.on{opacity:1}
.tip b{display:block;font-weight:700;font-size:.86rem}
.tip span{font-variant-numeric:tabular-nums}

/* tables */
.tblwrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:.8rem;border-bottom:1px solid var(--ink);max-height:26rem;overflow-y:auto}
.tblwrap:focus-visible{outline-offset:0}
table{border-collapse:collapse;width:100%;font-family:var(--sans);font-stretch:85%;font-size:.86rem;font-variant-numeric:tabular-nums lining-nums}
caption{text-align:left;font-weight:650;padding:.4rem 0;caption-side:top}
th,td{text-align:right;padding:.36rem .7rem .36rem 0;border-bottom:1px solid var(--hair);white-space:nowrap;vertical-align:top}
thead th{border-bottom:1px solid var(--ink);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;position:sticky;top:0;background:var(--paper)}
th:first-child,td:first-child{text-align:left}
tbody th{font-weight:600}

/* key numbers strip */
.keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);margin:clamp(1.6rem,4vw,2.6rem) 0}
.keys div{padding:.9rem 1.2rem .9rem 0;border-right:1px solid var(--hair);margin-right:1.2rem}
.keys div:last-child{border-right:0;margin-right:0}
.keys b{display:block;font-family:var(--sans);font-stretch:78%;font-weight:600;font-size:clamp(1.9rem,4.6vw,3rem);line-height:1;letter-spacing:-.01em}
.keys span{display:block;font-family:var(--sans);font-stretch:85%;font-size:.86rem;line-height:1.35;color:var(--ink-2);margin-top:.5rem;max-width:26ch}

/* article head */
.art-head{padding-top:clamp(1.8rem,5vw,3.6rem);display:grid;grid-template-columns:minmax(0,2fr) minmax(0,10fr);gap:0 var(--gut)}
.art-head .meta{font-family:var(--sans);font-stretch:82%;font-size:.8rem;line-height:1.5;color:var(--ink-2)}
.art-head .meta b{display:block;color:var(--ink);letter-spacing:.09em;text-transform:uppercase;font-size:.76rem}
.art-head h1{font-size:clamp(1.95rem,4.8vw,3.5rem);font-weight:500;line-height:1.04;letter-spacing:-.02em;max-width:19ch}
.art-head .lede{margin-top:1.3rem}
.flag{display:inline-block;font-family:var(--sans);font-stretch:80%;font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:2px solid var(--signal);color:var(--ink);padding:.22rem .5rem;margin-bottom:1rem}
.note{border-left:3px solid var(--ink);padding:.1rem 0 .1rem 1rem;margin:1.6rem 0;max-width:41rem}
.note-h{font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;display:block;margin-bottom:.3rem}
.note p:last-child{margin-bottom:0}

/* home: analysis index rows */
.idx{list-style:none;margin:0;padding:0}
.idx li{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,5.6fr) minmax(0,4.4fr);gap:0 var(--gut);border-top:1px solid var(--ink);padding:1.2rem 0 1.5rem;align-items:start}
.idx li:first-child{border-top:0;padding-top:0}
.idx .no{font-family:var(--sans);font-stretch:75%;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding-top:.4rem}
.idx h3{font-size:clamp(1.3rem,2.5vw,1.75rem);line-height:1.12}
.idx h3 a{text-decoration:none}
.idx h3 a:hover{text-decoration:underline;text-decoration-color:var(--signal)}
.idx p{margin:.6rem 0 0;font-size:1rem;color:var(--ink-2);max-width:34rem}
.idx .tag{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:.7rem;display:block}
.idx .mini{min-height:7rem}
.idx li:nth-child(even) .mini{order:-1;grid-column:2}
.idx li:nth-child(even) .txt{grid-column:3}
.idx li:nth-child(even) .no{grid-column:1;grid-row:1}

/* experience entries */
.entry{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,10fr);gap:0 var(--gut);border-top:1px solid var(--ink);padding:1.1rem 0 2.2rem}
.entry .when{font-family:var(--sans);font-stretch:80%;font-size:.88rem;font-weight:600;padding-top:.35rem;font-variant-numeric:tabular-nums}
.entry .when small{display:block;font-weight:400;color:var(--ink-2);font-size:.8rem;margin-top:.2rem}
.entry h3{font-size:clamp(1.35rem,2.6vw,1.8rem)}
.entry .role{font-family:var(--sans);font-stretch:85%;font-size:.95rem;color:var(--ink-2);margin:.3rem 0 1rem}
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem var(--gut);margin-top:1.4rem}
.case{border-top:1px solid var(--hair);padding-top:.7rem}
.case h4,.case h3{font-size:1.08rem;line-height:1.22;margin-bottom:.4rem}
.case p{font-size:.98rem;margin-bottom:.5rem}
.case .scale{font-family:var(--sans);font-stretch:82%;font-size:.8rem;color:var(--ink-2);line-height:1.4}
.case .scale b{color:var(--ink);font-variant-numeric:tabular-nums}
.matrix td,.matrix th{text-align:center;padding:.5rem .4rem;white-space:normal}
.matrix th:first-child,.matrix td:first-child{text-align:left;min-width:13rem}
.matrix thead th{vertical-align:bottom;position:static}
.matrix .dot{display:inline-block;width:.8rem;height:.8rem;border-radius:50%;background:var(--ink)}
.matrix tr:hover td,.matrix tr:hover th{background:var(--paper-2)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem var(--gut)}
.plain{list-style:none;padding:0;margin:0}
.plain li{border-bottom:1px solid var(--hair);padding:.5rem 0;display:flex;justify-content:space-between;gap:1rem;font-size:1rem}
.plain li>span:first-child{min-width:0}
.plain li>span:last-child{flex:none;text-align:right;font-family:var(--sans);font-stretch:82%;font-size:.84rem;color:var(--ink-2);white-space:nowrap;padding-top:.2rem}

/* simulator */
.sim{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--ink);margin-top:.5rem}
.sim fieldset{border:0;border-right:1px solid var(--ink);margin:0;padding:1rem;min-width:0}
.sim fieldset:last-child{border-right:0}
.sim legend{font-family:var(--sans);font-stretch:80%;font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;padding:0 .3rem 0 0;float:left;width:100%;margin-bottom:.7rem}
.sim label{display:block;font-family:var(--sans);font-stretch:85%;font-size:.78rem;color:var(--ink-2);margin:.55rem 0 .2rem;clear:both}
.sim select{width:100%;font-family:var(--sans);font-stretch:85%;font-size:.9rem;background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-radius:0;padding:.45rem .4rem;min-height:2.5rem}
.sim input[type=range]{width:100%;accent-color:var(--signal);height:2.2rem}

/* contact + footer */
.contact{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,10fr);gap:0 var(--gut)}
.contact .big{font-size:clamp(1.5rem,4.4vw,3rem);line-height:1.1;font-weight:480;letter-spacing:-.015em;overflow-wrap:anywhere}
.contact .big a{text-decoration-thickness:.06em}
.foot{border-top:1px solid var(--ink);margin-top:clamp(3rem,8vw,6rem);font-size:.8rem;color:var(--ink-2)}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;padding-top:1rem;padding-bottom:2.2rem}
.foot ul{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin:0;padding:0}
.crumb{font-size:.8rem;color:var(--ink-2);padding-top:1.2rem}
.crumb a{text-decoration:none;border-bottom:1px solid var(--hair)}
.next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);border-top:2px solid var(--ink);margin-top:clamp(3rem,6vw,5rem);padding-top:.8rem}
.next a{text-decoration:none;display:block}
.next a b{display:block;font-size:1.25rem;font-weight:560;line-height:1.2;margin-top:.3rem}
.next a:hover b{text-decoration:underline;text-decoration-color:var(--signal)}
.next .r{text-align:right}

/* CV */
.cv{max-width:54rem}
.cv h1{font-size:clamp(2rem,5vw,2.9rem);font-weight:520}
.cv .sub{font-family:var(--sans);font-stretch:85%;font-size:.98rem;margin:.5rem 0 0;color:var(--ink-2)}
.cv h2{font-family:var(--sans);font-stretch:78%;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;border-top:2px solid var(--ink);padding-top:.5rem;margin:1.8rem 0 .7rem}
.cv .job{display:grid;grid-template-columns:7.2rem minmax(0,1fr);gap:1rem;margin-bottom:1rem}
.cv .job .y{font-family:var(--sans);font-stretch:80%;font-size:.86rem;font-weight:600;padding-top:.22rem;font-variant-numeric:tabular-nums}
.cv .job h3{font-size:1.1rem;line-height:1.25}
.cv .job h3 span{font-weight:400;color:var(--ink-2)}
.cv ul{margin:.35rem 0 0;padding-left:1.05em;font-size:.98rem;line-height:1.42}
.cv li{margin-bottom:.22em}
.cv p{font-size:1rem}

@media (max-width:860px){
  body{font-size:1.06rem}
  .open{grid-template-columns:minmax(0,1fr);align-items:start}
  .sec-h,.cols,.fig-head,.art-head,.entry,.contact{grid-template-columns:minmax(0,1fr)}
  .cols>.main,.cols>.side{grid-column:1}
  .cols>.side{margin-bottom:.8rem}
  .sec-h .no,.fig-head .no{margin-bottom:.3rem}
  .art-head .meta{margin-bottom:1.2rem;display:flex;flex-wrap:wrap;gap:.2rem 1.2rem}
  .art-head .meta b{display:inline}
  .idx li{grid-template-columns:minmax(0,1fr)}
  .idx li:nth-child(even) .mini,.idx li:nth-child(even) .txt,.idx li:nth-child(even) .no{grid-column:1;order:0;grid-row:auto}
  .idx .mini{margin-top:1rem}
  .cases,.two,.sim{grid-template-columns:minmax(0,1fr)}
  .sim fieldset{border-right:0;border-bottom:1px solid var(--ink)}
  .sim fieldset:last-child{border-bottom:0}
  .keys{grid-template-columns:minmax(0,1fr)}
  .keys div{border-right:0;border-bottom:1px solid var(--hair);margin-right:0;padding:.8rem 0}
  .keys div:last-child{border-bottom:0}
  .entry .when{margin-bottom:.5rem}
  .cv .job{grid-template-columns:minmax(0,1fr);gap:.1rem}
  .next{grid-template-columns:minmax(0,1fr)}.next .r{text-align:left}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
@media (forced-colors:active){.matrix .dot{background:CanvasText}.legend i{forced-color-adjust:none}}
@media print{
  :root{--paper:#fff}
  body{font-size:9.6pt;line-height:1.36;background:#fff}
  .mast nav,.foot,.skip,.noprint,.crumb,.btn{display:none!important}
  .mast{border-top-width:3pt}
  .wrap{max-width:none;padding:0}
  .sec{margin-top:1.4rem}
  a{text-decoration:none}
  .mast{display:none}
  .cv{max-width:none;padding-top:0!important}.cv h1{font-size:21pt}.cv .sub{font-size:9pt}
  .cv h2{margin:.75rem 0 .4rem;font-size:7.6pt}.cv .job{margin-bottom:.4rem;break-inside:avoid;grid-template-columns:5.4rem minmax(0,1fr)}
  .cv .job h3{font-size:10.4pt}.cv .job .y{font-size:8.4pt}
  .cv ul{font-size:8.7pt;line-height:1.3;margin-top:.15rem}.cv li{margin-bottom:.08em}.cv p{font-size:8.8pt;margin-bottom:.4em;line-height:1.32}.cv h2{margin:.55rem 0 .32rem!important}
  @page{margin:14mm 15mm}
}