/* ricardomerino.com — stylesheet
   Palette and type follow the Shanghai deck so site and deck read as one thing.
   Blue = verified / passing. Red = overloaded. Both carry meaning, never decoration. */

:root{
  color-scheme: light dark;
  --paper:#fbfaf8;
  --panel:#f4f3f0;
  --ink:#16181d;
  --soft:#6a6e78;
  --line:#e2e1de;
  --pass:#1f5fd6;
  --fail:#c8452f;

  --serif:"Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --pad:clamp(20px,5vw,84px);
  --rule:1px solid var(--line);
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#121316; --panel:#1a1c20; --ink:#f0ede8; --soft:#989ca6;
    --line:#2b2d32; --pass:#6ea0ff; --fail:#e8674f;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); -webkit-font-smoothing:antialiased;
  font-size:17px; line-height:1.6;
}

a{color:inherit}
:focus-visible{outline:2px solid var(--pass); outline-offset:3px; border-radius:2px}

/* ------------------------------------------------------------- header */
.top{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:20px;
  padding:14px var(--pad);
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:var(--rule);
}
.mark{font-family:var(--mono); font-size:14px; letter-spacing:.1em; font-weight:600; text-decoration:none}
.top nav{margin-left:auto; display:flex; gap:clamp(12px,2.4vw,26px)}
.top nav a{
  font-family:var(--sans); font-size:14px; text-decoration:none; color:var(--soft);
  padding-bottom:2px; border-bottom:1px solid transparent;
}
.top nav a:hover{color:var(--ink); border-bottom-color:var(--ink)}

.langs{display:flex; gap:2px; font-family:var(--mono); font-size:12px}
.langs button{
  border:0; background:none; cursor:pointer; color:var(--soft);
  padding:4px 6px; font:inherit; text-transform:uppercase; letter-spacing:.06em;
  border-radius:3px;
}
.langs button:hover{color:var(--ink)}
.langs button[aria-current="true"]{color:var(--paper); background:var(--ink)}

/* -------------------------------------------------------------- shell */
section{padding:clamp(64px,10vh,132px) var(--pad); border-bottom:var(--rule)}
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--soft); margin:0 0 22px;
}
h1,h2,h3{font-weight:600; letter-spacing:-.015em; margin:0; text-wrap:balance}
h1{font-size:clamp(38px,7vw,88px); line-height:1.02}
h2{font-size:clamp(28px,4.4vw,52px); line-height:1.08}
h3{font-size:clamp(21px,2.6vw,29px); line-height:1.2}
p{margin:0}

/* --------------------------------------------------------------- hero */
.hero{padding-top:clamp(48px,8vh,96px)}
.hero .role{
  font-family:var(--mono); font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--pass); margin:0 0 18px;
}
.hero .role .dot{color:var(--soft); margin:0 8px}
.lead{
  font-family:var(--sans); font-size:clamp(17px,2.1vw,23px); line-height:1.55;
  color:var(--soft); max-width:44ch; margin:28px 0 0;
}

/* ------------------------------------------------- signature: the check
   A utilisation bar. The track is piecewise: 0 → 1.0 spans 58 % of the
   width, 1.0 → 4.0 the remaining 42 %, so both the safe range and the
   overload stay readable. The tick at 1.0 is the Eurocode limit. */
.check{
  margin-top:clamp(44px,7vh,78px); max-width:760px;
  border:var(--rule); border-radius:8px; background:var(--panel);
  padding:clamp(20px,3vw,32px);
}
.check .clabel{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--soft); margin:0 0 20px;
}
.readout{display:flex; align-items:baseline; gap:12px; margin-bottom:14px}
.eta{
  font-family:var(--mono); font-size:clamp(34px,6vw,58px); font-weight:600;
  line-height:1; font-variant-numeric:tabular-nums; color:var(--pass);
  transition:color .5s ease;
}
.eta.over{color:var(--fail)}
.phase{font-family:var(--sans); font-size:14px; color:var(--soft)}

.track{position:relative; height:12px; background:var(--paper); border:var(--rule); border-radius:6px; overflow:hidden}
.fill{position:absolute; inset:0 auto 0 0; width:0; background:var(--pass); border-radius:6px 0 0 6px; transition:background-color .5s ease}
.fill.over{background:var(--fail)}
.tick{position:absolute; top:-4px; bottom:-4px; left:58%; width:1px; background:var(--ink); opacity:.55}
.ticklab{
  position:absolute; left:58%; top:calc(100% + 8px); transform:translateX(-50%);
  font-family:var(--mono); font-size:11px; color:var(--soft); white-space:nowrap;
}
.trackwrap{position:relative; padding-bottom:26px}

.ccap{
  font-family:var(--sans); font-size:15px; line-height:1.6; color:var(--soft);
  margin:20px 0 0; max-width:52ch; opacity:0; transition:opacity .6s ease;
}
.ccap.on{opacity:1}
.ccap b{color:var(--ink); font-weight:600}

.replay{
  margin-top:18px; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--soft); background:none;
  border:var(--rule); border-radius:4px; padding:7px 12px; cursor:pointer;
}
.replay:hover{color:var(--ink); border-color:var(--ink)}

/* EC3 online check — form + server results */
.ec3app{max-width:660px}
.ec3intro{font-family:var(--sans); font-size:15px; line-height:1.55; color:var(--soft); margin:14px 0 20px; max-width:60ch}
.ec3sub{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--pass); margin:18px 0 10px}
.ec3grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:12px}
.ec3grid label{display:flex; flex-direction:column; gap:5px}
.ec3grid label > span{font-family:var(--mono); font-size:10.5px; color:var(--soft)}
.ec3grid input{font-family:var(--mono); font-size:14px; color:var(--ink); background:var(--paper);
  border:var(--rule); border-radius:5px; padding:8px 9px; width:100%; -moz-appearance:textfield}
.ec3grid input:focus{outline:none; border-color:var(--pass)}
.ec3form .fsend{margin-top:22px}
.ec3status{font-family:var(--sans); font-size:13.5px; color:var(--soft); margin:12px 0 0; min-height:1em}
.ec3status.err{color:var(--fail)}
.ec3results{margin-top:24px; border-top:var(--rule); padding-top:20px}
.ec3head{display:flex; flex-wrap:wrap; gap:8px 20px; align-items:baseline;
  font-family:var(--sans); font-size:14px; color:var(--soft); margin-bottom:18px}
.ec3head .verdict{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:20px}
.ec3head .verdict.ok{color:var(--pass); border:1px solid color-mix(in srgb,var(--pass) 45%,transparent)}
.ec3head .verdict.bad{color:var(--fail); border:1px solid color-mix(in srgb,var(--fail) 45%,transparent)}
.ec3head b{color:var(--ink)}
.ec3rows{display:flex; flex-direction:column; gap:6px}
.ec3row{display:grid; grid-template-columns:118px 1fr 56px; align-items:center; gap:12px; font-family:var(--mono); font-size:12px}
.ec3row .rk{color:var(--soft)}
.ec3row .rbar{height:6px; background:var(--paper); border-radius:4px; overflow:hidden}
.ec3row .rbar i{display:block; height:100%; background:var(--pass); border-radius:4px}
.ec3row .rbar i.over{background:var(--fail)}
.ec3row b{text-align:right; color:var(--ink); font-variant-numeric:tabular-nums}
.ec3row b.over{color:var(--fail)}
@media (max-width:520px){.ec3row{grid-template-columns:92px 1fr 48px}}
.ec3intro2{font-family:var(--sans); font-size:14.5px; line-height:1.55; color:var(--soft); margin:0 0 16px; max-width:62ch}
.ec3example{display:inline-block; font-family:var(--sans); font-size:14.5px; font-weight:600;
  color:var(--pass); text-decoration:none; margin:0 0 4px}
.ec3example::after{content:" →"}
.ec3example:hover{text-decoration:underline}
.ec3runrow{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:22px}
.ec3runrow .fsend{margin-top:0}
.ec3detail{height:132px; width:auto; max-width:100%; border:var(--rule); border-radius:6px; background:var(--paper)}
/* EC3 clause list — blue if the clause passes, red if it does not */
/* two-column results: utilisation ratios | EN 1993-1-1 clauses */
.ec3cols{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; margin-top:2px}
@media (max-width:600px){.ec3cols{grid-template-columns:1fr; gap:26px}}
.ec3cols .ec3row{grid-template-columns:88px 1fr 48px; gap:10px}
.ec3restitle{font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink); margin:2px 0 16px}
.ec3clauses{margin:0}
.ec3cols .clg{font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--soft); margin:16px 0 8px}
.ec3cols > div > .clg:first-child{margin-top:0}
.ec3cols .cll{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px}
.ec3cols .cll li{font-family:var(--sans); font-size:13.5px; line-height:1.4; padding-left:18px; position:relative}
.ec3cols .cll li.sub{padding-left:34px}
.ec3cols .cll li.ok{color:var(--pass)}
.ec3cols .cll li.bad{color:var(--fail)}
.ec3cols .cll li.clhead{color:var(--soft)}
.ec3cols .cll li.ok::before,.ec3cols .cll li.bad::before{content:"\25A0"; position:absolute; left:0; top:3px; font-size:9px}

/* ----------------------------------------------------------- projects */
.pgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:clamp(16px,2vw,26px); margin-top:52px}
.pcard{border:var(--rule); border-radius:8px; overflow:hidden; background:var(--panel);
  display:flex; flex-direction:column}
.pshot{display:block; position:relative; aspect-ratio:16/10; background-color:var(--panel);
  background-image:linear-gradient(135deg,color-mix(in srgb,var(--pass) 12%,var(--panel)),var(--line));
  background-size:cover; background-position:center; border-bottom:var(--rule);
  text-decoration:none}
.pshot.has-photo{background-image:none} /* replaced inline once a photo loads */
.pshot img{width:100%; height:100%; object-fit:cover; display:block}
.pshot.noimg img{display:none} /* hotlink failed → placeholder tint + link stay */
a.pshot::after{content:"↗"; position:absolute; top:8px; right:10px;
  font-family:var(--sans); font-size:15px; line-height:1; color:#fff;
  background:rgba(0,0,0,.55); border-radius:50%; width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .18s ease}
a.pshot:hover::after,a.pshot:focus-visible::after{opacity:1}
.pmeta{padding:clamp(15px,1.8vw,20px); display:flex; flex-direction:column; gap:7px}
.ptag{align-self:flex-start; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--pass);
  border:1px solid color-mix(in srgb,var(--pass) 38%,transparent); border-radius:20px; padding:3px 9px}
.pcard h3{font-size:18.5px; line-height:1.22; margin:2px 0 0}
.pwhere{font-family:var(--sans); font-size:13.5px; color:var(--soft); line-height:1.45}
.pcredit{font-family:var(--mono); font-size:10.5px; letter-spacing:.02em; color:var(--soft); margin-top:3px}
.pcredit a{color:var(--pass); text-decoration:none}
.pcredit a:hover{text-decoration:underline}

/* featured-card media (resonance gif / RAG icon) */
.card{--cardpad:clamp(22px,2.6vw,32px); overflow:hidden}
.cardmedia{display:block; position:relative; width:auto;
  margin:calc(-1 * var(--cardpad)) calc(-1 * var(--cardpad)) 20px;
  aspect-ratio:16/9; border-bottom:var(--rule); background:var(--paper); overflow:hidden}
.cardmedia img{width:100%; height:100%; object-fit:cover; display:block}
.cardmedia--icon{display:flex; align-items:center; justify-content:center; background:var(--panel); padding:8px}
.cardmedia--icon svg{width:100%; height:100%}
a.cardmedia::after{content:"↗"; position:absolute; top:9px; right:11px; font-family:var(--sans);
  font-size:15px; line-height:1; color:#fff; background:rgba(0,0,0,.55); border-radius:50%;
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .18s ease}
a.cardmedia:hover::after,a.cardmedia:focus-visible::after{opacity:1}

/* contact form */
.cform{margin-top:42px; max-width:640px; display:flex; flex-direction:column; gap:16px}
.frow2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:560px){.frow2{grid-template-columns:1fr}}
.field{display:flex; flex-direction:column; gap:7px}
.field > span{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--soft)}
.field input,.field textarea{font-family:var(--sans); font-size:15.5px; color:var(--ink);
  background:var(--panel); border:var(--rule); border-radius:6px; padding:11px 13px; width:100%; resize:vertical}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--pass)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.fsend{align-self:flex-start; font-family:var(--sans); font-size:15px; font-weight:600;
  color:var(--paper); background:var(--ink); border:0; border-radius:5px; padding:12px 22px; cursor:pointer}
.fsend:hover{background:var(--pass)}
.fsend:disabled{opacity:.6; cursor:default}
.fstatus{font-family:var(--sans); font-size:14px; color:var(--soft); min-height:1em; margin:0}
.fstatus.ok{color:var(--pass)}
.fstatus.err{color:var(--fail)}

/* --------------------------------------------------------------- work */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(18px,2.4vw,28px); margin-top:52px}
.card{border:var(--rule); border-radius:8px; padding:clamp(22px,2.6vw,32px); background:var(--panel); display:flex; flex-direction:column}
.card .kicker{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); margin:0 0 14px}
.card p.body{font-family:var(--sans); font-size:15.5px; line-height:1.62; color:var(--soft); margin:14px 0 0}
.card .go{
  font-family:var(--sans); font-size:14.5px; font-weight:600; color:var(--pass);
  text-decoration:none; margin-top:auto; padding-top:22px;
}
.card .go:hover{text-decoration:underline}

/* ----------------------------------------------------------------- cv */
.cvhead{display:flex; flex-wrap:wrap; align-items:baseline; gap:16px 24px}
.note{font-family:var(--mono); font-size:12px; color:var(--fail)}
.block{margin-top:52px}
.block > h3{font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); padding-bottom:12px; border-bottom:var(--rule)}

/* Two-column ledger: the year rail is a real chronology, so it earns its place. */
.row{display:grid; grid-template-columns:132px 1fr; gap:8px 24px; padding:22px 0; border-bottom:var(--rule)}
.row .when{font-family:var(--mono); font-size:13px; color:var(--soft); padding-top:5px; font-variant-numeric:tabular-nums}
.row .what{font-family:var(--sans); font-size:17px; font-weight:600}
.row .desc{font-family:var(--sans); font-size:15px; line-height:1.6; color:var(--soft); margin-top:6px; max-width:62ch}
@media (max-width:640px){
  .row{grid-template-columns:1fr; gap:4px}
  .row .when{padding-top:0; order:-1}
}

.tools{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:26px; margin-top:24px}
.tools dt{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); margin-bottom:8px}
.tools dd{margin:0; font-family:var(--sans); font-size:15.5px; line-height:1.55}
.tools .sub{display:block; font-size:13.5px; color:var(--soft); margin-top:5px}

.langlist{list-style:none; padding:0; margin:24px 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px 26px; font-family:var(--sans); font-size:15.5px}

.dl{
  display:inline-block; margin-top:34px; font-family:var(--sans); font-size:15px; font-weight:600;
  text-decoration:none; color:var(--paper); background:var(--ink);
  padding:13px 22px; border-radius:5px;
}
.dl:hover{background:var(--pass)}

/* ------------------------------------------------------------ contact */
.contact h2{max-width:19ch}
.ways{display:flex; flex-wrap:wrap; gap:14px 34px; margin-top:34px; font-family:var(--sans)}
.way{text-decoration:none}
.way .k{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); margin-bottom:5px}
.way .v{font-size:18px; font-weight:600; border-bottom:1px solid var(--line); padding-bottom:2px}
.way:hover .v{border-bottom-color:var(--pass); color:var(--pass)}

/* ------------------------------------------------------------- footer */
footer{
  padding:26px var(--pad); display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center;
  font-family:var(--sans); font-size:13.5px; color:var(--soft);
}
footer a{color:var(--soft); text-decoration:none; border-bottom:1px solid transparent}
footer a:hover{color:var(--ink); border-bottom-color:var(--ink)}
footer .sp{margin-left:auto}

/* --------------------------------------------------------- legal page */
.legal{max-width:70ch; font-family:var(--sans); font-size:16px; border-bottom:0}
.legal h1{font-family:var(--serif); font-size:clamp(30px,5vw,52px); margin-bottom:34px}
.legal h2{font-family:var(--sans); font-size:19px; letter-spacing:0; margin:40px 0 10px}
.legal p{margin:0 0 14px; color:var(--soft)}
.legal .fill-in{background:color-mix(in srgb,var(--fail) 14%,transparent); color:var(--ink); padding:1px 6px; border-radius:3px; font-family:var(--mono); font-size:14px}