/* ==========================================================================
   Mining Global Group — site stylesheet
   v2.0 — 15 August 2026
   Type: Spectral (display) · IBM Plex Sans (text) · IBM Plex Mono (data)
   ========================================================================== */

/* ---------- fonts, self-hosted, no external requests ---------------------- */
@font-face{font-family:'Spectral';src:url('/fonts/spectral-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Spectral';src:url('/fonts/spectral-400-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Spectral';src:url('/fonts/spectral-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Spectral';src:url('/fonts/spectral-400i-ext.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Plex Sans';src:url('/fonts/plexsans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Plex Sans';src:url('/fonts/plexsans-400-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Plex Sans';src:url('/fonts/plexsans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Plex Mono';src:url('/fonts/plexmono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Plex Mono';src:url('/fonts/plexmono-400-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Spectral';src:url('/fonts/spectral-400-cyr.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Spectral';src:url('/fonts/spectral-400i-cyr.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Plex Sans';src:url('/fonts/plexsans-400-cyr.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Plex Sans';src:url('/fonts/plexsans-500-cyr.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Plex Mono';src:url('/fonts/plexmono-400-cyr.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Plex Sans';src:url('/fonts/plexsans-400-grk.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;}
@font-face{font-family:'Plex Sans';src:url('/fonts/plexsans-500-grk.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;}
@font-face{font-family:'Spectral';src:url('/fonts/notoserif-400-grk.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;}
@font-face{font-family:'Spectral';src:url('/fonts/notoserif-400i-grk.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;}
@font-face{font-family:'Plex Mono';src:url('/fonts/plexsans-400-grk.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;}

/* ---------- tokens ------------------------------------------------------- */
:root{
  --bg:#f7f6f2; --bg-deep:#eceae3; --surface:#ffffff;
  --ink:#191b1e; --body:#3a3f45; --slate:#5e656c; --slate-dim:#797f87;
  --bronze:#9a6a30; --bronze-soft:#845827;
  --hairline:rgba(22,24,27,.14); --hairline-soft:rgba(22,24,27,.07);
  --sea:#dae5ec; --sea-edge:#b9cbd6; --land:#f4f2ec;
  --shell:rgba(247,246,242,.88);
  --serif:'Spectral',Georgia,'Times New Roman',serif;
  --sans:'Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:28px; --maxw:1120px;
}
html[data-theme="dark"]{
  --bg:#111316; --bg-deep:#161a1e; --surface:#181b20;
  --ink:#ecebe5; --body:#c2c7cb; --slate:#9aa1a8; --slate-dim:#828990;
  --bronze:#c08d4d; --bronze-soft:#d0a163;
  --hairline:rgba(236,235,229,.15); --hairline-soft:rgba(236,235,229,.07);
  --shell:rgba(17,19,22,.88);
  --sea:#122431; --sea-edge:#3b5f77; --land:#2d333a;
}

/* ---------- base --------------------------------------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--body);font-family:var(--sans);font-size:16px;line-height:1.72;
  font-feature-settings:"kern";-webkit-font-smoothing:antialiased;transition:background .25s ease,color .25s ease}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;color:var(--ink);line-height:1.14}
h1{font-size:clamp(2.6rem,6.2vw,4.6rem);letter-spacing:-.015em}
h2{font-size:clamp(1.75rem,3.4vw,2.5rem);letter-spacing:-.012em}
h3{font-size:1.18rem;letter-spacing:-.005em}
p{margin-bottom:1.05rem}
a{color:var(--bronze);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .18s,color .18s}
a:hover{border-bottom-color:var(--bronze)}
strong,b{font-weight:500;color:var(--ink)}
img,svg{max-width:100%;height:auto}
::selection{background:var(--bronze);color:#fff}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px;background:var(--bronze);color:#fff;padding:12px 18px;z-index:200;font-size:.85rem}
.skip:focus{left:12px;top:12px}

/* ---------- shared type helpers ------------------------------------------ */
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.19em;text-transform:uppercase;color:var(--bronze);
  display:flex;align-items:center;gap:14px;margin-bottom:22px}
.eyebrow::after{content:"";flex:0 0 56px;height:1px;background:var(--bronze);opacity:.5}
.eyebrow.plain::after{display:none}
.lede{font-family:var(--serif);font-style:italic;font-size:clamp(1.08rem,1.9vw,1.38rem);line-height:1.55;color:var(--slate);max-width:34ch}
.body-lg{font-size:1.02rem;max-width:62ch;color:var(--body)}
.measure{max-width:62ch}
.mono-label{font-family:var(--mono);font-size:.67rem;letter-spacing:.15em;text-transform:uppercase;color:var(--slate-dim)}
.rule{height:1px;background:var(--hairline);border:0}

/* ---------- header ------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--shell);backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--hairline)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;height:66px}
.brand{display:flex;align-items:center;gap:12px;border:0}
.brand:hover{border:0}
.mark{flex:none;width:30px;height:30px;display:grid;place-items:center;color:var(--bronze);line-height:0}
.mark .mgmark{width:100%;height:100%;display:block}
.brand:hover .mark{color:var(--bronze-soft)}
.footer-brand .mark{width:24px;height:24px;margin-bottom:10px}
.brand .wordmark{font-family:var(--sans);font-weight:500;font-size:.79rem;letter-spacing:.19em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.nav{display:flex;align-items:center;flex-wrap:wrap;gap:0 26px;list-style:none}
.nav a{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--slate);border:0;padding:4px 0;position:relative}
.nav a:hover{color:var(--ink)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--bronze);transition:right .22s ease}
.nav a:hover::after{right:0}
.tools{display:flex;align-items:center;gap:10px}
.iconbtn{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--hairline);background:transparent;
  color:var(--slate);cursor:pointer;border-radius:50%;transition:border-color .2s,color .2s}
.iconbtn:hover{border-color:var(--bronze);color:var(--bronze)}
.navtoggle{display:none;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  background:transparent;border:1px solid var(--hairline);color:var(--ink);padding:8px 13px;cursor:pointer}

/* ---------- hero --------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding:clamp(70px,10vw,120px) 0 clamp(56px,7vw,88px);border-bottom:1px solid var(--hairline)}
.hero .contours{position:absolute;top:-8%;right:-14%;width:min(760px,72vw);opacity:.5;pointer-events:none;color:var(--bronze)}
html[data-theme="dark"] .hero .contours{opacity:.32}
.hero .inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);gap:34px}
.hero h1{max-width:14ch}
.hero .lede{margin-top:26px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.btn{font-family:var(--sans);font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;padding:14px 26px;
  border:1px solid var(--bronze);color:var(--bronze);background:transparent;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--bronze);color:#fff;border-bottom-color:var(--bronze)}
.btn.solid{background:var(--bronze);color:#fff}
.btn.solid:hover{background:var(--bronze-soft);border-color:var(--bronze-soft)}
.formation{margin-top:40px;font-family:var(--mono);font-size:.68rem;line-height:1.9;letter-spacing:.03em;color:var(--slate-dim);max-width:60ch}

/* ---------- data strip --------------------------------------------------- */
.datastrip{margin-top:46px;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.datastrip .cell{padding:20px 22px;border-left:1px solid var(--hairline)}
.datastrip .cell:first-child{border-left:0;padding-left:0}
.datastrip .v{font-family:var(--mono);font-size:.92rem;color:var(--ink);margin-top:7px;line-height:1.4}

/* ---------- sections ----------------------------------------------------- */
section{padding:clamp(64px,8vw,104px) 0}
section + section{border-top:1px solid var(--hairline)}
section.deep{background:var(--bg-deep)}
.sec-head{max-width:64ch;margin-bottom:12px}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(32px,5vw,64px);align-items:start}

/* ---------- numbered cards ----------------------------------------------- */
.cards{margin-top:46px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.card{padding:34px 28px;border-left:1px solid var(--hairline)}
.card:first-child{border-left:0;padding-left:0}
.card .num{font-family:var(--mono);font-size:.67rem;letter-spacing:.15em;text-transform:uppercase;color:var(--bronze);margin-bottom:16px}
.card h3{margin-bottom:10px}
.card p{font-size:.93rem;color:var(--slate);margin:0}

/* ---------- material list ------------------------------------------------ */
.materials{margin-top:44px;border-top:1px solid var(--hairline)}
.mat{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.5fr);gap:20px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--hairline-soft)}
.mat .sym{font-family:var(--serif);font-size:1.5rem;color:var(--bronze);line-height:1}
.mat h3{font-size:1.04rem}
.mat p{font-size:.9rem;color:var(--slate);margin:0}

/* ---------- guarantee columns -------------------------------------------- */
.guarantee{margin-top:46px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:0;
  border-top:1px solid var(--hairline)}
.gcol{padding:32px 30px;border-left:1px solid var(--hairline)}
.gcol:first-child{border-left:0;padding-left:0}
.gcol h3{margin-bottom:18px}
.gcol ul{list-style:none}
.gcol li{position:relative;padding-left:22px;font-size:.93rem;color:var(--slate);margin-bottom:12px;line-height:1.6}
.gcol li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--bronze)}

/* ---------- process steps ------------------------------------------------ */
.steps{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:0;
  border-top:1px solid var(--hairline)}
.step{padding:28px 24px;border-left:1px solid var(--hairline)}
.step:first-child{border-left:0;padding-left:0}
.step .n{font-family:var(--mono);font-size:.67rem;letter-spacing:.15em;color:var(--bronze);margin-bottom:14px}
.step h3{font-size:1rem;margin-bottom:8px}
.step p{font-size:.88rem;color:var(--slate);margin:0}

/* ---------- statement ---------------------------------------------------- */
.statement{margin-top:48px;padding:34px 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.statement p{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,2.1vw,1.45rem);color:var(--ink);
  line-height:1.5;max-width:52ch;margin:0}

/* ---------- romania map -------------------------------------------------- */
.mapfig{border:1px solid var(--hairline);padding:26px;background:var(--surface)}
html[data-theme="dark"] .mapfig{background:transparent}
.mapfig figcaption{margin-top:16px;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate-dim)}
.factlist{list-style:none}
.factlist li{padding:20px 0;border-bottom:1px solid var(--hairline-soft)}
.factlist li:first-child{padding-top:0}
.factlist h3{font-size:1rem;margin-bottom:6px}
.factlist p{font-size:.92rem;color:var(--slate);margin:0}

/* ---------- form --------------------------------------------------------- */
.formgrid{margin-top:46px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(34px,5vw,72px);align-items:start}
.field{margin-bottom:22px}
.field label{display:block;font-family:var(--mono);font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate-dim);margin-bottom:9px}
.req{color:var(--bronze)}
input,select,textarea{width:100%;font-family:var(--sans);font-size:.95rem;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--hairline);padding:10px 0;transition:border-color .2s}
input:focus,select:focus,textarea:focus{outline:0;border-bottom-color:var(--bronze)}
textarea{min-height:132px;resize:vertical;line-height:1.6}
select{cursor:pointer}
html[data-theme="dark"] select option{background:#181b20;color:#ecebe5}
.consent{display:flex;gap:12px;align-items:flex-start;margin:28px 0}
.consent input{width:auto;flex:none;margin-top:6px;accent-color:var(--bronze)}
.consent span{font-size:.86rem;color:var(--slate);line-height:1.6}
.hp{position:absolute;left:-9999px}
.formnote{margin-top:22px;font-size:.8rem;line-height:1.7;color:var(--slate-dim);max-width:52ch}
.contactcard{border-top:1px solid var(--hairline);padding-top:26px}
.contactcard .row{padding:16px 0;border-bottom:1px solid var(--hairline-soft)}
.contactcard .row:last-child{border-bottom:0}
.contactcard .v{font-size:.95rem;color:var(--ink);margin-top:6px}

/* ---------- footer ------------------------------------------------------- */
.site-footer{border-top:1px solid var(--hairline);padding:64px 0 44px;background:var(--bg-deep)}
.fgrid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(min(150px,100%),1fr));gap:38px;margin-bottom:48px}
.site-footer h4{font-family:var(--mono);font-size:.67rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--slate-dim);margin-bottom:16px;font-weight:400}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:9px}
.site-footer a{font-size:.9rem;color:var(--body);border:0}
.site-footer a:hover{color:var(--bronze)}
.footer-brand .wordmark{font-family:var(--sans);font-weight:500;font-size:.79rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--ink);display:block;margin-bottom:12px}
.footer-brand p{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--slate);max-width:30ch;margin:0}
.legalnote{border-top:1px solid var(--hairline);padding-top:26px;font-size:.76rem;line-height:1.85;color:var(--slate-dim);max-width:96ch}

/* ---------- legal pages -------------------------------------------------- */
.doc{padding:clamp(56px,7vw,88px) 0}
.doc .updated{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate-dim);margin:14px 0 44px}
.doc h2{font-size:1.28rem;margin:44px 0 12px}
.doc p,.doc li{font-size:.97rem;max-width:70ch}
.doc ul,.doc ol{margin:0 0 14px 20px}
.doc li{margin-bottom:8px}
.doc .callout{border-left:2px solid var(--bronze);padding:18px 0 18px 24px;margin:30px 0;background:transparent}
.doc .callout p:last-child{margin-bottom:0}
.doc table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.9rem}
.doc th,.doc td{text-align:left;padding:12px 14px 12px 0;border-bottom:1px solid var(--hairline-soft);vertical-align:top}
.doc th{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--slate-dim);font-weight:400;border-bottom-color:var(--hairline)}

/* ---------- centred message pages ---------------------------------------- */
.msg{min-height:62vh;display:grid;place-items:center;text-align:center;padding:80px 0}
.msg .inner{max-width:56ch}
.msg .code{font-family:var(--serif);font-size:clamp(3.4rem,9vw,5.6rem);color:var(--bronze);line-height:1;margin-bottom:14px}
.msg .tick{width:64px;height:64px;border:1px solid var(--bronze);border-radius:50%;display:grid;place-items:center;
  margin:0 auto 28px;color:var(--bronze)}
.msg p{color:var(--slate);margin:0 auto 14px;max-width:52ch}

/* ---------- reveal ------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive --------------------------------------------------- */
@media (max-width:900px){
  .datastrip{grid-template-columns:repeat(2,1fr)}
  .datastrip .cell{border-left:1px solid var(--hairline);padding-left:22px}
  .datastrip .cell:nth-child(odd){border-left:0;padding-left:0}
  .datastrip .cell:nth-child(n+3){border-top:1px solid var(--hairline-soft)}
  .formgrid{grid-template-columns:minmax(0,1fr)}
  .card,.gcol,.step{border-left:0;padding-left:0;border-top:1px solid var(--hairline-soft)}
  .card:first-child,.gcol:first-child,.step:first-child{border-top:0}
  .cards,.guarantee,.steps{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  :root{--gut:22px}
  .navtoggle{display:block}
  .site-header{position:relative}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--hairline);padding:6px var(--gut) 18px}
  .nav.open{display:flex}
  .nav a{padding:13px 0;font-size:.82rem;border-bottom:1px solid var(--hairline-soft)}
  .nav a::after{display:none}
  .hero .contours{display:none}
  .mat{grid-template-columns:44px minmax(0,1fr);row-gap:8px}
  .mat p{grid-column:2}
}
@media print{
  .site-header,.actions,form,.iconbtn,.navtoggle{display:none}
  body{background:#fff;color:#000}
  .reveal{opacity:1;transform:none}
}

/* ---------- small phones ------------------------------------------------- */
@media (max-width:600px){
  .site-header .bar{height:60px;gap:10px}
  .brand{gap:9px}
  .mark{width:27px;height:27px}
  .brand .wordmark{font-size:.63rem;letter-spacing:.1em}
  .tools{gap:8px}
  .navtoggle{padding:7px 11px;font-size:.63rem}
  .iconbtn{width:31px;height:31px}
  .eyebrow{flex-wrap:wrap;gap:8px}
  .eyebrow::after{display:none}
  .datastrip{grid-template-columns:minmax(0,1fr)}
  .datastrip .cell{border-left:0!important;padding-left:0!important;border-top:1px solid var(--hairline-soft)}
  .datastrip .cell:first-child{border-top:0}
}

/* ---------- presence strip (5 celle) ------------------------------------- */
.datastrip.five{grid-template-columns:repeat(5,1fr)}
.datastrip.five .cell{padding:18px 18px}
.datastrip.five .cell .v{margin-top:0;font-size:.88rem}
@media (max-width:900px){
  .datastrip.five{grid-template-columns:repeat(2,1fr)}
  .datastrip.five .cell{border-left:1px solid var(--hairline);padding-left:18px}
  .datastrip.five .cell:nth-child(odd){border-left:0;padding-left:0}
  .datastrip.five .cell:nth-child(n+3){border-top:1px solid var(--hairline-soft)}
}
@media (max-width:600px){
  .datastrip.five{grid-template-columns:minmax(0,1fr)}
  .datastrip.five .cell{border-left:0!important;padding-left:0!important;border-top:1px solid var(--hairline-soft)}
  .datastrip.five .cell:first-child{border-top:0}
}
.datastrip.five .cell:first-child{padding-left:0}

/* ---------- worked examples (method.html) -------------------------------- */
.case{padding:44px 0;border-top:1px solid var(--hairline)}
.case:first-of-type{border-top:0;padding-top:0}
.case .num{font-family:var(--mono);font-size:.67rem;letter-spacing:.15em;text-transform:uppercase;color:var(--bronze);margin-bottom:14px}
.case h3{font-size:clamp(1.25rem,2.4vw,1.7rem);max-width:26ch;margin-bottom:26px}
.caserows{display:grid;gap:0;border-top:1px solid var(--hairline-soft)}
.caserow{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:26px;padding:16px 0;border-bottom:1px solid var(--hairline-soft)}
.caserow p{margin:0;font-size:.95rem;color:var(--body)}
.caserow em{color:var(--slate);font-family:var(--serif);font-size:1.02rem}
@media (max-width:760px){
  .caserow{grid-template-columns:minmax(0,1fr);gap:8px}
}

/* ========================================================================== */
/* v4.0 — multi-page architecture, artwork, role forms                        */
/* ========================================================================== */

/* ---------- navigation: work-with-us submenu ----------------------------- */
.nav .has-sub{position:relative}
.nav .subtoggle{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:.72rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--slate);background:transparent;border:0;padding:4px 0;
  cursor:pointer;position:relative}
.nav .subtoggle:hover{color:var(--ink)}
.nav .subtoggle .chev{width:8px;height:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.nav .has-sub.open .subtoggle .chev{transform:rotate(-135deg) translate(-3px,-3px)}
.subnav{display:none;position:absolute;top:calc(100% + 14px);left:-20px;min-width:224px;background:var(--surface);
  border:1px solid var(--hairline);padding:6px 0;list-style:none;box-shadow:0 12px 34px rgba(20,22,26,.09)}
html[data-theme="dark"] .subnav{box-shadow:0 12px 34px rgba(0,0,0,.5)}
.nav .has-sub.open .subnav{display:block}
.subnav li{display:block}
.subnav a{display:block;padding:11px 20px;font-size:.72rem;letter-spacing:.13em}
.subnav a::after{display:none}
.subnav a:hover{background:var(--bg-deep);color:var(--bronze)}
.nav a.here,.nav .subtoggle.here{color:var(--bronze)}
.nav a.here::after{right:0}

/* ---------- inner-page hero ---------------------------------------------- */
.pagehero{position:relative;overflow:hidden;padding:clamp(58px,7.5vw,92px) 0 clamp(40px,5vw,60px);
  border-bottom:1px solid var(--hairline)}
.pagehero .contours{position:absolute;top:-26%;right:-18%;width:min(600px,62vw);opacity:.34;pointer-events:none;color:var(--bronze)}
html[data-theme="dark"] .pagehero .contours{opacity:.22}
.pagehero .inner{position:relative;z-index:2}
.pagehero h1{max-width:19ch;font-size:clamp(2rem,4.6vw,3.35rem)}
.pagehero .lede{margin-top:22px;max-width:46ch}
.crumb{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--slate-dim);margin-bottom:20px}
.crumb a{color:var(--slate-dim);border:0}
.crumb a:hover{color:var(--bronze)}
.crumb span{margin:0 9px;opacity:.5}

/* ---------- artwork ------------------------------------------------------ */
figure.art{margin:clamp(40px,6vw,68px) 0 0}
figure.art.lead{margin-top:0}
.art-svg{display:block;width:100%;height:auto;max-width:100%}
.art-svg.tall{max-width:420px;margin:0 auto}
figure.art figcaption{margin-top:20px;padding-top:14px;border-top:1px solid var(--hairline);
  font-family:var(--mono);font-size:.67rem;letter-spacing:.05em;line-height:1.85;color:var(--slate-dim);max-width:70ch}
.artband{background:var(--bg-deep);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  padding:clamp(46px,6vw,76px) 0}
.artband figure.art{margin-top:0}
.artsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(32px,5vw,64px);align-items:center}
@media (max-width:900px){.artsplit{grid-template-columns:minmax(0,1fr)}}

/* ---------- photograph slots (real images, dropped in later) ------------- */
figure.photo{margin:clamp(36px,5vw,60px) 0 0;position:relative}
figure.photo img{display:block;width:100%;height:auto;filter:saturate(.86) contrast(1.04)}
html[data-theme="dark"] figure.photo img{filter:saturate(.8) contrast(1.02) brightness(.88)}
figure.photo figcaption{margin-top:14px;font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;
  line-height:1.85;color:var(--slate-dim)}
.photorow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:clamp(18px,2.5vw,28px)}

/* ---------- role chooser ------------------------------------------------- */
.rolegrid{margin-top:52px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(255px,100%),1fr));
  border-top:1px solid var(--hairline)}
.rolecard{border-left:1px solid var(--hairline);padding:34px 28px 30px;display:flex;flex-direction:column;gap:12px}
.rolecard:first-child{border-left:0;padding-left:0}
.rolecard .num{font-family:var(--mono);font-size:.67rem;letter-spacing:.15em;text-transform:uppercase;color:var(--bronze)}
.rolecard h3{font-size:1.32rem}
.rolecard p{font-size:.95rem;color:var(--body);flex:1}
.rolecard .go{margin-top:10px;font-family:var(--sans);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--bronze);border:0;display:inline-flex;align-items:center;gap:9px;align-self:flex-start}
.rolecard .go::after{content:"";width:22px;height:1px;background:var(--bronze);transition:width .22s ease}
.rolecard .go:hover::after{width:38px}
@media (max-width:900px){
  .rolegrid{grid-template-columns:minmax(0,1fr)}
  .rolecard{border-left:0;padding-left:0;border-top:1px solid var(--hairline-soft)}
  .rolecard:first-child{border-top:0}
}

/* ---------- forms: two-column rows and fieldsets ------------------------- */
.formwrap{margin-top:14px;max-width:none}
fieldset{border:0;padding:0;margin:0 0 34px}
fieldset legend{font-family:var(--mono);font-size:.67rem;letter-spacing:.15em;text-transform:uppercase;color:var(--bronze);
  padding:0 0 14px;margin-bottom:22px;border-bottom:1px solid var(--hairline);width:100%}
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:0 24px}
.field .hint{display:block;margin-top:7px;font-family:var(--mono);font-size:.63rem;letter-spacing:.04em;
  line-height:1.75;color:var(--slate-dim)}
.formaside{align-self:start;position:sticky;top:92px}
.formaside .row{padding:16px 0;border-bottom:1px solid var(--hairline-soft)}
.formaside .row:last-of-type{border-bottom:0}
.formaside .v{font-size:.95rem;color:var(--ink);margin-top:7px;line-height:1.6}
.formaside ul{list-style:none;margin-top:10px}
.formaside li{position:relative;padding-left:20px;margin-top:11px;font-size:.92rem;color:var(--body);line-height:1.65}
.formaside li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--bronze)}
@media (max-width:820px){.formaside{position:static}}

/* ---------- next / previous page ---------------------------------------- */
.pagenav{border-top:1px solid var(--hairline);padding:34px 0 0;margin-top:clamp(48px,6vw,78px);
  display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:baseline}
.pagenav a{font-family:var(--sans);font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;color:var(--bronze);border:0}
.pagenav a:hover{color:var(--bronze-soft)}
.pagenav .lbl{font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--slate-dim);display:block;margin-bottom:8px}

/* ---------- callout band ------------------------------------------------- */
.ctaband{background:var(--bg-deep);border-top:1px solid var(--hairline);padding:clamp(48px,6vw,78px) 0}
.ctaband h2{max-width:22ch;font-size:clamp(1.5rem,3vw,2.15rem)}
.ctaband p{margin-top:16px;max-width:56ch;color:var(--body)}

/* ---------- small phones ------------------------------------------------- */
@media (max-width:820px){
  .nav .has-sub{display:block}
  .nav .subtoggle{width:100%;justify-content:space-between;padding:13px 0;font-size:.82rem;
    border-bottom:1px solid var(--hairline-soft)}
  .subnav{position:static;display:block;border:0;box-shadow:none;background:transparent;padding:0 0 0 16px}
  .nav .has-sub .subnav a{font-size:.78rem;padding:11px 0;border-bottom:1px solid var(--hairline-soft)}
  .subnav a:hover{background:transparent}
  .pagehero .contours{display:none}
}

/* desktop hover opens the submenu; the button click still toggles it */
@media (hover:hover) and (min-width:821px){
  .nav .has-sub:hover .subnav{display:block}
}

/* long e-mail addresses must not push the footer off a 390px screen */
.site-footer li,.site-footer a,.contactcard .v,.contactcard a{overflow-wrap:anywhere}

/* v4.0 refinements */
.nav .subtoggle{white-space:nowrap}
.formgrid.formwrap{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(34px,5vw,72px)}
@media (max-width:900px){.formgrid.formwrap{grid-template-columns:minmax(0,1fr)}}
.formaside ul{margin-top:12px}
@media (min-width:821px){
  .nav{gap:18px}
  .nav a,.nav .subtoggle{font-size:.685rem;letter-spacing:.13em}
  .brand .wordmark{font-size:.74rem;letter-spacing:.16em}
}

/* ========================================================================== */
/* v4.1 — header on two rows, smaller marks, smaller inner headings           */
/* ========================================================================== */

/* the wordmark row stands alone; the menu gets its own full-width row below */
.site-header{position:sticky;top:0;z-index:100;background:var(--shell);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--hairline)}
.site-header .topbar .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
.site-header .navbar{border-top:1px solid var(--hairline-soft)}
.site-header .navbar .nav{display:flex;align-items:center;gap:30px;list-style:none;height:48px}

@media (min-width:821px){
  .nav{gap:30px}
  .nav a,.nav .subtoggle{font-size:.7rem;letter-spacing:.14em}
  .brand .wordmark{font-size:.82rem;letter-spacing:.2em}
  .mark{width:32px;height:32px}
  .subnav{top:calc(100% + 12px);left:-20px}
}
@media (min-width:1180px){
  .nav{gap:34px}
}

/* mobile: the nav row collapses and the hamburger drives it */
@media (max-width:820px){
  .site-header{position:relative}
  .site-header .navbar{border-top:0}
  .site-header .navbar .nav{display:none;flex-direction:column;align-items:stretch;gap:0;height:auto;
    position:static;background:transparent;border-bottom:0;padding:2px 0 16px}
  .site-header .navbar .nav.open{display:flex}
  .nav a{padding:13px 0;font-size:.82rem;border-bottom:1px solid var(--hairline-soft)}
}

/* the quarry mark (D): page decoration, quiet, never a backdrop */
.qmark{position:absolute;right:calc(var(--gut) + 8px);bottom:22px;width:min(140px,14vw);height:auto;
  color:var(--bronze);opacity:.5;pointer-events:none}
html[data-theme="dark"] .qmark{opacity:.42}
.pagehero .qmark{width:min(84px,9vw);height:auto;opacity:.4;bottom:16px}
html[data-theme="dark"] .pagehero .qmark{opacity:.34}
figure.art .qmark{position:static;width:100%;max-width:140px;height:auto;opacity:1;margin:0 auto;display:block}
@media (max-width:820px){.qmark{display:none}figure.art .qmark{display:block}}

/* inner-page headings: present, not shouting */
.pagehero h1{font-size:clamp(1.75rem,3.4vw,2.6rem);max-width:22ch;line-height:1.12}
.pagehero .lede{font-size:clamp(1rem,1.5vw,1.16rem)}
.sec-head{font-size:clamp(1.45rem,2.7vw,2.05rem)}
.hero h1{font-size:clamp(2.3rem,5.4vw,4rem)}

/* the model diagram needs room to breathe and must never be clipped */
figure.art .art-svg{overflow:visible}

/* the hero mark sits inside the hero, clear of the rule beneath it */
.hero .qmark{bottom:auto;top:96px;right:calc(var(--gut) + 40px);width:min(140px,14vw);height:auto}
@media (max-width:1100px){.hero .qmark{width:min(110px,12vw);top:120px}}

/* ========================================================================== */
/* v4.2 — material specimens, regional map                                     */
/* ========================================================================== */

.txdefs{position:absolute;width:0;height:0;overflow:hidden}

.matgrid{margin-top:46px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));
  gap:0;border-top:1px solid var(--hairline)}
.matx{border-left:1px solid var(--hairline-soft);border-bottom:1px solid var(--hairline-soft);
  padding:26px 26px 24px}
.matx h3{font-size:1.06rem;margin-bottom:9px;line-height:1.3}
.matx p{font-size:.92rem;color:var(--body);line-height:1.6}
.matx .spec{margin-top:12px;font-family:var(--mono);font-size:.66rem;letter-spacing:.03em;
  line-height:1.85;color:var(--slate-dim)}
@media (min-width:901px){
  .matgrid > .matx:nth-child(3n+1){border-left:0;padding-left:0}
}
@media (max-width:900px){
  .matx{border-left:0;padding-left:0;padding-right:0}
}

.swpair{display:flex;gap:12px;margin-bottom:20px}
figure.sw{margin:0;flex:0 0 auto;text-align:center}
.swtile{display:block;width:74px;height:74px;background:var(--surface);
  border:1px solid var(--hairline);border-radius:2px}
html[data-theme="dark"] .swtile{background:rgba(255,255,255,.028)}
figure.sw figcaption{margin-top:7px;font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate-dim)}
.swtile.lime{color:var(--slate-dim)}
.swtile.stone{color:var(--slate)}
.swtile.iron{color:var(--ink)}
.swtile.ore{color:var(--bronze)}
html[data-theme="dark"] .swtile.iron{color:#8e959c}
html[data-theme="dark"] .swtile.lime{color:#6f767e}

/* regional map */
.regionmap{width:100%;height:auto;display:block}
.mapkey{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  border-top:1px solid var(--hairline)}
.mapkey .kcol{border-left:1px solid var(--hairline-soft);padding:24px 24px 20px}
.mapkey .kcol:first-child{border-left:0;padding-left:0}
.mapkey .kcol h4{font-family:var(--sans);font-size:.95rem;margin-bottom:10px}
.mapkey .kcol .cts{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;line-height:2;
  color:var(--bronze);text-transform:uppercase}
.mapkey .kcol p{font-size:.9rem;color:var(--body);margin-top:12px;line-height:1.62}
@media (max-width:900px){
  .mapkey{grid-template-columns:minmax(0,1fr)}
  .mapkey .kcol{border-left:0;padding-left:0;border-top:1px solid var(--hairline-soft)}
  .mapkey .kcol:first-child{border-top:0}
}

/* WhatsApp marker on a number */
.wa{display:inline-block;margin-left:8px;font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bronze);border:1px solid var(--bronze);border-radius:2px;
  padding:2px 6px;vertical-align:2px;opacity:.85}
/* the map draws neighbouring countries that run past the frame — clip them */
.regionmap{overflow:hidden}

/* wider separation between material tones, and a slightly larger tile */
.swtile{width:80px;height:80px}
.swtile.lime{color:#8f959b;opacity:.78}
.swtile.stone{color:var(--slate);opacity:.95}
.swtile.iron{color:var(--ink);opacity:1}
.swtile.ore{color:var(--bronze);opacity:1}
html[data-theme="dark"] .swtile.lime{color:#7d848c;opacity:.9}
html[data-theme="dark"] .swtile.stone{color:#98a0a8}
html[data-theme="dark"] .swtile.iron{color:#c2c8ce}

/* the regional map is nearly square once Poland is in the frame */
.regionmap{max-width:840px;margin:0 auto}


/* ==========================================================================
   v4.4 — the navigation row needs ~1040px before it fits on one line, so the
   hamburger has to take over well above the old 820px phone breakpoint.
   Without this, tablets in portrait (768–1024) scrolled sideways.
   ========================================================================== */
@media (max-width:1040px){
  .navtoggle{display:block}
  .site-header .navbar{border-top:0}
  .site-header .navbar .nav{display:none;flex-direction:column;align-items:stretch;gap:0;height:auto;
    position:static;background:transparent;border-bottom:0;padding:2px 0 16px}
  .site-header .navbar .nav.open{display:flex}
  .nav a{padding:13px 0;font-size:.82rem;border-bottom:1px solid var(--hairline-soft);letter-spacing:.14em}
  .nav a::after{display:none}
  .nav .has-sub{display:block;position:relative}
  .nav .subtoggle{width:100%;justify-content:space-between;padding:13px 0;font-size:.82rem;
    border-bottom:1px solid var(--hairline-soft);letter-spacing:.14em}
  .subnav{position:static;display:block;border:0;box-shadow:none;background:transparent;
    padding:0 0 0 16px;min-width:0}
  .nav .has-sub .subnav a{font-size:.78rem;padding:11px 0;border-bottom:1px solid var(--hairline-soft)}
  .subnav a:hover{background:transparent}
  .nav .has-sub:hover .subnav{display:block}
}

/* a three-column table cannot compress below its longest word on a 320px
   phone: let it scroll inside its own box rather than push the page sideways */
.doc table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.doc table th,.doc table td{white-space:normal;overflow-wrap:anywhere}
@media (max-width:420px){
  .doc table{font-size:.86rem}
  .doc table th,.doc table td{padding-left:8px;padding-right:8px}
}

/* the map draws land beyond its frame on purpose — it must always be clipped.
   Specificity has to beat `figure.art .art-svg{overflow:visible}` above. */
figure.art .art-svg.regionmap{overflow:hidden}

/* ========================================================================== */
/* language menu (top row, left of the appearance toggle)                     */
.langmenu{position:relative}
.langbtn{height:34px;display:flex;align-items:center;gap:7px;padding:0 12px 0 10px;border:1px solid var(--hairline);
  border-radius:17px;background:transparent;color:var(--slate);cursor:pointer;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;transition:border-color .2s,color .2s}
.langbtn:hover,.langbtn[aria-expanded="true"]{border-color:var(--bronze);color:var(--bronze)}
.langlist{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;max-height:min(70vh,520px);overflow:auto;
  list-style:none;margin:0;padding:6px 0;background:var(--surface,var(--bg));border:1px solid var(--hairline);
  box-shadow:0 12px 32px rgba(0,0,0,.10);z-index:60;display:none;columns:1}
.langmenu.open .langlist{display:block}
.langlist[hidden]{display:none}.langmenu.open .langlist[hidden]{display:block}
.langlist li{margin:0}
.langlist a{display:block;padding:8px 16px;font-family:var(--sans);font-size:.86rem;letter-spacing:0;text-transform:none;
  color:var(--ink);border:0;white-space:nowrap}
.langlist a:hover{background:var(--bg-deep);color:var(--bronze)}
.langlist a.here{color:var(--bronze);font-weight:500}
.langlist a.here::after{content:"·";margin-left:8px}
@media (max-width:1040px){.langbtn{height:31px;padding:0 10px 0 9px}.langbtn .code{display:none}.langlist{min-width:180px}}
.langnote{font-family:var(--serif);font-style:italic;color:var(--slate);border-left:2px solid var(--bronze);
  padding:8px 0 8px 16px;margin:28px 0 -8px;max-width:64ch;font-size:.98rem}
@media (max-width:380px){
  .tools{gap:6px}
  .brand{gap:9px;min-width:0}.brand .wordmark{font-size:.6rem;letter-spacing:.1em}
  /* ⛔ Qui la v6.5 portava `.langbtn` e `.navtoggle` a 31px. Tolto: sui telefoni
        piu' stretti sono proprio i comandi che devono restare grandi. La regola
        dei 720px qui sopra li tiene a 44 e la barra ci sta lo stesso. */
}

/* ========================================================================== */
/* Simplified Chinese edition: Noto SC subsets (only the glyphs the site uses)  */
@font-face{font-family:'Noto Serif SC';src:url('/fonts/notoserifsc-400-v65.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Sans SC';src:url('/fonts/notosanssc-400-v65.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Sans SC';src:url('/fonts/notosanssc-500-v65.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
html[lang="zh-Hans"]{
  --serif:'Spectral','Noto Serif SC','Songti SC','SimSun',serif;
  --sans:'Plex Sans','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --mono:'Plex Mono','Noto Sans SC','PingFang SC',monospace;
}
html[lang="zh-Hans"] .nav a,html[lang="zh-Hans"] .subtoggle,html[lang="zh-Hans"] .eyebrow,html[lang="zh-Hans"] .mono-label{letter-spacing:.08em}
html[lang="zh-Hans"] .hero h1,html[lang="zh-Hans"] .pagehero h1{line-height:1.25}
html[lang="zh-Hans"] .lede{font-style:normal}
html[lang="zh-Hans"] .nav a,html[lang="zh-Hans"] .subtoggle{font-size:.84rem}
html[lang="zh-Hans"] .btn,html[lang="zh-Hans"] .eyebrow{font-size:.8rem}

/* the quarry mark sits next to the title (home, contact) — never parked at the edge */
.h1row{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.h1row h1{margin:0}
.h1row .qmark{position:static;display:block;width:88px;height:88px;opacity:.85;flex:none;color:var(--bronze);pointer-events:none}
.pagehero .h1row .qmark{width:60px;height:60px;opacity:.8}
@media (max-width:820px){.h1row{gap:16px}.h1row .qmark{display:block;width:56px;height:56px}.pagehero .h1row .qmark{width:44px;height:44px}}
html[data-theme="dark"] .h1row .qmark{opacity:.8}

/* --- the door on a public shell, and the rich index on the home ---------- */
.gate{margin-top:44px;padding:34px 32px;border:1px solid var(--line);border-left:3px solid var(--bronze);
  background:var(--paper-2,rgba(0,0,0,.02))}
.gate-head{font-family:var(--sans);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bronze);margin:0 0 14px}
.gate-body{font-size:1.02rem;line-height:1.75;margin:0 0 24px;max-width:62ch}
.gate-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.gate-note{margin-top:22px}
.sitemapx{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:34px 40px;margin-top:44px}
.smx h3{font-size:1.18rem;margin:0 0 10px}
.smx h3 a{text-decoration:none;border-bottom:1px solid var(--line)}
.smx h3 a:hover{color:var(--bronze);border-bottom-color:var(--bronze)}
.smx p{margin:0;line-height:1.72}
@media print{.gate{display:none}}

/* --- la porta, in alto a destra --------------------------------------------
   Sign in e Register accanto al selettore di lingua. Restano leggibili sui
   due temi perché usano gli stessi token del resto della testata. */
.authlink{
  display:inline-flex;align-items:center;height:32px;padding:0 12px;
  border:1px solid var(--hairline);border-radius:999px;
  font-size:13px;line-height:1;letter-spacing:.01em;
  color:var(--ink);text-decoration:none;white-space:nowrap;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.authlink:hover{border-color:var(--bronze);color:var(--bronze)}
.authlink.primary{border-color:var(--bronze);color:var(--bronze)}
.authlink.primary:hover{background:var(--bronze);color:var(--paper)}
.tools .authlink+.authlink{margin-left:6px}
/* sotto i 720 px la testata è già stretta: restano le lingue e il menu, e le
   porte si trovano dentro il menu e in fondo alla pagina. */
@media (max-width:719px){ .authlink{display:none} }

/* la barra di chi è dentro, iniettata da page.php */
#mggbar{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;padding:9px 22px;font-size:13px;
  background:var(--wash);border-bottom:1px solid var(--hairline);color:var(--slate);
}
#mggbar a{color:var(--bronze);text-decoration:none;margin-left:14px}
#mggbar a:hover{text-decoration:underline}

/* --- classi generate da declass.py -----------------------------------------
   Sostituiscono gli attributi style="", che la Content-Security-Policy del
   sito (style-src 'self') rifiuta senza dirlo a nessuno. Non si scrivono a
   mano: le rigenera il build. */
.s-color-var-bronze{color:var(--bronze)}
.s-color-var-slate{color:var(--slate)}
.s-color-var-slate-dim{color:var(--slate-dim)}
.s-fill-var-bronze{fill:var(--bronze)}
.s-fill-var-ink{fill:var(--ink)}
.s-fill-var-slate{fill:var(--slate)}
.s-fill-var-slate-dim{fill:var(--slate-dim)}
.s-font-size-clamp-1-8rem-4vw-2-6rem{font-size:clamp(1.8rem,4vw,2.6rem)}
.s-font-size-clamp-1-9rem-4-2vw-2-9rem{font-size:clamp(1.9rem,4.2vw,2.9rem)}
.s-font-size-clamp-2rem-4-4vw-3rem{font-size:clamp(2rem,4.4vw,3rem)}
.s-justify-content-center{justify-content:center}
.s-margin-left-10px{margin-left:10px}
.s-margin-top-16px-line-height-1-9{margin-top:16px;line-height:1.9}
.s-margin-top-22px{margin-top:22px}
.s-margin-top-22px-max-width-44ch{margin-top:22px;max-width:44ch}
.s-margin-top-24px{margin-top:24px}
.s-margin-top-26px{margin-top:26px}
.s-margin-top-28px{margin-top:28px}
.s-margin-top-2px{margin-top:2px}
.s-margin-top-30px{margin-top:30px}
.s-margin-top-32px{margin-top:32px}
.s-margin-top-34px{margin-top:34px}
.s-margin-top-36px{margin-top:36px}
.s-margin-top-38px{margin-top:38px}
.s-margin-top-40px{margin-top:40px}
.s-margin-top-42px{margin-top:42px}
.s-margin-top-44px{margin-top:44px}
.s-margin-top-48px{margin-top:48px}
.s-margin-top-52px{margin-top:52px}
.s-margin-top-66px{margin-top:66px}
.s-margin-top-6px{margin-top:6px}
.s-max-width-140px-max-height-140px{max-width:140px;max-height:140px}
.s-padding-bottom-0{padding-bottom:0}
.s-padding-top-56px{padding-top:56px}
.s-text-align-right{text-align:right}

/* --- classi delle pagine dinamiche (accesso, registrazione, conferma) -------
   Anche qui niente style="": la Content-Security-Policy lo rifiuta in silenzio,
   ed è la stessa trappola che ha lasciato il registro senza grafica. */
.mt-s{margin-top:10px}
.mt-m{margin-top:18px}
.mt-l{margin-top:30px}
.mt-xl{margin-top:34px}
.ok{color:#3f7d4e;font-weight:600}
.pending{color:var(--bronze);font-weight:600}
.inline-form{display:inline}
.mgg-note{border-left:3px solid var(--bronze);padding-left:14px;margin:22px 0}
.offscreen{position:absolute;left:-9999px}
.linklike{background:none;border:0;padding:0;color:var(--bronze);cursor:pointer;
  font:inherit;text-decoration:underline}

/* --- correzioni delle pagine dinamiche -------------------------------------
   [hidden] è una regola del browser a specificità zero: qualunque selettore di
   classe la batte, e l'elemento resta visibile. Va ridichiarata sulla classe. */
.authlink[hidden]{display:none}

/* il suggerimento sotto l'etichetta è una riga a sé, non la coda del titolo */
.cform .hint{
  display:block;margin-top:3px;font-size:12.5px;line-height:1.5;
  color:var(--slate);font-weight:400;letter-spacing:0;
}
.cform label{display:block;margin-top:20px;font-size:14px;color:var(--ink)}
/* ⚠️ La riga del consenso e' UNA frase con dentro un collegamento. In flex ogni
   pezzo di testo e ogni <a> diventano elementi separati e la frase si spezza in
   colonne: il testo prima del link finisce in una colonna stretta e il resto in
   un'altra. Percio' la frase sta dentro un solo <span>, e il flex ha due figli:
   la casella e la frase. Trovato guardando la pagina, non i log — v6.3. */
.cform .check{display:flex;align-items:flex-start;gap:10px;margin-top:26px;font-size:14px;line-height:1.55}
.cform .check input{margin-top:3px;flex:0 0 auto;width:auto}
.cform .check > span{flex:1 1 auto;min-width:0}
.cform textarea{width:100%;margin-top:8px}
.cform .btn{margin-top:26px}

/* --- il marketplace (v6.4) --------------------------------------------------
   La pagina dietro la seconda porta. Ogni riga e' una scheda: la tessera della
   tavola periodica a sinistra (numero, simbolo, nome, massa — come sulle schede
   di vendita), il materiale, il grado, i fatti, l'analisi tipica, i bottoni.
   Niente style="": la Content-Security-Policy li rifiuta. Filtri e moduli
   funzionano anche senza JavaScript (<details>); con JS i filtri nascondono. */
.mk-strip{margin-top:34px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.mk-strip .cell{padding:18px 20px;border-left:1px solid var(--hairline)}
.mk-strip .cell:first-child{border-left:0;padding-left:0}
.mk-strip .n{font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.4rem);line-height:1;color:var(--ink)}
.mk-strip .mono-label{margin-top:8px}
@media (max-width:719px){
  .mk-strip{grid-template-columns:repeat(2,1fr)}
  .mk-strip .cell:nth-child(3){border-left:0;padding-left:0}
  .mk-strip .cell:nth-child(n+3){border-top:1px solid var(--hairline-soft)}
}
.mk-filter{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.mk-filter button{font:inherit;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 14px;border:1px solid var(--hairline);border-radius:999px;background:transparent;color:var(--slate);cursor:pointer;
  transition:border-color .15s ease,color .15s ease}
.mk-filter button:hover,.mk-filter button[aria-pressed="true"]{border-color:var(--bronze);color:var(--bronze)}
.mk-filter[hidden]{display:none}
.mk-sec{margin-top:56px}
.mk-sec h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.mk-sec .sub{font-family:var(--serif);font-style:italic;color:var(--slate);margin-top:8px;max-width:60ch}
.mk-sec[hidden]{display:none}
.mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,470px),1fr));gap:22px;margin-top:26px}
.mk-card{position:relative;background:var(--surface);border:1px solid var(--hairline);border-top:3px solid var(--bronze);
  padding:26px 26px 24px;display:flex;flex-direction:column;gap:18px;transition:transform .2s ease,box-shadow .2s ease}
.mk-card:hover{transform:translateY(-2px);box-shadow:0 16px 36px -24px rgba(0,0,0,.4)}
.mk-card[hidden]{display:none}
.mk-head{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:start}
.mk-tile{width:96px;height:96px;border:1.5px solid var(--bronze);position:relative;font-family:var(--mono);color:var(--ink);
  display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--bg)}
.mk-tile .z{position:absolute;top:6px;left:8px;font-size:.62rem;color:var(--slate-dim)}
.mk-tile .sym{font-family:var(--serif);font-size:2.2rem;line-height:1;color:var(--bronze)}
.mk-tile .sym.long{font-size:1.5rem}
.mk-tile .nm{margin-top:6px;font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);text-align:center;padding:0 4px}
.mk-tile .mass{font-size:.58rem;color:var(--slate-dim);margin-top:2px}
.mk-title h3{font-family:var(--serif);font-weight:400;font-size:1.45rem;line-height:1.15;margin:0}
.mk-title .grade{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;padding:3px 8px;
  border:1px solid var(--bronze);color:var(--bronze);border-radius:3px;vertical-align:middle;margin-left:8px;white-space:nowrap}
.mk-meta{margin-top:9px;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-dim);
  display:flex;flex-wrap:wrap;gap:6px 14px}
.mk-meta .ref{color:var(--ink)}
.mk-headline{font-family:var(--serif);font-style:italic;font-size:1.02rem;line-height:1.5;color:var(--slate);margin:0}
.mk-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 20px;border-top:1px solid var(--hairline-soft);padding-top:16px;margin:0}
.mk-facts div{min-width:0}
.mk-facts dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-dim)}
.mk-facts dd{margin:4px 0 0;font-size:.9rem;color:var(--ink);line-height:1.45;overflow-wrap:anywhere}
.mk-facts .wide{grid-column:1/-1}
.mk-card details{border-top:1px solid var(--hairline-soft);padding-top:12px}
.mk-card summary{cursor:pointer;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);list-style:none}
.mk-card summary::-webkit-details-marker{display:none}
.mk-card summary::before{content:"+ "}
.mk-card details[open] > summary::before{content:"\2212  "}
.mk-analysis{width:100%;border-collapse:collapse;margin-top:12px;font-size:.84rem}
.mk-analysis th,.mk-analysis td{text-align:left;padding:7px 10px 7px 0;border-bottom:1px solid var(--hairline-soft);vertical-align:top}
.mk-analysis th{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-dim);font-weight:400}
.mk-analysis td:nth-child(2){font-family:var(--mono);font-size:.8rem;color:var(--ink)}
.mk-analysis td:nth-child(3){color:var(--slate);font-size:.8rem}
.mk-text{font-size:.92rem;color:var(--body);line-height:1.6;margin:0}
.mk-photo{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--hairline-soft);display:block}
.mk-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:6px;align-items:center}
.mk-actions .btn{margin:0;display:inline-block;text-decoration:none}
.mk-card .mk-ask{border-top:1px solid var(--hairline);padding-top:14px}
.mk-card .mk-ask > summary{display:inline-block;padding:14px 26px;border:1px solid var(--bronze);background:var(--bronze);color:#fff;
  font-family:var(--sans);font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;transition:background .2s}
.mk-card .mk-ask > summary::before,.mk-card .mk-ask[open] > summary::before{content:""}
.mk-card .mk-ask > summary:hover{background:var(--bronze-soft);border-color:var(--bronze-soft)}
.mk-ask h4{font-family:var(--serif);font-weight:400;font-size:1.1rem;margin:18px 0 0}
.mk-ask .cform label{margin-top:14px}
.mk-ask .cform input,.mk-ask .cform textarea{width:100%;margin-top:6px}
.mk-ask .cform textarea{min-height:88px}
.mk-ask .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.mk-ask .row .btn{margin:0}
.mk-done{border-left:3px solid #3f7d4e;padding-left:14px;margin:0}
.mk-rule{margin-top:48px}
@media (max-width:520px){
  .mk-head{grid-template-columns:72px 1fr;gap:14px}
  .mk-tile{width:72px;height:72px}
  .mk-tile .sym{font-size:1.45rem;margin-top:8px}
  .mk-tile .z{font-size:.55rem;top:4px;left:6px}
  .mk-tile .nm{font-size:.46rem}
  .mk-facts{grid-template-columns:1fr}
  .mk-card{padding:20px 18px}
}
/* il registro delle offerte in admin.php */
.mk-admin-form{display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px}
.mk-admin-form .wide{grid-column:1/-1}
.mk-admin-form label{display:block;margin-top:14px;font-size:14px;color:var(--ink)}
.mk-admin-form input,.mk-admin-form select,.mk-admin-form textarea{width:100%;margin-top:5px}
.mk-admin-form textarea{min-height:96px}
.mk-admin-form .btn{margin-top:22px}
@media (max-width:719px){.mk-admin-form{grid-template-columns:1fr}}

/* ==========================================================================
   v6.8 — QUELLO CHE SI TOCCA CON UN DITO
   Aggiunto il 07.09.2026 dopo aver MISURATO il sito su otto schermi veri
   (Galaxy S8 360px, iPhone SE, iPhone 14, iPhone 15 Pro Max, Pixel 7,
   iPad mini, iPad Pro 11 e 12.9). Nessun overflow orizzontale trovato, nessun
   elemento fuori dal viewport: il sito era gia' fluido. Quello che non andava
   erano le dimensioni di cio' che si tocca e la soglia dei 16px di iOS.

   ⭐ IL DIFETTO CHE CONTAVA: i campi dei moduli erano a .95rem = 15,2px.
      Sotto i 16px **Safari su iPhone e iPad ingrandisce la pagina da solo**
      appena si tocca un campo, e la persona si ritrova la pagina zoomata e
      storta, a ogni campo. Su un modulo di registrazione da undici campi e'
      insopportabile — ed e' il modulo da cui dipende tutto il sito chiuso.
      Otto decimi di pixel, invisibili a occhio, che rovinavano l'uso su iPhone.
      Non si vede guardando: si vede misurando.

   `pointer:coarse` e non una larghezza: la regola deve valere per OGNI schermo
   che si tocca con un dito, iPad Pro in orizzontale compreso — che e' largo
   1366px e con una soglia sulla larghezza resterebbe fuori.
   -------------------------------------------------------------------------- */
@media (pointer:coarse){
  /* 1. mai sotto i 16px in un campo: e' la soglia che fa zoomare iOS */
  input,select,textarea{font-size:16px;padding:12px 0}
  /* 2. quello che si tocca non scende sotto i 44px (Apple HIG; WCAG 2.5.8 ne
        chiede 24, ma 24 su un telefono in mano si sbaglia lo stesso) */
  input:not([type="checkbox"]):not([type="radio"]),select,.btn,button[type="submit"]{min-height:44px}
  .iconbtn{width:44px;height:44px}
  .navtoggle{padding:12px 16px;min-height:44px}
  .langbtn{min-width:44px;min-height:44px;padding:0 10px}
  .authlink{min-height:44px;display:inline-flex;align-items:center}
  /* 3. la casella del consenso era 13px: obbligatoria e quasi impossibile da
        centrare. Si ingrandisce la casella E si allarga l'area sensibile. */
  /* ⚠️ Due moduli, due classi: contact.html usa `.consent`, register.php usa
        `.check`. La prima stesura correggeva solo `.consent` — e la casella
        della REGISTRAZIONE, che e' la piu' importante delle due, restava a
        13px. Trovato rimisurando dopo la correzione, non scrivendola.
        ⭐ Una correzione non e' fatta finche' non la si e' rimisurata dove
           doveva agire, in TUTTI i posti in cui doveva agire. */
  .consent,.check{align-items:center;gap:14px}
  .consent input[type="checkbox"],.check input[type="checkbox"]{
    width:24px;height:24px;margin-top:0;flex:none}
  .consent span,.check span{font-size:.95rem}
  .consent,.check,.consent span,.check span{cursor:pointer}
  /* 4. il menu apre e chiude col dito: voci alte abbastanza da non sbagliare */
  .nav a,.navpanel a{min-height:44px;display:flex;align-items:center}
}

/* Testo di servizio: su schermo stretto non scende sotto i 12px. Sono le righe
   che dicono «hai gia' un conto?», «solo indirizzi aziendali», le didascalie —
   cioe' proprio quelle che una persona legge quando e' incerta. L'arredo mono
   (occhielli, folio, micro-etichette) resta piccolo: quello e' disegno, non testo. */
@media (max-width:820px){
  .formation,.formnote,.gate-note{font-size:.8rem;line-height:1.65}
  /* ⚠️ `figcaption` da solo NON bastava: `figure.art figcaption` e
        `figure.photo figcaption` sono piu' specifici e vincevano, e le
        didascalie restavano a 10,7px. Misurato dopo la correzione, non prima. */
  figure.art figcaption,figure.photo figcaption,.mapfig figcaption{font-size:.79rem;line-height:1.6}
}
@media (max-width:600px){
  .formation,.formnote,.gate-note{font-size:.82rem}
  figure.art figcaption,figure.photo figcaption,.mapfig figcaption{font-size:.8rem}
  /* ⛔ Qui la v6.5 RIMPICCIOLIVA i comandi proprio dove servono piu' grandi:
        `.iconbtn{width:31px;height:31px}`. Sui telefoni si torna a 44. */
  .iconbtn{width:44px;height:44px}
}

/* --------------------------------------------------------------------------
   LA TESTATA SU TELEFONO — e il difetto che mi sono fatto da solo.

   🔴 Portando i comandi da 31 a 44px la barra in alto non ci stava piu': la
      pagina SFONDAVA in orizzontale di 109-149px su iPhone 14, iPhone 15 Pro
      Max e Pixel 7 — cioe' su quasi tutti i telefoni moderni. Prima della
      correzione l'overflow non c'era su nessuno schermo.
      ⭐ Avevo aggiustato un difetto piccolo creandone uno grosso, e l'ho visto
         solo perche' ho RIMISURATO dopo aver corretto. Una correzione non e'
         finita quando e' scritta: e' finita quando e' stata rimisurata.

   Perche' succedeva: sotto i 380px il logo si comprime (`min-width:0`) e tutto
   entra; sopra i 380 no, e restava largo 169px mentre i comandi ne chiedevano
   328. Fra 380 e 600px — la fascia dove sta la maggioranza dei telefoni — la
   somma superava il viewport.

   Il conto a 390px, il piu' stretto della fascia critica:
     mark 27 + accedi 66 + registrati 75 + lingua 44 + tema 44 + menu 44
     + sei spazi da 6 = 336 < 390. Ci sta, con margine.
   Il nome scritto per esteso non ci sta insieme a tutto il resto, e fra il nome
   e la possibilita' di ENTRARE nel sito da un telefono si tiene la seconda: il
   mark resta ed e' il collegamento alla home, e il nome della societa' e' nel
   titolo della pagina, nel piede e nel titolo della home.
   -------------------------------------------------------------------------- */
@media (max-width:720px){
  .site-header .bar{gap:10px;min-width:0}
  .brand{min-width:0;flex:0 1 auto}
  .tools{gap:6px;flex:0 0 auto}
  .langbtn{width:44px;height:44px;padding:0;gap:0;justify-content:center;border-radius:50%}
  .langbtn .code{display:none}
  .navtoggle{width:44px;height:44px;padding:0;font-size:0;display:grid;place-items:center}
  .navtoggle::before{content:"\2630";font-size:1.15rem;line-height:1}
  .authlink{padding-left:2px;padding-right:2px;white-space:nowrap}
  /* il logo e' un collegamento: la sua area sensibile arriva a 44 anche quando
     resta il solo mark da 27px */
  .brand{padding:9px 6px 9px 0}
}
@media (pointer:coarse){
  /* ⚠️ La prima stesura scriveva `.site-footer li a`: nel piede i collegamenti
        NON stanno in un elenco, quindi la regola non toccava niente e i link
        restavano alti 15px. Si guarda com'e' fatta la pagina, non come ci si
        immagina che sia. */
  /* 🔴 La prima stesura metteva `display:inline-block;min-height:44px`. Nel piede
        c'e' `overflow-wrap:anywhere` per gli indirizzi lunghi: messi insieme,
        l'indirizzo di posta e i tre numeri di telefono diventavano COLONNE
        VERTICALI di lettere larghe 10px e alte 493. Un difetto molto peggiore
        di quello che stavo correggendo, e l'ho visto solo rimisurando.
        ⭐ Su un link in linea basta il padding verticale: allarga l'area che si
           tocca senza toccare il display, quindi senza spezzare il testo. */
  .site-footer a,.contactcard a{padding-top:11px;padding-bottom:11px}
  .brand{min-height:44px;display:inline-flex;align-items:center}
  /* i quattro inviti della home portano ai moduli dei ruoli: sono la porta
     d'ingresso del sito, non possono essere alti 20px */
  .rolecard .go{display:inline-flex;align-items:center;min-height:44px}
  /* «precedente / successivo» in fondo alla pagina e i titoli della mappa del
     sito: sono collegamenti veri, alti 15 e 29px. Trovati risalendo la catena
     dei genitori nel DOM, non indovinando il selettore. */
  .pagenav a,.sitemapx h3 a{display:inline-flex;align-items:center;min-height:44px}
  /* il testo di servizio non scende sotto i 12px su NESSUNO schermo che si
     tocca — iPad compreso, che con la sola soglia sulla larghezza restava fuori */
  .formation,.formnote,.gate-note{font-size:.8rem;line-height:1.65}
  figure.art figcaption,figure.photo figcaption,.mapfig figcaption{font-size:.79rem;line-height:1.6}
}
@media (max-width:560px){
  /* qui il nome per esteso non entra piu': resta il mark */
  .brand .wordmark{display:none}
  /* il mark da solo e' un bersaglio di 27px: l'area sensibile va portata a 44
     senza ingrandire il disegno */
  .brand{padding:8px 6px 8px 0;margin-left:-2px}
}
/* ⚠️ 360px E LE LINGUE LUNGHE. A questa larghezza «Autentificare Înregistrare»
   sfondava di 3px dove «Sign in Register» stava dentro: il difetto esisteva in
   romeno e in nessun'altra delle lingue provate prima. Le parole lunghe sono la
   norma nel nostro pubblico — romeno, ungherese, polacco — quindi la barra deve
   reggere la lingua PIU' LARGA, non l'inglese. Provata su tutte e dodici. */
@media (max-width:400px){
  .authlink{font-size:.6rem;letter-spacing:.06em}
  .tools{gap:5px}
}

/* La riga che avvisa del rinvio automatico. Sobria: e' un avviso, non un annuncio. */
.autolang{background:var(--bg-deep,#eceae3);border-bottom:1px solid var(--hairline);
  padding:11px 20px;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;
  line-height:1.6;color:var(--slate);text-align:center}
.autolang a{color:var(--bronze);text-decoration:underline;text-underline-offset:3px;
  white-space:nowrap;padding:6px 0;display:inline-block}
@media (pointer:coarse){.autolang a{min-height:44px;display:inline-flex;align-items:center}}