/* Founder Portfolio, print layout (A4). Served by print-founder-portfolio.php at /founder-portfolio/?pdf=1 */
:root{--ink:#0B0B0B;--paper:#ECE5D5;--soft:#F5F1E8;--dim:#5b574d;--rule:#cfc7b4;--display:"Montserrat","Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
html{background:var(--paper);-webkit-print-color-adjust:exact;print-color-adjust:exact}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--display);font-size:10.5pt;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure,ul{margin:0}
h1,h2,h3{font-family:var(--display);letter-spacing:-.03em;text-wrap:balance}
h1,h2{font-weight:700;text-transform:lowercase}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.k{color:inherit;font-style:normal}
.eyebrow{font-size:8pt;font-weight:500;letter-spacing:.3em;text-transform:uppercase}
.eyebrow::before{content:"/";display:inline-block;margin-right:.55em;font-weight:400;transform:skewX(-16deg)}
.mono{font-size:7.5pt;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}

/* Screen preview: a paper column on a dark desk, plus the toolbar */
.bar{position:sticky;top:0;z-index:5;background:var(--ink);color:#fff;padding:12px 16px}
.bar-in{max-width:210mm;margin:0 auto;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.bar-text{font-size:12.5px;line-height:1.5;color:#d9d6cd;max-width:520px}
.bar-text strong{color:#fff}
.bar-btns{display:flex;gap:8px;flex-wrap:wrap}
.b{font:600 12.5px/1 var(--display);color:#fff;border:1px solid #555;padding:11px 16px;background:transparent;cursor:pointer}
.b.primary{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.b:hover{border-color:#fff}
@media screen{
  html,body{background:#2a2a2a}
  .doc{width:min(210mm,100%);margin:24px auto 64px;background:var(--paper);padding:16mm 14mm;box-shadow:0 10px 40px rgba(0,0,0,.45)}
  .cover{min-height:240mm}
}

/* Pages */
.doc{display:block}
.cover{display:flex;flex-direction:column;justify-content:space-between;break-after:page;page-break-after:always}
.cover-logo{width:38mm;height:auto;filter:brightness(0)}
.cover-main{display:grid;gap:7mm}
.cover h1{font-size:54pt;line-height:.95;letter-spacing:-.045em}
.cover-lede{font-size:13pt;line-height:1.5;max-width:128mm}
.cover-foot{display:grid;gap:4mm;border-top:.3mm solid var(--ink);padding-top:5mm}
.cover-foot .note{font-size:8pt;line-height:1.55;color:var(--dim);max-width:150mm}
.cover-foot .contact{font-size:9pt;font-weight:600;letter-spacing:.04em}

.summary{display:grid;gap:8mm;break-after:page;page-break-after:always}
.sum-text{display:grid;gap:4.5mm;max-width:160mm}
.sum-text p{font-size:10.5pt;line-height:1.6;color:#2a2823}
.sum-text .lede{font-size:14pt;line-height:1.45;color:var(--ink)}
.areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6mm 8mm}
.area{display:grid;gap:1.6mm;align-content:start;border-top:.3mm solid var(--ink);padding-top:3mm;break-inside:avoid}
.area strong{font-size:10.5pt;font-weight:600;line-height:1.35}
.area small{font-size:8.5pt;line-height:1.5;color:var(--dim)}

.group{display:block}
.group.own-page{break-before:page;page-break-before:always}
.group+.group:not(.own-page){margin-top:10mm}
.group:not(.own-page) .ghead h2{font-size:20pt}
.group:not(.own-page) .ghead{margin-bottom:4mm}
.ghead{display:grid;gap:2.5mm;margin-bottom:7mm;break-after:avoid}
.ghead h2{font-size:28pt;line-height:1;letter-spacing:-.04em}
.entry{display:block;width:100%;margin-bottom:9mm;break-inside:avoid;page-break-inside:avoid}
.entry>.etext{margin-bottom:4mm}
.entry.new-page{break-before:page;page-break-before:always}
.entry.is-job{margin-bottom:6mm}
.etext{display:grid;gap:1.8mm;align-content:start}
.etext h3{font-size:14pt;line-height:1.2;font-weight:600}
.edesc{display:grid;gap:2mm;margin-top:1mm}
.edesc p{font-size:9.5pt;color:#2a2823}
.edesc ul{list-style:none;padding:0;display:grid;gap:1.6mm}
.edesc li{position:relative;padding-left:5mm;font-size:9.5pt;color:#2a2823}
.edesc li::before{content:"";position:absolute;left:0;top:.75em;width:2.4mm;height:.3mm;background:var(--ink)}
.edesc a{font-weight:600;border-bottom:.2mm solid var(--ink)}

/* Photos */
.tiles{break-inside:avoid;display:grid;gap:2.6mm;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
.tiles figure{position:relative;overflow:hidden;background:var(--soft);aspect-ratio:var(--ratio,4/3);break-inside:avoid}
.tiles img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tiles .cap{position:absolute;left:0;right:0;bottom:0;padding:7mm 2.4mm 1.8mm;background:linear-gradient(180deg,rgba(11,11,11,0),rgba(11,11,11,.8));color:#fff;font-size:6.5pt;letter-spacing:.14em}
.tiles.is-logos{--cols:3;--ratio:3/2}
.tiles.is-logos figure{background:var(--ink)}
.tiles.is-logos img{object-fit:contain;padding:10%}
.tiles.is-grid{--cols:3;--ratio:4/3}
.tiles.is-wide{--cols:2;--ratio:auto}
.tiles.is-wide figure{aspect-ratio:auto}
.tiles.is-wide img{position:static;height:auto}
.tiles.is-tall{--cols:5;--ratio:9/16}
.tiles.is-portrait{--cols:4;--ratio:4/5}
.tiles.is-page{--cols:3;--ratio:5/7}
.tiles.is-feature{--cols:6;--ratio:9/16}
.tiles.is-feature figure:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
/* A custom number per row from the entry always wins */
.tiles.custom-cols{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}
.tiles.custom-cols.is-feature figure:first-child{grid-column:auto;grid-row:auto;aspect-ratio:var(--ratio)}

@page{size:A4;margin:16mm 14mm 18mm;
  @bottom-left{content:"Prince Johanes, Founder portfolio";font:500 7pt "Montserrat",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#5b574d}
  @bottom-right{content:counter(page);font:500 7pt "Montserrat",Arial,sans-serif;color:#5b574d}
}
@page :first{
  @bottom-left{content:none}
  @bottom-right{content:none}
}
@media print{
  html,body{background:var(--paper)!important}
  .noprint{display:none!important}
  .doc{width:auto;margin:0;padding:0;box-shadow:none}
  .cover{height:262mm}
}