/* PLAGMANN — one-page practice site. Swiss system: black/white, one family, 12-col grid. */
@font-face{font-family:"Arimo Local";src:url(fonts/arimo-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Arimo Local";src:url(fonts/arimo-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Arimo Local";src:url(fonts/arimo-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --m:16px; --g:8px; --sec:48px; --rowgap:32px;
  --ff:"Helvetica Neue",Helvetica,"Arimo Local",Arial,sans-serif;
  --blue:#0D2BE6;
  /* type */
  --hero:18.46vw; --hsec:11.28vw; --hproj:11.28vw; --say:20.5vw; --mail:7.69vw; --allwork:5.13vw; --logo:46vw;
  --idx-gap:24px; --title-gap:32px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:64px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#fff;color:#000;font-family:var(--ff);font-size:14px;line-height:1.4;-webkit-font-smoothing:antialiased;font-kerning:normal}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:hover,a:focus-visible{text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid #000;outline-offset:3px}
h1,h2,h3,p,dl,dd,figure{margin:0}
p+p{margin-top:1.4em}
em{font-style:italic}

/* ---------- type levels ---------- */
.txt{font-size:14px;line-height:1.4;max-width:560px}
.meta,.idx,.cap,.sub,.nav,.foot,.biglabel,.rec-links{font-size:10px;letter-spacing:.04em;text-transform:uppercase;line-height:1.3}
.idx,.sub,.nav,.foot{font-size:11px}
.h-sec,.hero-h,.h-proj,.bignum,.mail,.allwork{font-weight:700;letter-spacing:0;line-height:.9;font-kerning:normal}
.hero-h{font-size:var(--hero);line-height:.9}
.h-sec{font-size:var(--hsec)}
.h-proj{font-size:var(--hproj)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:20;background:#fff;padding-top:env(safe-area-inset-top,0px)}
.nav-in{display:flex;justify-content:space-between;align-items:center;padding:0 var(--m);height:52px;border-bottom:1px solid #000}
.name{font-size:13px;font-weight:700;letter-spacing:.04em}
.nav-links{display:none;gap:24px}
.nav-toggle{font:inherit;font-size:11px;letter-spacing:.04em;background:none;border:0;padding:8px 0;color:#000;cursor:pointer}
.menu{border-bottom:1px solid #000;padding:8px var(--m) 16px}
.menu ul{list-style:none;margin:0;padding:0}
.menu a{display:block;padding:8px 0;font-size:11px}
.back .d{display:none}

/* ---------- layout ---------- */
main{padding:0 var(--m)}
.sec{margin-top:var(--sec);scroll-margin-top:56px}
.idx{display:flex;justify-content:space-between;gap:16px;border-top:1px solid #000;padding-top:8px;margin-bottom:var(--idx-gap)}
.idx-n{font-weight:700;white-space:nowrap}
.idx span:last-child{text-align:right}
.h-sec,.ck-logo{margin-bottom:var(--title-gap)}
.g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--g);row-gap:var(--rowgap);align-items:start}
.g>.full{grid-column:1/-1}
.sub{font-weight:700;margin:56px 0 16px}
.w6{max-width:560px}
.two p+p{margin-top:1.4em}
.two{margin-bottom:32px}

/* figures + captions */
.f img,.f video{width:100%;height:auto;background:#f2f2f2}
.f img[src$=".svg"]{background:none}
.v video{aspect-ratio:4/5;object-fit:cover;cursor:pointer}
.cap{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:10px}
.cap .no{font-weight:700;white-space:nowrap}
/* window screenshots carry transparent edges: no grey placeholder */
.g-proc .full:first-of-type img,.ck .f img[src*="3ck_0"],.ck .f img[src*="website"],img[src*="ibg_08_figma"]{background:none}

/* tables: key | colon | value */
.tbl{display:grid;row-gap:8px;text-transform:uppercase;font-size:14px;line-height:1.4}
.tbl>div{display:grid;grid-template-columns:125px 12px minmax(0,1fr)}
.tbl dd{margin:0}
.tbl-links a{text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}

/* ---------- hero ---------- */
.hero-g{display:grid;grid-template-columns:minmax(0,1fr);row-gap:32px;padding-top:32px}
.hero-over{display:none}
.pol{margin-top:16px}
.hero-h span{display:inline}

/* ---------- photography ---------- */
.allwork{display:inline-block;font-size:var(--allwork);line-height:1.05;grid-column:1/-1;margin-top:8px}
.proc-txt{grid-column:1/-1;align-self:start}

/* ---------- exhibitions ---------- */
.proj+.proj{margin-top:96px}
.g-head{align-items:start;row-gap:32px;margin-bottom:40px}
.g-head>*{grid-column:1/-1}
.big{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%}
.bignum{display:inline-block;white-space:nowrap;line-height:.8;font-size:30vw}
.biglabel{font-weight:700;font-size:11px}
.lead{align-self:stretch}

/* ---------- 3CK ---------- */
.ck-logo{padding-top:calc(var(--hsec) * .1)}
.ck-logo img{width:var(--logo);height:auto}
.g-ck{align-items:start}
.g-ck>*{grid-column:1/-1}
.g-ck .cards{order:10}
.g-pair{margin-top:24px}

/* ---------- records ---------- */
.g-rec{margin-top:32px;align-items:start}
.rec img{aspect-ratio:1/1}
.rec figcaption .cap{margin-top:8px}
.rec-links{display:flex;gap:16px;margin-top:6px}
.rec-links a{text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}

/* ---------- contact ---------- */
.g-contact{row-gap:32px}
.contact-l{grid-column:1/-1}
.contact-l .h-sec{margin-bottom:24px}
.mail{display:inline-block;font-size:var(--mail);line-height:1;margin-bottom:24px;word-break:normal}

/* ---------- footer ---------- */
.foot{margin:96px var(--m) 0;padding:8px 0 calc(24px + env(safe-area-inset-bottom,0px));border-top:1px solid #000}
.foot-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-links{display:flex;gap:24px}

/* ---------- legal ---------- */
.lsec{margin-top:72px}
.lsec .idx{border-top:0;padding-top:0}
.lrows{display:grid;row-gap:32px;margin-top:8px}
.lrow{display:grid;row-gap:8px}
.lh{font-size:14px;font-weight:400;line-height:1.4;text-transform:uppercase}
.lrow a{text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}

/* ================= TABLET 700–1179 ================= */
@media (min-width:700px){
  :root{--m:32px;--g:16px;--sec:72px;--rowgap:40px;
    --hero:13.79vw;--hsec:8.39vw;--hproj:8.39vw;--say:14.39vw;--mail:5.2vw;--allwork:3.36vw;--logo:29vw;
    --idx-gap:56px;--title-gap:40px}
  .nav-in{height:60px}
  .nav-links{display:flex}
  .nav-links a{font-size:11px;letter-spacing:.04em}
  .nav-toggle,.menu{display:none!important}
  .back .d{display:inline}.back .m{display:none}
  .cap{font-size:10px}
  .hero-g{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:40px;padding-top:56px}
  .hero-h,.hero-intro,.pol{grid-column:1/-1}
  .hero-over{display:grid}
  .tbl>div{grid-template-columns:130px 12px minmax(0,1fr)}
  .hero-g .tbl>div{grid-template-columns:120px 12px minmax(0,1fr)}
  .pol{margin-top:0}
  .proj+.proj{margin-top:96px}
  .mail{white-space:nowrap}
  .mbr{display:none}
}

/* ================= DESKTOP ≥1180 ================= */
@media (min-width:1180px){
  :root{--m:40px;--g:20px;--sec:140px;--rowgap:48px;
    --hero:11.667vw;--hsec:11.667vw;--hproj:7.361vw;--say:11.667vw;--mail:3.99vw;--allwork:1.528vw;--logo:30.6vw;
    --idx-gap:16px;--title-gap:48px}
  .nav-in{height:64px}
  .g{grid-template-columns:repeat(12,minmax(0,1fr))}
  .g>*{grid-column:var(--c,auto);grid-row:var(--r,auto)}
  .g>.full{grid-column:var(--c,1/-1)}
  .w6,.txt{max-width:none}
  .w6{width:calc((100% - 11*var(--g))/12*6 + 5*var(--g))}

  /* hero: 100svh minus nav */
  .hero{min-height:calc(100svh - 64px);display:flex}
  .hero-g{flex:1;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto minmax(56px,1fr) auto;column-gap:var(--g);row-gap:0;padding:48px 0 64px}
  .hero-h{grid-column:1/span 9;grid-row:1;align-self:start;line-height:.9}
  .pol{grid-column:10/span 3;grid-row:1;align-self:start}
  .hero-intro{grid-column:1/span 4;grid-row:3;align-self:start;max-width:none}
  .hero-glance{grid-column:6/span 3;grid-row:3;align-self:start}
  .hero-over{grid-column:10/span 3;grid-row:3;align-self:start}
  .hero-g .tbl>div{grid-template-columns:130px 12px minmax(0,1fr)}

  .two{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);margin-bottom:48px}
  .two p{grid-column:span 4}.two p+p{margin-top:0}
  .g-photo{row-gap:48px}
  .g-ibg>.full:not(.v),.g-proc>.f,.g-ck .cards{align-self:end}
  .sub{margin:96px 0 40px}
  .proc-txt{align-self:start}
  .allwork{align-self:start;margin-top:32px}

  .g-head{row-gap:0;column-gap:var(--g)}
  .g-head .h-proj{margin-bottom:40px}
  .g-head .story{margin-bottom:40px}
  .big{align-self:end}
  .n300 .bignum{font-size:6.875vw}
  .n20 .bignum{font-size:9.861vw}
  .proj+.proj{margin-top:160px}
  .lead{display:flex;flex-direction:column}
  .lead video{flex:1;min-height:0;height:100%;aspect-ratio:auto}

  .g-ck{row-gap:40px}
  .g-ck .cards{order:0;align-self:end}
  .g-pair{margin-top:40px}
  .g-rec{row-gap:56px}
  .g-rec>.rec{grid-column:span 3}
  .h-proj{white-space:nowrap;font-size:6.4vw}
  .g-contact{align-items:end}
  .contact-l .h-sec{margin-bottom:40px}
  .foot{margin:140px var(--m) 0}

  .lrow{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}
  .lrow .lh{grid-column:1/span 4}
  .lrow .txt{grid-column:5/span 6}
  .lrows{row-gap:40px}
  .lsec{margin-top:120px}
}
@media (min-width:700px) and (max-width:1179px){
  .w6,.story,.g-head .tbl,.hero-intro,.contact-l .tbl,.lrow .txt,.lrow .lh{max-width:560px}
}
.contact-l .h-sec{font-size:var(--say)}
.ck .f img{background:none}