/* ── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--red:#C0392B;--dark:#111;--mid:#444;--muted:#888;--rule:#ddd;--bg:#fff;--off:#f6f4f1}
body{font-family:'Barlow',sans-serif;background:#e8e4de;color:var(--dark);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}

/* ── PROFILE PAGE ─── */
.page{max-width:980px;margin:32px auto;background:var(--bg);box-shadow:0 4px 40px rgba(0,0,0,.18)}
.hero{display:grid;grid-template-columns:220px 1fr;border-bottom:3px solid var(--dark)}
.hero-photo{background:var(--dark);min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;position:relative;overflow:hidden}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block;opacity:.92}
.hero-photo-label{font-family:'Barlow Condensed',sans-serif;font-size:9px;letter-spacing:3px;color:rgba(255,255,255,.2);text-transform:uppercase;position:relative;z-index:1}
.hero-info{padding:32px 36px 28px;display:flex;flex-direction:column;justify-content:space-between;border-left:1px solid var(--rule)}
.pre-name{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:5px;color:var(--red);text-transform:uppercase;margin-bottom:2px}
.name{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(60px,9vw,96px);line-height:.88;color:var(--dark);text-transform:uppercase;letter-spacing:-1px}
.role-bar{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.role-tag{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--bg);background:var(--red);padding:3px 10px 2px}
.exp-tag{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted)}
.contact-strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);margin-top:24px;padding-top:18px}
.contact-item label{display:block;font-family:'Barlow Condensed',sans-serif;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--red);margin-bottom:3px}
.contact-item a,.contact-item span{font-size:12px;color:var(--mid);text-decoration:none;display:block}
.contact-item a:hover{color:var(--red)}
.body-grid{display:grid;grid-template-columns:220px 1fr}
.sidebar{border-right:1px solid var(--rule);padding:32px 24px 48px;background:var(--bg)}
.sidebar-section{margin-bottom:32px}
.sidebar-section h3{font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--red);margin-bottom:14px;padding-bottom:7px;border-bottom:1px solid var(--rule)}
.role-entry{margin-bottom:18px}
.role-period{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--bg);background:var(--red);padding:2px 7px;margin-bottom:8px}
.role-logo-card{display:flex;align-items:center;gap:10px;padding:8px 0 10px;border-bottom:1px solid var(--rule);margin-bottom:8px}
.role-logo-wrap{width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--dark);border-radius:2px;padding:4px}
.role-logo-wrap.light{background:var(--off)}
.role-logo-wrap img{width:100%;height:100%;object-fit:contain}
.role-logo-meta{flex:1;min-width:0}
.role-logo-meta .rc{font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;font-size:12px;color:var(--dark);line-height:1.2;display:block;margin-bottom:2px}
.role-logo-meta .rl{font-size:10px;color:var(--muted);display:block}
.role-logo-meta .rt{font-size:10px;color:var(--mid);font-style:italic;margin-top:3px;display:block}
.comp-group{margin-bottom:18px}
.comp-group h4{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--dark);margin-bottom:6px}
.comp-group ul{list-style:none}
.comp-group ul li{font-size:11.5px;color:var(--mid);padding:3px 0;border-bottom:1px solid #f0ece7;display:flex;align-items:center;gap:7px}
.comp-group ul li::before{content:'';width:3px;height:3px;background:var(--red);border-radius:50%;flex-shrink:0}
.main{padding:32px 36px 48px}
.sec-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.sec-head h2{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--dark);white-space:nowrap}
.sec-head::after{content:'';flex:1;height:1px;background:var(--rule)}
.bio{margin-bottom:36px}
.bio p{font-size:13px;color:var(--mid);line-height:1.8;font-weight:300}
.dashboard{margin-bottom:40px}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-bottom:20px}
.stat-box{background:var(--bg);padding:20px 14px 16px;text-align:center;position:relative}
.stat-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--rule)}
.stat-box.accent::before{background:var(--red)}
.stat-num{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:48px;line-height:1;color:var(--dark);letter-spacing:-1px}
.stat-box.accent .stat-num{color:var(--red)}
.stat-label{font-family:'Barlow Condensed',sans-serif;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-top:5px;display:block}
.stat-sub{font-size:10px;color:#bbb;margin-top:2px}
.chart{display:flex;flex-direction:column;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-bottom:20px}
.bar-row{display:grid;grid-template-columns:180px 1fr 42px;background:var(--bg)}
.bar-label{font-family:'Barlow Semi Condensed',sans-serif;font-size:11px;font-weight:500;color:var(--mid);padding:9px 12px;border-right:1px solid var(--rule);display:flex;align-items:center}
.bar-track{background:var(--off);position:relative;overflow:hidden;min-height:34px}
.bar-fill{position:absolute;top:0;left:0;height:100%;background:var(--red);opacity:.15;transform-origin:left;animation:barGrow 1s cubic-bezier(.16,1,.3,1) both}
.bar-accent{position:absolute;top:0;left:0;height:100%;width:3px;background:var(--red)}
.bar-count{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;color:var(--dark);text-align:center;padding:9px 6px;border-left:1px solid var(--rule);display:flex;align-items:center;justify-content:center}
.client-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.client-card{background:var(--bg);padding:16px 14px 20px}
.client-card h4{font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;letter-spacing:3px;color:var(--red);text-transform:uppercase;margin-bottom:10px;padding-bottom:7px;border-bottom:1px solid var(--rule)}
.client-card .clients{display:flex;flex-direction:column;gap:4px}
.client-card .clients span{font-size:11px;color:var(--mid);line-height:1.4}
.works{margin-bottom:32px}
.year-group{margin-bottom:24px}
.year-header{display:grid;grid-template-columns:auto 1fr;margin-bottom:1px}
.year-tag{background:var(--dark);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;letter-spacing:1px;color:var(--bg);padding:7px 14px;display:flex;align-items:center;white-space:nowrap;min-width:68px}
.year-subtitle{background:var(--off);font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:500;letter-spacing:3px;color:var(--muted);text-transform:uppercase;padding:7px 14px;display:flex;align-items:center;border-left:3px solid var(--red)}
.project-list{display:flex;flex-direction:column;gap:1px}
.project-row{display:grid;grid-template-columns:134px 122px 1fr;background:var(--rule);gap:1px}
.project-row:hover .proj-title{color:var(--red)}
.proj-cat{background:var(--bg);padding:7px 10px;font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--red);display:flex;align-items:center}
.proj-role{background:var(--off);padding:7px 10px;font-size:10.5px;font-style:italic;color:var(--muted);display:flex;align-items:center}
.proj-title{background:var(--bg);padding:7px 12px;font-size:12px;color:var(--dark);display:flex;align-items:center;transition:color .15s}
footer{border-top:3px solid var(--dark);padding:18px 36px;display:flex;align-items:center;justify-content:space-between}
.footer-brand{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:18px;letter-spacing:4px;color:var(--dark);text-transform:uppercase}
.footer-brand span{color:var(--red)}
footer p{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:2px;color:var(--muted);text-transform:uppercase}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── EDITOR UI ─── */
#edit-btn{position:fixed;bottom:28px;right:28px;z-index:9999;width:52px;height:52px;background:var(--red);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(192,57,43,.5);transition:transform .2s}
#edit-btn:hover{transform:scale(1.1)}
#edit-btn svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2}
#editor-panel{position:fixed;top:0;right:0;width:420px;height:100vh;background:#1a1a1a;z-index:9998;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);box-shadow:-8px 0 40px rgba(0,0,0,.4)}
#editor-panel.open{transform:translateX(0)}
.ep-header{padding:20px 24px 16px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.ep-header h2{font-family:'Barlow Condensed',sans-serif;font-size:14px;letter-spacing:3px;text-transform:uppercase;color:#fff}
.ep-close{background:none;border:none;cursor:pointer;color:rgba(255,255,255,.5);font-size:20px;line-height:1}
.ep-close:hover{color:#fff}
.ep-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}
.ep-tab{padding:10px 16px;font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.4);background:none;border:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.ep-tab.active{color:#fff;border-bottom-color:var(--red)}
.ep-body{flex:1;overflow-y:auto;padding:20px 24px}
.ep-body::-webkit-scrollbar{width:4px}
.ep-body::-webkit-scrollbar-track{background:transparent}
.ep-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:2px}
.ep-section{margin-bottom:28px}
.ep-section-title{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.ep-field{margin-bottom:12px}
.ep-field label{display:block;font-family:'Barlow Condensed',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:4px}
.ep-field input,.ep-field textarea,.ep-field select{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:2px;color:#fff;font-family:'Barlow',sans-serif;font-size:12px;padding:7px 10px;outline:none;resize:vertical}
.ep-field input:focus,.ep-field textarea:focus{border-color:rgba(192,57,43,.6);background:rgba(255,255,255,.1)}
.ep-field textarea{min-height:70px;line-height:1.5}
.ep-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ep-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:3px;padding:12px;margin-bottom:10px;position:relative}
.ep-card-title{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:10px}
.ep-add-btn,.ep-del-btn{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:5px 12px;border:1px solid;border-radius:2px;cursor:pointer;background:none}
.ep-add-btn{color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.2);margin-top:8px}
.ep-add-btn:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.ep-del-btn{position:absolute;top:10px;right:10px;color:rgba(192,57,43,.6);border-color:rgba(192,57,43,.3);font-size:9px;padding:3px 8px}
.ep-del-btn:hover{color:var(--red);border-color:var(--red)}
.ep-footer{padding:16px 24px;border-top:1px solid rgba(255,255,255,.1);display:flex;gap:10px;flex-shrink:0}
.ep-export-btn{flex:1;background:var(--red);border:none;border-radius:2px;color:#fff;font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;padding:10px;cursor:pointer}
.ep-export-btn:hover{background:#a93226}
.ep-divider{height:1px;background:rgba(255,255,255,.08);margin:16px 0}

/* ── LANGUAGE SWITCH UI ─── */
.language-switch{position:fixed;bottom:28px;right:152px;z-index:9999;display:inline-flex;align-items:center;gap:3px;padding:4px;background:rgba(17,17,17,.92);border:1px solid rgba(255,255,255,.12);border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.28);backdrop-filter:blur(10px)}
.lang-pill{min-width:38px;height:30px;border:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.58);font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease}
.lang-pill:hover{color:#fff;transform:translateY(-1px)}
.lang-pill.active{background:var(--red);color:#fff;box-shadow:0 4px 12px rgba(192,57,43,.42)}
body.print-mode .language-switch{display:none!important}

/* ── FULL-WIDTH WORKS SECTION ─── */
.page > .works{padding:32px 36px 48px;margin-bottom:0;border-top:1px solid var(--rule)}
.page > .works .project-row{grid-template-columns:150px 150px 1fr}

/* ── A4 PRINT LAYOUT ─── */
:root {
  --a4-w: 794px;   /* 210mm @ 96dpi */
  --a4-h: 1123px;  /* 297mm @ 96dpi */
}

/* Screen print-mode: simulate A4 page */
body.print-mode {
  background: #ccc;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 0 64px;
  gap: 32px;
}

body.print-mode .page {
  width: var(--a4-w);
  max-width: var(--a4-w);
  min-height: var(--a4-h);
  margin: 0;
  box-shadow: 0 8px 40px rgba(0,0,0,.35);
  page-break-after: always;
  position: relative;
  overflow: hidden;
  /* show 15mm print-safe margin guides on-screen */
  outline: none;
}
/* margin guide overlay — hidden by default, available from toolbar */
body.print-mode .page::before {
  content: '';
  display: none;
  position: absolute;
  inset: 57px; /* 15mm @ 96dpi = 56.7px */
  border: 1px dashed rgba(192,57,43,.2);
  pointer-events: none;
  z-index: 100;
}
body.print-mode.show-print-guides .page::before {
  display: block;
}

/* Print-mode: compress spacing for A4 */
body.print-mode .hero          { min-height: auto }
body.print-mode .hero-photo    { min-height: 200px }
body.print-mode .name          { font-size: 72px }
body.print-mode .hero-info     { padding: 22px 28px 20px }
body.print-mode .contact-strip { margin-top: 16px; padding-top: 14px }
body.print-mode .body-grid     { grid-template-columns: 174px 1fr }
body.print-mode .sidebar       { padding: 16px 14px 28px }
body.print-mode .main          { padding: 20px 28px 32px }
body.print-mode .bio           { margin-bottom: 22px }
body.print-mode .bio p         { font-size: 11.5px; line-height: 1.65 }
body.print-mode .dashboard     { margin-bottom: 24px }
body.print-mode .stat-box      { padding: 13px 10px 11px }
body.print-mode .stat-num      { font-size: 36px }
body.print-mode .bar-row       { font-size: 10px }
body.print-mode .bar-label     { font-size: 10px; padding: 6px 10px }
body.print-mode .bar-count     { font-size: 11px; padding: 6px 5px }
body.print-mode .bar-track     { min-height: 26px }
body.print-mode .client-card   { padding: 10px 10px 14px }
body.print-mode .client-card .clients span { font-size: 10px }
body.print-mode .year-group    { margin-bottom: 16px }
body.print-mode .year-tag      { font-size: 13px; padding: 5px 10px }
body.print-mode .year-subtitle { font-size: 8px; padding: 5px 10px }
body.print-mode .proj-cat      { font-size: 9px; padding: 5px 8px }
body.print-mode .proj-role     { font-size: 9px; padding: 5px 8px }
body.print-mode .proj-title    { font-size: 11px; padding: 5px 10px }
body.print-mode .comp-group ul li { font-size: 10px; padding: 2px 0 }
body.print-mode .role-logo-wrap { width: 36px; height: 36px }
body.print-mode .role-logo-meta .rc { font-size: 11px }
body.print-mode .role-logo-meta .rl,
body.print-mode .role-logo-meta .rt { font-size: 9px }
body.print-mode .sec-head      { margin-bottom: 12px }
body.print-mode footer         { padding: 12px 28px }

/* Print-mode colour adjustments — ink-friendly */
body.print-mode .bar-fill { opacity: .12 }
body.print-mode .hero-photo img { opacity: .85 }

/* Page 2 overflow cue */
body.print-mode .page::after {
  content: '';
  display: block;
  height: 0;
  page-break-after: always;
}

/* Print toolbar */
#print-toolbar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9997;
  background: #1a1a1a;
  padding: 10px 24px;
  align-items: center;
  gap: 16px;
  border-bottom: 2px solid var(--red);
}
body.print-mode #print-toolbar { display: flex }
body.print-mode #edit-btn,
body.print-mode #print-btn { bottom: 28px }
body.print-mode #print-btn  { right: 90px }

#print-toolbar span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  flex: 1;
}
.pt-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid;
}
.pt-btn.primary { background: var(--red); border-color: var(--red); color: #fff }
.pt-btn.primary:hover { background: #a93226 }
.pt-btn.ghost   { background: none; border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.6) }
.pt-btn.ghost:hover { border-color: #fff; color: #fff }

/* Actual @media print */

/* Scale controls */
body.print-mode .page {
  transform-origin: top center;
  transition: transform .3s ease;
}
body.print-mode #profile-output {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Toolbar extras */
.pt-divider { width:1px; height:28px; background:rgba(255,255,255,.15); margin:0 4px }
.pt-label   { font-family:'Barlow Condensed',sans-serif; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.4) }
.pt-scale   { font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:600; letter-spacing:1px; color:#fff; width:44px; text-align:center }
#scale-slider {
  -webkit-appearance:none; appearance:none;
  width:120px; height:3px; border-radius:2px;
  background: linear-gradient(to right, var(--red) 0%, var(--red) 100%);
  outline:none; cursor:pointer;
}
#scale-slider::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; border-radius:50%;
  background:var(--red); cursor:pointer;
  box-shadow:0 0 4px rgba(192,57,43,.6);
}
#scale-slider::-moz-range-thumb {
  width:14px; height:14px; border-radius:50%;
  background:var(--red); cursor:pointer; border:none;
}
.pt-btn.warn { background:none; border-color:rgba(255,200,0,.4); color:rgba(255,200,0,.8) }
.pt-btn.warn:hover { border-color:#fc0; color:#fc0 }
.pt-btn.guide-on { background:rgba(192,57,43,.18); border-color:var(--red); color:#fff }

@media print {
  @page { size: A4 portrait; margin: 15mm; }

  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  #edit-btn, #print-btn, #lang-btn,
  #editor-panel, #print-toolbar { display: none !important; }

  body.print-mode .page::before,
  body.print-mode.show-print-guides .page::before {
    display: none !important;
  }

  html, body {
    width: 210mm; margin: 0 !important; padding: 0 !important; background: #fff !important;
  }

  .page {
    display: block; width: 180mm !important; max-width: 180mm !important;
    margin: 0 !important; box-shadow: none !important; overflow: hidden;
  }

  /* hero */
  .hero {
    display: grid !important; grid-template-columns: 50mm 1fr !important;
    width: 100% !important; border-bottom: 3px solid #111 !important;
  }
  .hero-photo {
    width: 50mm !important; min-height: 52mm !important;
    background: #111 !important; position: relative !important; overflow: hidden !important;
  }
  .hero-photo img {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; object-position: center top !important;
  }
  .hero-info {
    display: flex !important; flex-direction: column !important;
    justify-content: space-between !important; padding: 5mm 7mm 5mm !important;
    border-left: 1px solid #ddd !important;
  }
  .name { font-size: 72px !important; line-height: .88 !important; }
  .role-bar { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 14px !important; }
  .role-tag { background: #C0392B !important; color: #fff !important; padding: 3px 10px 2px !important; display: inline-block !important; }
  .pre-name { color: #C0392B !important; }
  .exp-tag  { color: #888 !important; }
  .contact-strip {
    display: grid !important; grid-template-columns: repeat(3,1fr) !important;
    margin-top: 16px !important; padding-top: 14px !important; border-top: 1px solid #ddd !important;
  }
  .contact-item label { color: #C0392B !important; }

  /* body grid */
  .body-grid {
    display: grid !important; grid-template-columns: 46mm 1fr !important; width: 100% !important;
  }
  .sidebar {
    width: 46mm !important; padding: 4mm 4mm 6mm !important;
    border-right: 1px solid #ddd !important; background: #fff !important;
  }
  .main { padding: 4mm 6mm 6mm !important; }

  /* sidebar */
  .sidebar-section h3 { color: #C0392B !important; border-bottom: 1px solid #ddd !important; }
  .role-period { background: #C0392B !important; color: #fff !important; display: inline-block !important; }
  .role-logo-wrap { width: 36px !important; height: 36px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #111 !important; padding: 4px !important; }
  .role-logo-wrap.light { background: #f6f4f1 !important; }
  .role-logo-card { display: flex !important; align-items: center !important; gap: 8px !important; }
  .comp-group ul { list-style: none !important; }
  .comp-group ul li { font-size: 10px !important; padding: 2px 0 !important; display: flex !important; align-items: center !important; gap: 6px !important; border-bottom: 1px solid #f0ece7 !important; }
  .comp-group ul li::before { content: "" !important; width: 3px !important; height: 3px !important; background: #C0392B !important; border-radius: 50% !important; flex-shrink: 0 !important; display: block !important; }

  /* bio */
  .bio { margin-bottom: 18px !important; }
  .bio p { font-size: 11.5px !important; line-height: 1.65 !important; color: #444 !important; }
  .sec-head { display: flex !important; align-items: center !important; gap: 14px !important; margin-bottom: 12px !important; }
  .sec-head h2 { color: #111 !important; font-size: 10px !important; letter-spacing: 4px !important; white-space: nowrap; }
  .sec-head::after { content: "" !important; flex: 1 !important; height: 1px !important; background: #ddd !important; }

  /* dashboard */
  .dashboard { margin-bottom: 18px !important; }
  .stat-row { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 1px !important; background: #ddd !important; border: 1px solid #ddd !important; margin-bottom: 14px !important; }
  .stat-box { background: #fff !important; padding: 12px 10px 10px !important; text-align: center !important; position: relative !important; }
  .stat-box::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 2px !important; background: #ddd !important; }
  .stat-box.accent::before { background: #C0392B !important; }
  .stat-num { font-size: 34px !important; line-height: 1 !important; color: #111 !important; }
  .stat-box.accent .stat-num { color: #C0392B !important; }
  .stat-label { font-size: 9px !important; letter-spacing: 2px !important; color: #888 !important; margin-top: 5px !important; display: block !important; }
  .stat-sub { font-size: 10px !important; color: #bbb !important; }

  .chart { display: flex !important; flex-direction: column !important; gap: 1px !important; background: #ddd !important; border: 1px solid #ddd !important; margin-bottom: 14px !important; }
  .bar-row { display: grid !important; grid-template-columns: 42mm 1fr 9mm !important; background: #fff !important; }
  .bar-label { font-size: 10px !important; padding: 5px 10px !important; border-right: 1px solid #ddd !important; display: flex !important; align-items: center !important; color: #444 !important; }
  .bar-track { background: #f6f4f1 !important; position: relative !important; min-height: 24px !important; overflow: hidden !important; }
  .bar-fill { position: absolute !important; top: 0 !important; left: 0 !important; height: 100% !important; background: #C0392B !important; opacity: .13 !important; animation: none !important; transform: scaleX(1) !important; transform-origin: left !important; }
  .bar-accent { position: absolute !important; top: 0 !important; left: 0 !important; height: 100% !important; width: 3px !important; background: #C0392B !important; }
  .bar-count { font-size: 11px !important; padding: 5px 5px !important; border-left: 1px solid #ddd !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #111 !important; }

  .client-grid { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 1px !important; background: #ddd !important; border: 1px solid #ddd !important; }
  .client-card { background: #fff !important; padding: 10px 10px 14px !important; }
  .client-card h4 { color: #C0392B !important; font-size: 9px !important; letter-spacing: 2px !important; margin-bottom: 8px !important; padding-bottom: 6px !important; border-bottom: 1px solid #ddd !important; }
  .client-card .clients { display: flex !important; flex-direction: column !important; gap: 4px !important; }
  .client-card .clients span { font-size: 10px !important; color: #444 !important; }

  /* works */
  .works { margin-bottom: 18px !important; }
  .year-group { margin-bottom: 14px !important; break-inside: avoid; page-break-inside: avoid; }
  .year-header { display: grid !important; grid-template-columns: auto 1fr !important; margin-bottom: 1px !important; }
  .year-tag { background: #111 !important; color: #fff !important; font-size: 13px !important; padding: 5px 12px !important; display: flex !important; align-items: center !important; white-space: nowrap !important; }
  .year-subtitle { background: #f6f4f1 !important; font-size: 8px !important; padding: 5px 12px !important; display: flex !important; align-items: center !important; border-left: 3px solid #C0392B !important; color: #888 !important; }
  .project-list { display: flex !important; flex-direction: column !important; gap: 1px !important; }
  .project-row { display: grid !important; grid-template-columns: 28mm 28mm 1fr !important; background: #ddd !important; gap: 1px !important; break-inside: avoid; page-break-inside: avoid; }
  .proj-cat   { background: #fff !important; padding: 5px 8px !important; font-size: 8.5px !important; color: #C0392B !important; display: flex !important; align-items: center !important; }
  .proj-role  { background: #f6f4f1 !important; padding: 5px 8px !important; font-size: 9px !important; font-style: italic !important; color: #888 !important; display: flex !important; align-items: center !important; }
  .proj-title { background: #fff !important; padding: 5px 10px !important; font-size: 10.5px !important; color: #111 !important; display: flex !important; align-items: center !important; }

  /* footer */
  footer { border-top: 3px solid #111 !important; padding: 12px 26px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; }
  .footer-brand { color: #111 !important; }
  .footer-brand span { color: #C0392B !important; }
  footer p { color: #888 !important; font-size: 10px !important; }
}

@media print { #lang-btn { display: none !important; } }


/* ── A4 PAGE-1 CONTROL PATCH ───
   Goal: print everything from the top through the dashboard/client sectors
   on page 1, then start Notable Works on a fresh A4 page. */
body.print-mode .hero,
body.print-mode .bio,
body.print-mode .dashboard,
body.print-mode .sidebar {
  break-inside: avoid;
  page-break-inside: avoid;
}
body.print-mode .works {
  break-before: page;
  page-break-before: always;
  margin-top: 0 !important;
}

@media print {
  .hero,
  .bio,
  .dashboard,
  .sidebar,
  .stat-row,
  .chart,
  .client-grid {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* Keep Notable Works off page 1 */
  .works {
    break-before: page !important;
    page-break-before: always !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Slightly tighter first-page print layout */
  .hero-photo { min-height: 46mm !important; }
  .hero-info { padding: 4mm 6mm 4mm !important; }
  .name { font-size: 64px !important; line-height: .86 !important; }
  .role-bar { margin-top: 10px !important; gap: 6px !important; }
  .contact-strip { margin-top: 11px !important; padding-top: 10px !important; }

  .body-grid { grid-template-columns: 44mm 1fr !important; }
  .sidebar { width: 44mm !important; padding: 3.5mm 3.5mm 5mm !important; }
  .main { padding: 3.5mm 5mm 5mm !important; }

  .sidebar-section { margin-bottom: 18px !important; }
  .sidebar-section h3 { margin-bottom: 9px !important; padding-bottom: 5px !important; }
  .role-entry { margin-bottom: 10px !important; }
  .role-period { margin-bottom: 5px !important; }
  .role-logo-card { padding: 5px 0 6px !important; margin-bottom: 5px !important; gap: 7px !important; }
  .role-logo-wrap { width: 31px !important; height: 31px !important; }
  .role-logo-meta .rc { font-size: 10px !important; }
  .role-logo-meta .rl,
  .role-logo-meta .rt { font-size: 8.5px !important; }

  .comp-group { margin-bottom: 11px !important; }
  .comp-group h4 { font-size: 9px !important; margin-bottom: 4px !important; }
  .comp-group ul li { font-size: 9px !important; padding: 1.5px 0 !important; line-height: 1.25 !important; }

  .sec-head { margin-bottom: 8px !important; }
  .bio { margin-bottom: 12px !important; }
  .bio p { font-size: 10.3px !important; line-height: 1.48 !important; }
  .dashboard { margin-bottom: 0 !important; }

  .stat-row { margin-bottom: 8px !important; }
  .stat-box { padding: 8px 7px 7px !important; }
  .stat-num { font-size: 28px !important; }
  .stat-label { font-size: 7.5px !important; letter-spacing: 1.6px !important; margin-top: 3px !important; }
  .stat-sub { font-size: 8px !important; margin-top: 1px !important; }

  .chart { margin-bottom: 8px !important; }
  .bar-row { grid-template-columns: 37mm 1fr 8mm !important; }
  .bar-label { font-size: 8.7px !important; padding: 3.5px 7px !important; line-height: 1.15 !important; }
  .bar-track { min-height: 18px !important; }
  .bar-count { font-size: 9px !important; padding: 3.5px 4px !important; }

  .client-card { padding: 6px 7px 8px !important; }
  .client-card h4 { font-size: 7.5px !important; letter-spacing: 1.6px !important; margin-bottom: 5px !important; padding-bottom: 4px !important; }
  .client-card .clients { gap: 2px !important; }
  .client-card .clients span { font-size: 8.3px !important; line-height: 1.18 !important; }
}

/* ── FULL-WIDTH WORKS PRINT PATCH ─── */
body.print-mode .page > .works{padding:20px 28px 32px!important;width:100%;border-top:none}
body.print-mode .page > .works .project-row{grid-template-columns:150px 150px 1fr}
@media print{
  .page > .works{width:100%!important;padding:4mm 6mm 6mm!important;border-top:none!important}
  .page > .works .project-row{grid-template-columns:34mm 34mm 1fr!important}
}